/* Theme Name: Piazza Parts Theme URI: https://piazzaparts.com/ Author: Piazza Honda Author URI: https://www.piazzahondaphiladelphia.com/ Description: Editorial WooCommerce theme for Piazza Honda OEM Parts. Standalone classic theme — not a Storefront child. Version: 1.25.19 Requires at least: 6.0 Tested up to: 6.9 Requires PHP: 8.1 License: Proprietary — Piazza Honda Text Domain: piazza-parts Tags: woocommerce, e-commerce, custom-logo, custom-menu, footer-widgets, post-thumbnails, threaded-comments, translation-ready */ /* ============================================================ DESIGN TOKENS — DARK (default) ============================================================ */ :root { --ink: #0a0a0a; --ink-2: #141414; --ink-3: #1e1e1e; --line: rgba(244, 241, 234, .12); --line-2: rgba(244, 241, 234, .22); --paper: #f4f1ea; --paper-2: #e9e4d8; --mute: rgba(244, 241, 234, .58); --mute-2: rgba(244, 241, 234, .38); --chrome: #c8c6c1; --red: #c4211c; --red-2: #e5352f; --mono: "JetBrains Mono", monospace; --gold: #b8935a; --ok: #3a8a3a; --nav-bg: rgba(10, 10, 10, .88); --sb-track: #0a0a0a; --sb-thumb: #333; --sb-thumb-hover: #555; --ph-bg: #111; --ph-stripes-a: rgba(244, 241, 234, .04); --ph-stripes-b: rgba(244, 241, 234, .08); --ph-cap-bg: rgba(0, 0, 0, .35); --tile: #0d0d0d; --footer: #050505; --tile-stripes-a: rgba(244, 241, 234, .025); --tile-stripes-b: rgba(244, 241, 234, .05); /* Form fields — elevated above --ink-3 so inputs read as interactive surfaces against the page background instead of muddy grey-on-grey. */ --field: #2a2a2a; --field-border: rgba(244, 241, 234, .28); --field-focus: #f4f1ea; /* WooCommerce 8.3+ form CSS reads these vars (with hardcoded #fff fallback), so overriding at :root is the cleanest way to win against WC's higher- specificity `.woocommerce form .form-row .input-text` rules without an arms race. WC uses BOTH `--wc-form-color-*` and `--wc-form-*-color` naming conventions across different rules — set both to be safe. */ --wc-form-color-background: var(--field); --wc-form-color-text: var(--paper); --wc-form-color-border: var(--field-border); --wc-form-border-color: var(--field-border); --wc-form-border-width: 1px; --wc-form-border-radius: 0; /* Theme-stable tokens (don't flip) */ --solid-fg: #f4f1ea; --inverse-surface: #f4f1ea; --inverse-surface-fg: #0a0a0a; --announce-bg: #f4f1ea; --announce-fg: #0a0a0a; } /* ============================================================ DESIGN TOKENS — LIGHT (invert: paper becomes ink, etc.) ============================================================ */ html[data-theme="light"] { --ink: #f4f1ea; /* bg */ --ink-2: #ece7dc; /* cards / surfaces */ --ink-3: #e2dccf; /* deeper surface */ --paper: #0f0f0f; /* fg text */ --paper-2: #1a1a1a; --line: rgba(15, 15, 15, .14); --line-2: rgba(15, 15, 15, .28); --mute: rgba(15, 15, 15, .62); --mute-2: rgba(15, 15, 15, .42); --chrome: #5e5b53; /* chrome becomes warm graphite in light */ --red: #b41914; --red-2: #d0261e; --ok: #2f7a2f; --nav-bg: rgba(244, 241, 234, .88); --sb-track: #e9e4d8; --sb-thumb: #c6bfae; --sb-thumb-hover: #a59f8e; --ph-bg: #e9e4d8; --ph-stripes-a: rgba(15, 15, 15, .05); --ph-stripes-b: rgba(15, 15, 15, .1); --ph-cap-bg: rgba(255, 255, 255, .55); --tile: #e2dccf; --footer: #ede8dc; --tile-stripes-a: rgba(15, 15, 15, .03); --tile-stripes-b: rgba(15, 15, 15, .06); --field: #ebe5d6; /* between --ink-2 and --ink-3 — slightly inset on paper */ --field-border: rgba(15, 15, 15, .32); --field-focus: #0f0f0f; /* WC form vars in light mode (inherits via cascade but re-stated for clarity) */ --wc-form-color-background: var(--field); --wc-form-color-text: var(--paper); --wc-form-color-border: var(--field-border); --wc-form-border-color: var(--field-border); /* In light mode: inverse surface stays dark, announce stays dark */ --solid-fg: #f4f1ea; --inverse-surface: #0f0f0f; --inverse-surface-fg: #f4f1ea; --announce-bg: #0f0f0f; --announce-fg: #f4f1ea; } /* ============================================================ RESET + BASE TYPOGRAPHY ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ink); color: var(--paper); font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; } body { min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } .serif { font-family: Fraunces, Georgia, serif; font-optical-sizing: auto; } .mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; } .eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } ::selection { background: var(--red); color: var(--paper); } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--sb-track); } ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); } /* ============================================================ PLACEHOLDER IMAGERY SYSTEM Striped SVG-style background with a mono caption. ============================================================ */ .ph { position: relative; background: repeating-linear-gradient(135deg, var(--ph-stripes-a) 0 10px, var(--ph-stripes-b) 10px 20px), var(--ph-bg); border: .5px solid var(--line); display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden; } .ph .cap { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 8px 10px; background: var(--ph-cap-bg); border-top: .5px solid var(--line); width: 100%; } .ph .badge { position: absolute; top: 8px; left: 8px; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .1em; color: var(--mute-2); padding: 4px 6px; border: .5px solid var(--line); } /* ============================================================ APP CHROME ============================================================ */ .app { min-height: 100vh; display: flex; flex-direction: column; } .announce { background: var(--announce-bg); color: var(--announce-fg); font-size: 12px; letter-spacing: .04em; text-align: center; padding: 7px 14px; font-weight: 500; } .announce .mono { font-weight: 500; } .announce .sep { margin: 0 14px; opacity: .35; } /* ============================================================ NAVIGATION ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(16px); border-bottom: .5px solid var(--line); } .nav-inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; height: 72px; } .logo { display: flex; align-items: baseline; gap: 10px; cursor: pointer; } .logo .mark { font-family: Fraunces, serif; font-weight: 700; font-size: 22px; letter-spacing: -.01em; color: var(--paper); } .logo .mark em { font-style: italic; font-weight: 400; color: var(--chrome); } .logo .dot { width: 5px; height: 5px; background: var(--red); border-radius: 50%; align-self: center; margin: 0 2px; } .logo .sub { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em; color: var(--mute); text-transform: uppercase; } .navlinks { display: flex; gap: 28px; justify-content: center; align-items: center; font-size: 13px; font-weight: 500; } .navlinks a { color: var(--mute); padding: 6px 0; border-bottom: 1px solid transparent; cursor: pointer; letter-spacing: .01em; } .navlinks a:hover { color: var(--paper); } .navlinks a.active { color: var(--paper); border-bottom-color: var(--red); } .navright { display: flex; align-items: center; gap: 8px; } .iconbtn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: .5px solid var(--line); background: transparent; color: var(--paper); cursor: pointer; border-radius: 0; position: relative; transition: border-color .15s; } .iconbtn:hover { border-color: var(--line-2); } .iconbtn .pill { position: absolute; top: -6px; right: -6px; background: var(--red); color: var(--solid-fg); font-family: "JetBrains Mono", monospace; font-size: 9px; font-weight: 600; padding: 2px 5px; border-radius: 10px; min-width: 16px; text-align: center; } /* Cart badge is always in the DOM (so it can be swapped by the add_to_cart fragment); hide it when the cart is empty. */ .iconbtn .pill.pp-cart-pill--empty { display: none; } .nav-search { display: flex; align-items: center; gap: 6px; } .nav-search__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nav-search__input { width: 170px; height: 40px; padding: 0 10px; background: transparent; color: var(--paper); border: .5px solid var(--line); border-radius: 0; font: inherit; font-size: 13px; transition: border-color .15s, width .15s; } .nav-search__input::placeholder { color: currentColor; opacity: .5; } .nav-search__input:focus { outline: none; border-color: var(--line-2); width: 220px; } @media (max-width: 760px) { .nav-search__input { width: 120px; } .nav-search__input:focus { width: 150px; } } /* Mobile menu toggle (hamburger) — hidden on desktop, revealed ≤640px. Swaps to an × glyph while the menu is open. */ .nav-menu-toggle { display: none; } .nav-menu-toggle .pp-icon-close { display: none; } .nav.is-menu-open .nav-menu-toggle .pp-icon-menu { display: none; } .nav.is-menu-open .nav-menu-toggle .pp-icon-close { display: block; } /* Search field that lives inside the mobile dropdown — hidden on desktop, where the inline .nav-search handles search instead. */ .nav-menu-search { display: none; } .nav-menu-search__input { flex: 1; height: 44px; padding: 0 12px; background: var(--field); color: var(--paper); border: 1px solid var(--field-border); border-radius: 0; font: inherit; font-size: 14px; } .nav-menu-search__input::placeholder { color: var(--mute-2); } /* ============================================================ YMM BAR (sticky variant) ============================================================ */ .ymmbar { background: var(--ink-2); border-bottom: .5px solid var(--line); position: sticky; top: 72px; z-index: 40; } .ymmbar .inner { max-width: 1440px; margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; gap: 14px; font-size: 12px; } .ymmbar .tag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .ymmbar .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--ink-3); border: .5px solid var(--line); font-size: 12px; font-weight: 500; } .ymmbar .chip b { color: var(--paper); font-weight: 600; } .ymmbar .chip .x { color: var(--mute); margin-left: 4px; cursor: pointer; } .ymmbar .chg { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--chrome); cursor: pointer; border-bottom: 1px solid var(--line); } /* Empty-state inline picker inside the bar — horizontal strip on desktop, stacked on mobile. Picker renders via piazza_render_ymm_picker(); this block strips its hero-card chrome and shrinks the controls to fit. */ .ymmbar .inner > form[data-piazza-ymm-picker] { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; } .ymmbar .inner > form[data-piazza-ymm-picker] .pp-ymm-field { flex: 0 1 132px; min-width: 92px; } .ymmbar .inner > form[data-piazza-ymm-picker] .pp-ymm-field:first-of-type { flex-basis: 96px; } .ymmbar .inner > form[data-piazza-ymm-picker] .pp-ymm-field:nth-of-type(3) { flex-basis: 170px; } .ymmbar .inner > form[data-piazza-ymm-picker] .fld-label { margin-bottom: 4px; } .ymmbar .inner > form[data-piazza-ymm-picker] select { height: 32px; padding: 4px 8px; font-size: 14px; background: var(--ink-3); border: 1px solid var(--line); color: var(--paper); } .ymmbar .inner > form[data-piazza-ymm-picker] button[type="submit"] { height: 32px; padding: 0 12px; font-size: 14px; margin-top: 14px; } @media (max-width: 768px) { /* Stack the whole bar so the "Tell us your Honda" tag sits above the picker instead of floating beside the tall stacked form. */ .ymmbar .inner { flex-direction: column; align-items: flex-start; gap: 8px; } .ymmbar .inner > form[data-piazza-ymm-picker] { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%; } /* Reset the desktop horizontal flex-basis — in a column container it becomes the field *height*, which spread the fields apart vertically. */ .ymmbar .inner > form[data-piazza-ymm-picker] .pp-ymm-field, .ymmbar .inner > form[data-piazza-ymm-picker] .pp-ymm-field:first-of-type, .ymmbar .inner > form[data-piazza-ymm-picker] .pp-ymm-field:nth-of-type(3) { flex: 0 0 auto; min-width: 0; } .ymmbar .inner > form[data-piazza-ymm-picker] select, .ymmbar .inner > form[data-piazza-ymm-picker] button[type="submit"] { width: 100%; } .ymmbar .inner > form[data-piazza-ymm-picker] button[type="submit"] { margin-top: 4px; } } /* Hero pref-toggle link — subtle text link below chat panel / picker card. */ .pp-hero__pref-toggle { margin: 12px 0 0; font-size: 13px; text-align: center; } .pp-hero__pref-toggle a { color: var(--mute-2); text-decoration: underline; text-underline-offset: 2px; } .pp-hero__pref-toggle a:hover { color: var(--paper); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; font-family: Inter, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; border: none; transition: transform .08s, background .15s; border-radius: 0; } .btn:active { transform: translateY(1px); } .btn-red { background: var(--red); color: var(--solid-fg); } .btn-red:hover { background: var(--red-2); } .btn-paper { background: var(--inverse-surface); color: var(--inverse-surface-fg); } .btn-paper:hover { filter: brightness(1.1); } .btn-ghost { background: transparent; color: var(--paper); border: .5px solid var(--line-2); } .btn-ghost:hover { border-color: var(--paper); } .btn-sm { padding: 9px 14px; font-size: 11px; } .btn-lg { padding: 18px 28px; font-size: 14px; } /* ============================================================ CARDS Density variants from the prototype tweaks panel are dropped; ship comfy (22px) only. ============================================================ */ .card { background: var(--ink-2); border: .5px solid var(--line); display: flex; flex-direction: column; padding: 22px; } .card:hover { border-color: var(--line-2); } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--footer); border-top: .5px solid var(--line); margin-top: 80px; } .site-footer .finner { max-width: 1440px; margin: 0 auto; padding: 56px 32px 32px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; } .site-footer h4 { font-family: Fraunces, serif; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; margin: 0 0 16px; color: var(--paper); } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .site-footer li { font-size: 12.5px; color: var(--mute); } .site-footer li:hover { color: var(--paper); cursor: pointer; } .pp-foot-bottom { max-width: 1440px; margin: 0 auto; padding: 20px 32px; border-top: .5px solid var(--line); display: flex; justify-content: space-between; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); } /* ============================================================ SCREEN TRANSITIONS ============================================================ */ .screen { animation: fadeIn .28s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ============================================================ FORM FIELDS ============================================================ */ /* Base styling for plain inputs/textareas/selects that WP & WC emit without our `.fld` class (review form, comment form, WC checkout fields, etc.). Uses --field token (elevated above --ink-3) so fields read as distinct interactive surfaces, not grey-on-grey blocks. */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], input[type="search"], input[type="date"], textarea, select { background: var(--field); border: 1px solid var(--field-border); color: var(--paper); padding: 10px 12px; font-family: inherit; font-size: 13px; outline: none; border-radius: 0; appearance: none; transition: border-color .15s ease; } textarea { width: 100%; min-height: 96px; resize: vertical; line-height: 1.5; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="date"]:focus, textarea:focus, select:focus { border-color: var(--field-focus); } input::placeholder, textarea::placeholder { color: var(--mute-2); } .fld { width: 100%; background: var(--field); border: 1px solid var(--field-border); color: var(--paper); padding: 12px 14px; font-size: 13px; font-family: inherit; outline: none; border-radius: 0; appearance: none; transition: border-color .15s ease; } .fld:focus { border-color: var(--field-focus); } .fld-label { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; } select.fld { background-image: linear-gradient(45deg, transparent 50%, var(--chrome) 50%), linear-gradient(135deg, var(--chrome) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; } .fld:disabled { opacity: .5; cursor: not-allowed; } .pp-ymm-picker button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; } /* Style WC- and WP-emitted labels (checkout fields + review form) to match .fld-label so the editorial system applies without filtering every woocommerce_form_field call. The `:not(...)` exclusions skip inline-style labels (checkbox + radio rows) where uppercase mono looks wrong. */ .pp-checkout .form-row label:not(.checkbox):not(.radio), .comment-form > p > label, .comment-form .comment-notes, .comment-form .comment-form-author > label, .comment-form .comment-form-email > label, .comment-form .comment-form-comment > label, .comment-form .comment-form-rating > label { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; font-weight: 400; } /* Cookie/checkbox-row labels: keep readable case + body type. */ .comment-form .comment-form-cookies-consent label, .pp-checkout .form-row label.checkbox { display: inline; font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--paper); margin-bottom: 0; font-weight: 400; } .comment-form .comment-form-cookies-consent input[type="checkbox"], .pp-checkout .form-row input[type="checkbox"] { margin-right: 8px; vertical-align: middle; } /* WC checkout field rows — make every WC-emitted .form-row inside .pp-checkout pick up the same field surface + spacing as the rest of the editorial form. WC's default styles set width:100% on selects but leave inputs unspecified; normalize. */ .pp-checkout .form-row { margin-bottom: 14px; } .pp-checkout .form-row input[type="text"], .pp-checkout .form-row input[type="email"], .pp-checkout .form-row input[type="tel"], .pp-checkout .form-row input[type="number"], .pp-checkout .form-row textarea, .pp-checkout .form-row select { width: 100%; } .pp-checkout .form-row .required { color: var(--red-2); margin-left: 2px; text-decoration: none; } .pp-checkout .form-row .optional { color: var(--mute-2); } /* Product review / comment form layout. Default WC review-form ordering (after comment_form_field_comment filter): 1. Your rating 2. Your review (textarea) ← spans full width 3. Name ← 2-col with email 4. Email ← 2-col with name 5. Save my name (checkbox) ← spans full width 6. Submit ← spans full width The grid below caps the form width and arranges the fields accordingly. */ .comment-form { max-width: 640px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .comment-form > p { margin: 0; } .comment-form .comment-form-rating, .comment-form .comment-form-comment, .comment-form .comment-notes, .comment-form .comment-form-cookies-consent, .comment-form .form-submit { grid-column: 1 / -1; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; } .comment-form textarea { min-height: 140px; } /* WC's stock submit-button rule (`.woocommerce #respond input#submit`, light grey bg) ties on specificity with anything we'd write here, and ships after theme CSS in the SiteGround Optimizer concat — so it wins on source order. `!important` is the cleanest way out without an arms race. Scoped tightly. */ .woocommerce #respond input#submit, #respond .comment-form input#submit { appearance: none; background: var(--red) !important; color: var(--solid-fg) !important; border: 0 !important; padding: 12px 22px !important; font-family: "JetBrains Mono", monospace !important; font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; cursor: pointer; transition: background-color .15s ease; border-radius: 0 !important; box-shadow: none !important; } .woocommerce #respond input#submit:hover, #respond .comment-form input#submit:hover { background: var(--red-2) !important; } /* Review-form star rating widget. WC ships glyph stars via its `WooCommerce` icon font + CSS pseudo-elements (`content: "\e021"`). The font face declares but the actual font file isn't reliably served in our setup — glyphs render as tofu (□). Override with Unicode `☆` / `★` (in any system font) so the widget works without the icon font dependency. WC's JS adds `.selected` to `.stars` on click and `.active` to the clicked anchor; CSS below mirrors the WC fill/unfill pattern with `~` adjacency. */ .stars a { width: 1.4em !important; height: 1.4em !important; line-height: 1 !important; margin-right: 4px; text-indent: 0 !important; overflow: visible !important; text-decoration: none !important; font-size: 22px !important; color: transparent !important; } .stars a::before { content: "\2606" !important; /* ☆ empty */ font-family: inherit !important; font-size: 22px !important; color: var(--mute) !important; line-height: 1 !important; transition: color .12s ease, transform .12s ease; display: inline-block; } /* Hover: fill all in the bar, then unfill stars after the hovered one. */ .stars:hover a::before { content: "\2605" !important; color: var(--gold) !important; } .stars:hover a:hover ~ a::before { content: "\2606" !important; color: var(--mute) !important; } /* Selected (after click): fill all, then unfill stars after `.active`. */ .stars.selected a::before { content: "\2605" !important; color: var(--gold) !important; } .stars.selected a.active ~ a::before { content: "\2606" !important; color: var(--mute) !important; } .stars a:focus { outline: none; } .stars a:focus::before { transform: scale(1.1); } /* ============================================================ UTILITY ============================================================ */ .container { max-width: 1440px; margin: 0 auto; padding: 0 32px; } .hr { height: .5px; background: var(--line); width: 100%; } .row { display: flex; align-items: center; gap: 10px; } .grow { flex: 1; } .pulse { display: inline-block; width: 6px; height: 6px; background: #3a8a3a; border-radius: 50%; box-shadow: 0 0 0 0 rgba(58, 138, 58, .7); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(58, 138, 58, .6); } 70% { box-shadow: 0 0 0 6px rgba(58, 138, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(58, 138, 58, 0); } } /* ============================================================ THEME TOGGLE ICONS Sun/moon icons swap based on the current theme — only the "next" icon is shown so the button visually previews the toggle. ============================================================ */ html[data-theme="light"] .pp-icon-sun { display: none; } html[data-theme="light"] .pp-icon-moon { display: inline-block; } html[data-theme="dark"] .pp-icon-sun { display: inline-block; } html[data-theme="dark"] .pp-icon-moon { display: none; } /* ============================================================ PLACEHOLDER IMAGES (v1.14.0) Per-category lineart PNGs served via woocommerce_placeholder_img are black-on-transparent. Invert in dark mode so they don't disappear against the dark default background. The mu-plugin `piazza-placeholder-images.php` adds the class to every it substitutes; the rule never matches WC's grey-camera fallback. ============================================================ */ html[data-theme="dark"] .piazza-placeholder-img { filter: invert(1); } /* ============================================================ NAV — STATUS PILL ============================================================ */ .pp-status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .14em; color: var(--mute); text-transform: uppercase; margin-right: 14px; } /* ============================================================ SECTIONS — generic vertical-rhythm wrapper ============================================================ */ .pp-section { padding: 80px 0; } .pp-section--ink { background: var(--ink-2); } .pp-section__header { margin-bottom: 48px; } .pp-section__header .eyebrow { margin-bottom: 12px; } .pp-section__title { font-size: 44px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0; color: var(--paper); } /* ============================================================ HERO — 2-column editorial layout ============================================================ */ .pp-hero { padding: 96px 0 64px; border-bottom: .5px solid var(--line); } .pp-hero__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; } .pp-hero__copy .eyebrow { margin-bottom: 16px; } .pp-hero__title { font-size: 72px; font-weight: 600; letter-spacing: -.025em; line-height: 1.02; margin: 0 0 24px; color: var(--paper); } .pp-hero__title em { font-style: italic; font-weight: 400; color: var(--chrome); } .pp-hero__sub { font-size: 17px; line-height: 1.55; color: var(--mute); max-width: 520px; margin: 0; } .pp-hero__picker { /* Inherits .card styles */ } .pp-hero__picker .eyebrow { margin-bottom: 8px; } .pp-hero__picker-title { font-size: 24px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 24px; color: var(--paper); } /* ============================================================ BRAND LANDING — ad/SEO entry pages over unified catalog ============================================================ */ .pp-brand-hero { padding: 88px 0 72px; border-bottom: .5px solid var(--line); background: linear-gradient(135deg, rgba(197, 12, 48, .16), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 56%); } .pp-brand-hero__inner { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr); gap: 56px; align-items: center; } .pp-brand-hero__copy .eyebrow { margin-bottom: 16px; } .pp-brand-hero__title { font-size: 64px; font-weight: 650; letter-spacing: -.025em; line-height: 1.02; max-width: 760px; margin: 0 0 24px; color: var(--paper); } .pp-brand-hero__sub { font-size: 18px; line-height: 1.58; color: var(--mute); max-width: 620px; margin: 0; } .pp-brand-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .pp-brand-proof { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 28px 0 0; color: var(--chrome); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .pp-brand-proof li { border: .5px solid var(--line); border-radius: 999px; padding: 7px 10px; background: rgba(255, 255, 255, .035); } .pp-brand-hero__picker { padding: 28px; } .pp-brand-hero__picker-note { color: var(--mute); font-size: 13px; line-height: 1.45; margin: 18px 0 0; } .pp-brand-paths { padding-bottom: 40px; } .pp-brand-paths__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pp-brand-path-card { min-height: 220px; text-decoration: none; transition: border-color .15s, transform .15s; } .pp-brand-path-card:hover { border-color: var(--red); transform: translateY(-2px); } .pp-brand-path-card h3 { color: var(--paper); font-size: 28px; line-height: 1.1; margin: 18px 0 12px; } .pp-brand-path-card p { color: var(--mute); line-height: 1.55; margin: 0; } /* ============================================================ YMM PICKER FORM ============================================================ */ .pp-ymm-picker { display: flex; flex-direction: column; gap: 14px; } .pp-ymm-picker .btn { margin-top: 8px; } .pp-ymm-picker--compact { flex-direction: row; align-items: end; gap: 10px; } .pp-ymm-picker--compact .pp-ymm-field { flex: 1; } .pp-ymm-picker--compact .btn { margin-top: 0; } /* ============================================================ CATEGORIES — responsive grid driven by --cols custom prop ============================================================ */ .pp-cat-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 16px; } .pp-cat-card { text-decoration: none; transition: border-color .15s, transform .15s; cursor: pointer; min-height: 180px; justify-content: space-between; } .pp-cat-card:hover { border-color: var(--paper); transform: translateY(-2px); } .pp-cat-card .eyebrow { margin-bottom: 14px; } .pp-cat-card h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; margin: 0; color: var(--paper); } .pp-cat-card__count { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); margin-top: auto; padding-top: 24px; } /* ============================================================ TRUST STRIP — 3-column reassurance pillars ============================================================ */ .pp-trust { border-top: .5px solid var(--line); border-bottom: .5px solid var(--line); } .pp-trust__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; } .pp-trust__col .eyebrow { margin-bottom: 12px; } .pp-trust__col h3 { font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 12px; color: var(--paper); } .pp-trust__col p { font-size: 15px; line-height: 1.55; color: var(--mute); margin: 0; } /* ============================================================ CONTACT CARD (page-contact.php) — canonical NAP block ============================================================ */ .pp-contact-card { margin-top: 48px; padding: 40px 0 0; border-top: .5px solid var(--line); } .pp-contact-card__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } .pp-contact-card__block h2 { font-size: 18px; font-weight: 600; letter-spacing: -.005em; margin: 0 0 16px; color: var(--paper); } .pp-contact-card__hours, .pp-contact-card__contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .pp-contact-card__hours li { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--paper); } .pp-contact-card__hours li .mono { color: var(--mute); } .pp-contact-card__contact li { display: flex; flex-direction: column; gap: 2px; } .pp-contact-card__contact .eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .pp-contact-card__contact a { color: var(--paper); text-decoration: none; border-bottom: .5px solid var(--line-2); padding-bottom: 1px; } .pp-contact-card__contact a:hover { border-bottom-color: var(--paper); } @media (max-width: 720px) { .pp-contact-card__grid { grid-template-columns: 1fr; gap: 32px; } } /* ============================================================ SUPPORT PAGES — fitment, returns, shipping, FAQ ============================================================ */ .pp-support-content { max-width: 1080px; } .pp-support-hero .eyebrow { margin-bottom: 12px; } .pp-support-hero p { max-width: 760px; margin: 18px 0 0; color: var(--mute); font-size: 18px; line-height: 1.6; } .pp-support-section { padding: 40px 0; border-top: .5px solid var(--line); } .pp-support-section__header { margin-bottom: 18px; } /* Long-form legal/company prose (About, Privacy, Terms) */ .pp-support-prose { max-width: 760px; } .pp-support-prose__block + .pp-support-prose__block { margin-top: 28px; } .pp-support-prose__block h2 { margin: 0 0 10px; color: var(--paper); font-size: 22px; line-height: 1.25; font-weight: 600; } .pp-support-prose__block p { margin: 0 0 12px; color: var(--mute); font-size: 16px; line-height: 1.7; } .pp-contact-card__address { font-style: normal; color: var(--mute); font-size: 15px; line-height: 1.7; } .pp-contact-card__address strong { color: var(--paper); } .pp-foot-legal a { color: inherit; text-decoration: none; } .pp-foot-legal a:hover { text-decoration: underline; } .pp-support-section__header h2 { margin: 0; color: var(--paper); font-size: 28px; line-height: 1.18; font-weight: 600; } .pp-support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pp-support-card { min-height: 220px; gap: 12px; } .pp-support-card .eyebrow { color: var(--red); } .pp-support-card h3 { margin: 0; color: var(--paper); font-size: 22px; line-height: 1.2; font-weight: 600; } .pp-support-card p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.55; } .pp-support-faq { border-top: .5px solid var(--line); } .pp-support-faq__item { border-bottom: .5px solid var(--line); padding: 20px 0; } .pp-support-faq__item summary { cursor: pointer; color: var(--paper); font-weight: 600; font-size: 17px; line-height: 1.35; } .pp-support-faq__item summary::marker { color: var(--red); } .pp-support-faq__item p { max-width: 760px; margin: 12px 0 0; color: var(--mute); font-size: 15px; line-height: 1.6; } .pp-support-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; margin-top: 16px; padding: 24px; border: .5px solid var(--line); background: var(--ink-2); } .pp-support-cta h2 { margin: 0 0 8px; color: var(--paper); font-size: 24px; line-height: 1.2; font-weight: 600; } .pp-support-cta p { max-width: 680px; margin: 0; color: var(--mute); font-size: 15px; line-height: 1.55; } .pp-support-cta__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } @media (max-width: 900px) { .pp-support-grid { grid-template-columns: 1fr; } .pp-support-card { min-height: 0; } .pp-support-cta { grid-template-columns: 1fr; } .pp-support-cta__actions { justify-content: flex-start; } } /* ============================================================ FEATURED PRODUCTS BAND (Phase 1A: WC-default markup; Phase 1B styles cards) Selectors are extra-specific + !important on width/float to beat WooCommerce's default `.woocommerce ul.products li.product { width: 22.05%; float: left }`. ============================================================ */ .pp-featured-row .woocommerce ul.products, .pp-featured-row ul.products { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; /* Defeat WC's float-layout clearfix expectations. */ overflow: visible; } /* WC's clearfix uses ::before/::after with content:" "; display:table — in grid context these become grid items and steal the first/last cells, pushing real product cards into wrong positions. Hide them. */ .pp-featured-row .woocommerce ul.products::before, .pp-featured-row .woocommerce ul.products::after, .pp-featured-row ul.products::before, .pp-featured-row ul.products::after { display: none !important; } .pp-featured-row .woocommerce ul.products li.product, .pp-featured-row ul.products li.product { width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 16px; float: none !important; clear: none !important; background: var(--ink-3); border: .5px solid var(--line); list-style: none; text-align: left; } .pp-featured-row .woocommerce ul.products li.product .onsale { position: absolute; top: 8px; right: 8px; background: var(--red); color: var(--solid-fg); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 0; margin: 0; min-height: 0; line-height: 1; } .pp-featured-row .woocommerce ul.products li.product { position: relative; } .pp-featured-row .woocommerce ul.products li.product img { max-width: 100% !important; height: auto !important; display: block !important; margin: 0 0 12px !important; } .pp-featured-row .woocommerce-loop-product__title { font-family: Fraunces, Georgia, serif !important; font-size: 16px !important; font-weight: 600 !important; color: var(--paper) !important; margin: 0 0 6px !important; padding: 0 !important; line-height: 1.25 !important; } .pp-featured-row .woocommerce ul.products li.product .price { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 13px !important; color: var(--paper) !important; display: block; margin-bottom: 10px !important; font-weight: 500 !important; } .pp-featured-row .woocommerce ul.products li.product .price del { color: var(--mute); margin-right: 6px; } .pp-featured-row .woocommerce ul.products li.product .button, .pp-featured-row .woocommerce ul.products li.product .add_to_cart_button { display: inline-block !important; background: var(--red) !important; color: var(--solid-fg) !important; padding: 9px 14px !important; font-family: Inter, sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; text-decoration: none !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; line-height: 1 !important; margin-top: 4px !important; cursor: pointer; } .pp-featured-row .woocommerce ul.products li.product .button:hover, .pp-featured-row .woocommerce ul.products li.product .add_to_cart_button:hover { background: var(--red-2) !important; } /* ============================================================ FOOTER — column layouts and component styles ============================================================ */ .pp-foot-brand .logo { margin-bottom: 18px; } .pp-foot-blurb { font-size: 13px; line-height: 1.6; color: var(--mute); max-width: 360px; margin: 0; } .pp-foot-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .pp-foot-menu li { font-size: 12.5px; color: var(--mute); } .pp-foot-menu li:hover { color: var(--paper); cursor: pointer; } .pp-foot-menu a { color: inherit; text-decoration: none; } .pp-foot-menu a:hover { color: var(--paper); } /* ============================================================ GENERIC CONTENT (page, single, archive, search, 404) ============================================================ */ .pp-content { padding: 64px 32px; max-width: 880px; margin: 0 auto; } .pp-page__header, .pp-post__header { margin-bottom: 32px; } .pp-page__header h1, .pp-post__header h1 { font-size: 48px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin: 0; color: var(--paper); } .pp-post__header .eyebrow, .pp-post-card .eyebrow { margin-bottom: 12px; } .pp-page__body, .pp-post__body { font-size: 17px; line-height: 1.65; color: var(--paper); } .pp-archive__desc { margin-top: 16px; color: var(--mute); font-size: 15px; line-height: 1.55; } .pp-archive__list { display: flex; flex-direction: column; gap: 32px; } .pp-post-card { border-bottom: .5px solid var(--line); padding-bottom: 32px; } .pp-post-card h2 { font-size: 28px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; } .pp-post-card a { color: var(--paper); } .pp-post-card a:hover { color: var(--red); } .pp-excerpt { color: var(--mute); font-size: 15px; line-height: 1.55; } .pp-empty { color: var(--mute); font-size: 13px; padding: 48px 0; text-align: center; } .pp-searchform { margin: 24px 0; } .pp-searchform__row { display: flex; gap: 8px; margin-top: 6px; } .pp-searchform input.fld { flex: 1; } .pp-404 { text-align: center; padding: 96px 32px; } .pp-404 .eyebrow { margin-bottom: 24px; font-size: 96px; font-weight: 700; letter-spacing: -.02em; color: var(--red); line-height: 1; } .pp-404 h1 { font-size: 56px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 16px; color: var(--paper); } .pp-404 p { color: var(--mute); font-size: 17px; line-height: 1.55; max-width: 520px; margin: 0 auto 32px; } .pp-404 .btn { margin: 0 4px; } .pp-404__browse { border-top: 1px solid var(--line); padding-top: 64px; margin-top: 32px; } .pp-404__browse .container > .eyebrow { text-align: center; margin-bottom: 24px; } .pp-404__browse .pp-section { padding-top: 0; } /* ============================================================ RESPONSIVE Mobile-first breakpoints scale grids back to 1-col stacks. ============================================================ */ @media (max-width: 1024px) { .pp-hero__inner { grid-template-columns: 1fr; gap: 48px; } .pp-hero__title { font-size: 56px; } .pp-brand-hero__inner { grid-template-columns: 1fr; gap: 40px; } .pp-brand-hero__title { font-size: 52px; } .pp-brand-paths__grid { grid-template-columns: 1fr; } .pp-cat-grid { grid-template-columns: repeat(2, 1fr); } .pp-trust__row { grid-template-columns: 1fr; gap: 32px; } .pp-featured-row .woocommerce ul.products, .pp-featured-row ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .site-footer .finner { grid-template-columns: 1fr 1fr; gap: 32px; } .pp-section__title { font-size: 32px; } } @media (max-width: 640px) { .nav-inner { padding: 0 20px; gap: 16px; } /* Reveal the hamburger; collapse the inline search + status pill to make room (search moves into the dropdown panel). */ .nav-menu-toggle { display: inline-flex; } .nav-search { display: none; } .pp-status-pill { display: none; } /* Turn the primary nav into a full-width dropdown panel below the bar. */ .navlinks { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 8px 20px 16px; background: var(--ink); border-bottom: .5px solid var(--line); box-shadow: 0 12px 24px rgba(0, 0, 0, .18); } .nav.is-menu-open .navlinks { display: flex; } .navlinks a { padding: 14px 2px; font-size: 16px; color: var(--paper); border-bottom: .5px solid var(--line); } .nav-menu-search { display: flex; gap: 8px; margin-top: 12px; } .container { padding: 0 20px; } .pp-hero { padding: 56px 0 40px; } .pp-hero__title { font-size: 40px; } .pp-brand-hero { padding: 52px 0 40px; } .pp-brand-hero__title { font-size: 38px; } .pp-brand-hero__sub { font-size: 16px; } .pp-brand-hero__actions { flex-direction: column; } .pp-brand-hero__actions .btn { width: 100%; justify-content: center; } .pp-section { padding: 56px 0; } .pp-cat-grid { grid-template-columns: 1fr; } .pp-featured-row .woocommerce ul.products, .pp-featured-row ul.products { grid-template-columns: 1fr !important; } .site-footer .finner { grid-template-columns: 1fr; padding: 40px 20px 20px; } .pp-foot-bottom { flex-direction: column; gap: 8px; padding: 16px 20px; } } /* ============================================================ Phase 1B — Product card (shared) ============================================================ */ .pp-product-card { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; } .pp-product-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tile); color: var(--paper); display: flex; align-items: center; justify-content: center; } .pp-product-card__media img { width: 100%; height: 100%; object-fit: contain; } .pp-product-card__media .pp-glyph { width: 48%; height: 48%; } .pp-product-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .pp-product-card__sku { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .pp-product-card__title { font-size: 18px; line-height: 1.25; margin: 0; font-weight: 500; } .pp-product-card__title a { color: inherit; text-decoration: none; } .pp-product-card__title a:hover { text-decoration: underline; text-decoration-color: var(--line); } .pp-product-card__fits { font-size: 11px; color: var(--mute); margin-top: 2px; } .pp-product-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; } .pp-product-card__price { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18px; color: var(--paper); } .pp-product-card__price del { color: var(--mute); font-weight: 400; margin-right: 6px; font-size: 14px; } .pp-product-card__stock { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; } .pp-stock--in { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); } .pp-stock--low { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, var(--line)); } .pp-stock--out { color: var(--mute); } /* Striped placeholder */ .pp-ph { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; background: var(--tile); } .pp-ph__stripes { position: absolute; inset: 0; background-image: repeating-linear-gradient( 45deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 8px, transparent 8px 16px ); pointer-events: none; } .pp-ph__caption { position: relative; font-size: 11px; letter-spacing: .08em; color: var(--mute); padding: 4px 8px; background: var(--paper); border: 1px solid var(--line); } /* ============================================================ Phase 1B — PLP / archive ============================================================ */ .pp-archive { padding: 32px 0 64px; } .pp-archive__header { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 32px; } .pp-archive__title { font-size: 40px; line-height: 1.1; margin: 0; font-weight: 500; } .pp-archive__subtitle { color: var(--mute); max-width: 60ch; } .pp-archive__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; } .pp-archive__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; } .pp-archive__main { min-width: 0; } /* Phase 1E — category sidebar */ .pp-archive__sidebar { position: sticky; top: 136px; /* nav 72 + ymmbar ~48 + 16 breathing */ align-self: start; max-height: calc(100vh - 152px); overflow-y: auto; } .pp-cat-sidebar { width: 100%; } .pp-cat-sidebar__summary { list-style: none; cursor: default; padding: 0 0 12px; } .pp-cat-sidebar__summary::-webkit-details-marker { display: none; } .pp-cat-sidebar__heading { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .pp-cat-sidebar__caret { display: none; color: var(--mute); } .pp-cat-sidebar__nav { display: block; } .pp-cat-sidebar__list { list-style: none; padding: 0; margin: 0; border-top: .5px solid var(--line); } .pp-cat-sidebar__item { border-bottom: .5px solid var(--line); } .pp-cat-sidebar__item a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; color: var(--paper); text-decoration: none; font-size: 14px; } .pp-cat-sidebar__item a:hover { color: var(--red); } .pp-cat-sidebar__item--active > a, .pp-cat-sidebar__item--active > .pp-cat-sidebar__group > .pp-cat-sidebar__group-summary > .pp-cat-sidebar__parent-link { padding-left: 10px; border-left: 2px solid var(--red); } .pp-cat-sidebar__count { color: var(--mute); font-size: 11px; letter-spacing: .08em; } .pp-cat-sidebar__sublist { list-style: none; padding: 0; margin: 0 0 0 10px; border-left: .5px solid var(--line); } .pp-cat-sidebar__item--child { border-top: .5px solid var(--line); border-bottom: 0; } .pp-cat-sidebar__item--child a { padding-left: 18px; } .pp-cat-sidebar__item--child.pp-cat-sidebar__item--active > a { padding-left: 16px; border-left: 2px solid var(--red); } .pp-cat-sidebar__item--has-children .pp-cat-sidebar__name { font-weight: 600; } /* Per-parent collapse via native
. The parent's anchor is inside ; clicking the anchor navigates (browsers prioritize anchor click over disclosure-toggle), clicking the chevron / empty area toggles. */ .pp-cat-sidebar__group { width: 100%; } .pp-cat-sidebar__group-summary { list-style: none; cursor: pointer; display: flex; align-items: stretch; /* No native marker — we render our own chevron at the trailing edge */ } .pp-cat-sidebar__group-summary::-webkit-details-marker { display: none; } .pp-cat-sidebar__parent-link { flex: 1; /* Inherits the same flex link styles from .pp-cat-sidebar__item a */ } .pp-cat-sidebar__chev { display: inline-flex; align-items: center; justify-content: center; width: 28px; padding: 0; color: var(--mute); font-size: 16px; line-height: 1; transition: transform 0.15s ease; } .pp-cat-sidebar__group[open] > .pp-cat-sidebar__group-summary .pp-cat-sidebar__chev { transform: rotate(90deg); } .pp-product-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 24px; } .pp-result-count { font-size: 12px; color: var(--mute); margin: 0; } .pp-orderby { display: inline-flex; align-items: center; gap: 8px; } .pp-orderby__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .pp-orderby__select { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 0; padding: 6px 28px 6px 10px; font-size: 12px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .pp-empty { text-align: center; padding: 64px 24px; border: 1px solid var(--line); background: var(--tile); display: flex; flex-direction: column; gap: 12px; align-items: center; } .pp-empty h2 { margin: 0; font-size: 28px; } .pp-empty p { margin: 0; color: var(--mute); } /* WC pagination, styled */ .woocommerce-pagination { margin-top: 32px; } .woocommerce-pagination .page-numbers { display: inline-flex; gap: 4px; list-style: none; padding: 0; margin: 0; } .woocommerce-pagination .page-numbers li .page-numbers, .woocommerce-pagination .page-numbers li a { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--line); color: var(--paper); text-decoration: none; font-size: 12px; } .woocommerce-pagination .page-numbers li .current { background: var(--paper); color: var(--ink); } /* ============================================================ Phase 1B — Breadcrumbs ============================================================ */ .pp-crumbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11px; letter-spacing: .04em; color: var(--mute); margin-bottom: 16px; } .pp-crumbs a { color: var(--mute); text-decoration: none; } .pp-crumbs a:hover { color: var(--paper); text-decoration: underline; } .pp-crumbs span:not(.pp-crumbs__sep) { color: var(--paper); } .pp-crumbs__sep { color: var(--line); } /* ============================================================ Phase 1B — PDP / single-product ============================================================ */ .pp-product-page { padding: 32px 0 64px; } .pp-product-page__body { display: flex; flex-direction: column; gap: 64px; } .pp-product { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: start; } .pp-product__gallery { position: relative; } .pp-product__gallery .woocommerce-product-gallery { width: 100%; } .pp-product__gallery img { width: 100%; height: auto; display: block; } /* WC flexslider gallery (wc-product-gallery-slider theme support). When there are gallery images beyond the featured one, WC stitches them into a single-slide carousel and renders a thumbnail nav strip below. Keep the visual language editorial: slides letterboxed on --tile, thumb strip as a 5-column grid with the active slide outlined. */ .pp-product__gallery .flex-viewport { background: var(--tile); } .pp-product__gallery .woocommerce-product-gallery__image > a { display: block; cursor: zoom-in; } .pp-product__gallery .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; object-fit: contain; } /* Hide WC's "View image" trigger pip (we use click-anywhere-on-image instead). */ .pp-product__gallery .woocommerce-product-gallery__trigger { display: none; } /* Thumbnail nav strip (rendered by flexslider when there are >1 slides). */ .pp-product__gallery .flex-control-thumbs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .pp-product__gallery .flex-control-thumbs li { margin: 0; } .pp-product__gallery .flex-control-thumbs img { aspect-ratio: 1 / 1; object-fit: contain; background: var(--tile); cursor: pointer; opacity: .55; transition: opacity .15s, outline-color .15s; outline: 1px solid transparent; outline-offset: -1px; } .pp-product__gallery .flex-control-thumbs img:hover { opacity: .85; } .pp-product__gallery .flex-control-thumbs img.flex-active { opacity: 1; outline-color: var(--paper); } @media (max-width: 600px) { .pp-product__gallery .flex-control-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Editorial part-glyph fallback when the product has no featured image. */ .pp-product__glyph { aspect-ratio: 1 / 1; background: var(--tile); color: var(--paper); display: flex; align-items: center; justify-content: center; } .pp-product__glyph .pp-glyph { width: 40%; height: 40%; } .pp-product__summary { display: flex; flex-direction: column; gap: 16px; } .pp-product__sku { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); } .pp-product__title { font-size: 36px; line-height: 1.15; margin: 0; font-weight: 500; } .pp-product__fits { font-size: 13px; color: var(--mute); } .pp-product__price { font-size: 28px; font-family: 'Fraunces', serif; } .pp-product__short { color: var(--mute); font-size: 14px; line-height: 1.5; } .pp-product__cart { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pp-product__unavailable { margin: 0; color: var(--mute); font-size: 13px; line-height: 1.5; } .pp-availability { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; } .pp-availability__line { color: var(--mute); font-size: 13px; line-height: 1.5; } .pp-availability__action { min-height: 44px; } .pp-cart-form { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .pp-cart-form__actions { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-left: auto; } /* Stock indicator (wc_get_stock_html output:

). */ .pp-cart-form .stock { margin: 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-weight: 600; } .pp-cart-form .stock.in-stock { color: var(--paper); } .pp-cart-form .stock.available-on-backorder, .pp-cart-form .stock.out-of-stock { color: var(--red); } .pp-cart-form .quantity { display: inline-flex; } .pp-cart-form .quantity input.qty { width: 72px; min-height: 52px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--field-border); background: var(--field); color: var(--paper); font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1; text-align: center; border-radius: 0; } .pp-cart-form__submit, .pp-cart-form .single_add_to_cart_button { min-height: 52px; box-sizing: border-box; } .pp-cart-form .quantity input.qty:focus { outline: none; border-color: var(--field-focus); } .pp-cart-form .quantity input.qty::-webkit-outer-spin-button, .pp-cart-form .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pp-cart-form .quantity input.qty[type="number"] { -moz-appearance: textfield; } /* Disabled add-to-cart (variable products before a variation is selected, or when a chosen variation is out of stock). Pale lavender default looks accidental — use the form-field surface for a clear muted-but-themed state. */ .pp-cart-form__submit:disabled, .pp-cart-form .single_add_to_cart_button:disabled { background: var(--field); color: var(--mute); border: 1px solid var(--field-border); cursor: not-allowed; } .pp-cart-form__submit:disabled:hover, .pp-cart-form .single_add_to_cart_button:disabled:hover { background: var(--field); } /* Variable-product variation chooser (Color / Size / etc). Replaces WC's default . */ .pp-variations-form { display: flex; flex-direction: column; gap: 18px; } .pp-variations { display: flex; flex-direction: column; gap: 12px; } .pp-variation-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 16px; } .pp-variation-row__label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-weight: 600; } .pp-variation-row__control { min-width: 0; } .pp-variation-select, .pp-variation-row select { width: 100%; padding: 12px 36px 12px 14px; background-color: var(--field); color: var(--paper); border: 1px solid var(--field-border); border-radius: 0; font-family: Inter, sans-serif; font-size: 14px; appearance: none; -webkit-appearance: none; -moz-appearance: none; /* Neutral mid-gray caret reads against both --field surfaces (dark in dark mode, warm cream in light mode). Avoids needing per-theme SVGs. */ background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .pp-variation-select:focus, .pp-variation-row select:focus { outline: none; border-color: var(--field-focus); } .pp-variation-reset { font-size: 12px; } .pp-variation-reset .reset_variations { color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 1px; visibility: hidden; } .pp-variation-reset .reset_variations:hover { color: var(--paper); border-color: var(--paper); } /* Per-variation info slot (price + availability) injected by WC's JS into .single_variation. Keep it visually grouped above the qty/cart row. */ .pp-single-variation { display: flex; flex-direction: column; gap: 14px; } .pp-single-variation__info:empty { display: none; } .pp-single-variation__info .price { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--paper); } .pp-single-variation__info .stock { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-top: 4px; } .pp-single-variation__info .stock.out-of-stock { color: var(--red); } .pp-meta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 11px; letter-spacing: .04em; color: var(--mute); } .pp-meta a { color: var(--paper); text-decoration: none; } .pp-meta a:hover { text-decoration: underline; } .pp-meta__sku span { color: var(--paper); } .pp-share { margin-left: auto; } /* PDP fits indicator — live "Confirmed fits / Does NOT fit" badge above price. Silent for universal items (apparel) and when no vehicle is selected. */ .pp-fits-indicator { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-left: 3px solid var(--ok); background: rgba(58, 138, 58, .08); font-size: 13px; line-height: 1.4; color: var(--paper); } .pp-fits-indicator--no { border-left-color: var(--red); background: rgba(196, 33, 28, .08); } .pp-fits-indicator__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--ok); color: var(--paper); font-size: 13px; font-weight: 600; } .pp-fits-indicator--no .pp-fits-indicator__icon { background: var(--red); } .pp-fits-indicator__msg { font-weight: 500; } /* PDP fits list — expandable "Fits N vehicles" with year ranges by make/model. */ .pp-fits-list { border-top: 1px solid var(--line); padding-top: 16px; } .pp-fits-list__summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mute); } .pp-fits-list__summary::-webkit-details-marker { display: none; } .pp-fits-list__caret { display: inline-block; transition: transform .15s ease; font-size: 16px; line-height: 1; } .pp-fits-list[open] > .pp-fits-list__summary .pp-fits-list__caret { transform: rotate(90deg); } .pp-fits-list__count { color: var(--paper); } .pp-fits-list__items { list-style: none; padding: 12px 0 0; margin: 0; display: grid; gap: 6px; font-size: 13px; } .pp-fits-list__items li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); } .pp-fits-list__items li:last-child { border-bottom: 0; } .pp-fits-list__make-model { color: var(--paper); } .pp-fits-list__years { color: var(--mute); white-space: nowrap; } /* PDP tabs */ .pp-tabs { border-top: 1px solid var(--line); padding-top: 32px; } .pp-tabs__nav { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; } .pp-tabs__btn { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 12px 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); cursor: pointer; } .pp-tabs__btn:hover { color: var(--paper); } .pp-tabs__btn.is-active { color: var(--paper); border-bottom-color: var(--paper); } .pp-tabs__panel { padding: 16px 0; } .pp-tabs__panel[hidden] { display: none; } .pp-tabs__panel h2 { font-family: 'Fraunces', serif; font-size: 20px; margin: 0 0 12px; } .pp-tabs__panel p { line-height: 1.6; color: var(--paper); } /* PDP related */ .pp-product__related { padding-top: 32px; border-top: 1px solid var(--line); } .pp-product__related .pp-section__header { margin-bottom: 24px; } .pp-product__related .pp-section__header h2 { font-size: 28px; margin: 0; } /* Sale flash badge */ .pp-badge { display: inline-flex; align-items: center; padding: 3px 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } .pp-badge--sale { background: var(--red); color: var(--paper); } /* ============================================================ Phase 1B — Category landing grid ============================================================ */ .pp-cat-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; } .pp-cat-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; text-decoration: none; color: var(--paper); transition: background 120ms ease; } .pp-cat-card:hover { background: var(--tile); } .pp-cat-card__glyph { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .pp-cat-card__glyph .pp-glyph { width: 100%; height: 100%; } .pp-cat-card__title { font-size: 18px; margin: 0; font-weight: 500; } .pp-cat-card__count { font-size: 11px; letter-spacing: .08em; color: var(--mute); } .pp-category-landing { width: 100%; } .pp-category-landing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .pp-category-landing__card { display: flex; flex-direction: column; min-height: 210px; padding: 0; overflow: hidden; text-decoration: none; color: var(--paper); transition: border-color 120ms ease, transform 120ms ease, background 120ms ease; } .pp-category-landing__card:hover { background: var(--tile); border-color: color-mix(in srgb, var(--red) 48%, var(--line)); transform: translateY(-1px); } .pp-category-landing__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 3; background: var(--tile); overflow: hidden; } .pp-category-landing__image { width: 100%; height: 100%; object-fit: contain; display: block; } .pp-category-landing__media .pp-glyph { width: 46%; height: 46%; color: var(--mute); } .pp-category-landing__placeholder { color: var(--mute); font-size: 20px; letter-spacing: .08em; } .pp-category-landing__body { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 17px; } .pp-category-landing__title { font-size: 18px; line-height: 1.2; } .pp-category-landing__count { color: var(--mute); font-size: 11px; letter-spacing: .08em; } /* ============================================================ Phase 1B — Responsive ============================================================ */ @media (max-width: 1024px) { .pp-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pp-category-landing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-archive__body { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; } } @media (max-width: 768px) { .pp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .pp-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-category-landing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp-product { grid-template-columns: 1fr; gap: 24px; } .pp-archive__title { font-size: 28px; } .pp-product__title { font-size: 24px; } .pp-archive__bar { flex-direction: column; align-items: stretch; } /* Phase 1E — sidebar collapses above the loop on mobile */ .pp-archive__body { grid-template-columns: 1fr; gap: 16px; } .pp-archive__sidebar { position: static; max-height: none; overflow: visible; margin-bottom: 8px; border: .5px solid var(--line); } .pp-cat-sidebar__summary { cursor: pointer; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; } .pp-cat-sidebar__caret { display: inline-block; transition: transform 120ms ease; font-size: 16px; } .pp-cat-sidebar[open] > .pp-cat-sidebar__summary .pp-cat-sidebar__caret { transform: rotate(90deg); } .pp-cat-sidebar__list { padding: 0 16px 12px; } } @media (max-width: 560px) { .pp-category-landing__grid { grid-template-columns: 1fr; } .pp-category-landing__card { min-height: 0; } } /* === Cart (Phase 1C) ===================================================== */ .pp-cart .pp-cart__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 36px; } .pp-cart__title { font-size: 56px; margin: 0; font-weight: 500; letter-spacing: -.02em; } .pp-cart__step { font-size: 11px; letter-spacing: .14em; color: var(--mute); text-transform: uppercase; } .pp-cart__grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 40px; } .pp-cart__fits-banner { background: var(--ink-2); border: .5px solid var(--line); border-left: 3px solid var(--ok); padding: 14px 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; } .pp-cart__fits-eyebrow { font-size: 11px; letter-spacing: .1em; color: var(--paper); text-transform: uppercase; } .pp-cart__fits-copy { font-size: 13px; color: var(--mute); } .pp-cart__table { border: .5px solid var(--line); } .pp-cart__row { display: grid; grid-template-columns: 90px 1fr 120px 120px 40px; align-items: center; padding: 20px 18px; border-bottom: .5px solid var(--line); } .pp-cart__row:last-child { border-bottom: none; } .pp-cart__row--head { background: var(--ink-2); padding: 14px 18px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .pp-cart__cell--center { text-align: center; } .pp-cart__cell--right { text-align: right; } .pp-cart__glyph { width: 72px; height: 72px; background: #0d0d0d; border: .5px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; } html[data-theme="light"] .pp-cart__glyph { background: var(--ink-2); } .pp-cart__desc { padding-right: 20px; } .pp-cart__sku { font-size: 10px; color: var(--chrome); letter-spacing: .1em; margin-bottom: 4px; } .pp-cart__name { font-size: 15px; font-weight: 600; margin-bottom: 4px; display: block; color: var(--paper); text-decoration: none; } .pp-cart__name:hover { color: var(--red); } .pp-cart__fits { font-size: 12px; color: var(--mute); } .pp-cart__stock { font-size: 10px; color: var(--ok); letter-spacing: .1em; margin-top: 6px; } .pp-cart__stock .pp-stock--low { color: var(--chrome); } .pp-cart__stock .pp-stock--out { color: var(--mute-2); } .pp-cart__qty { justify-self: center; display: flex; border: .5px solid var(--line); } .pp-cart__qty-btn { width: 32px; height: 36px; background: transparent; border: none; color: var(--paper); cursor: pointer; font-size: 16px; } .pp-cart__qty-input { width: 32px; text-align: center; background: transparent; border: none; color: var(--paper); font-family: 'JetBrains Mono', monospace; font-size: 13px; height: 36px; } .pp-cart__qty-input::-webkit-outer-spin-button, .pp-cart__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .pp-cart__amount { text-align: right; } .pp-cart__amount-total { font-size: 18px; font-weight: 700; } .pp-cart__amount-each { font-size: 11px; color: var(--mute-2); margin-top: 2px; } .pp-cart__remove { background: transparent; border: none; color: var(--mute); cursor: pointer; font-size: 18px; text-decoration: none; text-align: center; } .pp-cart__remove:hover { color: var(--red); } .pp-cart__below { margin-top: 20px; display: flex; justify-content: space-between; align-items: center; } .pp-cart__below-subtotal { font-size: 11px; color: var(--mute); } .pp-cart__aside > * + * { margin-top: 12px; } .pp-cart__summary { border: .5px solid var(--line); padding: 24px; } .pp-cart__summary-eyebrow { margin-bottom: 18px; } .pp-cart__summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: var(--mute); } .pp-cart__summary-row > span:last-child { color: var(--paper); font-family: 'JetBrains Mono', monospace; } .pp-cart__summary-free { color: var(--ok); } .pp-cart__summary-divider { border-top: .5px solid var(--line); margin: 14px 0 10px; } .pp-cart__summary-total { display: flex; justify-content: space-between; align-items: baseline; } .pp-cart__summary-total-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .pp-cart__summary-total-amount { font-size: 32px; font-weight: 700; } .pp-cart__checkout-btn { display: block; width: 100%; margin-top: 20px; text-align: center; } .pp-cart__summary-payments { display: flex; gap: 8px; margin-top: 12px; justify-content: center; } .pp-cart__pay-chip { font-size: 9px; color: var(--mute-2); border: .5px solid var(--line); padding: 3px 6px; letter-spacing: .1em; } .pp-cart__promo { border: .5px solid var(--line); padding: 18px 20px; } .pp-cart__promo-eyebrow { margin-bottom: 10px; } .pp-cart__promo-row { display: flex; gap: 8px; } .pp-cart__promo-input { flex: 1; } .pp-cart__vin { border: .5px solid var(--line); padding: 18px 20px; } .pp-cart__vin-eyebrow { margin-bottom: 10px; } .pp-cart__vin-row { display: flex; gap: 8px; align-items: stretch; } .pp-cart__vin-input { flex: 1; min-width: 0; text-transform: uppercase; } .pp-cart__empty { padding: 80px 40px; border: .5px solid var(--line); text-align: center; } .pp-cart__empty-title { font-size: 32px; margin-bottom: 10px; font-weight: 500; } .pp-cart__empty-copy { color: var(--mute); margin-bottom: 24px; } .pp-coupon-err { color: var(--red); font-size: 12px; } /* --- Cart responsive (tablet + mobile) ---------------------------------- */ @media (max-width: 960px) { .pp-cart__grid { grid-template-columns: 1fr; gap: 32px; } .pp-cart .pp-cart__header { flex-direction: column; align-items: flex-start; gap: 10px; } .pp-cart__step { order: -1; } } @media (max-width: 720px) { .pp-cart__title { font-size: 40px; } .pp-cart__row { grid-template-columns: 64px 1fr auto; grid-template-areas: "glyph desc remove" "glyph qty amount"; column-gap: 14px; row-gap: 10px; padding: 16px 14px; } .pp-cart__row--head { display: none; } .pp-cart__glyph { grid-area: glyph; width: 56px; height: 56px; align-self: start; } .pp-cart__desc { grid-area: desc; padding-right: 0; min-width: 0; } .pp-cart__qty { grid-area: qty; justify-self: start; } .pp-cart__amount { grid-area: amount; align-self: center; } .pp-cart__remove { grid-area: remove; align-self: start; } .pp-cart__below { flex-direction: column; align-items: stretch; gap: 12px; } .pp-cart__below .btn { text-align: center; } .pp-cart__summary { padding: 20px; } .pp-cart__summary-total-amount { font-size: 28px; } } /* === Checkout (Phase 1C) ================================================= */ .pp-checkout { padding: 40px 32px 80px; } .pp-checkout__progress { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; } .pp-checkout__progress-step { display: flex; align-items: center; gap: 10px; color: var(--mute-2); } .pp-checkout__progress-step.is-active, .pp-checkout__progress-step.is-done { color: var(--paper); } .pp-checkout__progress-circle { width: 28px; height: 28px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; } .pp-checkout__progress-step.is-active .pp-checkout__progress-circle { border-color: var(--red); } .pp-checkout__progress-step.is-done .pp-checkout__progress-circle { border-color: var(--chrome); } .pp-checkout__progress-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .pp-checkout__progress-bar { width: 40px; height: .5px; background: var(--line); } .pp-checkout__progress-step.is-done + .pp-checkout__progress-bar { background: var(--chrome); } .pp-checkout__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(360px, .9fr); gap: 40px; } .pp-checkout__main, .pp-checkout__aside { min-width: 0; } .pp-checkout__step { display: none; } .pp-checkout__step.is-active { display: block; } .pp-checkout__step-title { font-size: 32px; margin: 0 0 20px; font-weight: 500; } .pp-checkout__step-actions { display: flex; gap: 12px; margin-top: 28px; } .pp-checkout__fields { display: grid; gap: 14px; } .pp-checkout__fields .form-row { margin: 0; } .pp-checkout__fields .form-row-first, .pp-checkout__fields .form-row-last { width: 100%; } .pp-checkout__shipping-method { border: 0; padding: 0; margin: 32px 0 0; } .pp-checkout__shipping-method legend { margin-bottom: 14px; } .pp-checkout__shipping-methods { border: .5px solid var(--line); padding: 16px; } .pp-checkout__shipping-methods.is-error { border-color: var(--red); } .pp-checkout__shipping-table { width: 100%; margin: 0; border-collapse: collapse; } .pp-checkout__shipping-table th, .pp-checkout__shipping-table td { display: block; width: 100%; padding: 0; border: 0; text-align: left; } .pp-checkout__shipping-table th { margin-bottom: 8px; color: var(--mute); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0; } .pp-checkout__shipping-table ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .pp-checkout__shipping-table li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; } .pp-checkout__shipping-table li:first-child { padding-top: 0; } .pp-checkout__shipping-table li:last-child { padding-bottom: 0; } .pp-checkout__shipping-table li + li { border-top: .5px solid var(--line); } .pp-checkout__shipping-table input[type="radio"] { flex: 0 0 auto; margin-top: 2px; } .pp-checkout__shipping-table label { cursor: pointer; line-height: 1.35; } .pp-checkout__shipping-note { margin: 0; color: var(--mute); } .pp-checkout__payment-block, .pp-checkout__payment, .pp-checkout__pay-tile { min-width: 0; } .pp-checkout__pay-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; list-style: none; margin: 0 0 20px; padding: 0; } .pp-checkout__pay-tile { border: .5px solid var(--line); padding: 20px 14px; text-align: center; cursor: pointer; position: relative; } .pp-checkout__pay-tile:has(input[type=radio]:checked) { border-color: var(--chrome); background: var(--ink-2); } .pp-checkout__pay-tile:has(input[type=radio]:checked):has(.pp-checkout__pay-tile-fields) { grid-column: 1 / -1; } .pp-checkout__pay-tile input[type=radio] { position: absolute; opacity: 0; } .pp-checkout__pay-tile-label { display: flex; flex-direction: column; gap: 6px; align-items: center; cursor: pointer; } .pp-checkout__pay-tile-title { font-size: 11px; letter-spacing: .14em; font-weight: 600; } .pp-checkout__pay-tile-fields { grid-column: 1 / -1; padding: 16px 0 0; border-top: .5px dashed var(--line); margin-top: 12px; } .pp-checkout__pay-tile-fields iframe { max-width: 100%; } .pp-checkout__native-submit { display: none !important; } .pp-checkout__terms { font-size: 10px; color: var(--mute-2); letter-spacing: .1em; margin-top: 14px; text-align: center; } .pp-checkout__review > * + * { margin-top: 14px; } .pp-checkout__review-card { border: .5px solid var(--line); padding: 20px 24px; } .pp-checkout__review-addr { font-size: 14px; line-height: 1.55; white-space: pre-line; } .pp-checkout__review-pay { font-size: 14px; } .pp-checkout__review-items > * + * { border-top: .5px solid var(--line); } .pp-checkout__review-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 10px 0; } .pp-checkout__review-glyph { width: 48px; height: 48px; background: #0d0d0d; display: flex; align-items: center; justify-content: center; } html[data-theme="light"] .pp-checkout__review-glyph { background: var(--ink-2); } .pp-checkout__review-name { font-size: 13px; } .pp-checkout__review-qty { color: var(--mute-2); font-size: 11px; margin-left: 6px; } .pp-checkout__review-price { font-size: 13px; } .pp-checkout__aside .pp-checkout__summary { border: .5px solid var(--line); background: var(--ink); padding: 24px; position: sticky; top: 100px; z-index: 2; } .pp-checkout__aside :is(#payment, .woocommerce-checkout-payment, .pp-checkout__payment, .pp-checkout__payment-block, .pp-checkout__pay-tiles, .pp-checkout__pay-empty) { display: none !important; } .pp-checkout__summary-eyebrow { margin-bottom: 14px; } .pp-checkout__summary-line { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: .5px solid var(--line); align-items: center; } .pp-checkout__summary-glyph { position: relative; width: 44px; height: 44px; background: #0d0d0d; display: flex; align-items: center; justify-content: center; border: .5px solid var(--line); } html[data-theme="light"] .pp-checkout__summary-glyph { background: var(--ink-2); } .pp-checkout__summary-qty { position: absolute; top: -6px; right: -6px; background: var(--ink-3); color: var(--paper); font-size: 10px; width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; } .pp-checkout__summary-name { font-size: 12px; line-height: 1.3; } .pp-checkout__summary-sku { font-size: 10px; color: var(--mute-2); margin-top: 2px; } .pp-checkout__summary-price { font-size: 12px; } .pp-checkout__summary-totals { margin-top: 14px; } .pp-checkout__summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: var(--mute); } .pp-checkout__summary-row > span:last-child { color: var(--paper); font-family: 'JetBrains Mono', monospace; font-size: 13px; } .pp-checkout__summary-total { display: flex; justify-content: space-between; align-items: baseline; } .pp-checkout__summary-total-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .pp-checkout__summary-total-amount { font-size: 28px; font-weight: 700; } .is-error { border-color: var(--red) !important; } /* Address validation is injected asynchronously above the form, then moved into the Shipping step by theme.js. Keep the transient node invisible until it lands in the step so the default white/blue WC notice never flashes at the viewport origin. */ body.woocommerce-checkout .wc-address-validation-suggestion, body.woocommerce-checkout [data-wc-address-suggestion], body.woocommerce-checkout .woocommerce-shipping-validation-suggestion { visibility: hidden; } .pp-checkout__step .wc-address-validation-suggestion, .pp-checkout__step [data-wc-address-suggestion], .pp-checkout__step .woocommerce-shipping-validation-suggestion { visibility: visible; } /* --- Checkout notice theming (dark + light) ------------------------------ */ /* WC + woocommerce-services ship light-default notice surfaces. Repaint them with our theme tokens so they read correctly in both modes. */ .pp-checkout-screen .woocommerce-info, .pp-checkout-screen .woocommerce-message, .pp-checkout-screen .wc-address-validation-suggestion, .pp-checkout-screen [data-wc-address-suggestion], .pp-checkout-screen .woocommerce-shipping-validation-suggestion { background: var(--ink-2); color: var(--paper); border: 0; border-left: 2px solid var(--chrome); padding: 14px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; margin: 0 0 14px; } .pp-checkout-screen .woocommerce-info::before, .pp-checkout-screen .woocommerce-message::before { display: none; /* drop WC's checkmark/info pseudo glyph */ } .pp-checkout-screen .woocommerce-error, .pp-checkout-screen .woocommerce-NoticeGroup-checkout { background: var(--ink-2); color: var(--paper); border: 0; border-left: 2px solid var(--red); padding: 14px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; margin: 0 0 14px; } .pp-checkout-screen :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; } .pp-checkout-screen :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button { background: var(--ink-3); color: var(--paper); border: .5px solid var(--line-2); padding: 6px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; margin-left: 12px; } /* --- Single-gateway pay-direct: hide tile chrome ------------------------- */ .pp-checkout__pay-direct { display: block; margin: 0 0 20px; } .pp-checkout__pay-direct .wc_payment_methods { list-style: none; margin: 0; padding: 0; } .pp-checkout__pay-direct .pp-checkout__pay-tile { border: 0; padding: 0; text-align: left; background: transparent; } .pp-checkout__pay-direct .pp-checkout__pay-tile-label, .pp-checkout__pay-direct .pp-checkout__pay-tile input[type="radio"] { display: none; } .pp-checkout__pay-direct .pp-checkout__pay-tile-fields { display: block !important; /* override inline style="display:none" from payment-method.php */ border-top: 0; padding: 0; margin-top: 0; } /* PayPal Payments stamps .payment_box with a light-purple bg + padding via its own stylesheet (equal specificity, loaded later). Hard-override so the Smart Buttons surface sits flush against our dark background. */ .pp-checkout__pay-direct .payment_box, .pp-checkout__pay-direct .pp-checkout__pay-tile-fields.payment_box { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; color: var(--paper) !important; } .pp-checkout__pay-direct .payment_box::before, .pp-checkout__pay-direct .payment_box::after { display: none !important; } /* Belt-and-suspenders: hide any residual

description that escapes the woocommerce_available_payment_gateways filter (e.g. if the gateway changes IDs in a future plugin update). */ .pp-checkout__pay-direct .payment_box > p { display: none; } /* PPCP renders its real Smart Buttons in a sibling .ppc-button-wrapper. Collapse the now-empty native WC #payment shell so it doesn't leave a purple/grey dead panel above the PayPal buttons. */ .pp-checkout__payment:has(.pp-checkout__pay-direct .payment_method_ppcp-gateway) { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .pp-checkout__payment:has(.pp-checkout__pay-direct .payment_method_ppcp-gateway) .pp-checkout__pay-direct, .pp-checkout__payment:has(.pp-checkout__pay-direct .payment_method_ppcp-gateway) .wc_payment_methods, .pp-checkout__payment:has(.pp-checkout__pay-direct .payment_method_ppcp-gateway) .pp-checkout__pay-tile, .pp-checkout__payment:has(.pp-checkout__pay-direct .payment_method_ppcp-gateway) .pp-checkout__place-order { height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* --- Coupon details in order summary aside ------------------------------- */ .pp-checkout__coupon { margin-top: 18px; border-top: .5px solid var(--line); padding-top: 14px; } .pp-checkout__coupon-summary { cursor: pointer; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); list-style: none; } .pp-checkout__coupon-summary::-webkit-details-marker { display: none; } .pp-checkout__coupon-summary::after { content: '+'; float: right; font-family: var(--mono); color: var(--mute-2); } .pp-checkout__coupon[open] .pp-checkout__coupon-summary::after { content: '−'; } .pp-checkout__coupon-body { margin-top: 10px; } .pp-checkout__coupon-body .form-row { margin: 0 0 8px; } .pp-checkout__coupon-body input[type="text"] { width: 100%; padding: 8px 10px; background: var(--ink-3); color: var(--paper); border: .5px solid var(--line); font-family: var(--mono); font-size: 12px; } .pp-checkout__coupon-body .button { background: var(--ink-3); color: var(--paper); border: .5px solid var(--line-2); padding: 8px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } html[data-theme="light"] .pp-checkout-screen .woocommerce-info, html[data-theme="light"] .pp-checkout-screen .woocommerce-message, html[data-theme="light"] .pp-checkout-screen .wc-address-validation-suggestion, html[data-theme="light"] .pp-checkout-screen [data-wc-address-suggestion], html[data-theme="light"] .pp-checkout-screen .woocommerce-shipping-validation-suggestion, html[data-theme="light"] .pp-checkout-screen .woocommerce-error { background: var(--ink-2); color: var(--paper); } html[data-theme="light"] .pp-checkout-screen :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) a, html[data-theme="light"] .pp-checkout-screen :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button { color: var(--paper); } html[data-theme="light"] .pp-checkout-screen :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) .button { background: var(--ink-3); border-color: var(--line-2); } /* --- Checkout responsive (tablet + mobile) ------------------------------ */ @media (max-width: 960px) { .pp-checkout__grid { grid-template-columns: 1fr; gap: 32px; } /* Order summary aside drops below the form on narrow viewports. */ .pp-checkout__aside { order: 2; } } @media (max-width: 720px) { .pp-checkout__progress { flex-wrap: wrap; gap: 8px 10px; margin-bottom: 24px; } .pp-checkout__progress-bar { display: none; } .pp-checkout__progress-label { font-size: 10px; } .pp-checkout__step-title { font-size: 26px; } .pp-checkout__pay-tiles { grid-template-columns: 1fr; } .pp-checkout__step-actions { flex-direction: column; } .pp-checkout__step-actions .btn { width: 100%; text-align: center; } .pp-checkout__summary-total-amount { font-size: 24px; } } /* === Account (Phase 1C) ================================================== */ .pp-account { padding: 48px 32px 80px; } .pp-account__welcome { margin-bottom: 32px; } .pp-account__welcome-title { font-size: 56px; margin: 0; font-weight: 500; letter-spacing: -.02em; line-height: 1; } .pp-account__welcome-title em { color: var(--chrome); font-style: italic; } .pp-account__container { padding: 48px 32px 80px; } .pp-account__grid { display: grid; grid-template-columns: 220px 1fr; gap: 40px; } .pp-account__panel { min-width: 0; } @media (max-width: 860px) { .pp-account__container { padding: 28px 16px 56px; } .pp-account__welcome { margin-bottom: 20px; } .pp-account__welcome-title { font-size: 36px; } .pp-account__grid { grid-template-columns: 1fr; gap: 24px; } .pp-account__nav { border-bottom: .5px solid var(--line); padding-bottom: 12px; } .pp-account__nav-list { display: flex; flex-wrap: wrap; gap: 0 14px; } .pp-account__nav-item { border-bottom: none; } .pp-account__nav-link { padding: 6px 0; font-size: 14px; } .pp-account__nav-arrow { display: none; } .pp-account__nav-logout { margin-top: 12px; } .pp-account__panel-header { flex-wrap: wrap; gap: 10px; } .pp-account__panel-header h2 { font-size: 26px; } } .pp-account__nav-eyebrow { margin-bottom: 14px; } .pp-account__nav-list { list-style: none; padding: 0; margin: 0; } .pp-account__nav-item { border-bottom: .5px solid var(--line); } .pp-account__nav-link { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 14px; color: var(--mute); text-decoration: none; cursor: pointer; } .pp-account__nav-item.is-active .pp-account__nav-link { color: var(--paper); font-weight: 600; } .pp-account__nav-arrow { color: var(--red); } .pp-account__nav-logout { margin-top: 20px; width: 100%; text-align: center; display: block; } .pp-account__panel-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; } .pp-account__panel-header h2 { font-size: 32px; margin: 0; font-weight: 500; } .pp-account__filters { display: flex; gap: 8px; } .pp-account__filters .is-active { background: var(--ink-2); color: var(--paper); } .pp-account__orders-table { border: .5px solid var(--line); } .pp-account__orders-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 0.8fr; align-items: center; padding: 18px 20px; border-bottom: .5px solid var(--line); } .pp-account__orders-row:last-child { border-bottom: none; } .pp-account__orders-row--head { background: var(--ink-2); padding: 14px 20px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .pp-account__orders-cell--right { text-align: right; } .pp-account__orders-id { font-size: 15px; font-weight: 600; color: var(--paper); text-decoration: none; } .pp-account__orders-id:hover { color: var(--red); } .pp-account__orders-meta { font-size: 10px; color: var(--mute-2); margin-top: 2px; letter-spacing: .08em; } .pp-account__orders-date { font-size: 13px; color: var(--mute); } .pp-account__orders-total { font-size: 16px; font-weight: 700; } .pp-account__orders-status { font-size: 10px; padding: 3px 7px; letter-spacing: .12em; border: .5px solid var(--line); color: var(--mute); } .pp-status--completed, .pp-status--processing, .pp-status--shipped { color: var(--ok); border-color: var(--ok); } .pp-status--failed, .pp-status--cancelled, .pp-status--refunded { color: var(--mute-2); border-color: var(--line-2); } .pp-account__orders-reorder { font-size: 10px; letter-spacing: .14em; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; text-decoration: none; color: var(--paper); cursor: pointer; } .pp-account__orders-reorder:hover { color: var(--red); border-bottom-color: var(--red); } .pp-account__orders-empty { padding: 60px 32px; text-align: center; border: .5px solid var(--line); } .pp-account__orders-empty .serif { font-size: 28px; margin-bottom: 8px; } .pp-account__pagination { margin-top: 24px; display: flex; gap: 6px; } .pp-account__pagination .page-numbers { padding: 6px 10px; border: .5px solid var(--line); color: var(--mute); } .pp-account__pagination .page-numbers.current { color: var(--paper); border-color: var(--paper); } .pp-account__form { display: grid; gap: 14px; max-width: 540px; } .pp-account__form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Neutralize WC core's `.woocommerce form .form-row-first/-last { width:47%; float:left }` so our 1fr 1fr grid drives sizing. */ .pp-account__form .form-row, .pp-account__form .form-row-first, .pp-account__form .form-row-last { width: auto; float: none; } .pp-account__form .form-row .fld, .pp-account__form .form-row input[type="text"], .pp-account__form .form-row input[type="email"], .pp-account__form .form-row input[type="password"] { width: 100%; box-sizing: border-box; } .pp-account__form-pw { border: .5px solid var(--line); padding: 18px; } .pp-account__form-pw legend { padding: 0 8px; } /* Logged-out /my-account/ — sign-in + register two-column. form-login.php carries its own .pp-account shell because WC bypasses my-account.php for guest users. */ .pp-account--guest .pp-account__welcome { margin-bottom: 40px; max-width: 720px; } .pp-account--guest .pp-account__welcome-title { font-size: 48px; } .pp-account__welcome-copy { font-size: 15px; color: var(--mute); margin: 12px 0 0; line-height: 1.5; max-width: 560px; } .pp-account-login { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 980px; } .pp-account-login__col { background: var(--ink-2); border: .5px solid var(--line); padding: 32px; } .pp-account-login__col--register { background: var(--tile); border-color: var(--line-2); } .pp-account-login__eyebrow { color: var(--mute); margin-bottom: 12px; } .pp-account-login__title { font-size: 28px; margin: 0 0 24px; font-weight: 500; line-height: 1.1; } .pp-account__form .form-row { margin: 0 0 16px; } .pp-account__form .form-row:last-of-type { margin-bottom: 0; } .pp-account__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .pp-account__form-grid .form-row { margin: 0 !important; } .pp-account__form .optional { color: var(--mute-2); margin-left: 2px; font-style: normal; } @media (max-width: 720px) { .pp-account__form-grid { grid-template-columns: 1fr; } } .pp-account-login__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px !important; } .pp-account-login__col--register .pp-account-login__actions { justify-content: flex-end; } .pp-account-login__remember { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--paper); cursor: pointer; } .pp-account-login__remember input { margin: 0; } .pp-account-login__forgot { margin: 14px 0 0; font-size: 11px; color: var(--mute); letter-spacing: .04em; } .pp-account-login__forgot a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; } .pp-account-login__forgot a:hover { color: var(--red); } .pp-account-login__legal { margin: 14px 0 0; font-size: 10px; color: var(--mute-2); letter-spacing: .04em; line-height: 1.5; } @media (max-width: 720px) { .pp-account-login { grid-template-columns: 1fr; gap: 20px; } .pp-account-login__col { padding: 24px; } .pp-account--guest .pp-account__welcome-title { font-size: 36px; } } .pp-account__view-order-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; } .pp-account__view-order-items { margin-top: 14px; } .pp-account__view-order-totals { margin-top: 14px; padding: 0 24px; } .pp-account__notes { list-style: none; padding: 0; margin: 8px 0 0; } .pp-account__notes li { padding: 10px 0; border-bottom: .5px solid var(--line); } /* Addresses listing — two-card grid (Billing / Shipping). */ .pp-account__addresses-intro { font-size: 14px; color: var(--mute); margin: 0 0 24px; max-width: 540px; } .pp-account__addresses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; } .pp-account__address-card { border: .5px solid var(--line); background: var(--ink-2); padding: 24px; display: flex; flex-direction: column; } .pp-account__address-eyebrow { color: var(--mute); margin-bottom: 12px; } .pp-account__address-title { font-size: 22px; margin: 0 0 14px; font-weight: 500; letter-spacing: -.01em; } .pp-account__address-body { font-style: normal; font-size: 14px; color: var(--paper); line-height: 1.6; margin: 0 0 18px; flex: 1; } .pp-account__address-empty { font-size: 14px; color: var(--mute); font-style: italic; margin: 0 0 18px; flex: 1; } .pp-account__address-action { align-self: flex-start; } @media (max-width: 720px) { .pp-account__addresses-grid { grid-template-columns: 1fr; } } /* === Garage (Phase 3) ==================================================== */ .pp-account__garage { display: block; } .pp-account__panel-sub { font-size: 14px; color: var(--mute); margin: 0 0 24px; max-width: 640px; line-height: 1.5; } .pp-garage__empty { border: .5px solid var(--line); padding: 32px 24px; text-align: center; margin-bottom: 24px; } .pp-garage__empty-msg { font-size: 14px; color: var(--mute); margin: 0; } .pp-garage__list { list-style: none; padding: 0; margin: 0 0 36px; display: grid; gap: 12px; } .pp-garage__card { display: flex; align-items: center; justify-content: space-between; gap: 16px; border: .5px solid var(--line); padding: 16px 20px; background: var(--ink-2); } .pp-garage__card.is-active { border-color: var(--paper); background: var(--tile); } .pp-garage__card-body { min-width: 0; flex: 1; } .pp-garage__card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pp-garage__card-title { font-size: 16px; font-weight: 600; color: var(--paper); letter-spacing: -.005em; } .pp-garage__card-meta { font-size: 11px; color: var(--mute-2); margin-top: 4px; letter-spacing: .06em; text-transform: uppercase; } .pp-garage__badge { font-size: 9px; letter-spacing: .14em; padding: 2px 7px; border: .5px solid var(--ok); color: var(--ok); } .pp-garage__card-actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; } .pp-garage__remove:hover { color: var(--red); border-color: var(--red); } .pp-garage__add { border-top: .5px solid var(--line); padding-top: 24px; } .pp-garage__add .eyebrow { margin-bottom: 10px; } .pp-garage__add-help { font-size: 13px; color: var(--mute); margin: 0 0 16px; line-height: 1.5; max-width: 560px; } .pp-garage__vin-form { max-width: 560px; margin: 0 0 18px; } .pp-garage__vin-row { display: flex; gap: 10px; align-items: stretch; } .pp-garage__vin-row .fld { flex: 1; min-width: 0; text-transform: uppercase; } @media (max-width: 720px) { .pp-garage__card { flex-direction: column; align-items: flex-start; } .pp-garage__card-actions { width: 100%; } .pp-cart__vin-row, .pp-garage__vin-row { flex-direction: column; } } /* === Thank-you (Phase 1C) ================================================ */ .pp-thankyou { text-align: center; max-width: 720px; margin: 0 auto; } .pp-thankyou__eyebrow { margin-bottom: 20px; color: var(--ok); } .pp-thankyou__eyebrow--failed { color: var(--red); } .pp-thankyou__title { font-size: 72px; margin: 0 0 20px; font-weight: 500; letter-spacing: -.02em; line-height: 1; } .pp-thankyou__title em { color: var(--chrome); font-style: italic; } .pp-thankyou__copy { font-size: 16px; color: var(--mute); max-width: 500px; margin: 0 auto 32px; } .pp-thankyou__card { display: inline-block; border: .5px solid var(--line); padding: 20px 32px; text-align: left; min-width: 440px; } .pp-thankyou__card-eyebrow { font-size: 10px; color: var(--mute); letter-spacing: .14em; } .pp-thankyou__card-num { font-size: 28px; font-weight: 700; margin-top: 4px; } .pp-thankyou__card-divider { border-top: .5px solid var(--line); margin: 14px 0; } .pp-thankyou__card-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); margin-top: 4px; } .pp-thankyou__card-row > span:last-child { color: var(--paper); font-family: 'JetBrains Mono', monospace; } .pp-thankyou__actions { margin-top: 32px; display: flex; gap: 12px; justify-content: center; } /* === Notice toast (Phase 1C) ============================================= */ .pp-notices { position: fixed; top: 84px; right: 24px; z-index: 1000; width: min(420px, calc(100vw - 48px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .pp-notices:empty { display: none; } .pp-notices > .woocommerce-message, .pp-notices > .woocommerce-error, .pp-notices > .woocommerce-info, .pp-notices > ul { list-style: none; margin: 0; padding: 14px 18px; background: var(--ink-2); border: .5px solid var(--line); border-left: 3px solid var(--ok); font-size: 13px; color: var(--paper); pointer-events: auto; display: flex; align-items: center; gap: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: pp-toast-in 220ms ease-out; } html[data-theme="light"] .pp-notices > * { box-shadow: 0 8px 24px rgba(0, 0, 0, .12); } .pp-notices > .woocommerce-error { border-left-color: var(--red); } .pp-notices > .woocommerce-info { border-left-color: var(--chrome); } .pp-notices li { list-style: none; margin: 0; flex: 1; } .pp-notices .button, .pp-notices a.button, .pp-notices a.wc-forward { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border: .5px solid var(--line); background: transparent; color: var(--paper); text-decoration: none; white-space: nowrap; flex-shrink: 0; } .pp-notices .button:hover, .pp-notices a.button:hover, .pp-notices a.wc-forward:hover { border-color: var(--paper); } .pp-notices.is-leaving > * { animation: pp-toast-out 200ms ease-in forwards; } @keyframes pp-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes pp-toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } } /* Override WC's absolutely-positioned check/error glyph so it flows in our flex toast. */ .pp-notices > .woocommerce-message, .pp-notices > .woocommerce-error, .pp-notices > .woocommerce-info { padding-left: 18px; position: relative; } .pp-notices > .woocommerce-message::before, .pp-notices > .woocommerce-error::before, .pp-notices > .woocommerce-info::before { position: static; top: auto; left: auto; margin: 0; padding: 0; font-size: 16px; line-height: 1; flex-shrink: 0; align-self: center; } /* ============================================================ SYNTHETIC-McCARTHY CHAT PICKER (staging only — Phase 1+) ============================================================ */ .pp-chat-picker { gap: 14px; min-height: 360px; } .pp-chat-picker__eyebrow { color: var(--mute); } .pp-chat-picker__title { margin: 0; line-height: 1.18; font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; min-height: 1.4em; /* keep card height stable while typing */ } .pp-chat-picker__caret { display: inline-block; width: 0.55ch; margin-left: 2px; border-right: 2px solid var(--paper); height: 1em; vertical-align: -2px; animation: pp-chat-caret-blink 1.05s steps(2, end) infinite; } .pp-chat-picker__caret.is-blinking { animation-duration: .9s; } @keyframes pp-chat-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .pp-chat-picker__panel { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 220px; } .pp-chat-picker__messages { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; padding: 4px 2px; scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; } .pp-chat-picker__messages:empty { min-height: 40px; } .pp-chat-picker__messages::-webkit-scrollbar { width: 6px; } .pp-chat-picker__messages::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 3px; } .pp-chat-msg { max-width: 92%; padding: 10px 12px; font-size: 14px; line-height: 1.5; border-radius: 2px; word-wrap: break-word; } .pp-chat-msg--user { align-self: flex-end; background: var(--ink-3); color: var(--paper); border: .5px solid var(--line); } .pp-chat-msg--assistant { align-self: flex-start; color: var(--paper); border-left: 2px solid var(--gold); padding-left: 14px; background: transparent; } .pp-chat-msg__text { white-space: pre-wrap; } .pp-chat-msg--error { align-self: stretch; background: rgba(196, 33, 28, .08); color: var(--red-2); border: .5px solid rgba(196, 33, 28, .35); font-size: 13px; } .pp-chat-msg--error .pp-chat-msg__text { margin: 0 0 8px 0; } .pp-chat-msg--error .pp-chat-msg__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 0.9em; } .pp-chat-msg--error .pp-chat-msg__retry { background: none; border: 1px solid currentColor; border-radius: 4px; padding: 4px 10px; cursor: pointer; font: inherit; color: inherit; } .pp-chat-msg--error .pp-chat-msg__retry:hover, .pp-chat-msg--error .pp-chat-msg__retry:focus { background: rgba(0, 0, 0, 0.05); } .pp-chat-msg--error .pp-chat-msg__cta { color: inherit; text-decoration: underline; } /* Multi-choice question + buttons (rendered inline as a chat message) */ .pp-chat-choice { align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 6px; } .pp-chat-choice__question { font-size: 13px; color: var(--mute); font-style: italic; margin-bottom: 2px; } .pp-chat-choice__options { display: grid; grid-template-columns: 1fr; gap: 8px; } @media (min-width: 520px) { .pp-chat-choice__options { grid-template-columns: 1fr 1fr; } } .pp-chat-choice__btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: var(--ink-2); border: .5px solid var(--line-2); color: var(--paper); padding: 10px 12px; cursor: pointer; transition: border-color .15s ease, background .15s ease; font: inherit; border-radius: 2px; } .pp-chat-choice__btn:hover:not(:disabled) { border-color: var(--red); background: var(--ink-3); } .pp-chat-choice__btn:disabled { opacity: .55; cursor: not-allowed; } .pp-chat-choice__btn.is-chosen { border-color: var(--red-2); background: rgba(196, 33, 28, .08); } .pp-chat-choice__label { font-size: 14px; font-weight: 500; } .pp-chat-choice__hint { font-size: 12px; color: var(--mute); margin-top: 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; } .pp-chat-choice__fallback { align-self: flex-start; color: var(--paper); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .pp-chat-choice__fallback:hover, .pp-chat-choice__fallback:focus { color: var(--red-2); } .pp-chat-choice__fallback.is-disabled { color: var(--mute); cursor: not-allowed; pointer-events: none; text-decoration: none; } /* Answer card */ .pp-chat-answer { align-self: stretch; display: flex; flex-direction: column; gap: 14px; background: var(--ink-3); border: .5px solid var(--line-2); padding: 16px; border-radius: 2px; } .pp-chat-answer__summary { font-size: 13px; color: var(--mute); line-height: 1.5; } .pp-chat-answer__alt-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-2); margin-top: 4px; } .pp-chat-answer__part { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 10px 0; border-top: .5px solid var(--line); } .pp-chat-answer__part:first-of-type, .pp-chat-answer__part.is-alt:first-of-type { border-top: 0; padding-top: 0; } .pp-chat-answer__alt-label + .pp-chat-answer__part { border-top: 0; padding-top: 0; } .pp-chat-answer__part.is-alt { opacity: .82; } .pp-chat-answer__pn { font-size: 13px; color: var(--gold); letter-spacing: .04em; } .pp-chat-answer__desc { font-size: 15px; color: var(--paper); font-weight: 500; } .pp-chat-answer__msrp { font-size: 13px; color: var(--mute); } .pp-chat-answer__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .pp-chat-answer__add, .pp-chat-answer__view { align-self: flex-start; text-decoration: none; font-size: 13px; padding: 8px 14px; } .pp-chat-answer__add.is-pending { opacity: .7; } .pp-chat-answer__add.is-added { background: var(--ok); } /* Compose row */ .pp-chat-picker__compose { display: flex; gap: 8px; align-items: stretch; flex-shrink: 0; } .pp-chat-picker__input { flex: 1 1 auto; background: var(--field); border: .5px solid var(--field-border); color: var(--paper); padding: 10px 12px; font: inherit; font-size: 14px; border-radius: 2px; min-width: 0; } .pp-chat-picker__input:focus { outline: none; border-color: var(--field-focus); } .pp-chat-picker__input:disabled { opacity: .55; } .pp-chat-picker__send { flex: 0 0 auto; padding: 10px 18px; font-size: 13px; } /* Phase 2.3 — Send button transformed into Cancel during streaming. */ .pp-chat-picker__send--cancel { background: #b00020; color: #fff; } .pp-chat-msg__canceled { color: var(--text-tertiary, #888); font-size: 11px; font-style: italic; } /* Phase 2.3 — slice 5: rehydrated-thread Start-fresh link. */ .pp-chat-picker__start-fresh { align-self: flex-end; background: transparent; border: 0; padding: 4px 8px; margin: 4px 0 0; font-family: inherit; font-size: 12px; color: var(--text-secondary, #555); text-decoration: underline; cursor: pointer; } .pp-chat-picker__start-fresh:hover { color: var(--ink); } /* Persistent off-home chat dock. */ .pp-chat-dock { position: fixed; right: clamp(12px, 2.5vw, 24px); top: clamp(12px, 2.5vw, 24px); bottom: clamp(12px, 2.5vw, 24px); z-index: 120; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; width: min(420px, calc(100vw - 24px)); pointer-events: none; } .pp-chat-dock > * { pointer-events: auto; } .pp-chat-dock.is-collapsed .pp-chat-picker--dock, .pp-chat-dock.is-open .pp-chat-dock__bubble { display: none; } .pp-chat-dock__bubble { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; padding: 0; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: var(--solid-fg); box-shadow: none; cursor: pointer; font-size: 0; line-height: 0; filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .36)); transition: filter .15s ease, transform .15s ease; } .pp-chat-dock__bubble-icon { display: block; width: 76px; height: 76px; } .pp-chat-dock__bubble:hover, .pp-chat-dock__bubble:focus-visible { background-color: transparent; filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .42)); transform: translateY(-1px); } .pp-chat-picker--dock { display: flex; flex-direction: column; width: 100%; min-height: min(560px, 100%); max-height: 100%; padding: 16px; background: var(--ink-2); border: .5px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .36); } .pp-chat-picker--dock.pp-chat-picker--grown { min-height: min(640px, 100%); } .pp-chat-dock__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .pp-chat-dock__minimize { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: .5px solid var(--line-2); background: transparent; color: var(--paper); cursor: pointer; font-size: 20px; line-height: 1; } .pp-chat-dock__minimize:hover, .pp-chat-dock__minimize:focus-visible { border-color: var(--paper); } .pp-chat-picker--dock .pp-chat-picker__title { font-size: 22px; } .pp-chat-picker--dock .pp-chat-picker__panel { min-height: 0; } .pp-chat-picker--dock .pp-chat-picker__messages { max-height: none; min-height: 0; } /* Phase 2.3 — slice 6: switch-vehicle dialog. */ .pp-vehicle-change-dialog { border: 0; border-radius: 8px; padding: 24px; max-width: 440px; width: 90%; background: var(--paper); color: var(--ink); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18); } .pp-vehicle-change-dialog::backdrop { background: rgba(0, 0, 0, 0.4); } .pp-vehicle-change-dialog__row { display: flex; gap: 8px; margin: 16px 0; } .pp-vehicle-change-dialog__row select { flex: 1; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); } .pp-vehicle-change-dialog__actions { display: flex; gap: 8px; justify-content: flex-end; } .pp-vehicle-change-dialog__error { margin-top: 12px; padding: 8px 12px; color: #b00020; background: rgba(176, 0, 32, 0.08); border-radius: 4px; font-size: 13px; } /* ───────────────────────────────────────────────────────────── Chat product sidebar (v1.10.0). ───────────────────────────────────────────────────────────── */ .pp-sidebar { background: #fff; border: 1px solid #e5e1d8; border-radius: 6px; overflow: hidden; align-self: start; } .pp-hidden { display: none !important; } .pp-sidebar .pp-section + .pp-section { border-top: 1px solid #e5e1d8; } .pp-section.is-collapsed [data-section-body], .pp-section.is-collapsed .pp-sidebar__cart-pane, .pp-section.is-collapsed .pp-cart-foot { display: none; } .pp-section-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 16px; background: #fafaf6; cursor: pointer; user-select: none; border: none; text-align: left; font: inherit; } .pp-section-head__left { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: #1a1a1a; } .pp-section-head__caret { font-size: 10px; color: #6b6357; transition: transform 200ms ease-out; } .pp-section.is-collapsed .pp-section-head__caret { transform: rotate(-90deg); } .pp-section-head__count { background: #1a1a1a; color: #fff; border-radius: 9px; padding: 1px 7px; font-size: 10px; line-height: 1.4; } .pp-section-head--cart .pp-section-head__count { background: #c4211c; } .pp-section-body { padding: 4px 0; } /* Sub-heading inside the middle sidebar section, used when companions and alternatives both render. Quiet by design — small, uppercase, low-contrast — so the row content stays the visual focus. Hidden when the section has only one group (no label is rendered then). */ .pp-section__sublabel { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3, #888); padding: 0 16px; margin: 0.5rem 0 0.25rem; } .pp-section__sublabel:first-child { margin-top: 0; } .pp-row { display: flex; gap: 12px; padding: 12px 16px; transition: opacity 200ms, max-height 200ms, padding 200ms; } .pp-row + .pp-row { border-top: 1px solid #f0ecdf; } .pp-row__img { width: 52px; height: 52px; flex-shrink: 0; background: #f4f1ec; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #b5ac9c; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; overflow: hidden; } .pp-row__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .pp-row__body { flex: 1; min-width: 0; } .pp-pn { font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; color: #1a1a1a; } .pp-desc { font-size: 12px; color: #6b6357; margin: 2px 0; line-height: 1.35; } .pp-price { font-size: 13px; color: #c4211c; font-weight: 700; } .pp-actions { display: flex; gap: 6px; margin-top: 8px; } .pp-btn { font-size: 11px; padding: 4px 10px; border-radius: 3px; border: 1px solid #1a1a1a; background: #fff; color: #1a1a1a; cursor: pointer; font-weight: 500; text-decoration: none; display: inline-block; } .pp-btn--primary { background: #c4211c; color: #fff; border-color: #c4211c; } .pp-btn.is-pending { opacity: 0.6; pointer-events: none; } .pp-btn:disabled { background: #f4f1ec; color: #8a8175; border-color: #d8d3c7; cursor: not-allowed; } .pp-qty { display: inline-flex; align-items: center; border: 1px solid #d8d3c7; border-radius: 3px; overflow: hidden; margin-top: 6px; } .pp-qty button { background: #fafaf6; border: none; padding: 2px 8px; cursor: pointer; font-size: 12px; color: #6b6357; } .pp-qty span { padding: 2px 10px; font-size: 12px; font-weight: 600; border-left: 1px solid #d8d3c7; border-right: 1px solid #d8d3c7; } .pp-remove { margin-left: 8px; font-size: 11px; color: #6b6357; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; } .pp-cart-foot { padding: 12px 16px; background: #fafaf6; border-top: 1px solid #f0ecdf; display: flex; align-items: center; justify-content: space-between; font-size: 12px; } .pp-cart-foot strong { font-size: 14px; color: #c4211c; } .pp-cart-foot a { color: #1a1a1a; text-decoration: underline; font-weight: 600; } .pp-cart-foot a[aria-disabled="true"] { pointer-events: none; opacity: 0.5; } .pp-cart-empty { padding: 16px; color: #6b6357; font-size: 13px; text-align: center; } /* Hero 3-col grid when sidebar is enabled (v1.10.0). */ .pp-hero--sidebar-open .pp-hero__inner { grid-template-columns: 1fr 1.2fr 1.1fr; gap: 32px; align-items: stretch; } .pp-hero--sidebar-open .pp-hero__copy { align-self: start; } .pp-chat-picker { min-height: 480px; transition: min-height 250ms ease-out; } .pp-chat-picker--grown { min-height: 640px; } @media (max-width: 1023px) { .pp-hero--sidebar-open .pp-hero__inner { grid-template-columns: 1fr; gap: 24px; } .pp-sidebar { margin-top: 8px; } .pp-chat-picker--grown { min-height: 520px; } } @media (max-width: 1280px) and (min-width: 1024px) { .pp-hero--sidebar-open .pp-hero__inner { grid-template-columns: 1fr 1.1fr 1fr; gap: 24px; } } /* === Phase 2.3 — Mobile chat treatment (medium) ============================ */ @media (max-width: 768px) { .pp-hero { padding: 32px 0 24px; } .pp-hero__sub { display: none; } .pp-hero__title { font-size: 32px; line-height: 1.05; } .pp-hero__title em { display: inline; } .pp-hero__title em::before { content: ' '; } .pp-hero__inner { gap: 16px; } .pp-hero__copy { padding-bottom: 0; } .pp-chat-picker { min-height: min(70dvh, 70vh); display: flex; flex-direction: column; } .pp-chat-picker--grown { min-height: min(72dvh, 72vh); } .pp-chat-picker__panel { flex: 1; display: flex; flex-direction: column; min-height: 0; } .pp-chat-picker__messages { flex: 1; min-height: 0; } .pp-chat-picker__compose { position: sticky; bottom: 0; background: var(--paper); padding-top: 8px; } /* Touch targets ≥ 44px */ .pp-chat-picker__send, .pp-chat-choice__btn { min-height: 44px; } .pp-chat-picker__input { min-height: 44px; font-size: 16px; } .pp-chat-dock { right: 8px; top: 8px; bottom: 8px; width: calc(100vw - 16px); } .pp-chat-picker--dock { min-height: min(76dvh, 100%); max-height: 100%; } .pp-chat-picker--dock.pp-chat-picker--grown { min-height: min(82dvh, 100%); } .pp-chat-picker--dock .pp-chat-picker__compose { position: static; background: transparent; padding-top: 0; } } /* === Phase 2.3 — Empty-answer CTA row ====================================== */ .pp-chat-cta-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; margin: 8px 0; background: rgba(255, 255, 255, 0.04); border-left: 3px solid var(--rule); border-radius: 4px; font-size: 13px; } .pp-chat-cta-row__label { flex-basis: 100%; font-weight: 600; color: var(--ink); margin-bottom: 4px; } .pp-chat-cta-row__chip { background: var(--paper); border: 1px solid var(--rule); color: var(--ink); padding: 6px 12px; border-radius: 16px; font-size: 12px; text-decoration: none; cursor: pointer; line-height: 1.2; } .pp-chat-cta-row__chip:hover { background: var(--ink); color: var(--paper); } .pp-chat-cta-row__pn-input { flex: 1; min-width: 200px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; font: inherit; background: var(--paper); color: var(--ink); } /* ---------------------------------------------------------------------- * Home — boutique subcategory carousel * ---------------------------------------------------------------------- */ .pp-boutique { /* Inherits .pp-section padding/container. */ } .pp-boutique__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } .pp-boutique__shop-all { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; text-decoration: none; color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity 200ms ease; } .pp-boutique__shop-all:hover { opacity: 0.7; } .pp-boutique__carousel { position: relative; margin-top: 2rem; } .pp-boutique__viewport { overflow: hidden; position: relative; } .pp-boutique__track { display: flex; list-style: none; margin: 0; padding: 0; gap: 1.25rem; transition: transform 480ms cubic-bezier(.2, .7, .2, 1); will-change: transform; } .pp-boutique__track[data-pp-boutique-no-anim] { transition: none; } .pp-boutique__slide { flex: 0 0 calc((100% - (1.25rem * 3)) / 4); min-width: 0; } .pp-boutique__card { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--ink, #14171b); color: #fff; text-decoration: none; isolation: isolate; transition: transform 320ms ease; } .pp-boutique__card:hover { transform: translateY(-4px); } .pp-boutique__card:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .pp-boutique__card-img-wrap { position: absolute; inset: 0; display: block; } .pp-boutique__card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; } .pp-boutique__card:hover .pp-boutique__card-img { transform: scale(1.04); } .pp-boutique__card-scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(20, 23, 27, 0.85) 0%, rgba(20, 23, 27, 0.45) 35%, rgba(20, 23, 27, 0.0) 60% ); pointer-events: none; } .pp-boutique__card-meta { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: 0.25rem; z-index: 1; } .pp-boutique__card-name { font-size: 1.5rem; line-height: 1.1; color: #fff; } .pp-boutique__card-count { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); } .pp-boutique__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid rgba(20, 23, 27, 0.2); background: #fff; color: var(--ink, #14171b); font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 2; transition: opacity 200ms ease, transform 200ms ease; } .pp-boutique__nav:hover { transform: translateY(-50%) scale(1.05); } .pp-boutique__nav--prev { left: -1.25rem; } .pp-boutique__nav--next { right: -1.25rem; } .pp-boutique__nav[disabled] { opacity: 0.3; cursor: default; } .pp-boutique__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; } .pp-boutique__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(20, 23, 27, 0.25); cursor: pointer; padding: 0; transition: background-color 200ms ease, transform 200ms ease; } .pp-boutique__dots button[aria-current="true"] { background: var(--ink, #14171b); transform: scale(1.4); } /* Tablet — 3 cards visible */ @media (max-width: 1023px) { .pp-boutique__slide { flex: 0 0 calc((100% - (1.25rem * 2)) / 3); } .pp-boutique__nav--prev { left: 0.5rem; } .pp-boutique__nav--next { right: 0.5rem; } } /* Phone — 2 cards visible with a peek of the next */ @media (max-width: 719px) { .pp-boutique__slide { flex: 0 0 calc((100% - 1.25rem) / 2 - 1rem); } .pp-boutique__card-name { font-size: 1.15rem; } .pp-boutique__nav { width: 2rem; height: 2rem; font-size: 1.15rem; } } /* Reduced motion: kill the transform transitions. */ @media (prefers-reduced-motion: reduce) { .pp-boutique__track, .pp-boutique__card, .pp-boutique__card-img, .pp-boutique__nav, .pp-boutique__dots button { transition: none !important; } } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } /* ---------------------------------------------------------------------- * Home — Shop by category cards: optional photo at top * ---------------------------------------------------------------------- */ .pp-cat-card--has-photo { padding-top: 0; overflow: hidden; } .pp-cat-card__photo-wrap { display: block; margin: -22px -22px 14px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink, #14171b); } .pp-cat-card__photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; } .pp-cat-card--has-photo:hover .pp-cat-card__photo { transform: scale(1.04); } /* ---------------------------------------------------------------------- * Chat — typing indicator (v1.20.0) * Three-dot pulse rendered between submit and first streamed token. * Lifecycle managed in assets/js/chat.js (showTypingIndicator / * hideTypingIndicator). Theme tokens --field/--paper carry it across * light/dark modes. * ---------------------------------------------------------------------- */ .pp-chat-typing-indicator { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--field, #1a1d22); align-self: flex-start; margin: 4px 0; max-width: min(100%, 340px); } .pp-chat-typing-indicator__dots { display: inline-flex; gap: 4px; align-items: center; flex: 0 0 auto; } .pp-chat-typing-indicator__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--paper, #f3ede0); opacity: 0.4; animation: pp-chat-typing 1.2s infinite ease-in-out; } .pp-chat-typing-indicator__dot:nth-child(2) { animation-delay: 0.2s; } .pp-chat-typing-indicator__dot:nth-child(3) { animation-delay: 0.4s; } .pp-chat-typing-indicator__text { color: var(--paper, #f3ede0); font-size: 12px; line-height: 1.25; opacity: 0.86; } @keyframes pp-chat-typing { 0%, 80%, 100% { opacity: 0.4; } 40% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pp-chat-typing-indicator__dot { animation: none; opacity: 0.7; } }