/* ============================================================ RANSOR — WooCommerce (PLP / PDP / cart / checkout) Tokens inherited from theme.css :root ============================================================ */ .woo-section{padding-top:56px} .woo-head{margin-bottom:18px} .woo-head h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(2rem,5vw,3.4rem);margin-top:12px} .woo-head-desc{color:var(--muted);max-width:62ch;margin-top:12px} /* category hero banner */ .cat-hero{position:relative;min-height:170px;background-size:cover;background-position:center right;border-radius:4px;overflow:hidden;display:flex;align-items:center;margin-bottom:18px;border:1px solid var(--hairline)} .cat-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 18%,rgba(10,12,18,.7) 44%,transparent 78%)} .cat-hero-copy{position:relative;z-index:2;padding:26px 34px;max-width:560px} .cat-hero-copy h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.7rem,3.6vw,2.6rem);margin-top:6px;line-height:1.05} .cat-hero-copy .woo-head-desc{color:var(--muted);margin-top:8px;max-width:52ch;font-size:.88rem;line-height:1.5} @media(max-width:640px){.cat-hero{min-height:120px}.cat-hero-copy{padding:18px 20px}.cat-hero::before{background:linear-gradient(90deg,var(--void) 34%,rgba(10,12,18,.86) 64%,rgba(10,12,18,.74) 100%)}} /* breadcrumb */ .woocommerce-breadcrumb{font-family:var(--hud);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px} .woocommerce-breadcrumb a{color:var(--muted)} .woocommerce-breadcrumb a:hover{color:var(--gold)} /* filter pills */ .filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:48px 0 0;padding-top:26px;border-top:1px solid var(--hairline)} .filter-bar-h{flex:0 0 100%;font-family:var(--hud);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px} .filter-bar .pill{font-family:var(--hud);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hairline-gold);padding:9px 14px;border-radius:2px;transition:.2s;display:inline-flex;gap:8px;align-items:center} .filter-bar .pill:hover{color:var(--ink);border-color:var(--gold)} .filter-bar .pill.active{background:var(--gold);color:#221a08;border-color:var(--gold)} /* result count + ordering */ .woocommerce-result-count{color:var(--muted-2);font-family:var(--hud);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin:0;line-height:44px} .woocommerce-ordering select{background:var(--surface);color:var(--ink);border:1px solid var(--hairline-gold);padding:11px 14px;font-family:var(--hud);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;border-radius:2px} /* product grid */ .woocommerce ul.products{display:grid!important;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;margin:0;padding:0;clear:both} .woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;padding:0!important;position:relative;display:flex;flex-direction:column;border:1px solid var(--hairline);background:var(--surface);border-radius:3px;overflow:hidden;transition:transform .25s,border-color .25s} .woocommerce ul.products li.product:hover{transform:translateY(-4px);border-color:var(--hairline-gold)} @media(max-width:820px){.woocommerce ul.products{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.woocommerce ul.products{gap:12px}} @media(max-width:380px){.woocommerce ul.products{grid-template-columns:1fr}} .woocommerce ul.products li.product .pcard-link{display:block;color:inherit} .woocommerce ul.products li.product .ph{aspect-ratio:1/1;overflow:hidden;background:#0d1016;border-bottom:1px solid var(--hairline-gold);position:relative} .woocommerce ul.products li.product .ph img{width:100%;height:100%;object-fit:cover;margin:0;transition:transform .5s} .woocommerce ul.products li.product:hover .ph img{transform:scale(1.04)} .woocommerce ul.products li.product .pb{padding:18px 18px 8px} .woocommerce ul.products li.product .cat-t{font-family:var(--hud);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)} .woocommerce ul.products li.product h5,.woocommerce ul.products li.product .pcard-title{font-size:.96rem;margin:8px 0 12px;line-height:1.3;color:var(--ink)} .woocommerce ul.products li.product .row{display:flex;justify-content:space-between;align-items:center;gap:10px} .woocommerce ul.products li.product .p{font-family:var(--hud);color:var(--gold);font-variant-numeric:tabular-nums} .pcard-cta{padding:0 18px 18px;margin-top:auto} .pcard-cta .button{width:100%;justify-content:center;text-align:center} li.product .onsale{position:absolute;top:12px;left:12px;z-index:2;background:var(--gold);color:#221a08;font-family:var(--hud);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:2px;margin:0} /* buttons (global woo) */ .woocommerce a.button,.woocommerce button.button,.woocommerce .button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce a.button.alt,.woocommerce button.button.alt{ font-family:var(--hud);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase; background:linear-gradient(180deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));color:#221a08;border:0; padding:13px 22px;cursor:pointer;border-radius:2px;transition:transform .18s,box-shadow .25s;display:inline-flex;align-items:center;gap:.5em;line-height:1} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover,.woocommerce input.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(var(--gold-rgb),.7);color:#221a08} .woocommerce .added_to_cart{color:var(--gold)!important;background:none!important;padding:6px 0!important;font-family:var(--hud);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase} /* pagination */ .woocommerce nav.woocommerce-pagination ul{border:0;margin-top:40px} .woocommerce nav.woocommerce-pagination ul li{border:0} .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{font-family:var(--hud);color:var(--muted);border:1px solid var(--hairline-gold);border-radius:2px;padding:.6em 1em;margin:0 3px} .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--gold);color:#221a08;border-color:var(--gold)} /* ===== PDP ===== */ .single-product div.product{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:start} @media(max-width:900px){.single-product div.product{grid-template-columns:1fr;gap:30px}} .single-product .woocommerce-product-gallery{margin:0;width:100%!important;float:none!important} .single-product .woocommerce-product-gallery__image img{border-radius:4px} .single-product .product .summary.entry-summary{margin:0;float:none!important;width:100%!important} /* below-summary blocks span full grid width, not a single column */ .single-product div.product>.woocommerce-tabs,.single-product div.product>.pdp-mission,.single-product div.product>.related,.single-product div.product>.up-sells{grid-column:1 / -1} .single-product div.product>.pdp-mission{padding-left:34px;padding-right:34px} .single-product .product_title{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.05;margin:6px 0 14px} .single-product .price,.woocommerce div.product p.price,.woocommerce div.product span.price{font-family:var(--hud);color:var(--ink);font-size:1.75rem;margin:0} .single-product .price del{color:var(--muted-2);font-size:.6em;margin-right:8px;opacity:.8} .single-product .price ins{color:var(--gold);text-decoration:none} .bnpl{font-family:var(--hud);font-size:.78rem;letter-spacing:.04em;color:var(--gold);margin:8px 0 16px} .pdp-signals{margin:14px 0;display:flex;flex-direction:column;gap:6px;align-items:flex-start} /* Country-aware US notes (customs / warranty) + quote CTA */ .sig-note{font-family:var(--body,inherit);font-size:.75rem;line-height:1.5;color:var(--muted-2);letter-spacing:.01em;max-width:54ch;text-transform:none} .pdp-quote-cta{margin-top:8px;font-size:.7rem!important;padding:11px 20px!important} .sig-ok,.single-product p.stock.in-stock{color:var(--in-stock);font-family:var(--hud);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;margin:0} .sig-ok::before,.single-product p.stock.in-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--in-stock);box-shadow:0 0 10px var(--in-stock)} .sig-warn,.single-product p.stock.out-of-stock{color:var(--danger);font-family:var(--hud);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;margin:0} .single-product .woocommerce-product-details__short-description{color:var(--muted);margin:18px 0;max-width:54ch} .single-product .sku_wrapper{font-family:var(--hud);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)} .single-product .cart{margin:22px 0} .single-product .quantity input.qty{background:var(--surface);color:var(--ink);border:1px solid var(--hairline-gold);width:72px;padding:14px 10px;border-radius:2px;text-align:center;font-family:var(--hud)} .single_add_to_cart_button{font-size:.82rem!important;padding:16px 34px!important} .single-product .product_meta{font-family:var(--hud);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-top:20px;border-top:1px solid var(--hairline);padding-top:18px} .single-product .product_meta a{color:var(--muted)} .pdp-trust{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--hairline);display:grid;grid-template-columns:1fr 1fr;gap:12px} .pdp-trust li{font-family:var(--hud);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);position:relative;padding-inline-start:18px} .pdp-trust li::before{content:"◇";position:absolute;inset-inline-start:0;color:var(--gold)} /* PDP tabs */ .woocommerce-tabs{grid-column:1/-1;margin-top:64px} .woocommerce-tabs ul.tabs{list-style:none;margin:0 0 26px;padding:0;border-bottom:1px solid var(--hairline);display:flex;gap:6px;flex-wrap:wrap} .woocommerce-tabs ul.tabs::before{display:none} .woocommerce-tabs ul.tabs li{margin:0;border:0;background:none;padding:0} .woocommerce-tabs ul.tabs li a{font-family:var(--hud);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:14px 20px;display:inline-block;border-bottom:2px solid transparent} .woocommerce-tabs ul.tabs li.active a{color:var(--gold);border-color:var(--gold)} .woocommerce-Tabs-panel h2{font-family:var(--disp);text-transform:uppercase;font-size:1.4rem;margin:0 0 16px} .woocommerce-tabs table.shop_attributes{width:100%;border-collapse:collapse} .woocommerce-tabs table.shop_attributes th,.woocommerce-tabs table.shop_attributes td{border-bottom:1px solid var(--hairline);padding:12px 14px;text-align:left;font-size:.92rem} .woocommerce-tabs table.shop_attributes th{font-family:var(--hud);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);width:32%} .related.products,.up-sells{grid-column:1/-1;margin-top:72px} .related.products>h2,.up-sells>h2{font-family:var(--disp);text-transform:uppercase;font-size:1.8rem;margin-bottom:26px} /* notices */ /* Notices carry their 3px gold rule on the TOP edge (set below, with the checkout overrides). The inline-start accent bar is reserved for authored statements — see DESIGN.md components.accent-bar. */ .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{background:var(--surface);border:1px solid var(--hairline);color:var(--ink);padding:16px 20px;border-radius:2px;list-style:none} .woocommerce-message .button,.woocommerce-error .button,.woocommerce-info .button{padding:8px 14px} /* cart + checkout */ .woocommerce table.shop_table{border:1px solid var(--hairline);border-collapse:collapse;width:100%;border-radius:3px} .woocommerce table.shop_table th,.woocommerce table.shop_table td{border-top:1px solid var(--hairline);padding:16px;color:var(--ink)} .woocommerce table.shop_table th{font-family:var(--hud);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)} .woocommerce .cart-collaterals .cart_totals,.woocommerce-checkout #order_review,.woocommerce-checkout #order_review_heading{background:var(--surface);border:1px solid var(--hairline);padding:24px;border-radius:3px;margin-top:0} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.select2-container--default .select2-selection--single{background:var(--surface)!important;border:1px solid var(--hairline-gold)!important;color:var(--ink)!important;padding:13px!important;border-radius:2px!important;height:auto!important} .woocommerce form .form-row label,.woocommerce-checkout h3{font-family:var(--hud);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .woocommerce-checkout h3{color:var(--ink);font-size:.9rem} /* Select2 region dropdown → dark cosmic theme (was default white/blue) */ .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink)!important;line-height:1.3!important;padding:0!important;padding-inline-end:30px!important} .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--muted-2)!important} /* arrow: a clear GOLD chevron at the trailing (inline-end) edge, never over the text. The default Select2 border-triangle is near-invisible on the dark ground. */ .select2-container--default .select2-selection--single .select2-selection__arrow{top:0!important;bottom:0!important;height:auto!important;transform:none;left:auto!important;right:auto!important;inset-inline-end:12px!important;width:18px!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D0B36F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 15px no-repeat!important;transition:transform .2s ease} .select2-container--open .select2-selection--single .select2-selection__arrow{transform:rotate(180deg)} .select2-container--default .select2-selection--single .select2-selection__arrow b{display:none!important} .select2-container--default .select2-selection--single:focus,.select2-container--default.select2-container--focus .select2-selection--single{border-color:var(--gold)!important;outline:none} /* ...but a border-colour change alone is not a focus indicator, and this is the checkout country/state control — the one field on the buying path. Restore a real ring for the keyboard. Select2 puts the tabbable role on the rendered span, so :focus-visible on the container never fires; key off the --focus class Select2 sets, and off the span when it takes focus directly. */ .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default .select2-selection--single:focus-visible{ outline:2px solid var(--gold-bright)!important;outline-offset:2px!important; } .select2-dropdown{background:var(--surface)!important;border:1px solid var(--gold)!important;color:var(--ink)!important;border-radius:2px} .select2-container--default .select2-search--dropdown .select2-search__field{background:var(--void)!important;border:1px solid var(--hairline-gold)!important;color:var(--ink)!important;border-radius:2px;padding:9px 11px} .select2-results__options{max-height:300px!important} .select2-container--default .select2-results__option{color:var(--muted)!important;padding:10px 13px!important;background:transparent!important} .select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted{background:var(--gold)!important;color:#221a08!important} .select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option--selected{background:rgba(var(--gold-rgb),.16)!important;color:var(--gold-bright)!important} /* Field descriptions → subtle inline hint (was a floating light tooltip) */ .woocommerce form .form-row .description,.woocommerce-input-wrapper .description{display:block!important;position:static!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--muted-2)!important;font-family:var(--body,inherit);font-size:.74rem;line-height:1.5;letter-spacing:.01em;text-transform:none;margin:6px 2px 0!important;padding:0!important;max-width:none!important;opacity:1!important;z-index:auto!important} .woocommerce form .form-row .description::before,.woocommerce form .form-row .description::after{display:none!important} /* City field: auto-mapped region gets a subtle locked look */ #billing_state_field.ransor-region-auto .select2-selection--single{opacity:.92} /* Required-field asterisk: WooCommerce's default dark red is nearly invisible on the dark theme — use the brand gold so it reads clearly. */ .woocommerce .form-row abbr.required,.woocommerce .form-row .required,.woocommerce-checkout abbr.required,abbr.required{color:var(--gold)!important;border:0!important;border-bottom:0!important;text-decoration:none!important;font-weight:700;font-size:1em;margin-inline-start:3px} .woocommerce .form-row .optional{color:var(--muted-2)!important} /* ===== responsive: PDP / shop ===== */ @media(max-width:900px){ .single-product div.product{grid-template-columns:1fr} .single-product .woocommerce-product-gallery,.single-product .summary.entry-summary{min-width:0;max-width:100%} } @media(max-width:600px){ .woo-section{padding-top:40px} .woo-head h1,.cat-hero-copy h1{font-size:clamp(1.8rem,8.5vw,2.6rem)} .cat-hero{min-height:130px}.cat-hero-copy{padding:18px 20px} .single-product .product_title{font-size:clamp(1.5rem,7.5vw,2.2rem);overflow-wrap:break-word;word-break:break-word} .single-product .price{font-size:1.5rem} .bnpl,.sig-ok,.single-product p.stock.in-stock,.single-product p.stock.out-of-stock,.pdp-signals span{white-space:normal;letter-spacing:.05em;font-size:.69rem;line-height:1.5} .pdp-trust{grid-template-columns:1fr;gap:10px} .single-product .product_meta{overflow-wrap:break-word;word-break:break-word} .woocommerce-tabs ul.tabs li a{padding:12px 14px;font-size:.7rem} .related.products>h2,.up-sells>h2{font-size:1.4rem} } /* ===== product description content (rewritten copy) ===== */ .woocommerce-Tabs-panel--description>p,.woocommerce-Tabs-panel p{color:var(--muted);margin:0 0 16px;max-width:72ch;font-size:1rem} .woocommerce-Tabs-panel--description h3,.woocommerce-Tabs-panel h3{font-family:var(--hud);font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:30px 0 16px} .woocommerce-Tabs-panel--description ul{list-style:none;padding:0;margin:0 0 22px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px} .woocommerce-Tabs-panel--description ul li{position:relative;padding-left:22px;color:var(--ink);font-size:.95rem} .woocommerce-Tabs-panel--description ul li::before{content:"◇";position:absolute;left:0;color:var(--gold)} table.ransor-specs{width:100%;border-collapse:collapse;max-width:680px} table.ransor-specs td{border-bottom:1px solid var(--hairline);padding:12px 14px;vertical-align:top} table.ransor-specs tr:first-child td{border-top:1px solid var(--hairline)} table.ransor-specs td:first-child{font-family:var(--hud);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);width:42%} table.ransor-specs td:last-child{color:var(--ink)} @media(max-width:600px){.woocommerce-Tabs-panel--description ul{grid-template-columns:1fr}table.ransor-specs td:first-child{width:48%}} /* ---- PDP: cosmic "Built for the mission" feature band ---- */ .pdp-mission{margin:26px 0 6px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:radial-gradient(60% 120% at 82% 0%,rgba(var(--gold-rgb),.07),transparent 60%),radial-gradient(50% 100% at 10% 100%,rgba(51,101,140,.08),transparent 60%),var(--void-2);padding:46px 0} .pdp-mission .kicker{color:var(--gold)} .pdp-mission h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.6rem,3.5vw,2.6rem);margin:12px 0 30px} .pdp-mission-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .pm-card{background:rgba(16,20,31,.55);border:1px solid var(--hairline);border-radius:6px;padding:26px 22px;transition:border-color .2s,transform .2s} .pm-card:hover{border-color:var(--hairline-gold);transform:translateY(-3px)} .pm-card .ic{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--hairline-gold);border-radius:10px;color:var(--gold);margin-bottom:16px} .pm-card .ic svg{width:22px;height:22px} .pm-card h6,.pm-card .pm-title{font-family:var(--disp);text-transform:uppercase;font-size:1.05rem;margin:0 0 8px;color:var(--ink)} .pm-card p{color:var(--muted);margin:0;font-size:.9rem;line-height:1.55} @media(max-width:820px){.pdp-mission-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.pdp-mission-grid{grid-template-columns:1fr}} /* ===== cart / checkout / account polish ===== */ .woocommerce table.shop_table{background:rgba(16,20,31,.4);border-radius:6px;overflow:hidden;margin-bottom:26px} .woocommerce table.shop_table td.product-thumbnail img{width:64px;border-radius:4px;border:1px solid var(--hairline)} .woocommerce .cart .product-name a{color:var(--ink);font-family:var(--disp);text-transform:uppercase;font-size:.95rem} .woocommerce .cart .product-name a:hover{color:var(--gold)} .woocommerce .product-subtotal .amount,.woocommerce .order-total .amount,.woocommerce tr.order-total .amount{color:var(--gold);font-family:var(--hud)} .woocommerce a.remove{color:var(--danger)!important;border:1px solid var(--hairline);border-radius:50%;width:22px;height:22px;line-height:20px;text-align:center;font-weight:400} .woocommerce a.remove:hover{background:var(--danger)!important;color:#fff!important} .woocommerce .quantity input.qty{background:var(--void);color:var(--ink);border:1px solid var(--hairline-gold);width:68px;padding:10px;border-radius:3px;text-align:center;font-family:var(--hud)} .woocommerce .cart-collaterals{width:100%;display:flex;justify-content:flex-end} .woocommerce .cart-collaterals .cart_totals{float:none;width:100%;max-width:440px} /* Cart as two columns (items | totals) so the totals box isn't a lone card stranded bottom-right with a huge empty void beside it on wide/4K screens. */ @media(min-width:1000px){ .woocommerce-cart .woocommerce{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(340px,.85fr);gap:44px;align-items:start} .woocommerce-cart .woocommerce > *{grid-column:1 / -1} .woocommerce-cart .woocommerce > form.woocommerce-cart-form{grid-column:1;grid-row:2} .woocommerce-cart .woocommerce > .cart-collaterals{grid-column:2;grid-row:2;width:auto;position:sticky;top:100px} .woocommerce-cart .cart-collaterals{justify-content:stretch} .woocommerce-cart .cart-collaterals .cart_totals{max-width:none;width:100%} .woocommerce-cart form.woocommerce-cart-form{margin:0} } .woocommerce .cart_totals h2,.woocommerce-checkout #order_review_heading{font-family:var(--disp);text-transform:uppercase;font-size:1.5rem;color:var(--ink);letter-spacing:0;margin-bottom:14px} .woocommerce .wc-proceed-to-checkout a.checkout-button{width:100%;justify-content:center;font-size:.88rem;margin-top:8px} .woocommerce .actions .coupon input.input-text{width:200px;margin-right:8px} @media(min-width:900px){ .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start} .woocommerce-checkout form.checkout #customer_details{grid-column:1;grid-row:1 / span 2} .woocommerce-checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;margin-top:0} .woocommerce-checkout form.checkout #order_review{grid-column:2;grid-row:2} } .woocommerce-checkout #payment{background:transparent!important;border-radius:6px} .woocommerce-checkout #payment ul.payment_methods{border:0!important;padding:0 0 12px!important} .woocommerce #place_order,.woocommerce #payment .place-order .button{width:100%;justify-content:center;font-size:.9rem} .woocommerce-info,.woocommerce-message,.woocommerce-error,.woocommerce-noreviews{border-top:3px solid var(--gold)!important;background:rgba(16,20,31,.55);color:var(--ink);border-radius:0 0 4px 4px} /* Errors keep the same top rule, in the danger hue. Must win over the !important above, which is there to beat WooCommerce's own notice styles. */ .woocommerce-error{border-top-color:var(--danger)!important} .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 30px;padding:0 0 16px;display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--hairline)} .woocommerce-account .woocommerce-MyAccount-navigation li a{font-family:var(--hud);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:9px 15px;border:1px solid var(--hairline);border-radius:3px;display:inline-block} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{color:var(--gold-bright);border-color:var(--hairline-gold)} .woocommerce form.login,.woocommerce form.register,.woocommerce-account .woocommerce-MyAccount-content{border:1px solid var(--hairline-gold);border-radius:6px;padding:30px;background:rgba(16,20,31,.4)} /* fix: keep the product-gallery zoom trigger below the sticky header / mega-menu */ .woocommerce-product-gallery__trigger{z-index:2!important} /* delivery signal (distinct from the green in-stock status) */ .sig-ok.ship{color:var(--gold-bright)} .sig-ok.ship::before{background:var(--gold)!important;box-shadow:0 0 10px rgba(var(--gold-rgb),.7)!important} /* fix: checkout order-review product name wrapping one-word-per-line */ .woocommerce-checkout #order_review{overflow-wrap:anywhere} .woocommerce-checkout-review-order-table{table-layout:fixed;width:100%} .woocommerce-checkout-review-order-table .product-name,.woocommerce-checkout-review-order-table th.product-name{width:auto;word-break:normal;overflow-wrap:break-word;padding-right:14px;line-height:1.45;vertical-align:top} .woocommerce-checkout-review-order-table .product-total,.woocommerce-checkout-review-order-table th.product-total{width:110px;text-align:right;white-space:nowrap;vertical-align:top} .woocommerce-checkout-review-order-table .product-name .product-quantity{color:var(--muted);font-weight:400} @media(min-width:900px){.woocommerce-checkout form.checkout{grid-template-columns:1.15fr .85fr}} /* checkout: fixed-width order review + stacked billing/shipping so the name has room */ @media(min-width:900px){ .woocommerce-checkout form.checkout{grid-template-columns:minmax(0,1fr) 400px!important} .woocommerce-checkout #customer_details .col2-set{display:flex;flex-direction:column} .woocommerce-checkout #customer_details .col2-set .col-1,.woocommerce-checkout #customer_details .col2-set .col-2{width:100%;max-width:100%;float:none;margin:0 0 8px} } /* fix: phone field — restore left padding so the country flag doesn't overlap the number */ .woocommerce form .form-row input#billing_phone.input-text,.woocommerce form .form-row input#shipping_phone.input-text,.woocommerce form .form-row .iti input[type="tel"].input-text{padding-left:54px!important} .iti{width:100%;display:block} /* intl-tel-input: dark country dropdown + gold arrow (was default white) */ .iti__arrow{border-top-color:var(--gold)!important} .iti__arrow--up{border-top-color:transparent!important;border-bottom-color:var(--gold)!important} .iti__country-list{background:var(--surface)!important;border:1px solid var(--hairline-gold)!important;color:var(--ink)!important;box-shadow:0 20px 50px -20px rgba(0,0,0,.85)!important} .iti__country{color:var(--ink)!important} .iti__country.iti__highlight{background:var(--gold)!important;color:#221a08!important} .iti__dial-code{color:var(--muted-2)!important} /* Checkboxes (terms, create-account): gold-themed, was an out-of-place default box */ /* display:inline-block is load-bearing, not cosmetic: WooCommerce ships `.woocommerce form .form-row .input-checkbox{display:inline}` and this rule never declared display, so it stood. With appearance:none the box is no longer replaced, and width/height do not apply to a non-replaced INLINE box — the terms and create-account checkboxes collapsed to their 2 border pixels. */ .woocommerce-checkout input[type="checkbox"],.woocommerce form .form-row input[type="checkbox"]{ -webkit-appearance:none;appearance:none;display:inline-block;width:18px;height:18px;min-width:18px;border:1px solid var(--hairline-gold);border-radius:3px;background:var(--surface);cursor:pointer;position:relative;vertical-align:middle;margin:0;margin-inline-end:8px;flex:0 0 auto;top:-1px} .woocommerce-checkout input[type="checkbox"]:checked,.woocommerce form .form-row input[type="checkbox"]:checked{background:var(--gold);border-color:var(--gold)} .woocommerce-checkout input[type="checkbox"]:checked::after,.woocommerce form .form-row input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #221a08;border-width:0 2px 2px 0;transform:rotate(45deg)} .woocommerce-checkout input[type="checkbox"]:focus-visible,.woocommerce form .form-row input[type="checkbox"]:focus-visible{outline:2px solid var(--gold);outline-offset:1px} /* The sentence is the target, not the 18px box: a required consent control should not need a precise tap. Both consent rows on the checkout get the same treatment. */ .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox, .woocommerce-checkout .woocommerce-form__label-for-checkbox{display:flex;align-items:flex-start;gap:10px;min-height:44px;cursor:pointer;line-height:1.5} /* ============================================================ Polish pass (full-review) — 2026-07-16 ============================================================ */ /* Never break a price mid-number (checkout summary + cart totals) */ .woocommerce-Price-amount,.woocommerce-Price-amount bdi{white-space:nowrap} .woocommerce-checkout-review-order-table .product-total, .woocommerce-checkout-review-order-table th.product-total{width:128px} /* Payment methods + COD description box → dark, on-brand (was default lavender) */ .woocommerce-checkout #payment ul.payment_methods li{border-bottom:1px solid var(--hairline);padding:14px 0;list-style:none} .woocommerce-checkout #payment ul.payment_methods li:last-child{border-bottom:0} .woocommerce-checkout #payment ul.payment_methods label{color:var(--ink);font-family:var(--hud);font-size:.8rem;letter-spacing:.02em} .woocommerce-checkout #payment div.payment_box{background:var(--void)!important;color:var(--muted);border:1px solid var(--hairline);border-radius:3px;margin-top:10px;font-size:.85rem} .woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--void)!important} .woocommerce-checkout #payment div.payment_box p{margin:0} /* Cart thumbnails — larger on desktop, visible + centered on mobile */ .woocommerce table.shop_table td.product-thumbnail img{width:80px} @media(max-width:600px){ /* Mobile cart row = a card: thumbnail on top, name full-width, then label/value rows. Without this the desktop `product-name{width:44%}` carries into the stacked layout and squeezes the title to one word per line. */ .woocommerce table.shop_table_responsive.cart tr.cart_item{display:block;position:relative;padding:6px 0 14px} .woocommerce table.shop_table_responsive td.product-thumbnail{display:block;text-align:center;border-bottom:0;padding-bottom:0} .woocommerce table.shop_table_responsive td.product-thumbnail::before{display:none} .woocommerce table.shop_table td.product-thumbnail img{width:110px;max-width:none;margin:6px auto 0} /* product name: full width, centred, no "Product:" label (image says it) */ .woocommerce table.cart td.product-name{width:auto!important;display:block;text-align:center;padding:12px 14px 14px!important} .woocommerce table.shop_table_responsive td.product-name::before{display:none!important} .woocommerce .cart .product-name a{display:inline-block;max-width:100%;font-size:.95rem;line-height:1.3;text-align:center} /* remaining cells: label left, value right */ .woocommerce table.shop_table_responsive td{text-align:end!important;padding:10px 14px!important} .woocommerce table.shop_table_responsive td::before{float:none;position:absolute;inset-inline-start:14px;font-family:var(--hud);font-size:.69rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)} .woocommerce table.shop_table_responsive.cart tr.cart_item td:not(.product-thumbnail):not(.product-name):not(.product-remove){position:relative} /* td::before above is position:absolute, but only CART ITEM cells were made position:relative — so in CART TOTALS the label anchored to the page box instead of its own cell and rendered ~90px above its row, colliding with the shipping options. Give those cells a containing block too. */ .woocommerce .cart_totals td, .woocommerce .cart_totals th, .woocommerce-checkout #order_review td{position:relative} /* the shipping row holds a multi-line option list: reserve the label's gutter so the options never wrap underneath it */ .woocommerce .cart_totals tr.woocommerce-shipping-totals td{padding-top:30px!important} .woocommerce .cart_totals tr.woocommerce-shipping-totals td::before{top:8px} /* remove (x) pinned top-right instead of taking its own row */ .woocommerce table.shop_table_responsive td.product-remove{position:absolute;top:6px;inset-inline-end:6px;width:auto;padding:0!important;border:0!important;z-index:2} .woocommerce table.shop_table_responsive td.product-remove::before{display:none!important} } /* Quantity stepper (JS wraps .qty in .ransor-qty) */ .ransor-qty{display:inline-flex;align-items:stretch;border:1px solid var(--hairline-gold);border-radius:3px;overflow:hidden;vertical-align:middle} .ransor-qty button{background:var(--void);color:var(--gold);border:0;width:40px;font-size:1.15rem;line-height:1;cursor:pointer;font-family:var(--hud);transition:background .2s} .ransor-qty button:hover{background:var(--surface-2)} .ransor-qty input.qty{border:0!important;border-left:1px solid var(--hairline)!important;border-right:1px solid var(--hairline)!important;border-radius:0!important;width:54px!important;padding:10px 4px!important} /* Sticky add-to-cart bar (mobile PDP) */ .ransor-sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(12,15,23,.97);backdrop-filter:blur(12px);border-top:1px solid var(--hairline-gold);padding:10px 16px;display:none;align-items:center;justify-content:space-between;gap:14px;transform:translateY(110%);transition:transform .3s ease} .ransor-sticky-atc.show{transform:none} .ransor-sticky-atc .sa-info{display:flex;flex-direction:column;min-width:0} .ransor-sticky-atc .sa-name{font-size:.69rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:42vw} .ransor-sticky-atc .sa-price{font-family:var(--hud);color:var(--gold);font-size:1.05rem;white-space:nowrap} .ransor-sticky-atc .btn{padding:13px 22px;font-size:.74rem;flex:0 0 auto} @media(max-width:820px){.single-product .ransor-sticky-atc.ready{display:flex}} /* Free-shipping progress cue (cart) */ .ransor-freeship{margin:0 0 18px;padding:14px 16px;border:1px solid var(--hairline-gold);border-radius:3px;background:var(--surface);font-family:var(--hud);font-size:.78rem;letter-spacing:.02em;color:var(--muted)} .ransor-freeship .fs-bar{height:6px;border-radius:4px;background:var(--void);margin-top:10px;overflow:hidden} .ransor-freeship .fs-fill{height:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));transition:width .4s} .ransor-freeship strong{color:var(--gold)} .ransor-freeship.done{color:var(--in-stock)} /* PDP delivery-estimate line */ .pdp-signals .sig-info{display:block;color:var(--muted);font-size:.82rem;margin-top:5px;padding-left:2px} /* ============================================================ Cart + checkout layout fixes (2026-07-16, from QA screenshots) ============================================================ */ /* CART: give the product name room; stop one-word-per-line breaks */ .woocommerce table.cart{table-layout:auto;width:100%} .woocommerce table.cart td.product-name,.woocommerce table.cart th.product-name{width:44%} .woocommerce table.cart td.product-thumbnail,.woocommerce table.cart th.product-thumbnail{width:88px} .woocommerce .cart .product-name a{font-family:var(--disp);text-transform:uppercase;font-size:.9rem;line-height:1.22;letter-spacing:0;word-break:normal;overflow-wrap:break-word;display:inline-block} /* max-width:none is what makes the thumbnail EXIST: the global img{max-width:100%} inside an auto-layout table is circular (cell width depends on image width depends on cell width) and collapsed the image to 2px — the cart looked like it had no thumbnails at all. A fixed 64px box opts out of that loop. */ .woocommerce table.cart td.product-thumbnail img{width:64px;height:64px;max-width:none;object-fit:contain;background:var(--void);border:1px solid var(--hairline);border-radius:4px} .woocommerce table.cart td.product-price,.woocommerce table.cart td.product-subtotal{white-space:nowrap} /* Remove (X): muted → gold on hover, not magenta */ .woocommerce a.remove{color:var(--muted-2)!important;border:1px solid var(--hairline)!important;border-radius:50%;width:24px;height:24px;line-height:22px;text-align:center;font-weight:400} .woocommerce a.remove:hover{background:transparent!important;color:var(--gold)!important;border-color:var(--hairline-gold)!important} /* Coupon input: themed dark, not white */ .woocommerce .actions .coupon{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .woocommerce .actions .coupon input.input-text{width:230px;max-width:100%;margin:0;background:var(--void);border:1px solid var(--hairline-gold);color:var(--ink);border-radius:3px;padding:0 14px;height:46px;font-family:var(--body)} .woocommerce .actions .coupon input.input-text::placeholder{color:var(--muted-2)} /* CHECKOUT: one full-width details column with billing/shipping/notes stacked */ @media(min-width:900px){ .woocommerce-checkout form.checkout{display:grid!important;grid-template-columns:minmax(0,1fr) 380px!important;gap:40px;align-items:start} .woocommerce-checkout #customer_details{grid-column:1!important;grid-row:1/span 2!important;width:100%!important;display:block!important;float:none!important} .woocommerce-checkout #order_review_heading{grid-column:2!important;grid-row:1!important;margin:0!important} .woocommerce-checkout #order_review{grid-column:2!important;grid-row:2!important} .woocommerce-checkout #customer_details .col2-set{display:block!important;width:100%!important} .woocommerce-checkout #customer_details .col2-set>.col-1, .woocommerce-checkout #customer_details .col2-set>.col-2{float:none!important;width:100%!important;max-width:100%!important;margin:0 0 8px!important;padding:0!important} .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, .woocommerce-checkout .woocommerce-additional-fields{float:none!important;width:100%!important} } /* first/last name side-by-side (now the column is wide) */ .woocommerce-checkout .form-row-first{width:48%!important;float:left!important;margin-right:4%!important} .woocommerce-checkout .form-row-last{width:48%!important;float:left!important;margin-right:0!important} .woocommerce-checkout .form-row-wide{width:100%!important;clear:both} /* order-review heading flush on the review box (one panel, not two) */ .woocommerce-checkout #order_review_heading{border-bottom:0!important;border-radius:4px 4px 0 0!important;padding-bottom:6px!important} .woocommerce-checkout #order_review{border-radius:0 0 4px 4px!important;border-top:0!important} /* order notes textarea taller + themed */ .woocommerce-checkout #order_comments{min-height:96px} /* ==== Cart + checkout: fluid full-width layout (2026-07-16 v2, corrected selectors) ==== */ /* Wider, fluid container on cart/checkout so they don't look boxed/narrow */ .woocommerce-cart .woo-section>.wrap,.woocommerce-checkout .woo-section>.wrap{max-width:min(1500px,94vw)} /* CHECKOUT: fluid 2-col (no fixed px); billing wide, order review fluid; stack billing/shipping/notes */ @media(min-width:900px){ .woocommerce-checkout form.checkout{display:grid!important;grid-template-columns:1.6fr 1fr!important;gap:48px!important;align-items:start} .woocommerce-checkout #customer_details{grid-column:1!important;grid-row:1/span 2!important;width:100%!important;max-width:100%!important;float:none!important} .woocommerce-checkout #order_review_heading{grid-column:2!important;grid-row:1!important;margin:0!important} .woocommerce-checkout #order_review{grid-column:2!important;grid-row:2!important;width:auto!important;max-width:none!important} /* direct children of #customer_details (there is NO .col2-set) — stack full width */ .woocommerce-checkout #customer_details>.col-1,.woocommerce-checkout #customer_details>.col-2{float:none!important;width:100%!important;max-width:100%!important;margin:0 0 6px!important;padding:0!important;clear:both} .woocommerce-checkout .woocommerce-additional-fields{clear:both} } /* CART: totals fluid, right-aligned, not a tiny fixed box */ .woocommerce-cart .cart-collaterals{width:100%;display:block;margin-top:26px} .woocommerce-cart .cart-collaterals .cart_totals{float:none!important;width:100%!important;max-width:560px!important;margin:0 0 0 auto!important} /* Order-review: stop mid-word breaks; wrap at word boundaries */ .woocommerce-checkout #order_review{overflow-wrap:normal!important} .woocommerce-checkout-review-order-table{table-layout:auto!important;width:100%} .woocommerce-checkout-review-order-table td,.woocommerce-checkout-review-order-table th{padding:13px 12px} .woocommerce-checkout-review-order-table .product-name,.woocommerce-checkout-review-order-table th.product-name{width:auto!important;word-break:normal!important;overflow-wrap:break-word!important;line-height:1.4;white-space:normal} /* Order-summary columns: the price column was claiming MORE width than the product name (158px vs 141px at 1024) — the long shipping-method labels in that same column were forcing it wide, squeezing titles to one word per line. A fixed table layout pins the ratio so cell content can no longer distort the columns. */ .woocommerce-checkout-review-order-table{table-layout:fixed!important;width:100%} .woocommerce-checkout-review-order-table th.product-name, .woocommerce-checkout-review-order-table td.product-name{width:60%!important;font-size:.86rem} .woocommerce-checkout-review-order-table th.product-total, .woocommerce-checkout-review-order-table td.product-total{width:40%!important;text-align:end;padding-inline-start:12px!important} .woocommerce-checkout-review-order-table tfoot td{text-align:end} .woocommerce-checkout-review-order-table tfoot th{text-align:start} /* Narrower summary column (tablet/small laptop): the value column must still fit the longest shipping label + the total amount, so even the split there. */ @media(max-width:1200px){ .woocommerce-checkout-review-order-table th.product-name, .woocommerce-checkout-review-order-table td.product-name{width:50%!important} .woocommerce-checkout-review-order-table th.product-total, .woocommerce-checkout-review-order-table td.product-total{width:50%!important} } .woocommerce-checkout-review-order-table .product-total,.woocommerce-checkout-review-order-table th.product-total{width:1%;white-space:nowrap;text-align:right} .woocommerce-checkout-review-order-table .product-name .product-quantity{white-space:nowrap} /* Cart/checkout/account: escape the 760px prose cap; wider fluid container */ .woocommerce-cart .page-content,.woocommerce-checkout .page-content,.woocommerce-account .page-content{max-width:none!important;font-size:1rem} .woocommerce-cart .page-article>.wrap,.woocommerce-checkout .page-article>.wrap,.woocommerce-account .page-article>.wrap{max-width:min(1400px,92vw)} @media(min-width:900px){ .woocommerce-checkout form.checkout{grid-template-columns:1.4fr 1fr!important} } /* WooCommerce notice icons (::before) = off-brand blue glyph overlapping the text — remove */ .woocommerce-info::before,.woocommerce-message::before,.woocommerce-error::before, .woocommerce-noreviews::before,.woocommerce-store-notice::before,.woocommerce ul.woocommerce-error li::before{ display:none!important;content:""!important} .woocommerce-info,.woocommerce-message,.woocommerce-error{padding:16px 22px!important;position:relative} /* WooCommerce floats the action button, so on a narrow screen the message text wraps around it and reads as a collision. Stack them instead. */ @media(max-width:640px){ .woocommerce-message,.woocommerce-info,.woocommerce-error{display:flex;flex-direction:column;align-items:stretch;gap:12px} .woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{float:none!important;margin:0!important;width:100%;text-align:center} } /* Order review: heading = plain title (not a separate box); one clean bordered panel; full-width row dividers */ .woocommerce-checkout #order_review_heading{background:transparent!important;border:0!important;padding:0 2px 14px!important;margin:0!important} .woocommerce-checkout #order_review{border:1px solid var(--hairline)!important;border-radius:6px!important;background:var(--surface)!important;overflow:hidden} .woocommerce-checkout-review-order-table{border:0!important;border-collapse:collapse!important} .woocommerce-checkout-review-order-table tr{border-bottom:1px solid var(--hairline)} .woocommerce-checkout-review-order-table td,.woocommerce-checkout-review-order-table th{border-top:0!important;border-bottom:0!important} .woocommerce-checkout-review-order-table tfoot tr:last-child,.woocommerce-checkout-review-order-table tr.order-total{border-bottom:0} /* ============================================================ Design-system alignment (2026-07-16) — storefront cards ============================================================ */ /* Product-card titles → DISPLAY condensed uppercase (was body Title Case) */ .woocommerce ul.products li.product h5,.woocommerce ul.products li.product .pcard-title{font-family:var(--body)!important;font-weight:700;text-transform:none;letter-spacing:.01em;font-size:1.05rem;line-height:1.16} /* Card CTA → ghost + 10px cut corner (reserve solid gold for PDP primary + hero). "One gold moment per view." */ .woocommerce ul.products li.product .pcard-cta{padding:0 18px 18px} .woocommerce ul.products li.product .pcard-cta .button, .woocommerce ul.products li.product .pcard-cta .added_to_cart{ --cut:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px); position:relative;display:block;width:100%;text-align:center;font-family:var(--hud);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.1; color:var(--ink)!important;border:0!important;border-radius:0!important;background:transparent!important; padding:13px 18px!important;margin:0!important;box-shadow:none!important; clip-path:var(--cut);isolation:isolate;transition:color .2s} /* Cut-corner outline: gold shape under a surface fill inset 1px, so the 1px rim follows the diagonals (a clip-path slices a real/painted border off). */ .woocommerce ul.products li.product .pcard-cta .button::before, .woocommerce ul.products li.product .pcard-cta .button::after, .woocommerce ul.products li.product .pcard-cta .added_to_cart::before, .woocommerce ul.products li.product .pcard-cta .added_to_cart::after{content:"";position:absolute;clip-path:var(--cut);pointer-events:none;transition:background .2s} .woocommerce ul.products li.product .pcard-cta .button::before, .woocommerce ul.products li.product .pcard-cta .added_to_cart::before{inset:0;z-index:-2;background:var(--hairline-gold)} .woocommerce ul.products li.product .pcard-cta .button::after, .woocommerce ul.products li.product .pcard-cta .added_to_cart::after{inset:1px;z-index:-1;background:var(--surface)} .woocommerce ul.products li.product .pcard-cta .button:hover, .woocommerce ul.products li.product .pcard-cta .button:focus{color:var(--gold-bright)!important} .woocommerce ul.products li.product .pcard-cta .button:hover::before, .woocommerce ul.products li.product .pcard-cta .button:focus::before{background:var(--gold)} .woocommerce ul.products li.product .pcard-cta .button:hover::after, .woocommerce ul.products li.product .pcard-cta .button:focus::after{background:linear-gradient(rgba(var(--gold-rgb),.08),rgba(var(--gold-rgb),.08)),var(--surface)} .woocommerce ul.products li.product .pcard-cta .added_to_cart{margin-top:8px!important;color:var(--gold)!important} /* Phones: two cards per row down to 380px (DESIGN.md). theme.css already tightens the card for that width, but the rules above load later with the same specificity and were winning: 18px padding, a larger title and a centred price row. The compact values are repeated here so they apply. */ @media(max-width:600px){ .woocommerce ul.products li.product .pb{padding:14px 14px 8px} .woocommerce ul.products li.product h5,.woocommerce ul.products li.product .pcard-title{font-size:.9rem;margin:6px 0 10px} .woocommerce ul.products li.product .row{align-items:flex-start} .woocommerce ul.products li.product .pcard-cta{padding:0 14px 14px} .woocommerce ul.products li.product .pcard-cta .button, .woocommerce ul.products li.product .pcard-cta .added_to_cart{padding:14px 6px!important;font-size:.68rem;letter-spacing:.08em} } /* Out-of-stock in cards = muted, NOT danger red (danger is errors only) */ .woocommerce ul.products li.product .sig-warn{color:var(--muted-2)!important} /* Sort dropdown → HUD control (was raw native select) */ .woocommerce .woocommerce-ordering select{font-family:var(--hud);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background-color:var(--surface);border:1px solid var(--hairline-gold);border-radius:3px;padding:11px 36px 11px 14px;-webkit-appearance:none;appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat} .woocommerce .woocommerce-ordering select:focus{outline:none;border-color:var(--gold)} /* Shop archive header clears the sticky header */ .woocommerce-shop .woo-head{padding-top:22px} /* Account (logged-out) login + register → centered, balanced 2-column (not full-width) */ .woocommerce-account:not(.logged-in) .page-content{max-width:1040px!important;margin-left:auto;margin-right:auto} @media(min-width:768px){ .woocommerce-account .u-columns.col2-set,.woocommerce-account .woocommerce>.u-columns{display:grid!important;grid-template-columns:1fr 1fr;gap:26px;align-items:start} .woocommerce-account .u-columns .u-column1,.woocommerce-account .u-columns .u-column2, .woocommerce-account .u-columns .col-1,.woocommerce-account .u-columns .col-2{width:100%!important;max-width:100%!important;float:none!important;margin:0!important;padding:0!important} } .woocommerce-account form.login,.woocommerce-account form.register{margin:0;height:100%} .woocommerce-account .u-columns h2{font-family:var(--disp);text-transform:uppercase;font-size:1.4rem;margin-bottom:16px} /* Account login/register → centered single column (overrides the staggered grid) */ .woocommerce-account:not(.logged-in) .page-content{max-width:560px!important;margin-left:auto!important;margin-right:auto!important} .woocommerce-account .u-columns,.woocommerce-account .u-columns.col2-set,.woocommerce-account .woocommerce>.u-columns{display:block!important;grid-template-columns:none!important} .woocommerce-account .u-columns .u-column1,.woocommerce-account .u-columns .u-column2,.woocommerce-account .u-columns .col-1,.woocommerce-account .u-columns .col-2{width:100%!important;max-width:100%!important;float:none!important;margin:0 0 24px!important} /* Gallery zoom trigger: subtle on-brand control (was a bright white circle) */ .woocommerce-product-gallery__trigger{background:rgba(10,12,18,.72)!important;border:1px solid var(--hairline-gold)!important;border-radius:3px!important;opacity:0;transition:opacity .2s} .woocommerce-product-gallery:hover .woocommerce-product-gallery__trigger,.woocommerce-product-gallery__trigger:focus-visible{opacity:1} .woocommerce-product-gallery__trigger::before{border-color:var(--gold)!important} .woocommerce-product-gallery__trigger::after{background:var(--gold)!important} /* Product tabs: on-brand (active tab was default white) */ .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 26px;border-bottom:1px solid var(--hairline)} .woocommerce div.product .woocommerce-tabs ul.tabs::before{border:0} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent;border:0;border-radius:0;margin:0} .woocommerce div.product .woocommerce-tabs ul.tabs li a{font-family:var(--hud);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:14px 22px} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:transparent;border-bottom:2px solid var(--gold)} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--gold)} .woocommerce div.product .woocommerce-tabs ul.tabs li::before,.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none} /* ===== PDP gallery: contained slider + scrollable thumbnail strip ===== (WC flexslider emits an unstyled ol.flex-control-thumbs — with 20+ images it stacked full-size and dragged the page out; this turns it into one strip.) */ .single-product .woocommerce-product-gallery .flex-viewport{border:1px solid var(--hairline);border-radius:4px;background:var(--surface)} .single-product .woocommerce-product-gallery ol.flex-control-thumbs{display:flex;gap:10px;margin:14px 0 0;padding:2px 2px 8px;list-style:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent} .single-product .woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar{height:6px} .single-product .woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:3px} .single-product .woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:3px} .single-product .woocommerce-product-gallery ol.flex-control-thumbs li{flex:0 0 74px;width:74px;height:74px;margin:0;cursor:pointer} .single-product .woocommerce-product-gallery ol.flex-control-thumbs li img{width:100%;height:100%;object-fit:cover;border-radius:3px;border:1px solid var(--hairline);opacity:.55;transition:opacity .2s,border-color .2s} .single-product .woocommerce-product-gallery ol.flex-control-thumbs li img:hover{opacity:.85} .single-product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active{opacity:1;border-color:var(--gold)} @media(max-width:640px){.single-product .woocommerce-product-gallery ol.flex-control-thumbs li{flex-basis:60px;width:60px;height:60px}} /* Cap the gallery stage: portrait shots otherwise blow the viewport to 2000px+. flexslider sets inline heights, hence the important. */ .single-product .woocommerce-product-gallery .flex-viewport{max-height:720px!important} /* ---- Gallery prev/next arrows (FlexSlider directionNav, enabled in PHP) ---- */ .single-product .woocommerce-product-gallery{position:relative} .single-product .woocommerce-product-gallery ul.flex-direction-nav{list-style:none;margin:0;padding:0} .single-product .woocommerce-product-gallery .flex-direction-nav a{ position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:rgba(12,15,23,.72);border:1px solid var(--hairline-gold);border-radius:50%;backdrop-filter:blur(6px); text-indent:-9999px;overflow:hidden;opacity:0;transition:opacity .25s ease,background .2s,border-color .2s,transform .2s} .single-product .woocommerce-product-gallery:hover .flex-direction-nav a, .single-product .woocommerce-product-gallery .flex-direction-nav a:focus-visible{opacity:1} .single-product .woocommerce-product-gallery .flex-direction-nav a:hover{background:rgba(12,15,23,.92);border-color:var(--gold)} .single-product .woocommerce-product-gallery .flex-direction-nav a::before{ content:"";position:absolute;left:0;right:0;top:0;bottom:0;text-indent:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D0B36F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat} .single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev{inset-inline-start:14px} .single-product .woocommerce-product-gallery .flex-direction-nav .flex-next{inset-inline-end:14px} .single-product .woocommerce-product-gallery .flex-direction-nav .flex-next::before{transform:rotate(180deg)} [dir="rtl"] .single-product .woocommerce-product-gallery .flex-direction-nav .flex-prev::before{transform:rotate(180deg)} [dir="rtl"] .single-product .woocommerce-product-gallery .flex-direction-nav .flex-next::before{transform:none} .single-product .woocommerce-product-gallery .flex-direction-nav a.flex-disabled{opacity:0!important;pointer-events:none} /* touch devices: arrows always visible (no hover) + comfortable tap size */ @media(hover:none){ .single-product .woocommerce-product-gallery .flex-direction-nav a{opacity:.92;width:40px;height:40px} } /* Every product photo in the catalogue is 1:1, so the stage must be square too. Capping HEIGHT instead of width letterboxed the image on wide screens: the img element went full-column (704px) while max-height held it at 640, and object-fit:contain painted 32px of dead surface down each side. Cap the gallery WIDTH and let height follow the square source, so the photo always fills its frame edge to edge. */ .single-product .woocommerce-product-gallery__image img{width:100%;height:auto;object-fit:contain;background:var(--surface)} .single-product .woocommerce-product-gallery__wrapper{align-items:center} /* Grid blowout guard: the flexslider track is thousands of px wide; without min-width:0 the grid column expands to min-content and shoves the layout off-canvas. Always allow the gallery cell to shrink. */ /* 720px caps the SQUARE stage. Without it the photo grows with the column (786px at 2560) and overflows the viewport's max-height, clipping its bottom edge — the same bug as the letterbox, just on the other axis. */ .single-product div.product > .woocommerce-product-gallery{min-width:0;max-width:min(100%,720px);overflow:hidden} .single-product .woocommerce-product-gallery .flex-viewport{overflow:hidden!important} /* Shipping calculator link: strip stray pseudo glyphs, style on-brand */ .shipping-calculator-button::before,.shipping-calculator-button::after{content:none!important} .shipping-calculator-button{color:var(--gold);text-decoration:underline;font-size:.9rem} .shipping-calculator-button:hover{color:var(--gold-bright)} /* Cart actions row: coupon + update button overlapped (WC float collision). WC's own `table.cart td.actions` selector outranks a plain .cart .actions, so match its specificity and force a flex row. */ /* Keep the cell as a real table-cell (full width); a flex-ified td collapses out of table sizing to content width. Coupon flows at the start; the update button is pinned to the opposite end for a balanced two-sided row. */ /* Quantity now auto-applies via AJAX — the "Update cart" button is removed and the coupon becomes a clean full-width bar (input stretches, Apply Coupon at the end). */ .woocommerce table.cart td.actions{position:relative;text-align:start;padding:22px 0!important} .woocommerce table.cart td.actions .coupon{display:flex;width:100%;gap:10px;align-items:center;float:none!important;margin:0} .woocommerce table.cart td.actions .coupon input.input-text{flex:1 1 auto;min-width:0} .woocommerce table.cart td.actions .coupon button{flex:0 0 auto;white-space:nowrap} /* On a phone the coupon row wraps, and the button then sat at 154px wide and 10px to the LEFT of the input it belongs to (measured: input l=55 w=307, button l=45 w=154). Make it a full-width block under the field instead. */ @media(max-width:640px){ .woocommerce table.cart td.actions .coupon{flex-wrap:wrap;gap:12px} .woocommerce table.cart td.actions .coupon input.input-text{flex:1 1 100%;width:100%} .woocommerce table.cart td.actions .coupon button{flex:1 1 100%;width:100%;margin:0;text-align:center;justify-content:center} } .woocommerce table.cart td.actions button[name="update_cart"]{display:none!important} .woocommerce table.cart tr.cart_item.ransor-updating{opacity:.45;transition:opacity .2s ease} .woocommerce table.cart tr.cart_item.ransor-updating .quantity{pointer-events:none} /* PDP sale badge: brand gold HUD chip (was WooCommerce's default olive circle) */ .woocommerce span.onsale{ position:absolute;top:14px;inset-inline-start:14px;inset-inline-end:auto;z-index:3; min-height:0;min-width:0;height:auto;width:auto;line-height:1;border:0; background:linear-gradient(180deg,var(--gold-bright),var(--gold) 60%,var(--gold-deep))!important;color:#221a08!important; font-family:var(--hud);font-weight:700;font-size:.69rem;letter-spacing:.16em;text-transform:uppercase; padding:7px 11px;margin:0;border-radius:0; clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); box-shadow:0 8px 18px -8px rgba(0,0,0,.7)} .single-product .woocommerce-product-gallery{position:relative} /* ===== Shipping method radios (cart totals + checkout): brand-styled, RTL-correct ===== */ #shipping_method,.woocommerce-shipping-methods,ul.shipping__list,.shipping ul#shipping_method{list-style:none;margin:0;padding:0} #shipping_method li,.woocommerce-shipping-methods li{display:flex;align-items:center;gap:10px;padding:7px 0;margin:0} #shipping_method input[type="radio"],.woocommerce-shipping-methods input[type="radio"], .woocommerce-checkout #payment input[type="radio"]{ appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:0 0 18px;margin:0;border-radius:50%; border:1.5px solid var(--hairline-gold);background:transparent;cursor:pointer;position:relative;transition:border-color .2s} #shipping_method input[type="radio"]:checked,.woocommerce-shipping-methods input[type="radio"]:checked, .woocommerce-checkout #payment input[type="radio"]:checked{border-color:var(--gold)} #shipping_method input[type="radio"]:checked::after,.woocommerce-shipping-methods input[type="radio"]:checked::after, .woocommerce-checkout #payment input[type="radio"]:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold)} #shipping_method label,.woocommerce-shipping-methods label{margin:0;color:var(--ink);font-size:.95rem;line-height:1.4;cursor:pointer} #shipping_method label .amount,.woocommerce-shipping-methods label .amount{color:var(--gold);font-family:var(--hud)} .woocommerce-shipping-totals td,.woocommerce-shipping-totals th{vertical-align:top} [dir="rtl"] #shipping_method li,[dir="rtl"] .woocommerce-shipping-methods li{flex-direction:row} /* ============================================================ Cable Finder (Cables archive) ============================================================ */ .cable-finder{background:var(--surface);border:1px solid var(--hairline-gold);border-radius:5px;padding:24px 26px;margin:0 0 30px} .cable-finder .cf-head{margin-bottom:18px} .cable-finder .cf-head h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(1.25rem,2.4vw,1.7rem);margin:6px 0 6px;color:var(--ink)} .cable-finder .cf-head p{color:var(--muted);margin:0;font-size:.92rem;max-width:60ch} .cable-finder .cf-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px 26px} .cable-finder .cf-label{display:block;font-family:var(--hud);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:9px} .cable-finder .cf-chips{display:flex;flex-wrap:wrap;gap:8px} .cable-finder .cf-chip{font-family:var(--hud);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--void);border:1px solid var(--hairline-gold);border-radius:3px;padding:9px 13px;min-height:32px;cursor:pointer;transition:color .18s,border-color .18s,background .18s} .cable-finder .cf-chip:hover{color:var(--ink);border-color:var(--gold)} .cable-finder .cf-chip.is-on{background:var(--gold);border-color:var(--gold);color:#221a08;font-weight:700} .cable-finder .cf-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hairline)} .cable-finder .cf-count{font-family:var(--hud);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright)} /* Phones: the chips fold behind a Filters button (open by default from 700px), the same pattern as the chair finder. */ .cable-finder .cf-toggle{display:none} @media (max-width:699.98px){ .cable-finder .cf-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:10px 14px;font-family:var(--hud);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--void);border:1px solid var(--hairline-gold);border-radius:3px;cursor:pointer} .cable-finder .cf-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .cable-finder .cf-chev{flex:none;width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .2s} .cable-finder.is-collapsed .cf-chev{transform:rotate(-135deg)} .cable-finder .cf-body{margin-top:16px} .cable-finder.is-collapsed .cf-body{display:none} } .cable-finder .cf-reset{font-family:var(--hud);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:none;border:0;cursor:pointer;text-decoration:underline;min-height:32px} .cable-finder .cf-reset:hover{color:var(--gold)} .cable-finder .cf-none{margin:14px 0 0;color:var(--gold);font-family:var(--hud);font-size:.76rem;letter-spacing:.06em} @media(max-width:600px){.cable-finder{padding:18px 16px}.cable-finder .cf-groups{grid-template-columns:1fr;gap:16px}} /* PDP "Standards & compatibility" strip (text-based, Club3D-style) */ .pdp-standards{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--hairline)} .pdp-standards .ps-label{display:block;font-family:var(--hud);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px} .pdp-standards .ps-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .pdp-standards .ps-chip{font-family:var(--hud);font-size:.69rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--void);border:1px solid var(--hairline-gold);border-radius:3px;padding:8px 12px;line-height:1} .pdp-standards .ps-chip img,.pdp-standards .ps-chip svg{height:16px;width:auto;display:block} .pdp-standards .ps-attr{margin:12px 2px 0;font-size:.69rem;line-height:1.5;color:var(--muted-2);text-transform:none;letter-spacing:.01em;max-width:60ch} .pdp-standards .ps-caps{margin:10px 2px 0;font-family:var(--hud);font-size:.72rem;letter-spacing:.04em;color:var(--gold-bright);line-height:1.6;text-transform:none} .pdp-standards .ps-cert{display:block;margin-top:8px;color:var(--in-stock);font-size:.72rem;line-height:1.6;letter-spacing:.02em} .pdp-standards .ps-cert::before{content:"◇ ";color:var(--in-stock)} /* CAPTCHA widget on account forms */ /* Captcha framing lives in theme.css; keep only the vertical rhythm here so it does not reset the 3px horizontal inset that aligns it with the form fields. (This rule loads after theme.css and was silently zeroing that margin.) */ .ransor-captcha{margin-top:14px;margin-bottom:4px;min-height:65px} /* ============================================================ CHAIR FINDER — guided selling ============================================================ */ .chair-selector{ margin:0 0 30px; border:1px solid rgba(var(--gold-rgb),.22);border-radius:var(--r,14px); background:linear-gradient(180deg,rgba(var(--gold-rgb),.05),rgba(var(--gold-rgb),.01)); overflow:hidden; } /* The bar is the whole affordance when collapsed, and a heading when open. */ .cs-bar{ display:flex;align-items:baseline;gap:14px;width:100%; padding:15px clamp(16px,2.4vw,26px);font:inherit;text-align:start;cursor:pointer; background:none;border:0;color:var(--ink); } .cs-bar-t{font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1rem,1.6vw,1.18rem)} .cs-bar-s{flex:1;min-width:0;font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cs-chev{ flex:none;width:9px;height:9px;margin-inline-start:auto; border-right:2px solid var(--gold);border-bottom:2px solid var(--gold); transform:rotate(45deg);transition:transform .2s; } .chair-selector.is-collapsed .cs-chev{transform:rotate(-135deg)} .chair-selector.is-collapsed .cs-body{display:none} .cs-bar:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .cs-body{padding:0 clamp(16px,2.4vw,26px) 20px} .cs-steps{display:grid;gap:22px 20px;grid-template-columns:1fr} @media (min-width:700px){.cs-steps{grid-template-columns:repeat(2,1fr)}} @media (min-width:1120px){.cs-steps{grid-template-columns:repeat(4,1fr)}} .cs-step{display:flex;flex-direction:column;gap:4px;min-width:0} .cs-q{font-weight:600;font-size:.88rem;letter-spacing:.01em} .cs-opts{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px} .cs-opt{ padding:7px 13px;font:inherit;font-size:.86rem;line-height:1.2;cursor:pointer; color:var(--fg);background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.14);border-radius:999px; transition:border-color .18s,background .18s,color .18s; } .cs-opt:hover{border-color:rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.08)} .cs-opt:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .cs-opt.is-on{ color:#0b0b12;background:var(--gold);border-color:var(--gold);font-weight:600; } /* ---- results ---- */ .cs-result{margin-top:22px;padding-top:20px;border-top:1px solid rgba(var(--gold-rgb),.18)} .cs-pick{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start} .cs-card{ display:flex;flex-direction:column;gap:10px;min-width:0;padding:16px; border:1px solid rgba(255,255,255,.10);border-radius:var(--r,14px); background:rgba(255,255,255,.02); } .cs-card.is-best{border-color:rgba(var(--gold-rgb),.55);background:rgba(var(--gold-rgb),.06)} .cs-tag{ align-self:flex-start;padding:4px 10px;border-radius:999px; font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700; color:var(--muted);background:rgba(255,255,255,.06); } .cs-card.is-best .cs-tag{color:#0b0b12;background:var(--gold)} .cs-clone{list-style:none;margin:0} .cs-clone .pcard-cta{margin-top:8px} .cs-why-h{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)} .cs-why{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px} .cs-why li{position:relative;padding-inline-start:16px;font-size:.85rem;line-height:1.5;color:var(--muted)} .cs-why li::before{ content:"";position:absolute;inset-inline-start:0;top:.55em; width:6px;height:6px;border-radius:50%;background:var(--gold); } .cs-note{margin:0;font-size:.8rem;line-height:1.55;color:var(--muted)} .cs-reset{ margin-top:18px;padding:8px 16px;font:inherit;font-size:.82rem;cursor:pointer; color:var(--muted);background:none;border:1px solid rgba(255,255,255,.16);border-radius:999px; } .cs-reset:hover{color:var(--fg);border-color:rgba(var(--gold-rgb),.5)} /* Non-matching chairs stay on the page — dimmed, never hidden. The photo fades; the text is muted by colour, not opacity: a dimmed card is still a link, and at .42 its title fell to 3.7:1 and its price to 2.2:1. --muted-2 is the lowest token that clears 4.5:1 on every surface. */ ul.products li.product.cs-dim .ph{opacity:.42;transition:opacity .25s} ul.products li.product.cs-dim:hover .ph{opacity:1} ul.products li.product.cs-dim .cat-t, ul.products li.product.cs-dim .pcard-title, ul.products li.product.cs-dim .p, ul.products li.product.cs-dim .p *, ul.products li.product.cs-dim .stock{color:var(--muted-2)} /* WooCommerce Multi Currency's flag + caret under the PDP price changed the currency with no label and without the ship-to country. The header market control already sets both, so it is the only one. */ .wmc-price-switcher{display:none!important} @media (max-width:640px){ .cs-steps{gap:16px} .cs-pick{grid-template-columns:1fr} .cs-bar-s{display:none} } /* ============================================================ P2.12 — accessibility pass (WooCommerce surfaces) ============================================================ */ /* The theme already styles .woocommerce-breadcrumb, but WooCommerce's own `.woocommerce .woocommerce-breadcrumb` is one class more specific and won: the breadcrumb rendered at #767676/14.7px = 4.30:1 on --void, under AA. Matching the plugin's specificity lets the themed (and now compliant) treatment apply. */ .woocommerce .woocommerce-breadcrumb{font-family:var(--hud);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px} .woocommerce .woocommerce-breadcrumb a{color:var(--muted)} .woocommerce .woocommerce-breadcrumb a:hover,.woocommerce .woocommerce-breadcrumb a:focus-visible{color:var(--gold)} /* A link inside a block of text has to be distinguishable by something other than colour (WCAG 1.4.1). WooCommerce's privacy-policy link and the terms link on checkout were gold-on-grey and nothing else. */ .woocommerce-privacy-policy-text a, .woocommerce-terms-and-conditions-wrapper a, .woocommerce form .form-row label a, .woocommerce-form-login__rememberme + a, .woocommerce-LostPassword a, .woocommerce-info a,.woocommerce-message a,.woocommerce-error a, .showlogin,.showcoupon{text-decoration:underline;text-underline-offset:3px} /* Checkout / account: the required marker is an , which reads as the single character "*" to some screen readers. The real signal is the field's own `required` attribute, so make the marker decorative-looking but keep it visible for sighted users. */ .woocommerce .form-row abbr.required{text-decoration:none} /* The checkout section headings are

now (inc/a11y.php — they were

directly under the page

, a skipped level). The existing rules key off `.woocommerce-checkout h3`, and that cannot simply become h2: on a checkout page the body carries .woocommerce-checkout, so it would also capture the footer columns and the terms accordion. Scope to the blocks the headings actually live in instead. Same declarations — no visual change. */ .woocommerce-billing-fields>h2, .woocommerce-shipping-fields>h2, .woocommerce-additional-fields>h2{font-family:var(--hud);font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)} /* The sort control's own `outline:none` on :focus sits later in this file than the theme's focus-ring rule and at equal specificity, so it won — measured with a real Tab walk on /shop/: the select was a focus stop with no ring at all. :focus-visible restores the ring for the keyboard without giving mouse users one. */ .woocommerce .woocommerce-ordering select:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px} /* WooCommerce's password-reveal control is a bare