/** * main-skins — theme-level CSS. * * Bundled at theme root and enqueued unconditionally via inc/enqueue.php. * Scope: branding chrome that isn't owned by an individual block — * - header (bst-header) * - footer (bst-footer) * - logo (bst-logo) * - shared button/icon-button primitives (bst-btn, bst-icon-btn) * * Block-specific styles live in src/blocks//style-index.css and * are enqueued by register_block_type() only when the block is present. * * All design tokens come from theme.json — no hardcoded colors, fonts, * or radii. The values referenced via var(--wp--…) are defined in the * settings section of theme.json (resolved to CSS custom properties by * WordPress). */ /* ──────────── Container ──────────── */ .bst-container { box-sizing: border-box; /* BST-83 fix: max-width = total width incl. padding (matches design spec left=80px) */ max-width: 80rem; /* matches theme.json settings.layout.wideSize = 1280px */ margin-inline: auto; padding-inline: var(--wp--preset--spacing--50); } /* ──────────── Logo (shared) ──────────── */ .bst-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--wp--preset--color--contrast); text-decoration: none; font-family: var(--wp--preset--font-family--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .bst-logo:hover { color: var(--wp--preset--color--accent-1); } .bst-logo-mark { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .bst-logo-mark img { display: block; width: 28px; height: 28px; } /* ──────────── Header ──────────── */ .bst-header { background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--neutral); position: relative; z-index: 50; } .bst-header-inner { display: flex; align-items: center; gap: var(--wp--preset--spacing--50); padding-block: 16px; } .bst-nav { display: flex; align-items: center; gap: var(--wp--preset--spacing--50); flex: 1; margin-left: var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--heading); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .bst-nav a { color: var(--wp--preset--color--contrast-muted); text-decoration: none; padding: 8px 0; transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .bst-nav a:hover, .bst-nav a.active, .bst-nav-collections-trigger:hover, .bst-nav-collections-trigger.active, .bst-nav-collections.is-open .bst-nav-collections-trigger { color: var(--wp--preset--color--accent-1); } /* BST-62: Collections dropdown — trigger button styled like the other nav links, dropdown panel anchored below it. */ .bst-nav-collections { position: relative; } .bst-nav-collections-trigger { background: transparent; border: 0; padding: 8px 0; color: var(--wp--preset--color--contrast-muted); font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); } .bst-nav-caret { font-size: 10px; transition: transform 200ms; } .bst-nav-collections.is-open .bst-nav-caret { transform: rotate(180deg); } .bst-nav-collections-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 8px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); padding: 6px 0; z-index: 100; display: flex; flex-direction: column; } .bst-nav-collections-menu[hidden] { display: none; } .bst-nav-collections-item { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px !important; color: var(--wp--preset--color--contrast-muted) !important; text-decoration: none; text-transform: none; letter-spacing: 0; font-size: 13px; font-family: var(--wp--preset--font-family--body, inherit); font-weight: 400; transition: background 150ms, color 150ms; } .bst-nav-collections-item:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast) !important; } .bst-nav-collections-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bst-nav-collections-count { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--accent-1); font-weight: 700; } .bst-nav-collections-all { display: block !important; padding: 10px 14px !important; margin-top: 6px; border-top: 1px solid var(--wp--preset--color--neutral); color: var(--wp--preset--color--accent-1) !important; font-family: var(--wp--preset--font-family--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-decoration: none; } .bst-nav-collections-all:hover { background: var(--wp--preset--color--base); } .bst-header-actions { display: flex; align-items: center; gap: 10px; } /* Search */ .bst-search { box-sizing: border-box; /* height: 36px = total including border */ display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); color: var(--wp--preset--color--contrast-muted); font-size: 13px; min-width: 220px; } .bst-search:focus-within { border-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast); } .bst-search input { background: transparent; border: 0; outline: 0; color: inherit; font-family: inherit; font-size: inherit; flex: 1; min-width: 0; padding: 0; } .bst-search input::placeholder { color: var(--wp--preset--color--contrast-faint); } .bst-search-icon { flex-shrink: 0; color: var(--wp--preset--color--contrast-faint); } /* Icon buttons */ .bst-icon-btn { box-sizing: border-box; /* border included in 40×40 total */ width: 40px; /* BST-83: design spec = 40px × 40px total (border-box) */ height: 40px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); color: var(--wp--preset--color--contrast-muted); text-decoration: none; transition: color 200ms, border-color 200ms; position: relative; } .bst-icon-btn:hover { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); } .bst-icon-btn-sm { width: 32px; height: 32px; } .bst-icon-btn .badge { position: absolute; top: -6px; right: -6px; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); border-radius: var(--wp--custom--border--radius--pill); font-family: var(--wp--preset--font-family--mono); font-size: 9px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; } /* BST-97: .bst-header-signin ghost-link removed — single solid CTA is used instead. */ /* Buttons */ .bst-btn { box-sizing: border-box; /* BST-83: height = total including border */ display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding-inline: 18px; border-radius: var(--wp--custom--border--radius--sm); font-family: var(--wp--preset--font-family--heading); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms; border: 1px solid transparent; } .bst-btn-sm { height: 40px; padding-inline: 14px; font-size: 12px; } .bst-btn-primary { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); } .bst-btn-primary:hover { background: var(--wp--preset--color--accent-1-hover, var(--wp--preset--color--accent-1)); filter: brightness(1.1); } .bst-btn-ghost { background: transparent; color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--neutral-strong); } .bst-btn-ghost:hover { border-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-1); } /* ──────────── Footer ──────────── */ .bst-footer { background: var(--wp--preset--color--base); border-top: 1px solid var(--wp--preset--color--neutral); padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40); color: var(--wp--preset--color--contrast-muted); font-size: 14px; } .bst-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--50); border-bottom: 1px solid var(--wp--preset--color--neutral); } .bst-footer-brand .bst-logo { margin-bottom: 14px; } .bst-footer-tagline { font-size: 13px; line-height: 1.6; max-width: 280px; margin: 0 0 14px; } .bst-footer-social { display: flex; gap: 8px; } .bst-footer-col h4, .bst-footer-col-label { font-family: var(--wp--preset--font-family--heading); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; /* UX-026 v0.1.15: footer col nav labels — use muted (6.4:1) not faint (3.1:1). UX-028 v0.1.15 amendment: changed from

to

to fix heading-order violation (h2 → h4 without h3). */ color: var(--wp--preset--color--contrast-muted); margin: 0 0 14px; font-weight: 600; } .bst-footer-links { display: flex; flex-direction: column; gap: 8px; } .bst-footer-links a { color: var(--wp--preset--color--contrast-muted); text-decoration: none; transition: color 200ms; } .bst-footer-links a:hover { color: var(--wp--preset--color--accent-1); } .bst-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-faint); flex-wrap: wrap; } .bst-footer-version { letter-spacing: 0.06em; } /* BST-193: legal-entity disclosure line — muted, sits below .bst-footer-bottom */ .bst-footer-legal { margin: var(--wp--preset--spacing--30) 0 0; padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--wp--preset--color--neutral); font-family: var(--wp--preset--font-family--body); font-size: 11px; line-height: 1.6; color: var(--wp--preset--color--contrast-faint); max-width: 640px; } /* ──────────── Trust strip (inline copy used inside footer.html) ──────────── */ /* Block-scoped copy lives in src/blocks/footer-trust-strip/style-index.css — * the same rules also need to apply to the inline copy inside parts/footer.html, * so they're duplicated here at the .bst-trust-strip level (no block wrapper). */ .bst-footer .bst-trust-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bst-footer .bst-trust-icon { height: 30px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); color: #1a1a1a; } .bst-footer .bst-trust-icon svg { flex-shrink: 0; display: block; } .bst-footer .bst-trust-label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; font-family: var(--wp--preset--font-family--body); } /* ──────────── Body resets ──────────── */ /* theme.json controls the bulk; this fixes a few WC defaults that leak through. */ html, body { min-height: 100%; } /* ──────────── Global focus visibility (WCAG 2.4.7) ──────────── */ /* A single universal rule replaces per-component outlines. accent-1 gives */ /* sufficient contrast on both dark base (#0d100c) and raised (#1d211a) surfaces. */ :focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 2px; border-radius: 4px; } /* WooCommerce notices look hideous by default in dark theme — quick neutralisation */ .woocommerce-notices-wrapper { max-width: 80rem; margin: 1rem auto; padding-inline: var(--wp--preset--spacing--50); } /* ════════════════════════════════════════════════════════════════════════════ BST-166: WooCommerce / WC-Blocks notices in the BST tactical design. Both the classic WC notices (.woocommerce-message/-error/-info, shown by the shortcode cart/account flows) AND the WC-Blocks notice banner (.wc-block-components-notice-banner, shown by the Blocks cart/checkout on coupon add/remove + validation errors) ship un-themed default styling that looks broken on the dark graphite surface. Restyle to graphite cards with a mono label, accent-1 success rail, and a warning-red error rail. ════════════════════════════════════════════════════════════════════════════ */ .woocommerce-message, .woocommerce-error, .woocommerce-info, .wc-block-components-notice-banner { background: var(--wp--preset--color--base-elevated) !important; border: 1px solid var(--wp--preset--color--neutral) !important; border-left-width: 3px !important; border-radius: var(--wp--custom--border--radius--sm) !important; color: var(--wp--preset--color--contrast) !important; font-family: var(--wp--preset--font-family--body) !important; font-size: 13px !important; padding: 12px 16px !important; margin: 0 0 12px !important; box-shadow: none !important; list-style: none !important; } /* Success (coupon applied, etc.) — accent-1 lime rail */ .woocommerce-message, .wc-block-components-notice-banner.is-success { border-left-color: var(--wp--preset--color--accent-1) !important; } /* Info (coupon removed, generic notices) — muted rail */ .woocommerce-info, .wc-block-components-notice-banner.is-info { border-left-color: var(--wp--preset--color--contrast-muted) !important; } /* Error (invalid coupon, validation) — warning red rail */ .woocommerce-error, .wc-block-components-notice-banner.is-error { border-left-color: #ff6b6b !important; } /* Banner icon + content alignment */ .wc-block-components-notice-banner .wc-block-components-notice-banner__content { color: var(--wp--preset--color--contrast) !important; font-size: 13px !important; } .wc-block-components-notice-banner > svg { fill: currentColor !important; } .wc-block-components-notice-banner.is-success > svg { fill: var(--wp--preset--color--accent-1) !important; } .wc-block-components-notice-banner.is-error > svg { fill: #ff6b6b !important; } /* Dismiss button */ .wc-block-components-notice-banner .wc-block-components-button.wc-block-components-notice-banner__dismiss { color: var(--wp--preset--color--contrast-faint) !important; } /* Classic-notice action links (e.g. "View cart") as ghost buttons */ .woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button { background: transparent !important; border: 1px solid var(--wp--preset--color--neutral-strong) !important; color: var(--wp--preset--color--contrast) !important; border-radius: var(--wp--custom--border--radius--sm) !important; font-family: var(--wp--preset--font-family--mono) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; padding: 6px 12px !important; } /* Hide deprecated WP title elements that double up against our custom header */ .wp-block-site-title { display: none; } /* Header/footer chrome — desktop default (mobile rules at bottom of file, v0.1.10) */ /* Hide mobile-only chrome by default (desktop ≥ 880px) */ .bst-hamburger, .bst-nav-toggle, .bst-mobile-drawer, .bst-drawer-backdrop, .bst-search-mobile, .bst-mobile-nav, .bst-mobile-drawer-head, .bst-mobile-drawer-footer, .bst-show-filters-btn, .bst-filters-toggle, .bst-filters-backdrop, .bst-mobile-filters-head, .bst-mobile-filters-apply { display: none; } /* ──────────── Homepage (front-page.html) ──────────── */ /* Hero */ .bst-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--wp--preset--color--neutral); } .bst-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 80% 30%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14)), transparent 60%), radial-gradient(ellipse 50% 60% at 20% 80%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14)), transparent 60%); pointer-events: none; z-index: 0; } .bst-hero > .wp-block-group { position: relative; z-index: 1; } .bst-hero-grid { gap: var(--wp--preset--spacing--60); align-items: center; } .bst-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--wp--custom--border--radius--pill); background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-1); font-family: var(--wp--preset--font-family--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--wp--preset--spacing--40); } .bst-eyebrow .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--accent-1); box-shadow: 0 0 0 0 var(--wp--preset--color--accent-1); animation: bst-pulse 1.6s infinite; } @keyframes bst-pulse { 0% { box-shadow: 0 0 0 0 var(--wp--preset--color--accent-1); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .bst-hero-h1 { font-family: var(--wp--preset--font-family--heading); font-size: clamp(40px, 6vw, 76px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; margin: 0 0 var(--wp--preset--spacing--40); } .bst-hero-h1 .accent { color: var(--wp--preset--color--accent-1); font-style: normal; position: relative; } .bst-hero-h1 .accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.08em; background: var(--wp--preset--color--accent-1); opacity: .25; } .bst-hero-lead { font-size: 18px; color: var(--wp--preset--color--contrast-muted); line-height: 1.6; max-width: 560px; margin-bottom: var(--wp--preset--spacing--50); } .bst-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } /* Hero spotlight card */ .bst-spotlight { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--lg); padding: var(--wp--preset--spacing--40); box-shadow: var(--wp--custom--shadow--md); position: relative; } .bst-spotlight-tag { position: absolute; top: -12px; left: var(--wp--preset--spacing--40); padding: 4px 10px; border-radius: var(--wp--custom--border--radius--sm); background: var(--wp--preset--color--rarity-covert); color: white; font-family: var(--wp--preset--font-family--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } .bst-spotlight-img { aspect-ratio: 4/3; border-radius: var(--wp--custom--border--radius--md); overflow: hidden; margin-bottom: var(--wp--preset--spacing--40); background: radial-gradient(circle at 30% 40%, var(--wp--preset--color--rarity-covert), transparent 55%), linear-gradient(135deg, var(--wp--preset--color--base-raised), var(--wp--preset--color--base)); position: relative; } .bst-spotlight-img::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 135deg, transparent 0 18px, rgba(255, 255, 255, .02) 18px 36px); } .bst-spotlight-nm { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .bst-spotlight-h3 { font-family: var(--wp--preset--font-family--heading); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 4px; } /* UX-028 v0.1.15: spotlight sub-text was inside

(invalid heading use). Now a

styled to match the old appearance. */ .bst-spotlight-sub { font-size: 14px; font-weight: 500; color: var(--wp--preset--color--contrast-muted); letter-spacing: 0; margin: 0 0 var(--wp--preset--spacing--40); line-height: 1.4; } .bst-spotlight-row { display: flex; justify-content: space-between; align-items: center; margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--wp--preset--color--neutral); gap: 12px; } .bst-spotlight-label { font-family: var(--wp--preset--font-family--mono); font-size: 10px; /* UX-026 v0.1.15: "PRICE" label on featured product card — meaningful info */ color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .bst-spotlight-price { font-family: var(--wp--preset--font-family--heading); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); } /* ──────────── v0.1.17: Sprint B — hp-hero design-parity classes ──────────── */ .hp-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); align-items: center; } @media (min-width: 901px) { .hp-hero-grid { grid-template-columns: 1.1fr 1fr; } } .hp-hero-col--aside { /* Hidden on mobile — desktop-only column; prevents layout oscillation (CLS). Shown only inside the two-column grid breakpoint (≥901px). */ display: none; min-width: 0; } @media (min-width: 901px) { .hp-hero-col--aside { display: block; } } .hp-eyebrow { /* Inherits from .bst-eyebrow above; class kept for parity selector hooks. */ } .hp-h1 { /* Reserve space for the final 2-line wrapped state on mobile * (font-size clamp min ~40px × line-height 1.0 × 2 lines = 2.0em). * 2.2em adds a small buffer. Without this the typewriter animation * causes H1 to grow from 1-line to 2-line height mid-reveal, * shifting lead/CTA/meta down and producing CLS ~0.2074. */ min-height: 2.2em; } .hp-h1 .accent { color: var(--wp--preset--color--accent-1); font-style: normal; position: relative; } .hp-h1 .accent::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.08em; background: var(--wp--preset--color--accent-1); opacity: .25; } /* Typewriter caret — blinks while typing, hidden once done. */ .hp-typewriter.typing::after { content: '|'; display: inline-block; margin-left: 2px; color: var(--wp--preset--color--accent-1); animation: hp-caret 0.9s steps(1) infinite; } @keyframes hp-caret { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { /* JS already skips typewrite() and calls render() directly, so the * caret pseudo-element is never added. These rules are a CSS-only * safety net in case the JS hasn't fired yet. */ .hp-typewriter.typing::after { animation: none; content: none; } } .hp-lead { font-size: 18px; color: var(--wp--preset--color--contrast-muted); line-height: 1.6; max-width: 560px; margin: 0 0 var(--wp--preset--spacing--50); } .hp-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } .hp-hero-meta { display: flex; gap: var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--neutral); font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.06em; flex-wrap: wrap; } .hp-hero-meta .item .num { font-family: var(--wp--preset--font-family--heading); font-size: 22px; color: var(--wp--preset--color--contrast); font-weight: 700; letter-spacing: -0.01em; display: block; margin-bottom: 2px; } /* Grail Spotlight aside */ .hp-spotlight { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--lg); padding: var(--wp--preset--spacing--40); box-shadow: var(--wp--custom--shadow--md); position: relative; } .hp-spotlight .grail-tag { position: absolute; top: -12px; left: var(--wp--preset--spacing--40); padding: 4px 10px; border-radius: var(--wp--custom--border--radius--sm); background: var(--wp--preset--color--rarity-covert); color: #fff; font-family: var(--wp--preset--font-family--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; } .hp-spotlight .img-wrap { display: block; aspect-ratio: 4 / 3; border-radius: var(--wp--custom--border--radius--md); overflow: hidden; margin-bottom: var(--wp--preset--spacing--40); background: radial-gradient(circle at 30% 40%, var(--wp--preset--color--rarity-covert), transparent 55%), linear-gradient(135deg, var(--wp--preset--color--base-raised), var(--wp--preset--color--base)); } .hp-spotlight .img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; } .hp-spotlight .img-wrap .img-placeholder { display: block; width: 100%; height: 100%; } .hp-spotlight .nm { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .hp-spotlight .hp-spotlight-h3 { font-family: var(--wp--preset--font-family--heading); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--wp--preset--spacing--40); color: var(--wp--preset--color--contrast); } .hp-spotlight .hp-spotlight-h3 small { display: block; font-size: 14px; font-weight: 500; color: var(--wp--preset--color--contrast-muted); letter-spacing: 0; margin-top: 6px; } .hp-spotlight .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--wp--preset--color--neutral); } .hp-spotlight .row .label { font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .hp-spotlight .row .price { font-family: var(--wp--preset--font-family--heading); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); } .hp-spotlight .row .price .woocommerce-Price-amount, .hp-spotlight .row .price bdi { font: inherit; color: inherit; } @media (max-width: 600px) { .hp-hero-meta { gap: var(--wp--preset--spacing--30); } .hp-hero-meta .item .num { font-size: 18px; } .hp-spotlight .hp-spotlight-h3 { font-size: 22px; } } /* ──────────────────────────────────────────────────────────────────────── */ /* Section heads */ .bst-section { border-bottom: 1px solid var(--wp--preset--color--neutral); } .bst-section-h { margin-bottom: var(--wp--preset--spacing--50); } .bst-section-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--accent-1); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .bst-section-h2 { font-family: var(--wp--preset--font-family--heading); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } .bst-section-sub { color: var(--wp--preset--color--contrast-muted); margin-top: 8px; font-size: 15px; line-height: 1.5; max-width: 540px; } /* Featured products grid */ .bst-featured-grid .wp-block-post-template, .bst-featured-grid .is-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wp--preset--spacing--40); list-style: none; padding: 0; margin: 0; } /* BST-73: PDP "You might also like" rail. 4-up on desktop, 2-up on tablet, 1-up on narrow phones. Same minmax as featured grid so the visual language carries across all surfaces that show skin-cards. */ .bst-pdp-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--50); } @media (min-width: 1024px) { .bst-pdp-related-grid { grid-template-columns: repeat(5, 1fr); } } .bst-product-tile { transition: transform 320ms var(--wp--custom--transition--easing), border-color 200ms, box-shadow 320ms; overflow: hidden; } .bst-product-tile:hover { transform: translateY(-6px) scale(1.015); border-color: var(--wp--preset--color--accent-1) !important; box-shadow: 0 18px 40px -10px var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14)), 0 0 0 1px var(--wp--preset--color--accent-1); } .bst-product-tile .wp-block-post-featured-image { margin: 0; } .bst-product-tile .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: contain; background: var(--wp--preset--color--base); } .bst-product-tile .wp-block-post-title { margin: 0 0 8px; font-family: var(--wp--preset--font-family--heading); } .bst-product-tile .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; } .bst-product-tile .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-1); } .bst-product-tile .wc-block-components-product-price, .bst-product-tile .wp-block-woocommerce-product-price { color: var(--wp--preset--color--accent-1); font-family: var(--wp--preset--font-family--heading); font-weight: 700; } /* FAQ accordion */ .bst-faq-list { display: flex; flex-direction: column; margin-top: var(--wp--preset--spacing--50); } .bst-faq-item { border: 1px solid var(--wp--preset--color--neutral); border-bottom: 0; background: var(--wp--preset--color--base-elevated); } .bst-faq-item:first-child { border-top-left-radius: var(--wp--custom--border--radius--md); border-top-right-radius: var(--wp--custom--border--radius--md); } .bst-faq-item:last-child { border-bottom: 1px solid var(--wp--preset--color--neutral); border-bottom-left-radius: var(--wp--custom--border--radius--md); border-bottom-right-radius: var(--wp--custom--border--radius--md); } .bst-faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: var(--wp--preset--spacing--40); cursor: pointer; list-style: none; font-family: var(--wp--preset--font-family--heading); font-size: 16px; font-weight: 600; color: var(--wp--preset--color--contrast); transition: color 200ms; } .bst-faq-item summary:hover { color: var(--wp--preset--color--accent-1); } .bst-faq-item summary::-webkit-details-marker { display: none; } .bst-faq-item summary::marker { content: ''; } .bst-faq-item .plus { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--contrast-muted); font-size: 20px; transition: transform 200ms; line-height: 1; } .bst-faq-item[open] summary .plus { transform: rotate(45deg); color: var(--wp--preset--color--accent-1); } .bst-faq-answer { padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); color: var(--wp--preset--color--contrast-muted); line-height: 1.7; font-size: 14px; } /* CTA strip */ .bst-cta-strip { background: var(--wp--preset--color--base-elevated); border-radius: var(--wp--custom--border--radius--lg); padding: var(--wp--preset--spacing--70); text-align: center; border: 1px solid var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14)); position: relative; overflow: hidden; } .bst-cta-strip::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 100%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.14)), transparent 70%); pointer-events: none; } .bst-cta-strip h2 { font-family: var(--wp--preset--font-family--heading); font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 14px; position: relative; } .bst-cta-strip p { color: var(--wp--preset--color--contrast-muted); max-width: 540px; margin: 0 auto var(--wp--preset--spacing--50); font-size: 16px; position: relative; } .bst-cta-strip .bst-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; } /* Hero responsive */ @media (max-width: 900px) { .bst-hero-grid { flex-direction: column; } .bst-hero-grid .wp-block-column { flex-basis: 100% !important; width: 100% !important; } } /* ──────────── Catalog (archive-product.html) ──────────── */ .bst-shop-hero { border-bottom: 1px solid var(--wp--preset--color--neutral); } .bst-shop-hero-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: 11px; /* UX-026 v0.1.15: shop page heading eyebrow label — meaningful */ color: var(--wp--preset--color--contrast-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; } .bst-shop-hero-title { font-family: var(--wp--preset--font-family--heading); font-size: clamp(28px, 4vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } .bst-shop-hero-stats, .bst-shop-hero-stats .woocommerce-result-count { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); letter-spacing: 0.04em; margin: 0; } /* ── Toolbar ── */ .bst-shop-toolbar { padding: 12px 16px; margin-bottom: var(--wp--preset--spacing--40); background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md); align-items: center; } .bst-shop-toolbar .woocommerce-ordering select, .bst-shop-toolbar select.orderby { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--mono); font-size: 12px; padding: 6px 28px 6px 12px; appearance: none; cursor: pointer; outline: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .bst-shop-toolbar .woocommerce-ordering select:focus, .bst-shop-toolbar select.orderby:focus { border-color: var(--wp--preset--color--accent-1); } /* ── Product grid spacing ── */ .bst-shop-product-grid, .bst-shop-query .wp-block-post-template.is-layout-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--wp--preset--spacing--40); list-style: none; padding: 0; margin: 0; } .bst-shop-product-grid > li, .bst-shop-query .wp-block-post-template > li { list-style: none; margin: 0; } /* ── Pagination ── */ .bst-pagination, .bst-shop-query .wp-block-query-pagination { display: flex; align-items: center; justify-content: center; gap: 4px; padding: var(--wp--preset--spacing--50) 0; flex-wrap: wrap; } .bst-shop-query .wp-block-query-pagination a, .bst-shop-query .wp-block-query-pagination .page-numbers, .bst-shop-query .wp-block-query-pagination .wp-block-query-pagination-previous, .bst-shop-query .wp-block-query-pagination .wp-block-query-pagination-next { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); color: var(--wp--preset--color--contrast-muted); font-family: var(--wp--preset--font-family--mono); font-size: 13px; text-decoration: none; transition: all 200ms var(--wp--custom--transition--easing); padding: 0 8px; } .bst-shop-query .wp-block-query-pagination a:hover, .bst-shop-query .wp-block-query-pagination .page-numbers:hover, .bst-shop-query .wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); } .bst-shop-query .wp-block-query-pagination .page-numbers.current { background: var(--wp--preset--color--accent-1-soft); } .bst-shop-query .wp-block-query-pagination .page-numbers.dots { border-color: transparent; background: transparent; } /* ── Empty state ── */ .bst-shop-empty { padding: var(--wp--preset--spacing--70); text-align: center; background: var(--wp--preset--color--base-elevated); border: 1px dashed var(--wp--preset--color--neutral-strong); border-radius: var(--wp--custom--border--radius--md); color: var(--wp--preset--color--contrast-muted); } /* BST-198: same selector desync as .bst-cart-empty — the shop/taxonomy no-results heading renders as

(wp:heading level:2 in archive-product.html + taxonomy-product_rarity/exterior.html, under the "Shop" h1). Rule targeted h3, so the style never applied. Selector aligned to the rendered tag. */ .bst-shop-empty h2 { font-family: var(--wp--preset--font-family--heading); font-size: 18px; color: var(--wp--preset--color--contrast); margin: 0 0 8px; } /* ── Catalog responsive ── */ @media (max-width: 880px) { .bst-shop-grid { flex-direction: column !important; } .bst-shop-side { flex-basis: 100% !important; width: 100% !important; } .wp-block-main-skins-catalog-filters.ms-filters { position: static; max-height: none; } } /* ──────────── Product page (single-product.html) ──────────── */ .ms-pp { padding-top: 0; } .ms-pp .ms-pp-crumbs, .ms-pp .wc-block-components-breadcrumbs.ms-pp-crumbs { padding-block: var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--mono); font-size: 11px; /* UX-026 v0.1.15: breadcrumb text — primary navigation info, must pass AA */ color: var(--wp--preset--color--contrast-muted); letter-spacing: 0.06em; text-transform: uppercase; } .ms-pp .ms-pp-crumbs a { color: var(--wp--preset--color--contrast-muted); text-decoration: none; } .ms-pp .ms-pp-crumbs a:hover { color: var(--wp--preset--color--accent-1); } .ms-pp-section + .ms-pp-section { border-top: 1px solid var(--wp--preset--color--neutral); } .ms-pp-section--hero { padding-top: var(--wp--preset--spacing--40); } .ms-pp-section-title { font-family: var(--wp--preset--font-family--heading); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--wp--preset--color--contrast); margin: 0 0 var(--wp--preset--spacing--40); } /* Hero columns */ .ms-pp-hero { align-items: flex-start !important; } .ms-pp-summary.wp-block-column { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); } .ms-pp-title.wp-block-post-title { font-family: var(--wp--preset--font-family--heading); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--wp--preset--color--contrast); margin: 0; } /* BST-69: PDP eyebrow line — rarity dot + rarity tier + weapon + collection, sits just above the H1, links route into the filtered catalog. */ .ms-pp-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.10em; color: var(--wp--preset--color--contrast-muted); margin-bottom: -6px; } .ms-pp-eyebrow-token { color: var(--wp--preset--color--contrast-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color 150ms; } .ms-pp-eyebrow-token:hover, .ms-pp-eyebrow-token:focus-visible { color: var(--wp--preset--color--contrast); } .ms-pp-eyebrow-token:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 3px; } .ms-pp-eyebrow-rarity { color: var(--ms-rarity-color, var(--wp--preset--color--contrast-muted)); font-weight: 700; } .ms-pp-eyebrow-rarity:hover, .ms-pp-eyebrow-rarity:focus-visible { color: var(--ms-rarity-color); filter: brightness(1.2); } .ms-pp-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ms-rarity-color, var(--wp--preset--color--contrast-muted)); box-shadow: 0 0 6px var(--ms-rarity-color, transparent); flex-shrink: 0; } .ms-pp-eyebrow-sep { color: var(--wp--preset--color--contrast-faint); margin: 0 8px; } /* BST-70: Item attributes section — promoted out of the right summary column to a full-width row so the data has room to breathe. */ .ms-pp-section--attrs { border-top: 1px solid var(--wp--preset--color--neutral); } .ms-pp-attrs-title { margin-bottom: var(--wp--preset--spacing--40); } .ms-attr-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--wp--preset--color--neutral-strong); padding-bottom: 1px; transition: color 150ms, border-color 150ms; } .ms-attr-link:hover, .ms-attr-link:focus-visible { color: var(--wp--preset--color--accent-1); border-bottom-color: var(--wp--preset--color--accent-1); } .ms-attr-link:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 2px; border-bottom-color: transparent; } .ms-attr-rarity .ms-attr-link { color: var(--ms-rarity-color, inherit); border-bottom-color: transparent; } .ms-attr-rarity .ms-attr-link:hover { filter: brightness(1.2); } /* BST-68: Cart line-item polish. WC Blocks Cart is React-rendered, so we can only style — not restructure — the markup. These rules: • Hide the auto-generated product description (noise: "High risk and high reward, the infamous AWP is recognizable by its signature report and …"). Visitor already chose the product on the PDP — no need to repeat marketing copy in the cart. • Swap the trash-can SVG in .wc-block-cart-item__remove-link for a minimal × via a CSS mask. Same hitbox, cleaner Tactical look. */ .wc-block-cart-item__product .wc-block-components-product-metadata__description { display: none !important; } /* BST-76 (rev): pin the × to the top-right corner of each row, matching the design — next to the line total, not buried under the thumbnail. */ .wc-block-cart-items__row { position: relative; } .wc-block-cart-item__quantity { position: absolute; top: 12px; right: 12px; margin: 0 !important; min-height: 0 !important; } .wc-block-cart-item__remove-link { position: relative; width: 28px; height: 28px; border: 1px solid var(--wp--preset--color--neutral-strong); border-radius: var(--wp--custom--border--radius--sm, 3px); background: transparent; transition: border-color 150ms, color 150ms; } .wc-block-cart-item__remove-link svg { opacity: 0; } .wc-block-cart-item__remove-link::before { content: "×"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--mono); font-size: 18px; font-weight: 400; color: var(--wp--preset--color--contrast-muted); line-height: 1; transition: color 150ms; } .wc-block-cart-item__remove-link:hover, .wc-block-cart-item__remove-link:focus-visible { border-color: var(--wp--preset--color--accent-1); } .wc-block-cart-item__remove-link:hover::before, .wc-block-cart-item__remove-link:focus-visible::before { color: var(--wp--preset--color--accent-1); } /* BST-76: cart actions row below the line-items list. Left: "← Continue shopping" (lime accent). Right: "Empty cart" (muted contrast — destructive but quiet). */ .bst-cart-actions { display: flex; align-items: center; justify-content: space-between; margin-top: var(--wp--preset--spacing--40); padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--neutral); gap: 12px; } .bst-cart-actions a { font-family: var(--wp--preset--font-family--mono); font-size: 12px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; display: inline-flex; align-items: center; gap: 6px; transition: filter 150ms, color 150ms; } .bst-cart-continue-link { color: var(--wp--preset--color--accent-1); } .bst-cart-continue-link:hover { filter: brightness(1.15); } .bst-cart-empty-link { color: var(--wp--preset--color--contrast-muted); border: 1px solid var(--wp--preset--color--neutral-strong); padding: 8px 12px; border-radius: var(--wp--custom--border--radius--sm); } .bst-cart-empty-link:hover { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast-muted); } /* BST-76: "Cart · N items" — secondary count rendered smaller and faint so the H1 word stays the visual anchor. */ .bst-cart-title-h .bst-cart-title-count { font-size: 0.55em; font-weight: 400; color: var(--wp--preset--color--contrast-muted); letter-spacing: 0; margin-left: 6px; vertical-align: middle; } /* BST-76: cart line-item meta rows injected via woocommerce_get_item_data. WC Blocks renders the row block as: .wc-block-components-product-details .wc-block-components-product-details__value … ← inline separator we hide .wc-block-components-product-details__value … So we stack each top-level span as its own line and hide the " / " sep. */ .wc-block-cart-item__wrap .wc-block-components-product-details { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 0; font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--wp--preset--color--contrast-muted); } .wc-block-cart-item__wrap .wc-block-components-product-details > span { display: block; } .wc-block-cart-item__wrap .wc-block-components-product-details > span > [aria-hidden="true"] { display: none; } .wc-block-cart-item__wrap .wc-block-components-product-details > span:first-child .wc-block-components-product-details__value { text-transform: uppercase; letter-spacing: 0.10em; color: var(--wp--preset--color--contrast); font-weight: 600; font-size: 10px; } /* Gallery main image — aspect 4/3, rarity-tinted backdrop */ .ms-pp-gallery .ms-pp-gallery-main { border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md); overflow: hidden; background: var(--wp--preset--color--base-elevated); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: var(--wp--preset--spacing--40); } .ms-pp-gallery .ms-pp-gallery-main img, .ms-pp-gallery .ms-pp-gallery-main .wc-block-components-product-image, .ms-pp-gallery .ms-pp-gallery-main .wp-block-woocommerce-product-image-gallery { max-width: 100%; max-height: 100%; object-fit: contain; margin: 0 auto; } /* BST: WooCommerce ships a near-white 1px border (#f2f2f2) on its gallery placeholder wrappers. Our skins load from the enrichment CDN (_image_url), so WC treats the gallery as "--without-image / --placeholder" and that light border shows as an ugly white frame around the product image on the PDP. Neutralise the WC default frame on every gallery wrapper inside our card — the .ms-pp-gallery-main card already provides the intended border. */ .ms-pp-gallery .woocommerce-product-gallery, .ms-pp-gallery .woocommerce-product-gallery__wrapper, .ms-pp-gallery .woocommerce-product-gallery__image, .ms-pp-gallery .woocommerce-product-gallery__image--placeholder, .ms-pp-gallery .wp-block-woocommerce-product-image-gallery { border: 0 !important; box-shadow: none !important; } /* Float card */ .ms-pp-floatcard { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md); padding: var(--wp--preset--spacing--40); } .ms-pp-floatcard-title.wp-block-heading { font-family: var(--wp--preset--font-family--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--contrast-muted); margin: 0 0 14px; font-weight: 500; } /* Buy box */ .ms-pp-buybox { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md); padding: var(--wp--preset--spacing--50); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); } .ms-pp-buybox .ms-pp-price, .ms-pp-buybox .wp-block-woocommerce-product-price, .ms-pp-buybox .price { font-family: var(--wp--preset--font-family--heading); font-size: 36px; font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--wp--preset--color--contrast); margin: 0; } .ms-pp-buybox .ms-pp-price ins, .ms-pp-buybox .wp-block-woocommerce-product-price ins, .ms-pp-buybox .price ins { background: transparent; text-decoration: none; color: inherit; } .ms-pp-buybox .ms-pp-price del, .ms-pp-buybox .price del { font-size: 18px; /* UX-026 v0.1.15: strikethrough price — still meaningful price info */ color: var(--wp--preset--color--contrast-muted); margin-right: 8px; } .ms-pp-buybox .woocommerce-Price-amount, .ms-pp-buybox .ms-pp-price bdi { color: inherit; font-family: inherit; font-weight: inherit; } /* Add to cart form */ .ms-pp-buybox form.cart { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0; } .ms-pp-buybox form.cart .quantity input.qty { width: 60px; padding: 10px 8px; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--mono); font-size: 13px; text-align: center; } .ms-pp-buybox form.cart button.single_add_to_cart_button, .ms-pp-buybox button.wc-block-components-product-button__button { flex: 1; min-width: 180px; padding: 14px 22px; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); border: 0; border-radius: var(--wp--custom--border--radius--sm); font-family: var(--wp--preset--font-family--heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: background var(--wp--custom--transition--duration) var(--wp--custom--transition--easing); } .ms-pp-buybox form.cart button.single_add_to_cart_button:hover, .ms-pp-buybox button.wc-block-components-product-button__button:hover { background: var(--wp--preset--color--accent-1-hover); } /* Trade meta with checkmarks */ .ms-pp-trade-meta { border-top: 1px solid var(--wp--preset--color--neutral); padding-top: var(--wp--preset--spacing--30); gap: 14px !important; row-gap: 8px !important; } .ms-pp-trade-meta .ms-pp-trade-meta-item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--mono); font-size: 11px; /* UX-026 v0.1.15: trust meta ("Verified listing", "SSL", etc.) — meaningful info */ color: var(--wp--preset--color--contrast-muted); letter-spacing: 0.04em; margin: 0; } .ms-pp-check { width: 14px; height: 14px; border-radius: 50%; background: var(--wp--preset--color--success); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .ms-pp-check::before { content: ''; width: 4px; height: 7px; border-right: 2px solid var(--wp--preset--color--base); border-bottom: 2px solid var(--wp--preset--color--base); transform: rotate(45deg) translate(-1px, -1px); } /* About / description body */ .ms-pp-desc-body { max-width: 760px; font-size: 15px; line-height: 1.75; color: var(--wp--preset--color--contrast-muted); } .ms-pp-desc-body p + p { margin-top: 1em; } .ms-pp-desc-body h3 { font-family: var(--wp--preset--font-family--heading); font-size: 18px; font-weight: 700; color: var(--wp--preset--color--contrast); margin: 1.5em 0 0.5em; } /* Hero responsive */ @media (max-width: 900px) { .ms-pp-hero { flex-direction: column; } .ms-pp-hero .wp-block-column { flex-basis: 100% !important; width: 100% !important; } } /* ──────────── Cart page (v0.1.6) ──────────── */ .bst-cart-page, .bst-checkout-page { max-width: 80rem; margin-inline: auto; padding-inline: var(--wp--preset--spacing--50); padding-block: var(--wp--preset--spacing--50); } .bst-cart-title, .bst-checkout-title { padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--neutral); margin-bottom: var(--wp--preset--spacing--50); } .bst-cart-title-sub, .bst-checkout-title-sub { font-family: var(--wp--preset--font-family--mono); font-size: 11px; /* UX-026 v0.1.15: page subtitle — meaningful context info */ color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 4px; } .bst-cart-title-h, .bst-checkout-title-h { font-family: var(--wp--preset--font-family--heading); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--wp--preset--color--contrast); } /* Cart shell: WC's cart block has its own 2-column layout — we override grid * proportions to match design (1fr + 360px) and style its sub-elements. */ .bst-cart-shell .wp-block-woocommerce-cart { display: block; } .bst-cart-shell .wp-block-woocommerce-cart .wc-block-cart { display: grid; /* UX-040/041 v0.1.15: widened from 360px → 380px to prevent "Add coupons" and "PROCEED TO CHECKOUT" from wrapping across 3 lines in the sidebar. */ grid-template-columns: 1fr 380px; gap: var(--wp--preset--spacing--50); align-items: start; } @media (max-width: 880px) { .bst-cart-shell .wp-block-woocommerce-cart .wc-block-cart { grid-template-columns: 1fr; } } /* UX-040/041 v0.1.16: WC ships `.wc-block-components-sidebar-layout` as a flexbox with the items column at `width: 65%` and the sidebar at the remainder. At 1280 that left the totals sidebar at ~133px and forced the PROCEED TO CHECKOUT button to wrap to 3-4 lines. Override to a CSS Grid with explicit 1fr + 380px columns and reset the inner WC widths/paddings. The aria-hidden measuring div WC injects as the first child is allowed to sit on its own implicit row and ignored visually. */ .bst-cart-shell .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) 380px !important; gap: var(--wp--preset--spacing--50); align-items: start; } .bst-cart-shell .wc-block-components-sidebar-layout > div[aria-hidden="true"] { display: none !important; } .bst-cart-shell .wc-block-components-sidebar-layout > .wc-block-components-main { width: auto !important; max-width: 100% !important; min-width: 0; padding-right: 0 !important; margin: 0 !important; } .bst-cart-shell .wc-block-components-sidebar-layout > .wc-block-components-sidebar { width: auto !important; max-width: 100% !important; min-width: 0; padding: 0 !important; margin: 0 !important; } @media (max-width: 880px) { .bst-cart-shell .wc-block-components-sidebar-layout { grid-template-columns: 1fr !important; } } /* Force the proceed-to-checkout button text onto a single line. */ .bst-cart-shell .wc-block-components-button, .bst-cart-shell .wc-block-cart__submit-button { white-space: nowrap; } /* Cart line item row — restyle to design */ .bst-cart-shell .wc-block-cart-items__row, .bst-cart-shell .wc-block-cart-item__row { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md); padding: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--30); } .bst-cart-shell .wc-block-cart-item__image img { aspect-ratio: 4/3; object-fit: cover; border-radius: var(--wp--custom--border--radius--sm); } .bst-cart-shell .wc-block-components-product-name { font-family: var(--wp--preset--font-family--heading); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--wp--preset--color--contrast); text-decoration: none; } .bst-cart-shell .wc-block-components-product-metadata { font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; } .bst-cart-shell .wc-block-components-product-price, .bst-cart-shell .wc-block-cart-item__total { font-family: var(--wp--preset--font-family--heading); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); text-align: right; } .bst-cart-shell .wc-block-cart-item__remove-link, .bst-cart-shell .wc-block-cart-item__remove-button { width: 36px; height: 36px; background: transparent; border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); color: var(--wp--preset--color--contrast-muted); cursor: pointer; transition: all var(--wp--custom--transition--duration); display: inline-flex; align-items: center; justify-content: center; } .bst-cart-shell .wc-block-cart-item__remove-link:hover, .bst-cart-shell .wc-block-cart-item__remove-button:hover { color: var(--wp--preset--color--error); border-color: var(--wp--preset--color--error); } /* Cart summary side */ .bst-cart-shell .wc-block-components-totals-wrapper, .bst-cart-shell .wp-block-woocommerce-cart-totals-block { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md); padding: var(--wp--preset--spacing--40); position: sticky; top: var(--wp--preset--spacing--30); } /* v0.1.19 — when the custom cart-order-summary block owns the sidebar, the outer wp-block-woocommerce-cart-totals-block wrapper must be transparent so our block's own card chrome (bg/border/padding/sticky) isn't doubled. */ .bst-cart-shell .wp-block-woocommerce-cart-totals-block:has(.wp-block-main-skins-cart-order-summary) { background: transparent; border: 0; padding: 0; position: static; } /* v0.1.19 — WC's cart React app hydrates and injects its own .wc-block-cart__submit button + payment-options + totals-footer-item AFTER our custom block in the sidebar. Hide them so only the design's Checkout button + totals render. */ .bst-cart-shell .wp-block-woocommerce-cart-totals-block:has(.wp-block-main-skins-cart-order-summary) > .wc-block-cart__submit, .bst-cart-shell .wp-block-woocommerce-cart-totals-block:has(.wp-block-main-skins-cart-order-summary) > .wc-block-cart__payment-options, .bst-cart-shell .wp-block-woocommerce-cart-totals-block:has(.wp-block-main-skins-cart-order-summary) > .wc-block-components-totals-wrapper, .bst-cart-shell .wp-block-woocommerce-cart-totals-block:has(.wp-block-main-skins-cart-order-summary) > div:not(.wp-block-main-skins-cart-order-summary):not(:empty), .bst-cart-shell .wp-block-woocommerce-cart-totals-block:has(.wp-block-main-skins-cart-order-summary) > .wc-block-components-totals-item { display: none !important; } /* v0.1.19 — WC's React checkout app hoists foreign blocks (our steam-link-form) to the top of the form, breaking the design's Contact → Steam → Payment section order. Force flex+order on the form children so visual order is: Contact (1) → Billing (2) → Steam (3) → Payment (4) → Actions (5). Source order in DOM is left in place — this is purely visual reordering. */ .bst-checkout-wc .wc-block-checkout__form { display: flex; flex-direction: column; } .bst-checkout-wc .wc-block-checkout__form > .wc-block-checkout__contact-fields { order: 1; } .bst-checkout-wc .wc-block-checkout__form > .wc-block-checkout__shipping-fields { order: 2; } .bst-checkout-wc .wc-block-checkout__form > .wc-block-checkout__billing-fields { order: 2; } .bst-checkout-wc .wc-block-checkout__form > .wp-block-main-skins-steam-link-form { order: 3; margin-top: var(--wp--preset--spacing--40); } .bst-checkout-wc .wc-block-checkout__form > .wc-block-checkout__shipping-method { order: 4; } .bst-checkout-wc .wc-block-checkout__form > .wc-block-checkout__payment-method { order: 5; } .bst-checkout-wc .wc-block-checkout__form > .wc-block-checkout__order-notes { order: 6; } .bst-checkout-wc .wc-block-checkout__form > .wc-block-checkout__terms { order: 7; } .bst-checkout-wc .wc-block-checkout__form > .wc-block-checkout__actions { order: 8; } .bst-cart-shell .wc-block-components-totals-item__label, .bst-cart-shell .wc-block-components-totals-item__value { font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--contrast-muted); } .bst-cart-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .bst-cart-shell .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--wp--preset--font-family--heading); font-size: 24px; font-weight: 700; color: var(--wp--preset--color--contrast); } .bst-cart-checkout-btn .wc-block-components-button, .bst-cart-checkout-btn a { width: 100%; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 20px; border-radius: var(--wp--custom--border--radius--sm); border: 0; margin-top: var(--wp--preset--spacing--40); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } /* UX-040 / UX-041 v0.1.15: prevent "Add coupons" and "PROCEED TO CHECKOUT" from wrapping across 3 lines at the sidebar's narrower column width. */ .bst-cart-shell .wc-block-components-button { white-space: nowrap; } .bst-cart-shell .wp-block-woocommerce-cart-order-summary-coupon-form-block button, .bst-cart-shell .wc-block-cart__sidebar a.wc-block-cart__submit-button, .bst-cart-shell .wc-block-cart__sidebar button { font-size: 13px; padding-inline: 14px; white-space: nowrap; } /* Empty cart state */ .bst-cart-empty { background: var(--wp--preset--color--base-elevated); border: 1px dashed var(--wp--preset--color--neutral-strong); border-radius: var(--wp--custom--border--radius--md); padding: var(--wp--preset--spacing--70); text-align: center; grid-column: 1 / -1; } .bst-cart-empty-icon { font-size: 48px; opacity: 0.3; margin: 0 0 12px; } /* BST-198: the empty-cart heading renders as

(wp:heading level:2 in templates/cart.html — keeps the h1 "Cart" → h2 hierarchy, no skip-level). The rule previously targeted h3 (a selector desync), so this special heading style never applied and the h2 fell back to the theme.json default. Selector aligned to the rendered tag — do NOT revert to h3. */ .bst-cart-empty h2 { font-family: var(--wp--preset--font-family--heading); font-size: 22px; margin: 0 0 8px; color: var(--wp--preset--color--contrast); } .bst-cart-empty p { color: var(--wp--preset--color--contrast-muted); margin-bottom: var(--wp--preset--spacing--40); } /* BST-197: the "Browse catalog" CTA sits in a core `.wp-block-buttons` flex row. The container's `text-align: center` centers the heading/copy but has no effect on flex children, so the button defaulted to `justify-content: flex-start` and pinned to the left edge. Center the flex row so the button sits under the copy. */ .bst-cart-empty .wp-block-buttons { justify-content: center; } /* ──────────── Checkout page (v0.1.6) ──────────── BST-88 layout fix (2026-05-26): the original implementation tried to create a 2-col grid AT THREE LEVELS: 1. .bst-checkout-shell → grid 1fr 380px 2. .wp-block-woocommerce-checkout → grid 1fr 380px (dup) 3. .wc-block-components-sidebar-layout (WC's own) → flex row The duplicated grids caused 380px to be RESERVED at .bst-checkout-shell level for a column that was never filled (because WC's sidebar-layout was actually painting fields+sidebar inside the FIRST column). That showed up as a giant black void on the right of the page + narrow form + narrow sidebar (517px / 279px). Fix: collapse our outer wrappers to block flow with max-width centering, let WC's `.wc-block-components-sidebar-layout` do the 2-col job, just tune its proportions + child widths. */ .bst-checkout-shell { display: block; /* Design v4 .co-shell sits inside the parent .bst-checkout-page which already provides 24px padding (via WC's `has-global-padding`). Our shell just stretches to its parent's content area — no own padding needed. Without this, padding double-nested → shell content was 48px narrower than intended. */ max-width: 1280px; margin-inline: auto; } /* Center-aligned step indicator was the default flex layout — design has it left-aligned within the form column. */ .bst-checkout-steps { margin-left: 0 !important; } /* Hero band — WP's block-group default applies margin:0 16px which shifts the h1 by 16px right. Design has it at exactly parent+24 (the .bst-checkout-page padding), no inner margins. */ .bst-checkout-title { margin-inline: 0 !important; } /* Steps indicator — design has it spanning the form column only (828), not the entire shell (1232). Constrain to match. */ .bst-checkout-steps { display: flex; gap: 0; max-width: 828px; margin-bottom: var(--wp--preset--spacing--40); margin-left: 0; margin-right: 0; font-family: var(--wp--preset--font-family--mono); } .bst-checkout-step { flex: 1; padding: 14px 16px; border: 1px solid var(--wp--preset--color--neutral); border-right: 0; background: var(--wp--preset--color--base-elevated); display: flex; align-items: center; gap: 10px; font-size: 11px; /* UX-026 v0.1.15: step indicator labels (Cart / Contact / Payment) — navigation info */ color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.06em; } .bst-checkout-step:first-child { border-top-left-radius: var(--wp--custom--border--radius--md); border-bottom-left-radius: var(--wp--custom--border--radius--md); } .bst-checkout-step:last-child { border-top-right-radius: var(--wp--custom--border--radius--md); border-bottom-right-radius: var(--wp--custom--border--radius--md); border-right: 1px solid var(--wp--preset--color--neutral); } .bst-checkout-step.is-done { color: var(--wp--preset--color--success); } .bst-checkout-step.is-active { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); background: var(--wp--preset--color--accent-1-soft); position: relative; z-index: 1; } .bst-checkout-step .num { width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; } .bst-checkout-step.is-done .num { background: var(--wp--preset--color--success); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--success); } .bst-checkout-step.is-active .num { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--accent-1); } /* BST-88: kill the duplicate inner grid on .wp-block-woocommerce-checkout. WC's block layout supplies a `grid-template-columns: 1fr 380px` of its own — we override BOTH display + template so the inner .wc-block-components-sidebar-layout can paint full-width 1200px and its own 2-col split fills the space. !important wins WC's inline-style level selectors. */ .bst-checkout-shell > .wp-block-woocommerce-checkout, .bst-checkout-wc.wp-block-woocommerce-checkout { display: block !important; grid-template-columns: none !important; max-width: 1280px; width: 100%; } /* WC's sidebar-layout — make it a proper 2-col grid filling the shell width (1200px), gap matches design v4 spacing. fields = flex, sidebar = fixed 380px so the line items stay readable on long carts. */ .bst-checkout-wc .wc-block-components-sidebar-layout { display: grid !important; grid-template-columns: 1fr 380px; gap: var(--wp--preset--spacing--50); align-items: start; max-width: none; width: 100%; } .bst-checkout-wc .wc-block-components-sidebar-layout > .wc-block-components-main, .bst-checkout-wc .wp-block-woocommerce-checkout-fields-block { width: 100%; max-width: none; flex: 1 1 auto; /* WC ships padding-inline-end:37.49px on .wc-block-components-main to create breathing room from the sidebar. Our grid already has gap:24px → kill the redundant WC padding so form column matches design's 828px instead of squished 791px. */ padding-inline-end: 0 !important; padding-inline-start: 0 !important; } .bst-checkout-wc .wp-block-woocommerce-checkout-totals-block, .bst-checkout-wc .wc-block-components-sidebar { width: 100%; max-width: none; flex: 0 0 380px; } @media (max-width: 880px) { .bst-checkout-wc .wc-block-components-sidebar-layout { grid-template-columns: 1fr !important; } .bst-checkout-steps { max-width: 100%; flex-wrap: wrap; } .bst-checkout-wc .wp-block-woocommerce-checkout-totals-block, .bst-checkout-wc .wc-block-components-sidebar { flex: 1 1 auto; width: 100%; } } /* WC checkout fields card */ .bst-checkout-wc .wp-block-woocommerce-checkout-fields-block { background: transparent; } .bst-checkout-wc .wc-block-components-checkout-step { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md); padding: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--40); } .bst-checkout-wc .wc-block-components-checkout-step__title { font-family: var(--wp--preset--font-family--heading); font-size: 18px; font-weight: 600; color: var(--wp--preset--color--contrast); margin: 0 0 4px; } .bst-checkout-wc .wc-block-components-checkout-step__description { font-family: var(--wp--preset--font-family--mono); font-size: 11px; /* UX-026 v0.1.15: checkout step description — meaningful instruction text */ color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--wp--preset--spacing--40); } /* Form fields — Tactical dark palette. !important is required because WC Blocks ships its own input styles with higher specificity that default to white-bg / dark-text. Critical: padding-top needs to be ~22px so the floating label (absolute, top:6px, ~13px tall) doesn't overlap with the value text. */ .bst-checkout-wc .wc-block-components-text-input input, .bst-checkout-wc .wc-block-components-select select, .bst-checkout-wc input[type="text"], .bst-checkout-wc input[type="email"], .bst-checkout-wc input[type="tel"] { height: 52px !important; padding: 22px 14px 6px !important; background: var(--wp--preset--color--base) !important; border: 1px solid var(--wp--preset--color--neutral) !important; border-radius: var(--wp--custom--border--radius--sm) !important; color: var(--wp--preset--color--contrast) !important; font-family: var(--wp--preset--font-family--mono) !important; font-size: 14px !important; outline: none !important; transition: border-color var(--wp--custom--transition--duration); -webkit-appearance: none; appearance: none; } /* WC ships TWO variants of select wrapper classes: - `wc-block-components-select` (snake) — used in some contexts - `wc-blocks-components-select__container` (plural) — used for the country dropdown Both render white-bg by default. Force Tactical dark on the visible container — that's what paints behind the value. */ .bst-checkout-wc .wc-block-components-select, .bst-checkout-wc .wc-blocks-components-select, .bst-checkout-wc .wc-blocks-components-select__container, .bst-checkout-wc .wc-blocks-components-select__select { background-color: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--contrast) !important; color-scheme: dark; border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); } .bst-checkout-wc .wc-block-components-select select, .bst-checkout-wc .wc-blocks-components-select__select { background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 40px !important; } .bst-checkout-wc .wc-block-components-text-input input:focus, .bst-checkout-wc .wc-block-components-select select:focus, .bst-checkout-wc input:focus { border-color: var(--wp--preset--color--accent-1) !important; box-shadow: 0 0 0 1px var(--wp--preset--color--accent-1); } .bst-checkout-wc label { font-family: var(--wp--preset--font-family--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--contrast-muted); font-weight: 500; } /* ── BST-88: Order summary right column — card layout ──────────────────────── Design source: deliverables/design/checkout.html .co-summary WC block class mapping: .wc-block-components-order-summary-item → .co-summary-item __image img → 64px col / 48px height thumbnail __full-amount / __individual-price → .px mono price .wc-block-components-totals-item → .co-total-row .wc-block-components-totals-footer-item → .co-total-row.big (22px heading) ─────────────────────────────────────────────────────────────────────────── */ /* Order summary right column */ .bst-checkout-wc .wp-block-woocommerce-checkout-totals-block { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md); padding: var(--wp--preset--spacing--40); position: sticky; top: var(--wp--preset--spacing--30); } /* Summary section header ("Order summary · N items") */ .bst-checkout-wc .wc-block-components-order-summary__toggle-button, .bst-checkout-wc .wc-block-components-order-summary > div > h2, .bst-checkout-wc .wc-block-components-order-summary__title { font-family: var(--wp--preset--font-family--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wp--preset--color--contrast-faint); font-weight: 400; margin-bottom: var(--wp--preset--spacing--30); background: transparent; border: 0; padding: 0; width: 100%; text-align: left; cursor: default; } /* Collapse/expand toggle — keep open by default (don't hide expand icon) */ .bst-checkout-wc .wc-block-components-order-summary { font-family: var(--wp--preset--font-family--mono); font-size: 12px; } /* Each cart line item as thumbnail + info row */ .bst-checkout-wc .wc-block-components-order-summary-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--wp--preset--color--neutral); align-items: start; } .bst-checkout-wc .wc-block-components-order-summary-item:last-of-type { border-bottom: 0; } /* Thumbnail container — 64px col / 48px height (design: aspect-ratio 4/3 @ 64px wide ≈ 48px) */ .bst-checkout-wc .wc-block-components-order-summary-item__image { width: 64px; height: 48px; flex-shrink: 0; border-radius: var(--wp--custom--border--radius--sm); background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--neutral); overflow: hidden; position: relative; } .bst-checkout-wc .wc-block-components-order-summary-item__image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--wp--custom--border--radius--sm); display: block; } /* Quantity badge over thumbnail */ .bst-checkout-wc .wc-block-components-order-summary-item__quantity { position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--mono); font-size: 10px; font-weight: 700; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } /* Item name */ .bst-checkout-wc .wc-block-components-order-summary-item__description, .bst-checkout-wc .wc-block-components-product-name.wc-block-components-order-summary-item__full-name { font-family: var(--wp--preset--font-family--heading); font-size: 13px; font-weight: 600; color: var(--wp--preset--color--contrast); line-height: 1.3; margin: 0 0 2px; } /* Short description / product metadata description — hidden in checkout summary. * WC React renders this as .wc-block-components-product-metadata__description. * Design shows: name + ext-tag + price only. No product description paragraph. * Float/exterior/pattern meta lives in .wc-block-components-product-details and stays visible. */ .bst-checkout-wc .wc-block-components-order-summary-item__short-description, .bst-checkout-wc .wc-block-components-product-metadata__description { display: none !important; } /* Product details (ext / float / pattern) — mono meta below name */ .bst-checkout-wc .wc-block-components-product-details { font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--contrast-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 2px 0 4px; display: flex; flex-wrap: wrap; gap: 4px; } .bst-checkout-wc .wc-block-components-product-details > span { display: contents; } .bst-checkout-wc .wc-block-components-product-details__value { color: var(--wp--preset--color--contrast-muted); } /* Price on the item — individual-price is inside __description col; keep it. * __total-price is a duplicate WC renders as a 3rd sibling — hide it. * price wrapper .wc-block-cart-item__prices needs no extra margins. */ .bst-checkout-wc .wc-block-components-order-summary-item__individual-prices, .bst-checkout-wc .wc-block-components-order-summary-item__individual-price, .bst-checkout-wc .wc-block-components-order-summary-item__full-amount { font-family: var(--wp--preset--font-family--mono); font-size: 13px; color: var(--wp--preset--color--contrast); font-weight: 600; } /* Hide total-price sibling — redundant with individual price already in description col */ .bst-checkout-wc .wc-block-components-order-summary-item__total-price { display: none !important; } /* Remove price wrapper margins */ .bst-checkout-wc .wc-block-cart-item__prices { margin: 0; } /* Totals rows (subtotal / shipping / tax) */ .bst-checkout-wc .wc-block-components-totals-item { display: flex; justify-content: space-between; padding: 6px 0; } .bst-checkout-wc .wc-block-components-totals-item__label, .bst-checkout-wc .wc-block-components-totals-item__value { font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--contrast-muted); } /* Grand total row (.big equivalent) */ .bst-checkout-wc .wc-block-components-totals-footer-item { border-top: 1px solid var(--wp--preset--color--neutral); padding-top: 14px; margin-top: 6px; } .bst-checkout-wc .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, .bst-checkout-wc .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-family: var(--wp--preset--font-family--heading); font-size: 22px; font-weight: 700; color: var(--wp--preset--color--contrast); } /* WP block-group spacing override — prevent wp-block-group default margin from pushing totals items apart inside the summary sidebar. */ .bst-checkout-wc .wp-block-woocommerce-checkout-totals-block > * { margin-block: 0; } /* Kill WC's `.wc-block-components-order-summary.is-large` inner 16px horizontal padding — design v4 has summary items at the full sidebar width minus only the outer 16px. Without this override the cart items are 34px narrower than design (312 vs 346). */ .bst-checkout-wc .wc-block-components-order-summary.is-large { padding-inline: 0 !important; } /* Hide WC's full product description block inside order-summary items — design v4 shows only name + meta + price, NOT the long auto-extracted product description ("Relatively unchanged in its design since WWII..." for Bayonet, etc.). The description lives inside .wc-block-components-product-metadata as a __description child. */ .bst-checkout-wc .wc-block-components-product-metadata__description, .bst-checkout-wc .wc-block-components-order-summary-item .wc-block-components-product-metadata > *:not(.wc-block-components-product-metadata__taxes):not(.wc-block-components-product-metadata__variation-data) { display: none !important; } /* Coupon form — compact mono style */ .bst-checkout-wc .wc-block-components-coupon { margin-bottom: var(--wp--preset--spacing--30); } .bst-checkout-wc .wc-block-components-coupon input[type="text"] { height: 40px; font-size: 12px; font-family: var(--wp--preset--font-family--mono); } .bst-checkout-wc .wc-block-components-coupon button { font-family: var(--wp--preset--font-family--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; } /* Place Order button — full width lime. BST-88 P0 2026-05-26: removed the `body[data-steam-verified="1"]` CSS gate that blocked the button by default. The Steam URL backend verifier (BST-89) isn't built yet, so no one ever set the data-attr, so Place Order was permanently disabled across the entire site. Andrew flagged this — purchases were impossible. Re-enable by default; WC's own validation (filled email + billing + payment + terms) will keep it disabled until ready. Steam URL verification will gate the button at a higher layer when BST-89 ships. */ .bst-checkout-wc .wc-block-components-checkout-place-order-button, .bst-place-order .wc-block-components-checkout-place-order-button { width: 100%; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--mono); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 20px; border-radius: var(--wp--custom--border--radius--sm); border: 0; margin-top: var(--wp--preset--spacing--40); cursor: pointer; } /* Trust strip at the bottom of summary */ .bst-checkout-wc .wp-block-woocommerce-checkout-totals-block .wp-block-main-skins-footer-trust-strip { margin-top: var(--wp--preset--spacing--30); padding-top: var(--wp--preset--spacing--30); border-top: 1px solid var(--wp--preset--color--neutral); } /* ════════════════════════════════════════════════════════════════════════════ BST-87 sidebar refinement (2026-05-26) — CSS-only, sidebar-only 5 точечных правок по делу: 1. Heading "ORDER SUMMARY · N ITEMS" — 11px mono uppercase faint (WC 10.7 renders as .wc-block-components-checkout-order-summary__title-text, the older selectors above no longer match) 2. Inner summary card border — убрать (двойная карточка эффект) 3. Quantity badge — скрыть (всё qty=1 на маркетплейсе) 4. Coupon row — скрыть (нет в дизайне) 5. Heading alignment — убрать left margin 16px ════════════════════════════════════════════════════════════════════════════ */ /* 1. Heading — WC 10.7 selector */ .bst-checkout-wc .wc-block-components-checkout-order-summary__title-text { font-family: var(--wp--preset--font-family--mono) !important; font-size: 11px !important; font-weight: 400 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--wp--preset--color--contrast-faint) !important; margin: 0 0 var(--wp--preset--spacing--30) 0 !important; padding: 0 !important; } /* 2. Inner summary card — убрать рамку, чтобы карточка была одна (внешняя) */ .bst-checkout-wc .wp-block-woocommerce-checkout-order-summary-block { border: 0 !important; border-radius: 0 !important; padding: 0 !important; background: transparent !important; } /* 3. Quantity badge — скрыть */ .bst-checkout-wc .wc-block-components-order-summary-item__quantity { display: none !important; } /* BST-167: Coupon entry at checkout — RESTORED. Was hidden in BST-87 ("нет в дизайне"); Andrew now wants a coupon field on checkout too (cart already has one). Un-hide + style the WC-Blocks coupon panel to match the cart promo input (mono, neutral border, lime hover). */ .bst-checkout-wc .wp-block-woocommerce-checkout-order-summary-coupon-form-block, .bst-checkout-wc .wc-block-components-totals-coupon { display: block; margin-block: 14px; padding-left: 0; padding-right: 0; } .bst-checkout-wc .wc-block-components-totals-coupon__content { padding: 0; } .bst-checkout-wc .wc-block-components-totals-coupon__form { display: flex; gap: 8px; align-items: stretch; } .bst-checkout-wc .wc-block-components-totals-coupon .wc-block-components-text-input { flex: 1; margin: 0; } .bst-checkout-wc .wc-block-components-totals-coupon input[type="text"] { height: 40px; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--mono); font-size: 12px; } .bst-checkout-wc .wc-block-components-totals-coupon__button, .bst-checkout-wc .wc-block-components-totals-coupon button { height: 40px; background: var(--wp--preset--color--base-raised); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); color: var(--wp--preset--color--contrast-muted); font-family: var(--wp--preset--font-family--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 14px; } .bst-checkout-wc .wc-block-components-totals-coupon__button:hover, .bst-checkout-wc .wc-block-components-totals-coupon button:hover { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); } /* BST-167 follow-up: the coupon input must not be taller than the APPLY button. WC-Blocks wraps the field in .wc-block-components-text-input (~52px due to the floating-label top padding); pin the wrapper + input to the 40px button height and centre the label so the two controls match. */ .bst-checkout-wc .wc-block-components-totals-coupon .wc-block-components-text-input, .bst-checkout-wc .wc-block-components-totals-coupon .wc-block-components-text-input input { height: 40px !important; min-height: 40px !important; } .bst-checkout-wc .wc-block-components-totals-coupon .wc-block-components-text-input input { padding: 0 12px !important; line-height: 40px !important; } .bst-checkout-wc .wc-block-components-totals-coupon .wc-block-components-text-input label { top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; padding: 0 12px !important; } /* When focused / filled WC floats the label up; with a 40px field there is no room for the floated state, so suppress it — the short coupon code is its own context and the placeholder role is enough. */ .bst-checkout-wc .wc-block-components-totals-coupon .wc-block-components-text-input.is-active label, .bst-checkout-wc .wc-block-components-totals-coupon .wc-block-components-text-input input:focus + label { display: none !important; } /* BST-165: inline Steam Trade URL validation feedback (checkout-polish.js). */ .bst-steam-url-feedback { font-family: var(--wp--preset--font-family--mono); font-size: 11px; line-height: 1.4; margin-top: 6px; padding: 6px 10px; border-radius: var(--wp--custom--border--radius--sm); } .bst-steam-url-feedback.is-valid { color: var(--wp--preset--color--accent-1); background: var(--wp--preset--color--accent-1-soft, rgba(179, 224, 0, 0.10)); border: 1px solid var(--wp--preset--color--accent-1-soft, rgba(179, 224, 0, 0.30)); } .bst-steam-url-feedback.is-invalid { color: #ff6b6b; background: rgba(229, 72, 77, 0.10); border: 1px solid rgba(229, 72, 77, 0.40); } /* ───────────────────────────────────────────────────────── v0.1.7 — forgotten design sections ───────────────────────────────────────────────────────── */ /* Product page · 5-thumb gallery grid (placeholder until per-listing renders) */ .ms-pp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; } .ms-pp-thumb { aspect-ratio: 1 / 1; border-radius: var(--wp--custom--border--radius--sm); border: 1px solid var(--wp--preset--color--neutral); position: relative; overflow: hidden; background: var(--wp--preset--color--base); display: flex; align-items: center; justify-content: center; } .ms-pp-thumb--active { border-color: var(--wp--preset--color--accent-1); background: linear-gradient(135deg, var(--wp--preset--color--base-elevated), var(--wp--preset--color--base)); } .ms-pp-thumb--empty { border-style: dashed; border-color: var(--wp--preset--color--neutral-strong, var(--wp--preset--color--neutral)); } .ms-pp-thumb-label { position: absolute; bottom: 4px; right: 6px; font-family: var(--wp--preset--font-family--mono); font-size: 8px; color: var(--wp--preset--color--accent-1); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; } .ms-pp-thumb-dash { font-family: var(--wp--preset--font-family--mono); font-size: 14px; color: var(--wp--preset--color--contrast-faint); line-height: 1; } /* Product page · collection aside (more from this collection) */ .ms-pp-desc-cols { align-items: flex-start; } .ms-pp-desc-side { position: sticky; top: var(--wp--preset--spacing--30); } .ms-pp-collection-aside { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md); padding: var(--wp--preset--spacing--40); } .ms-pp-collection-h { font-family: var(--wp--preset--font-family--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; /* UX-026 v0.1.15: "FROM THIS COLLECTION" heading — navigation label */ color: var(--wp--preset--color--contrast-muted); margin: 0 0 12px 0; } .ms-pp-collection-grid { display: flex; flex-direction: column; gap: 10px; } .ms-pp-collection-item { display: flex; gap: 10px; padding: 8px; border-radius: var(--wp--custom--border--radius--sm); text-decoration: none; color: inherit; transition: background var(--wp--custom--transition--duration), transform var(--wp--custom--transition--duration); } .ms-pp-collection-item:hover { background: var(--wp--preset--color--base-raised, var(--wp--preset--color--base)); transform: translateY(-1px); } .ms-pp-collection-preview { width: 60px; aspect-ratio: 4 / 3; flex-shrink: 0; background: var(--wp--preset--color--base); border-radius: var(--wp--custom--border--radius--sm); border: 1px solid var(--wp--preset--color--neutral); position: relative; overflow: hidden; } .ms-pp-collection-preview::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, var(--ms-rarity-tint, rgba(255, 255, 255, 0.1)), transparent 60%); pointer-events: none; z-index: 1; } .ms-pp-collection-preview img { position: relative; z-index: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .ms-pp-collection-info { flex: 1; min-width: 0; } .ms-pp-collection-name { font-size: 13px; font-weight: 500; color: var(--wp--preset--color--contrast); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ms-pp-collection-price { font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--accent-1); margin-top: 2px; } /* Cart · recommendations strip */ .ms-cart-recs { margin-top: var(--wp--preset--spacing--60); padding-top: var(--wp--preset--spacing--50); border-top: 1px solid var(--wp--preset--color--neutral); } .ms-cart-recs-h { font-family: var(--wp--preset--font-family--heading); font-size: 22px; font-weight: 700; margin: 0 0 var(--wp--preset--spacing--40) 0; color: var(--wp--preset--color--contrast); letter-spacing: -0.01em; } .ms-cart-recs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--wp--preset--spacing--30); } /* 869dge4kb: 5-up on desktop so the rail fills the full row (matches PDP related). */ @media (min-width: 1024px) { .ms-cart-recs-grid { grid-template-columns: repeat(5, 1fr); } } /* ───────────────────────────────────────────────────────────── * v0.1.8 — Homepage decorative sections * Ticker marquee + Rarity ladder + Armory * ───────────────────────────────────────────────────────────── */ /* Ticker marquee */ .bst-ticker { background: linear-gradient(90deg, transparent, var(--wp--preset--color--base-raised, var(--wp--preset--color--base-elevated)), transparent), var(--wp--preset--color--base-elevated); border-top: 1px solid var(--wp--preset--color--neutral); border-bottom: 1px solid var(--wp--preset--color--neutral); padding-block: 14px; position: relative; overflow: hidden; } /* Cancel WP's default 24px block-spacing on children of .wp-block-group. The design HTML has no such rule — ticker comes out 48px tall there. In WordPress, .bst-ticker is a wp-block-group and inherits the :where(.wp-block-group > * + *) { margin-block-start: 24px } rule, which pushed .bst-ticker-track down by 24px and bloated the section to 72px. The tag is absolute-positioned so it doesn't participate. */ .bst-ticker > * { margin-block: 0 !important; } .bst-ticker::before, .bst-ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; } .bst-ticker::before { left: 0; background: linear-gradient(90deg, var(--wp--preset--color--base-elevated) 30%, transparent); } .bst-ticker::after { right: 0; background: linear-gradient(270deg, var(--wp--preset--color--base-elevated) 30%, transparent); } .bst-ticker-tag { position: absolute; top: 50%; left: var(--wp--preset--spacing--40, 24px); transform: translateY(-50%); z-index: 3; padding: 5px 11px; border-radius: 3px; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 7px; box-shadow: 0 0 24px var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.18)); } .bst-ticker-tag .blink { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--base); animation: bst-ticker-blink 1.05s steps(2, jump-none) infinite; } @keyframes bst-ticker-blink { 50% { opacity: 0.25; } } .bst-ticker-track { display: flex; gap: 56px; align-items: center; animation: bst-marquee 60s linear infinite; width: max-content; padding-left: 220px; } .bst-ticker:hover .bst-ticker-track { animation-play-state: paused; } @keyframes bst-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .bst-ticker-item { display: inline-flex; align-items: center; gap: 12px; font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--contrast-muted); white-space: nowrap; } .bst-ticker-item .check { width: 16px; height: 16px; border-radius: 50%; background: var(--wp--preset--color--success, #4ade80); color: var(--wp--preset--color--base); display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; flex-shrink: 0; } .bst-ticker-item .check.warn { background: var(--wp--preset--color--accent-1); } .bst-ticker-item .check.cold { background: var(--wp--preset--color--contrast-faint); } .bst-ticker-item strong { color: var(--wp--preset--color--contrast); font-weight: 600; } .bst-ticker-item .price { color: var(--wp--preset--color--accent-1); font-weight: 600; } .bst-ticker-item .ago { color: var(--wp--preset--color--contrast-faint); } .bst-ticker-item .sep { color: var(--wp--preset--color--contrast-faint); opacity: 0.5; } /* Rarity ladder */ .bst-rarity-ladder { display: flex; gap: 8px; } .bst-rarity-cell { flex: 1 1 0; min-width: 0; min-height: 240px; padding: var(--wp--preset--spacing--40, 24px) var(--wp--preset--spacing--30, 16px); border-radius: var(--wp--custom--border--radius--md, 8px); position: relative; overflow: hidden; cursor: pointer; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); transition: transform 320ms var(--wp--custom--transition--easing, ease), border-color 200ms, box-shadow 320ms, flex-grow 320ms var(--wp--custom--transition--easing, ease); display: flex; flex-direction: column; justify-content: space-between; /* BST-56: cell is now an — strip default anchor styling. */ color: inherit; text-decoration: none; } .bst-rarity-cell:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 4px; } .bst-rarity-cell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--rarity-color) 240%); opacity: 0.2; transition: opacity 320ms; } .bst-rarity-cell::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rarity-color); transform: scaleX(0.3); transform-origin: left; transition: transform 320ms var(--wp--custom--transition--easing, ease); } .bst-rarity-ladder:has(.bst-rarity-cell:hover) .bst-rarity-cell { flex-grow: 0.6; } .bst-rarity-cell:hover { transform: translateY(-10px) scale(1.02); border-color: var(--rarity-color); box-shadow: 0 18px 50px -10px var(--rarity-color), 0 0 0 1px var(--rarity-color); z-index: 2; flex-grow: 1.6 !important; } .bst-rarity-cell:hover::before { opacity: 0.45; } .bst-rarity-cell:hover::after { transform: scaleX(1); } .bst-rarity-cell .top { position: relative; z-index: 1; font-family: var(--wp--preset--font-family--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--contrast-faint); } .bst-rarity-cell .symbol { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 44px; font-weight: 700; color: var(--rarity-color); letter-spacing: -0.04em; line-height: 1; margin-top: 8px; text-shadow: 0 0 24px var(--rarity-color); } .bst-rarity-cell .name { position: relative; z-index: 1; font-family: var(--wp--preset--font-family--heading); font-size: 14px; font-weight: 600; color: var(--wp--preset--color--contrast); letter-spacing: -0.01em; line-height: 1.2; margin-top: 12px; } .bst-rarity-cell .count { position: relative; z-index: 1; font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--rarity-color); font-weight: 600; margin-top: 4px; } .bst-rarity-cell .expand { position: relative; z-index: 1; margin-top: 12px; font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--contrast-muted); line-height: 1.5; opacity: 0; max-height: 0; transition: opacity 240ms, max-height 320ms; } .bst-rarity-cell:hover .expand { opacity: 1; max-height: 80px; } @media (max-width: 900px) { .bst-rarity-ladder { flex-wrap: wrap; } .bst-rarity-cell { flex: 1 1 22%; min-height: 160px; } } /* Armory */ .bst-armory { background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.12)), transparent 70%), var(--wp--preset--color--base); position: relative; overflow: hidden; } /* BST-56 (rev 2): radar HUD lives on the section ::before, matches the design — 720px square anchored above the title, mask fades the edges so it never bleeds into the tile grid below. 18s rotation. */ .bst-armory::before { content: ''; position: absolute; width: 720px; height: 720px; left: 50%; top: -180px; transform: translateX(-50%); background: radial-gradient(circle, transparent 38%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.18)) 38.5%, transparent 39%), radial-gradient(circle, transparent 58%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.18)) 58.5%, transparent 59%), radial-gradient(circle, transparent 78%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.18)) 78.5%, transparent 79%), conic-gradient(from 0deg, transparent 0deg, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.18)) 30deg, transparent 60deg, transparent 360deg); mask-image: radial-gradient(circle, black 55%, transparent 78%); -webkit-mask-image: radial-gradient(circle, black 55%, transparent 78%); opacity: 0.6; pointer-events: none; animation: bst-armory-radar 18s linear infinite; } @keyframes bst-armory-radar { to { transform: translateX(-50%) rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .bst-armory::before { animation: none; } } .bst-armory-head { text-align: center; position: relative; z-index: 1; margin-bottom: var(--wp--preset--spacing--60, 48px); } .bst-armory-head .bst-section-sub { margin-left: auto; margin-right: auto; } /* BST-56 (rev 2): tile grid is just a normal-flow grid — radar lives on the section ::before, no positioning context needed here. */ .bst-armory-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; } @media (max-width: 980px) { .bst-armory-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .bst-armory-grid { grid-template-columns: 1fr; } } .bst-armory-tile { position: relative; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 8px); padding: var(--wp--preset--spacing--40, 20px); display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; transition: border-color 200ms, transform 200ms, box-shadow 200ms; overflow: hidden; } .bst-armory-tile:hover, .bst-armory-tile:focus-visible { border-color: var(--rarity-color, var(--wp--preset--color--accent-1)); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--rarity-color, transparent); } .bst-armory-tile:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 3px; } .bst-armory-tile-head { display: flex; align-items: center; gap: 10px; font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--contrast-muted); letter-spacing: 0.10em; } .bst-armory-tile-badge { width: 24px; height: 24px; border-radius: 4px; background: var(--rarity-color, var(--wp--preset--color--accent-1)); color: var(--wp--preset--color--base); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-size: 12px; font-weight: 700; } .bst-armory-tile-frame { position: relative; flex: 1; min-height: 130px; aspect-ratio: 4 / 5; background-color: var(--wp--preset--color--base); background-size: contain; background-position: center; background-repeat: no-repeat; border-radius: var(--wp--custom--border--radius--sm, 4px); overflow: hidden; } .bst-armory-tile-frame .corner { position: absolute; width: 14px; height: 14px; pointer-events: none; border: 2px solid var(--wp--preset--color--accent-1); z-index: 2; transition: width 200ms, height 200ms; } .bst-armory-tile:hover .bst-armory-tile-frame .corner { width: 18px; height: 18px; } .bst-armory-tile-frame .corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; } .bst-armory-tile-frame .corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; } .bst-armory-tile-frame .corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; } .bst-armory-tile-frame .corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; } /* BST-56: scanline animation across each tile frame — same as the design. 4 s sweep, staggered start per column via inline animation-delay. */ .bst-armory-tile-frame .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent-1), transparent); box-shadow: 0 0 12px var(--wp--preset--color--accent-1); z-index: 1; pointer-events: none; animation: bst-armory-scan 4s linear infinite; } @keyframes bst-armory-scan { 0% { top: -2px; opacity: 0; } 8% { opacity: 0.8; } 50% { opacity: 0.8; } 92% { opacity: 0.8; } 100% { top: 100%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .bst-armory-tile-frame .scan { animation: none; opacity: 0; } } .bst-armory-tile-foot { display: flex; flex-direction: column; gap: 2px; } .bst-armory-tile-name { font-family: var(--wp--preset--font-family--heading); font-size: 16px; font-weight: 700; color: var(--wp--preset--color--contrast); letter-spacing: -0.01em; } .bst-armory-tile-count { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); } .bst-armory-tile-cta { display: flex; align-items: center; justify-content: space-between; font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); padding-top: 8px; border-top: 1px solid var(--wp--preset--color--neutral); } .bst-armory-tile-num { color: var(--wp--preset--color--accent-1); font-weight: 700; } .bst-loadout { position: relative; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 8px); padding: var(--wp--preset--spacing--40, 24px); display: flex; flex-direction: column; gap: 14px; transition: border-color var(--wp--custom--transition--duration, 200ms), transform var(--wp--custom--transition--duration, 200ms); overflow: hidden; } .bst-loadout:hover { border-color: var(--rarity-color, var(--wp--preset--color--accent-1)); transform: translateY(-4px); } .bst-loadout-head { display: flex; align-items: center; gap: 10px; font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.1em; } .bst-loadout-head .slot-badge { width: 26px; height: 26px; border-radius: 4px; background: var(--rarity-color, var(--wp--preset--color--accent-1)); color: var(--wp--preset--color--base); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-size: 11px; font-weight: 700; letter-spacing: 0; } .bst-loadout-frame { position: relative; flex: 1; min-height: 160px; aspect-ratio: 4 / 5; background: radial-gradient(circle at 30% 40%, var(--rarity-color, transparent), transparent 60%), var(--wp--preset--color--base); border-radius: var(--wp--custom--border--radius--sm, 4px); overflow: hidden; } .bst-loadout-frame .corner { position: absolute; width: 14px; height: 14px; pointer-events: none; border: 2px solid var(--wp--preset--color--accent-1); z-index: 2; transition: width 200ms, height 200ms; } .bst-loadout:hover .bst-loadout-frame .corner { width: 18px; height: 18px; } .bst-loadout-frame .corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; } .bst-loadout-frame .corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; } .bst-loadout-frame .corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; } .bst-loadout-frame .corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; } .bst-loadout-frame .scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent-1), transparent); box-shadow: 0 0 12px var(--wp--preset--color--accent-1); z-index: 1; pointer-events: none; animation: bst-scanline 3s linear infinite; } @keyframes bst-scanline { 0% { top: 0; opacity: 0; } 10% { opacity: 0.5; } 90% { opacity: 0.5; } 100% { top: 100%; opacity: 0; } } .bst-loadout-meta { display: flex; flex-direction: column; gap: 2px; } .bst-loadout-meta .name { font-family: var(--wp--preset--font-family--heading); font-size: 14px; font-weight: 600; color: var(--wp--preset--color--contrast); letter-spacing: -0.01em; } .bst-loadout-meta .ext { font-family: var(--wp--preset--font-family--mono); font-size: 11px; /* UX-026 v0.1.15: exterior label (FN/MW/FT/WW/BS) — key collector info */ color: var(--wp--preset--color--contrast-muted); } .bst-loadout-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); padding-top: 10px; border-top: 1px solid var(--wp--preset--color--neutral); } .bst-loadout-row .price { color: var(--wp--preset--color--accent-1); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .bst-ticker-track, .bst-ticker-tag .blink, .bst-loadout-frame .scan { animation: none; } .bst-loadout-frame .scan { opacity: 0; } .bst-rarity-cell { transition: none; } .bst-rarity-ladder:has(.bst-rarity-cell:hover) .bst-rarity-cell, .bst-rarity-cell:hover { transform: none; flex-grow: 1 !important; } } /* ───────────────────────────────────────────────────────────── * v0.1.18 — Sprint C: decorative homepage sections * Anatomy of a Float + Integrators stats + Three steps * (Ticker + Armory base rules above were already shipped in v0.1.8.) * ───────────────────────────────────────────────────────────── */ /* ── Anatomy of a Float ── */ .bst-anatomy { background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.18)), transparent 70%), var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--neutral); position: relative; overflow: hidden; } .bst-anatomy::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 60% at center, black, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at center, black, transparent 75%); animation: bst-grid-drift 80s linear infinite; pointer-events: none; } @keyframes bst-grid-drift { to { background-position: 64px 64px, 64px 64px; } } .bst-anatomy-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--wp--preset--spacing--60, 48px); align-items: stretch; } @media (max-width: 900px) { .bst-anatomy-grid { grid-template-columns: 1fr; } } .bst-anatomy-eyebrow { color: var(--wp--preset--color--accent-1); margin-bottom: 8px; } .bst-anatomy-h2 { font-family: var(--wp--preset--font-family--heading); font-size: clamp(32px, 5vw, 56px); font-weight: 700; letter-spacing: -0.025em; line-height: 1; margin: 0 0 14px; } .bst-anatomy-h2 .accent { color: var(--wp--preset--color--accent-1); } .bst-anatomy-p { color: var(--wp--preset--color--contrast-muted); font-size: 16px; line-height: 1.6; max-width: 540px; margin: 0 0 var(--wp--preset--spacing--50, 32px); } .bst-anatomy-floatbar { max-width: 540px; } .bst-anatomy-aside { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 8px); padding: var(--wp--preset--spacing--50, 32px); display: flex; flex-direction: column; justify-content: center; gap: var(--wp--preset--spacing--40, 24px); } .bst-anatomy-num { font-family: var(--wp--preset--font-family--mono); font-size: clamp(64px, 9vw, 112px); color: var(--wp--preset--color--accent-1); font-weight: 700; line-height: 1; letter-spacing: -0.04em; text-shadow: 0 0 48px var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.18)); font-variant-numeric: tabular-nums; } .bst-anatomy-subline { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.1em; } /* ── BST-80: minimal hosted-style checkout ──────────────────────────────── Andrew's spec: only 4 rows visible — Contact / Steam URL / Payment (Card) / Terms+Place. WC Stripe v8+ removed the hosted-Checkout redirect mode and the React layer auto-injects the express-payment block (Apple Pay / G Pay / Link buttons) and non-Card payment tiles (Klarna / EPS / Bancontact) regardless of plugin Settings. We hide them via CSS rather than fork the block. Card is the ONLY visible payment method; UPE Element collects card number + expiry + CVC + ZIP, and Stripe handles 3DS modally. If Andrew rejects the inline card form visually, the next step is Viktor's Variant B: a custom Stripe Checkout Session that redirects to hosted UI. ──────────────────────────────────────────────────────────────────────── */ /* 1. Express payment block — Apple Pay / Google Pay / Link buttons row with "Or continue below" divider. WC injects it whenever any express payment method is registered (apple_pay_domain_set=yes can't be cleared via WC admin). */ .bst-checkout-wc .wp-block-woocommerce-checkout-express-payment-block, .bst-checkout-wc .wc-block-components-express-payment, .bst-checkout-wc .wc-block-components-express-payment-continue-rule { display: none !important; } /* 1b. Billing address — BST-88 reversal of BST-80. We DO collect billing in our UI now (first/last name + country + postal) for VAT calc and Steam fulfillment per design v4. Hide only the fields we don't want: street_1, street_2, city, state, phone, company. Hide entire field wrappers (not just the inner input) so the label + box collapse to zero height. */ .bst-checkout-wc .wc-block-components-address-form__company, .bst-checkout-wc .wc-block-components-address-form__address_1, .bst-checkout-wc .wc-block-components-address-form__address_2, .bst-checkout-wc .wc-block-components-address-form__city, .bst-checkout-wc .wc-block-components-address-form__state, .bst-checkout-wc .wc-block-components-address-form__phone, .bst-checkout-wc .wc-block-components-address-form .wc-block-components-text-input:has(#billing-company), .bst-checkout-wc .wc-block-components-address-form .wc-block-components-text-input:has(#billing-address_1), .bst-checkout-wc .wc-block-components-address-form .wc-block-components-text-input:has(#billing-address_2), .bst-checkout-wc .wc-block-components-address-form .wc-block-components-text-input:has(#billing-city), .bst-checkout-wc .wc-block-components-address-form .wc-block-components-text-input:has(#billing-state), .bst-checkout-wc .wc-block-components-address-form .wc-block-components-text-input:has(#billing-phone), .bst-checkout-wc .wc-block-checkout__contact-fields .wc-block-components-text-input:has(#billing-phone), .bst-checkout-wc #billing-company, .bst-checkout-wc #billing-address_1, .bst-checkout-wc #billing-address_2, .bst-checkout-wc #billing-city, .bst-checkout-wc #billing-state, .bst-checkout-wc #billing-phone, /* WC ships a "+ Add apartment, suite, etc." toggle next to street_1 that reveals address_2. Since we hide street_1+address_2 entirely (digital product, no shipping address needed), the toggle is dead UI. */ .bst-checkout-wc .wc-block-components-address-form__address_2-toggle { display: none !important; } /* Mark the billing fields card with our pp-style border */ .bst-checkout-wc .wc-block-checkout__billing-fields .wc-block-components-checkout-step__heading { font-family: var(--wp--preset--font-family--heading); font-size: 18px; font-weight: 700; color: var(--wp--preset--color--contrast); letter-spacing: -0.01em; } /* 2. Non-Card payment tiles. WC Stripe v8 renders all Stripe-enabled payment methods as accordion-style radio options inside the payment block, even when upe_checkout_experience_accepted_payments=["card"]. Match by gateway name attribute to keep selectors resilient to label copy changes. */ .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_klarna"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_eps"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_bancontact"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_blik"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_ideal"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_link"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_afterpay_clearpay"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_affirm"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_alipay"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_amazon_pay"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_us_bank_account"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_sepa_debit"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe_cashapp"]), .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value^="stripe_"]):not(:has(input[value="stripe"])) { display: none !important; } /* 3. Once only Card is visible, kill the radio chrome — there's nothing to choose between. The visible UI becomes: "Payment options" header + card form (number, MM/YY, CVC). */ .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe"]) .wc-block-components-radio-control-accordion-option__label { /* keep the "CREDIT / DEBIT CARD" label visible for trust but compact */ } .bst-checkout-wc .wc-block-components-radio-control-accordion-option:has(input[value="stripe"]) input[type="radio"] { /* the radio circle is meaningless with one option — hide it */ display: none; } /* 3a. BST-88 layout fix part 2: the radio-control-accordion-option defaults to ~230px width (WC assumes a stacked list of small radio tiles). With only one option (Card) visible, the form needs to span the full payment-block width (~710px). Force every level of the accordion + radio container + content + Stripe element to width:100%. Without this the Card iframe renders ~206px wide and leaves a huge empty void to its right. BST-191 fix: accordion-content carries padding (box-sizing:content-box by default) so width:100% + padding exceeds the parent, pushing the CVC field ~7px past the right border. Adding box-sizing:border-box makes padding count inside the 100%, eliminating the overflow while keeping the full-width card form intact. */ .bst-checkout-wc .wc-block-components-radio-control, .bst-checkout-wc .wc-block-components-radio-control-accordion-option, .bst-checkout-wc .wc-block-components-radio-control-accordion-content, .bst-checkout-wc .wcstripe-payment-element, .bst-checkout-wc .StripeElement, .bst-checkout-wc .wcstripe-payment-element .__PrivateStripeElement { width: 100% !important; max-width: none !important; display: block !important; box-sizing: border-box !important; } .bst-checkout-wc .wcstripe-payment-element .__PrivateStripeElement > iframe { width: 100% !important; } /* ── BST-79 v2: Wishlist ────────────────────────────────────────────────── Source-of-truth design: deliverables/design/wishlist.html (v3 handoff). Sparkline + bell/alerts deferred to BST-81/BST-82 (need backend infra). ──────────────────────────────────────────────────────────────────────── */ /* (1) Header heart link + count badge — unchanged from v1 */ .bst-wishlist-link { position: relative; color: var(--wp--preset--color--contrast-muted); text-decoration: none; } .bst-wishlist-link:hover, .bst-wishlist-link:focus-visible { color: var(--wp--preset--color--accent-1); } .bst-wishlist-count { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--mono); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: opacity 150ms; } .bst-wishlist-count.is-empty { opacity: 0; pointer-events: none; } /* (2) Product-card heart overlay — top-right glass-blur button on every .ms-card site-wide. Hover-reveal on desktop, always visible on touch. Sits ABOVE .ms-card-link via z-index so clicks don't bubble through. */ .wp-block-main-skins-skin-card.ms-card { position: relative; } .ms-card .ms-card-heart { position: absolute; top: 10px; right: 10px; z-index: 4; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: rgba(255, 255, 255, 0.85); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(-4px); transition: color 180ms, border-color 180ms, background 180ms, opacity 200ms, transform 220ms var(--wp--custom--transition--easing, ease-out); } .ms-card:hover .ms-card-heart, .ms-card .ms-card-heart:focus-visible, .ms-card .ms-card-heart.on { opacity: 1; transform: none; } .ms-card .ms-card-heart:hover { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); background: rgba(0, 0, 0, 0.72); } .ms-card .ms-card-heart.on { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); background: var(--wp--preset--color--accent-1-soft); animation: heartPop 460ms var(--wp--custom--transition--easing, ease-out); } .ms-card .ms-card-heart svg { display: block; transition: transform 220ms; } .ms-card .ms-card-heart:active svg { transform: scale(0.86); } @keyframes heartPop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 65% { transform: scale(0.94); } 100% { transform: scale(1); } } /* Touch devices: keep heart always visible (no hover state) */ @media (hover: none) { .ms-card .ms-card-heart { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ms-card .ms-card-heart { opacity: 1; transform: none; animation: none !important; transition: none !important; } } /* (3a) PDP buy-actions flex row — wishlist LEFT (flex:1), Add to cart RIGHT (flex:2). Source order in template is add-to-cart first (a11y + WC form-validation), visual order flipped via `order`. Two extra surgical fixes here: - WC's add-to-cart-form ships a `.quantity` selector + an inline Stripe `wcpay-express-checkout-wrapper`. Hide both: our products are unique 1-of-1 skins (qty always 1) and we route payment through hosted-style checkout only (no PDP express buttons). - Constrain row height to 52px and use `align-items: center` so the two buttons read as equal-weight peers (without it, WC's grid blows the form to ~150px tall, dragging the wishlist with it). */ .ms-pp-buybox .ms-pp-buy-actions { display: flex !important; gap: 10px; align-items: center; margin-top: 8px; } .ms-pp-buybox .ms-pp-buy-actions .ms-pp-add-to-cart { flex: 2; order: 2; margin: 0; min-width: 0; display: flex; } .ms-pp-buybox .ms-pp-buy-actions .ms-pp-add-to-cart form.cart { display: flex !important; width: 100%; margin: 0; gap: 0; } /* Kill WC's grid template (min-content / auto / auto). */ .ms-pp-buybox .ms-pp-buy-actions .ms-pp-add-to-cart form.cart::before { display: none !important; } /* Hide the quantity field — uniques are always qty=1. `name="quantity"` hidden field is preserved (it's outside .quantity). */ .ms-pp-buybox .ms-pp-buy-actions .ms-pp-add-to-cart .quantity { display: none !important; } /* WC Stripe Express tiles (Apple Pay / Google Pay / Pay with Link) render on PDP + cart + checkout regardless of `express_checkout=no` and `payment_request=no` in WC Stripe settings — the wrapper elements ship empty and get hydrated by Stripe JS in `*_button_locations`. We don't offer express anywhere right now (BST-80 removed it from /checkout/ via template strip + CSS), so kill the wrappers site-wide. WC Stripe v8.x uses `#wc-stripe-express-checkout-element` (id-anchored container) with per-method children `*-applePay`, `*-googlePay`, `*-link`. Older builds had `.wcpay-*` / `.stripe-payment-request-*` class names — keep them as belt-and-braces. */ #wc-stripe-express-checkout-element, [id^="wc-stripe-express-checkout-element"], .wcpay-express-checkout-wrapper, .stripe-payment-request-wrapper, .wc-stripe-payment-request-wrapper, .wc-block-components-express-payment, .wp-block-woocommerce-checkout-express-payment-block, .wcpay-payment-request-wrapper { display: none !important; } .ms-pp-buybox .ms-pp-buy-actions .ms-pp-add-to-cart .single_add_to_cart_button, .ms-pp-buybox .ms-pp-buy-actions .ms-pp-add-to-cart button.button { width: 100%; height: 52px; margin: 0; padding: 0 18px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; font-family: var(--wp--preset--font-family--heading); font-weight: 700; } .ms-pp-buybox .ms-pp-buy-actions .ms-pp-wishlist-toggle { flex: 1; order: 1; margin: 0; min-width: 130px; height: 52px; padding-block: 0; justify-content: center; } @media (max-width: 480px) { .ms-pp-buybox .ms-pp-buy-actions { flex-direction: column; } .ms-pp-buybox .ms-pp-buy-actions .ms-pp-add-to-cart, .ms-pp-buybox .ms-pp-buy-actions .ms-pp-wishlist-toggle { flex: 1 1 auto; } } /* (3) PDP buybox wishlist button — ghost button beside Add to cart per design-v3 product-page.html `.pp-buy-actions`. */ .bst-wishlist-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; background: transparent; border: 1px solid var(--wp--preset--color--neutral-strong); border-radius: var(--wp--custom--border--radius--sm, 3px); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--heading); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: all 180ms var(--wp--custom--transition--easing, ease-out); margin-top: 8px; } .bst-wishlist-toggle svg { transition: fill 180ms, transform 180ms; } .bst-wishlist-toggle:hover, .bst-wishlist-toggle:focus-visible { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); } .bst-wishlist-toggle.is-saved, .bst-wishlist-toggle.on { background: var(--wp--preset--color--accent-1-soft, rgba(179, 224, 0, 0.14)); border-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-1); } .bst-wishlist-toggle.is-saved svg, .bst-wishlist-toggle.on svg { fill: currentColor; } .bst-wishlist-toggle.pop { animation: pdpHeartPop 520ms var(--wp--custom--transition--easing, ease-out); } @keyframes pdpHeartPop { 0% { transform: scale(1); } 35% { transform: scale(1.05); box-shadow: 0 0 0 0 var(--wp--preset--color--accent-1-soft); } 100% { transform: scale(1); box-shadow: 0 0 0 18px transparent; } } @media (prefers-reduced-motion: reduce) { .bst-wishlist-toggle.pop { animation: none; } } /* (4) /wishlist/ page — hero + stats + toolbar + grid */ .bst-wishlist-page { padding-bottom: var(--wp--preset--spacing--80, 80px); } /* Hero */ .bst-wishlist-page .wl-hero { position: relative; overflow: hidden; padding-block: var(--wp--preset--spacing--60, 48px) var(--wp--preset--spacing--40, 24px); border-bottom: 1px solid var(--wp--preset--color--neutral); margin-bottom: var(--wp--preset--spacing--50, 32px); } .bst-wishlist-page .wl-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 70% at 90% 20%, var(--wp--preset--color--accent-1-soft), transparent 60%); pointer-events: none; } .bst-wishlist-page .wl-hero-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--wp--preset--spacing--50, 32px); align-items: end; position: relative; z-index: 1; } @media (max-width: 760px) { .bst-wishlist-page .wl-hero-grid { grid-template-columns: 1fr; } } .bst-wishlist-page .wl-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; } .bst-wishlist-page .wl-title { font-family: var(--wp--preset--font-family--heading); font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.0; margin: 0; } .bst-wishlist-page .wl-title .count { color: var(--wp--preset--color--contrast-muted); font-weight: 500; font-size: 0.5em; margin-left: 12px; letter-spacing: -0.01em; vertical-align: middle; } /* Mini stats row */ .bst-wishlist-page .wl-stats { display: flex; gap: 0; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 6px); overflow: hidden; } .bst-wishlist-page .wl-stat { padding: 14px 22px; border-right: 1px solid var(--wp--preset--color--neutral); min-width: 0; } .bst-wishlist-page .wl-stat:last-child { border-right: 0; } .bst-wishlist-page .wl-stat .label { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--contrast-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; } .bst-wishlist-page .wl-stat .num { font-family: var(--wp--preset--font-family--heading); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; color: var(--wp--preset--color--contrast); } .bst-wishlist-page .wl-stat.alert .num { color: var(--wp--preset--color--accent-1); } .bst-wishlist-page .wl-stat .num .arrow { display: inline-block; margin-left: 4px; font-family: var(--wp--preset--font-family--mono); font-size: 13px; transform: translateY(-2px); animation: bobArrow 1.8s ease-in-out infinite; } @keyframes bobArrow { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(-6px); } } .bst-wishlist-page .wl-stat .of { font-size: 12px; color: var(--wp--preset--color--contrast-faint); font-family: var(--wp--preset--font-family--mono); letter-spacing: 0.06em; } /* Toolbar */ .bst-wishlist-page .wl-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--wp--preset--spacing--30, 16px); padding: var(--wp--preset--spacing--30, 16px) var(--wp--preset--spacing--40, 24px); margin-block: var(--wp--preset--spacing--50, 32px) var(--wp--preset--spacing--40, 24px); background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 6px); } .bst-wishlist-page .wl-tabs { display: flex; gap: 4px; flex-wrap: wrap; } .bst-wishlist-page .wl-tab { padding: 8px 14px; border: 0; border-radius: var(--wp--custom--border--radius--sm, 3px); background: transparent; color: var(--wp--preset--color--contrast-muted); font-family: var(--wp--preset--font-family--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; cursor: pointer; transition: all 180ms; display: inline-flex; align-items: center; gap: 8px; } .bst-wishlist-page .wl-tab:hover { color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--base); } .bst-wishlist-page .wl-tab.is-on { background: var(--wp--preset--color--accent-1-soft); color: var(--wp--preset--color--accent-1); box-shadow: 0 0 0 1px var(--wp--preset--color--accent-1) inset; } .bst-wishlist-page .wl-tab .pill { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast-muted); padding: 2px 7px; border-radius: 9999px; font-size: 10px; letter-spacing: 0; } .bst-wishlist-page .wl-tab.is-on .pill { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); } .bst-wishlist-page .wl-tools-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bst-wishlist-page .wl-sort { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm, 3px); color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--mono); font-size: 11px; padding: 7px 30px 7px 12px; appearance: none; cursor: pointer; outline: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; text-transform: uppercase; letter-spacing: 0.06em; } .bst-wishlist-page .wl-sort:focus, .bst-wishlist-page .wl-sort:hover { border-color: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--accent-1); } .bst-wishlist-page .wl-bulk { display: flex; gap: 6px; padding-left: 14px; margin-left: 4px; border-left: 1px solid var(--wp--preset--color--neutral); } .bst-wishlist-page .bst-btn-sm { font-size: 11px; padding: 7px 12px; letter-spacing: 0.06em; } /* Grid + cards */ .bst-wishlist-page .wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--wp--preset--spacing--40, 24px); } .bst-wishlist-page .wl-card { --enter-delay: 0ms; position: relative; isolation: isolate; display: flex; flex-direction: column; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 6px); overflow: hidden; transition: transform 320ms var(--wp--custom--transition--easing, ease-out), border-color 200ms, box-shadow 320ms, opacity 380ms, max-height 380ms, margin 380ms; animation: wlCardEnter 520ms var(--wp--custom--transition--easing, ease-out) backwards; animation-delay: var(--enter-delay); } @keyframes wlCardEnter { from { opacity: 0; transform: translateY(28px) scale(0.96); } to { opacity: 1; transform: none; } } .bst-wishlist-page .wl-card:hover { border-color: var(--wp--preset--color--accent-1); transform: translateY(-6px); box-shadow: 0 24px 50px -16px var(--wp--preset--color--accent-1-soft), 0 0 0 1px var(--wp--preset--color--accent-1); } .bst-wishlist-page .wl-card.removing { opacity: 0; transform: scale(0.88) translateX(-30px) !important; max-height: 0; margin: -10px; pointer-events: none; overflow: hidden; } .bst-wishlist-page .wl-card-rarity { height: 3px; width: 100%; background: var(--rarity-color, var(--wp--preset--color--accent-1)); box-shadow: 0 0 14px var(--rarity-color, var(--wp--preset--color--accent-1)); } .bst-wishlist-page .wl-card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wp--preset--color--base); isolation: isolate; } /* BST-147: stock-state badge in card top-right corner — same visual language as the catalog skin-card stock badge (BST-140). */ .bst-wishlist-page .wl-card-stock-badge { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-block; padding: 4px 8px; border-radius: 4px; font-family: var(--wp--preset--font-family--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; pointer-events: none; } .bst-wishlist-page .wl-card-stock-badge--in { background: var(--wp--preset--color--accent-1-soft, rgba(179, 224, 0, 0.18)); color: var(--wp--preset--color--accent-1, #b3e000); border: 1px solid var(--wp--preset--color--accent-1, #b3e000); } .bst-wishlist-page .wl-card-stock-badge--oos { background: rgba(229, 72, 77, 0.14); color: #ff6b6b; border: 1px solid rgba(229, 72, 77, 0.55); } .bst-wishlist-page .wl-card-img-link { position: absolute; inset: 0; display: block; transition: transform 540ms var(--wp--custom--transition--easing, ease-out); } .bst-wishlist-page .wl-card:hover .wl-card-img-link { transform: scale(1.06); } .bst-wishlist-page .wl-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 18px; } .bst-wishlist-page .wl-trend-chip { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 4px 10px 4px 8px; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 9999px; font-family: var(--wp--preset--font-family--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 6px; } .bst-wishlist-page .wl-trend-chip.down { color: var(--wp--preset--color--success, #4ade80); border: 1px solid rgba(74, 222, 128, 0.4); } .bst-wishlist-page .wl-trend-chip.up { color: var(--wp--preset--color--accent-1); border: 1px solid var(--wp--preset--color--accent-1); } .bst-wishlist-page .wl-trend-chip.flat { color: var(--wp--preset--color--contrast-muted); border: 1px solid var(--wp--preset--color--neutral-strong); } .bst-wishlist-page .wl-trend-chip .arrow { font-size: 11px; font-weight: 700; } /* ── BST-87 wishlist v3: bell button (price-drop alerts) ───────────────── */ .bst-wishlist-page .wl-bell { position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; padding: 0; border: 1px solid var(--wp--preset--color--neutral-strong); background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--wp--preset--color--contrast-muted); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 180ms ease; } .bst-wishlist-page .wl-bell:hover, .bst-wishlist-page .wl-bell:focus-visible { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); } .bst-wishlist-page .wl-bell.on { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--accent-1); animation: wlBellShake 0.5s ease-out; } @keyframes wlBellShake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-18deg); } 40% { transform: rotate(14deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } } @media (prefers-reduced-motion: reduce) { .bst-wishlist-page .wl-bell.on { animation: none; } } /* ── BST-87 wishlist v3: meta strip + spec subline above price block ──── */ .bst-wishlist-page .wl-card-title { font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--contrast-muted); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bst-wishlist-page .wl-card-title .sep { color: var(--wp--preset--color--contrast-faint); opacity: 0.5; } .bst-wishlist-page .wl-card-title .rarity { color: var(--wp--preset--color--contrast); } /* Per-rarity color tokens — fall through to neutral if a slug lacks a token */ .bst-wishlist-page .wl-card-title .rarity-covert { color: var(--wp--preset--color--rarity-covert, var(--wp--preset--color--contrast)); } .bst-wishlist-page .wl-card-title .rarity-classified { color: var(--wp--preset--color--rarity-classified, var(--wp--preset--color--contrast)); } .bst-wishlist-page .wl-card-title .rarity-restricted { color: var(--wp--preset--color--rarity-restricted, var(--wp--preset--color--contrast)); } .bst-wishlist-page .wl-card-title .rarity-mil-spec { color: var(--wp--preset--color--rarity-mil-spec, var(--wp--preset--color--contrast)); } .bst-wishlist-page .wl-card-title .rarity-industrial-grade { color: var(--wp--preset--color--rarity-industrial-grade, var(--wp--preset--color--contrast)); } .bst-wishlist-page .wl-card-title .rarity-consumer-grade { color: var(--wp--preset--color--rarity-consumer-grade, var(--wp--preset--color--contrast)); } .bst-wishlist-page .wl-card-title .rarity-contraband { color: var(--wp--preset--color--rarity-contraband, var(--wp--preset--color--contrast)); } .bst-wishlist-page .wl-card-title .rarity-extraordinary { color: var(--wp--preset--color--rarity-extraordinary, var(--wp--preset--color--contrast)); } .bst-wishlist-page .wl-card-title .badge { padding: 1px 6px; border-radius: 3px; border: 1px solid currentColor; font-size: 9px; letter-spacing: 0.04em; } .bst-wishlist-page .wl-card-title .badge.st { color: var(--wp--preset--color--accent-1); } .bst-wishlist-page .wl-card-title .badge.sv { color: var(--wp--preset--color--warning, #f59e0b); } .bst-wishlist-page .wl-card-name small { display: block; font-family: var(--wp--preset--font-family--body, var(--wp--preset--font-family--mono)); font-size: 12px; font-weight: 500; color: var(--wp--preset--color--contrast-muted); letter-spacing: 0; margin-top: 4px; text-transform: none; } /* BST-81: Sparkline — 30-day price history overlay on card image. Ported from deliverables/design/wishlist.html lines 264-271. The mask gradient produces the "fades into image" effect at the top. `aspect-ratio: 16/10` on .wl-card-img already pins the container height, so CLS = 0 whether or not the sparkline is present. */ .bst-wishlist-page .wl-card-img .wl-spark { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 36px; pointer-events: none; mask-image: linear-gradient( 180deg, transparent, black 30%, black ); -webkit-mask-image: linear-gradient( 180deg, transparent, black 30%, black ); } /* BST-81: "history building…" caption — shown when the price-history endpoint returned data for the product but fewer than 3 non-null snapshots exist (product recently imported, history still accumulating). Mono, dim, no layout impact. */ .bst-wishlist-page .wl-spark-pending { display: inline-block; margin-left: 8px; font-family: var(--wp--preset--font-family--mono); font-size: 9px; letter-spacing: 0.06em; opacity: 0.5; vertical-align: middle; } /* HUD corners reveal on hover */ .bst-wishlist-page .wl-hud-corner { position: absolute; width: 12px; height: 12px; border: 2px solid var(--wp--preset--color--accent-1); z-index: 2; opacity: 0; transition: opacity 240ms; pointer-events: none; } .bst-wishlist-page .wl-card:hover .wl-hud-corner { opacity: 1; } .bst-wishlist-page .wl-hud-corner.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; } .bst-wishlist-page .wl-hud-corner.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; } .bst-wishlist-page .wl-hud-corner.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; } .bst-wishlist-page .wl-hud-corner.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; } /* Card body */ .bst-wishlist-page .wl-card-body { padding: var(--wp--preset--spacing--40, 24px); display: flex; flex-direction: column; gap: 12px; flex: 1; } .bst-wishlist-page .wl-card-name { font-family: var(--wp--preset--font-family--heading); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--wp--preset--color--contrast); } .bst-wishlist-page .wl-card-name-link { color: inherit; text-decoration: none; } .bst-wishlist-page .wl-card-name-link:hover { color: var(--wp--preset--color--accent-1); } .bst-wishlist-page .wl-card-foot { margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding-top: var(--wp--preset--spacing--30, 16px); border-top: 1px solid var(--wp--preset--color--neutral); } .bst-wishlist-page .wl-price-block .added { font-family: var(--wp--preset--font-family--mono); font-size: 9px; color: var(--wp--preset--color--contrast-faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px; } .bst-wishlist-page .wl-price-now { font-family: var(--wp--preset--font-family--heading); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--wp--preset--color--contrast); } .bst-wishlist-page .wl-price-then { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-faint); margin-top: 3px; } .bst-wishlist-page .wl-price-then.muted { font-size: 10px; opacity: 0.7; } .bst-wishlist-page .wl-price-then .strike { text-decoration: line-through; opacity: 0.6; margin-right: 6px; } .bst-wishlist-page .wl-price-then .delta-down { color: var(--wp--preset--color--success, #4ade80); } .bst-wishlist-page .wl-price-then .delta-up { color: var(--wp--preset--color--accent-1); } /* Actions */ .bst-wishlist-page .wl-actions { display: flex; gap: 6px; align-items: center; } .bst-wishlist-page .wl-act { width: 38px; height: 38px; border-radius: var(--wp--custom--border--radius--sm, 3px); background: transparent; border: 1px solid var(--wp--preset--color--neutral-strong); color: var(--wp--preset--color--contrast-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 180ms; } .bst-wishlist-page .wl-act:hover { color: var(--wp--preset--color--accent-1); border-color: var(--wp--preset--color--accent-1); } .bst-wishlist-page .wl-act.danger:hover { color: var(--wp--preset--color--error, #ef4444); border-color: var(--wp--preset--color--error, #ef4444); } .bst-wishlist-page .wl-act.cart { width: auto; padding: 0 14px; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--accent-1); font-family: var(--wp--preset--font-family--heading); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; gap: 6px; min-width: 110px; } .bst-wishlist-page .wl-act.cart:hover { background: var(--wp--preset--color--accent-1-hover, var(--wp--preset--color--accent-1)); color: var(--wp--preset--color--base); transform: translateY(-1px); box-shadow: 0 8px 20px -4px var(--wp--preset--color--accent-1-soft); } .bst-wishlist-page .wl-act.cart:active { transform: translateY(0); } .bst-wishlist-page .wl-act.cart:disabled { opacity: 0.7; cursor: progress; } .bst-wishlist-page .wl-act.cart .plus { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); font-size: 13px; transition: transform 220ms; } .bst-wishlist-page .wl-act.cart:hover .plus { transform: rotate(180deg); } .bst-wishlist-page .wl-act.cart.confirm { animation: wlConfirmPulse 600ms ease-out; } @keyframes wlConfirmPulse { 0% { transform: scale(1); } 35% { transform: scale(1.06); box-shadow: 0 0 0 0 var(--wp--preset--color--success, #4ade80); } 100% { transform: scale(1); box-shadow: 0 0 0 16px transparent; } } /* BST-161: OOS is now a DISABLED button sitting in the bottom-right action row, matching the "TO CART" button's height/footprint (38px tall, min 110px wide). The old top-right corner badge that overlapped the price-alert bell has been removed in wishlist.js. Text never wraps; dashed border + muted palette + not-allowed cursor read as "unavailable". */ .bst-wishlist-page .wl-act.oos { width: auto; height: 38px; padding: 0 14px; min-width: 110px; white-space: nowrap; color: var(--wp--preset--color--contrast-faint); font-family: var(--wp--preset--font-family--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border: 1px dashed var(--wp--preset--color--neutral-strong); background: transparent; cursor: not-allowed; } .bst-wishlist-page .wl-act.oos:hover { /* override the generic .wl-act:hover lime — a disabled control stays muted */ color: var(--wp--preset--color--contrast-faint); border-color: var(--wp--preset--color--neutral-strong); } /* Empty state */ .bst-wishlist-page .wl-empty { padding: var(--wp--preset--spacing--80, 80px) var(--wp--preset--spacing--50, 32px); background: radial-gradient(ellipse 60% 60% at 50% 30%, var(--wp--preset--color--accent-1-soft), transparent 70%), var(--wp--preset--color--base-elevated); border: 1px dashed var(--wp--preset--color--neutral-strong); border-radius: var(--wp--custom--border--radius--lg, 8px); text-align: center; margin-block: var(--wp--preset--spacing--50, 32px) var(--wp--preset--spacing--80, 80px); position: relative; overflow: hidden; } .bst-wishlist-page .wl-empty[hidden] { display: none; } .bst-wishlist-page .wl-empty .glyph { width: 100px; height: 100px; margin: 0 auto var(--wp--preset--spacing--40, 24px); border-radius: 50%; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--neutral); display: inline-flex; align-items: center; justify-content: center; position: relative; box-shadow: inset 0 0 24px var(--wp--preset--color--accent-1-soft); } .bst-wishlist-page .wl-empty .glyph::after { content: ''; position: absolute; inset: -16px; border: 1px dashed var(--wp--preset--color--accent-1-soft); border-radius: 50%; animation: wlEmptyRotate 12s linear infinite; } @keyframes wlEmptyRotate { to { transform: rotate(360deg); } } .bst-wishlist-page .wl-empty .glyph svg { color: var(--wp--preset--color--accent-1); } .bst-wishlist-page .wl-empty h2 { font-family: var(--wp--preset--font-family--heading); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 8px; } .bst-wishlist-page .wl-empty p { color: var(--wp--preset--color--contrast-muted); max-width: 460px; margin: 0 auto var(--wp--preset--spacing--50, 32px); line-height: 1.6; } /* Filter empty (sub-state when wishlist has items but current tab doesn't) */ .bst-wishlist-page .wl-filter-empty { padding: var(--wp--preset--spacing--60, 48px); text-align: center; color: var(--wp--preset--color--contrast-muted); background: var(--wp--preset--color--base-elevated); border: 1px dashed var(--wp--preset--color--neutral-strong); border-radius: var(--wp--custom--border--radius--md, 6px); margin-bottom: var(--wp--preset--spacing--60, 48px); } .bst-wishlist-page .wl-filter-empty[hidden] { display: none; } .bst-wishlist-page .wl-filter-empty .t { font-family: var(--wp--preset--font-family--heading); font-size: 18px; color: var(--wp--preset--color--contrast); margin-bottom: 6px; } .bst-wishlist-page .wl-filter-empty .s { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } /* Toast */ .bst-wishlist-page .wl-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 50; padding: 14px 22px; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--accent-1); border-radius: 9999px; color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--mono); font-size: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--wp--preset--color--accent-1); display: flex; align-items: center; gap: 12px; opacity: 0; pointer-events: none; transition: opacity 240ms, transform 240ms var(--wp--custom--transition--easing, ease-out); } .bst-wishlist-page .wl-toast[hidden] { display: none; } .bst-wishlist-page .wl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .bst-wishlist-page .wl-toast .ico { width: 22px; height: 22px; border-radius: 50%; background: var(--wp--preset--color--success, #4ade80); color: var(--wp--preset--color--base); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; } .bst-wishlist-page .wl-toast .undo { color: var(--wp--preset--color--accent-1); cursor: pointer; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--wp--preset--color--neutral); background: transparent; border-top: 0; border-right: 0; border-bottom: 0; } .bst-wishlist-page .wl-toast .undo:hover { color: var(--wp--preset--color--accent-1-hover, var(--wp--preset--color--accent-1)); } .bst-wishlist-page .wl-toast .undo[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .bst-wishlist-page .wl-card, .bst-wishlist-page .wl-empty .glyph::after, .bst-wishlist-page .wl-stat .num .arrow, .bst-wishlist-page .wl-act.cart.confirm, .bst-wishlist-page .wl-toast { animation: none !important; transition: none !important; } } @media (max-width: 600px) { .bst-wishlist-page .wl-toolbar { flex-direction: column; align-items: stretch; } .bst-wishlist-page .wl-tools-right { justify-content: space-between; } .bst-wishlist-page .wl-bulk { padding-left: 0; margin-left: 0; border-left: 0; } .bst-wishlist-page .wl-card-foot { grid-template-columns: 1fr; } .bst-wishlist-page .wl-actions { justify-content: flex-start; } } /* ── BST-77: themed lanes (Find the lane you collect) ─────────────────── */ .bst-lanes { background: var(--wp--preset--color--base); } .bst-lanes-head { text-align: center; margin-bottom: var(--wp--preset--spacing--60, 48px); } .bst-lanes-head .bst-section-sub { margin-left: auto; margin-right: auto; max-width: 640px; } .bst-lanes-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; } @media (max-width: 980px) { .bst-lanes-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .bst-lanes-grid { grid-template-columns: 1fr; } } .bst-lane { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 220px; padding: var(--wp--preset--spacing--40, 24px); background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 8px); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 200ms, transform 200ms, box-shadow 200ms; } .bst-lane:hover, .bst-lane:focus-visible { border-color: var(--rarity-color, var(--wp--preset--color--accent-1)); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .bst-lane:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 3px; } .bst-lane-stripe { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rarity-color, var(--wp--preset--color--accent-1)); transition: box-shadow 200ms; } .bst-lane:hover .bst-lane-stripe { box-shadow: 0 0 14px var(--rarity-color, transparent); } .bst-lane::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 100%, var(--rarity-color, transparent), transparent 60%); opacity: 0.10; pointer-events: none; } .bst-lane-head { position: relative; display: flex; align-items: center; gap: 10px; } .bst-lane-badge { width: 28px; height: 28px; border-radius: 4px; background: var(--rarity-color, var(--wp--preset--color--accent-1)); color: var(--wp--preset--color--base); display: inline-flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-size: 13px; font-weight: 700; flex-shrink: 0; } .bst-lane-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.10em; color: var(--wp--preset--color--contrast-muted); } .bst-lane-body { flex: 1; display: flex; flex-direction: column; gap: 6px; position: relative; } .bst-lane-label { font-family: var(--wp--preset--font-family--heading); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); margin: 0; } .bst-lane-sub { font-family: var(--wp--preset--font-family--body, inherit); font-size: 13px; line-height: 1.5; color: var(--wp--preset--color--contrast-muted); margin: 0; } .bst-lane-foot { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--wp--preset--color--neutral); font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); } .bst-lane-cta { color: var(--wp--preset--color--accent-1); font-weight: 700; } /* ── BST-55: interactive float anatomy ────────────────────────────────── */ .bst-anatomy-left { min-width: 0; } .bst-anatomy-bignum { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: clamp(72px, 11vw, 144px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; margin: var(--wp--preset--spacing--40, 24px) 0 var(--wp--preset--spacing--30, 16px); color: var(--wp--preset--color--accent-1); text-shadow: 0 0 48px var(--wp--custom--accent-1-soft, rgba(179, 224, 0, 0.18)); } .bst-anatomy-bignum .ghost, .bst-anatomy-bignum .dot { color: var(--wp--preset--color--contrast-faint); text-shadow: none; } .bst-anatomy-floatbar { position: relative; max-width: 540px; height: 28px; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: none; outline: none; } .bst-anatomy-floatbar:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 6px; border-radius: 2px; } .bst-anatomy-track { display: flex; width: 100%; height: 12px; border-radius: var(--wp--custom--border--radius--sm, 3px); overflow: hidden; } .bst-anatomy-track .seg { height: 100%; display: block; } .bst-anatomy-track .seg-fn { flex: 0 0 7%; background: var(--wp--preset--color--ext-fn, #4ade80); } .bst-anatomy-track .seg-mw { flex: 0 0 8%; background: var(--wp--preset--color--ext-mw, #a3e635); } .bst-anatomy-track .seg-ft { flex: 0 0 23%; background: var(--wp--preset--color--ext-ft, #facc15); } .bst-anatomy-track .seg-ww { flex: 0 0 7%; background: var(--wp--preset--color--ext-ww, #fb923c); } .bst-anatomy-track .seg-bs { flex: 0 0 55%; background: var(--wp--preset--color--ext-bs, #ef4444); } .bst-anatomy-marker { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--wp--preset--color--contrast); transform: translateX(-1px); box-shadow: 0 0 0 1px var(--wp--preset--color--base), 0 0 12px rgba(255, 255, 255, 0.6); pointer-events: none; transition: left 60ms linear; } .bst-anatomy-floatbar.is-dragging .bst-anatomy-marker { transition: none; } .bst-anatomy-marker-flag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--wp--preset--color--contrast); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)); } .bst-anatomy-band-labels { display: flex; font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); letter-spacing: 0.08em; margin-top: 8px; } .bst-anatomy-band-labels > span:nth-child(1) { flex: 0 0 7%; text-align: center; } .bst-anatomy-band-labels > span:nth-child(2) { flex: 0 0 8%; text-align: center; } .bst-anatomy-band-labels > span:nth-child(3) { flex: 0 0 23%; text-align: center; } .bst-anatomy-band-labels > span:nth-child(4) { flex: 0 0 7%; text-align: center; } .bst-anatomy-band-labels > span:nth-child(5) { flex: 0 0 55%; text-align: center; } .bst-anatomy-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--wp--preset--spacing--40, 24px); max-width: 540px; } .bst-anatomy-presets button { background: var(--wp--preset--color--base-elevated); color: var(--wp--preset--color--contrast-muted); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm, 3px); padding: 6px 10px; font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; transition: all 150ms; } .bst-anatomy-presets button:hover, .bst-anatomy-presets button:focus-visible { color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast-muted); } .bst-anatomy-presets button:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 2px; } .bst-anatomy-presets button.is-active { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--base); border-color: var(--wp--preset--color--accent-1); } .bst-anatomy-right { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40, 24px); } .bst-anatomy-panel { background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 8px); padding: var(--wp--preset--spacing--40, 24px) var(--wp--preset--spacing--50, 32px); display: flex; flex-direction: column; gap: 14px; } .bst-anatomy-panel-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--wp--preset--color--neutral); padding-bottom: 12px; } .bst-anatomy-panel-row:last-child { border-bottom: 0; padding-bottom: 0; } .bst-anatomy-panel-row .k { font-family: var(--wp--preset--font-family--mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--wp--preset--color--contrast-muted); } .bst-anatomy-panel-row .v { font-family: var(--wp--preset--font-family--mono); font-size: 14px; color: var(--wp--preset--color--contrast); font-variant-numeric: tabular-nums; text-align: right; } .bst-anatomy-panel-row .v.lime { color: var(--wp--preset--color--accent-1); font-weight: 700; } .bst-anatomy-exterior { font-family: var(--wp--preset--font-family--heading); font-size: 20px; letter-spacing: -0.01em; font-weight: 700; } .bst-anatomy-exterior[data-anatomy-ext="fn"] { color: var(--wp--preset--color--ext-fn, #4ade80); } .bst-anatomy-exterior[data-anatomy-ext="mw"] { color: var(--wp--preset--color--ext-mw, #a3e635); } .bst-anatomy-exterior[data-anatomy-ext="ft"] { color: var(--wp--preset--color--ext-ft, #facc15); } .bst-anatomy-exterior[data-anatomy-ext="ww"] { color: var(--wp--preset--color--ext-ww, #fb923c); } .bst-anatomy-exterior[data-anatomy-ext="bs"] { color: var(--wp--preset--color--ext-bs, #ef4444); } .bst-anatomy-callout { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--accent-1); border-radius: var(--wp--custom--border--radius--md, 8px); padding: var(--wp--preset--spacing--40, 20px); display: flex; flex-direction: column; gap: 6px; } .bst-anatomy-callout-title { font-family: var(--wp--preset--font-family--heading); font-size: 17px; font-weight: 700; color: var(--wp--preset--color--contrast); } .bst-anatomy-callout-body { font-family: var(--wp--preset--font-family--mono); font-size: 12px; line-height: 1.6; color: var(--wp--preset--color--accent-1); margin: 0; } .bst-anatomy-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ── Integrators stats (4-up KPI grid with AnimatedNumber) ── */ .bst-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 8px); overflow: hidden; } @media (max-width: 880px) { .bst-stats { grid-template-columns: repeat(2, 1fr); } } .bst-stat { padding: var(--wp--preset--spacing--50, 32px); border-right: 1px solid var(--wp--preset--color--neutral); position: relative; } .bst-stat:last-child { border-right: 0; } @media (max-width: 880px) { .bst-stat:nth-child(2) { border-right: 0; } .bst-stat:nth-child(-n+2) { border-bottom: 1px solid var(--wp--preset--color--neutral); } } .bst-stat .label { font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--contrast-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .bst-stat .num { font-family: var(--wp--preset--font-family--heading); font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--wp--preset--color--contrast); margin-bottom: 4px; font-variant-numeric: tabular-nums; } .bst-stat .num .unit { color: var(--wp--preset--color--accent-1); font-size: 0.6em; margin-left: 4px; } .bst-stat .num.bst-stat-text { color: var(--wp--preset--color--accent-1); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.01em; } .bst-stat .meta { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-muted); } /* ── Three steps how-it-works ── */ .bst-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--50, 32px); } @media (max-width: 880px) { .bst-steps-grid { grid-template-columns: 1fr; } } .bst-step { padding: var(--wp--preset--spacing--50, 32px); background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--md, 8px); position: relative; } .bst-step .num { font-family: var(--wp--preset--font-family--heading); font-size: 48px; font-weight: 700; letter-spacing: -0.04em; color: var(--wp--preset--color--accent-1); line-height: 1; margin-bottom: var(--wp--preset--spacing--40, 24px); display: flex; align-items: baseline; gap: 8px; } .bst-step .num small { font-family: var(--wp--preset--font-family--mono); font-size: 10px; color: var(--wp--preset--color--contrast-faint); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 400; } .bst-step h3 { font-family: var(--wp--preset--font-family--heading); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 10px; } .bst-step p { color: var(--wp--preset--color--contrast-muted); font-size: 14px; line-height: 1.6; margin: 0; } .bst-step .meta { margin-top: var(--wp--preset--spacing--40, 24px); padding-top: var(--wp--preset--spacing--30, 16px); border-top: 1px solid var(--wp--preset--color--neutral); font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--contrast-faint); text-transform: uppercase; letter-spacing: 0.06em; } .bst-step .meta span { color: var(--wp--preset--color--accent-1); } /* ── v0.1.18: armory tile becomes a link — kill default link styling ── */ a.bst-loadout { color: inherit; text-decoration: none; } a.bst-loadout:hover { text-decoration: none; } /* ── v0.1.18: reduced-motion guard for new animations ── */ @media (prefers-reduced-motion: reduce) { .bst-anatomy::before { animation: none; } } /* ════════════════════════════════════════════════════════════════════════════ v0.1.10 — Mobile responsive Breakpoints: ≥ 880px desktop (default rules everywhere above) 768–880 medium tablet (header collapses, sidebar bottom-sheet) 600–768 small tablet (hero stacks, grid 2-col) < 600 phone (single col, simplified rows, stacked CTAs) ════════════════════════════════════════════════════════════════════════════ */ /* ──────────── Header / hamburger drawer (< 880px) ──────────── */ @media (max-width: 879.98px) { .bst-header-inner { flex-wrap: nowrap; gap: 12px; } .bst-nav-desktop, /* BST-97: .bst-header-signin / .bst-header-signup removed — no longer in use */ .bst-search-desktop { display: none; } .bst-logo-word { display: none; /* BST-83: design shows only mark (28px) at < 880px — no wordmark */ } .bst-header-actions { gap: 6px; } .bst-icon-btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; } .bst-hamburger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px; background: var(--wp--preset--color--base-elevated); border: 1px solid var(--wp--preset--color--neutral); border-radius: var(--wp--custom--border--radius--sm); cursor: pointer; padding: 0; transition: border-color 150ms; } .bst-hamburger:hover { border-color: var(--wp--preset--color--accent-1); } .bst-hamburger-bar { display: block; width: 18px; height: 2px; background: var(--wp--preset--color--contrast); border-radius: 1px; transition: transform 200ms, opacity 200ms; } .bst-nav-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } /* v0.1.20 BUG-016: hamburger is now