/* ============================================================ PABLOS PERFORMANCE v4 — WooCommerce styling Enqueued ONLY on WC pages (functions.php conditional). SCOPED to our own classes + WC hooks; uses equal-or-higher specificity instead of !important. Classic WooCommerce markup is styled below; the BLOCK checkout/cart ships a completely separate .wc-block-* class set that none of those classic rules can reach, so it gets its own section at the end. ZERO !important in this file. ============================================================ */ /* ---------- theme tokens (local copy for WC pages) ---------- */ .woocommerce,.woocommerce-page,.woocommerce-account,.woocommerce-checkout, body.woocommerce,body.woocommerce-page{ font-family:"Work Sans",system-ui,Arial,sans-serif; color:var(--ink); background:var(--card); } /* MUST stay scoped to main. .woocommerce / .woocommerce-page sit on , so an unscoped ".woocommerce-page h3" matches every heading on the page — including the footer's EXPLORE / LEGAL / CONTACT. It ties .pp-footer h3 on specificity (both 0,1,1) and wins on source order (this file loads after style.css), which painted those headings navy-on-navy and made them unreadable on Cart/Checkout/Shop/Account only. Do not widen these back. */ .woocommerce main h1,.woocommerce main h2,.woocommerce main h3, .woocommerce-page main h1,.woocommerce-page main h2,.woocommerce-page main h3, .woocommerce main .entry-title, .woocommerce main .woocommerce-products-header h1{ font-family:"Sora","Work Sans",sans-serif; color:var(--navy); line-height:1.15; font-weight:700; } .woocommerce .entry-title, .woocommerce-products-header h1{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.4em} /* ---------- Buttons (amber primary / navy secondary) ---------- */ /* higher specificity than WC core (.woocommerce a.button = 0,2,1; ours = 0,2,2) */ .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce a.checkout-button, .woocommerce-page a.button, .woocommerce-page button.button{ background:var(--amber); color:var(--amber-ink); font-family:"Work Sans",sans-serif; font-weight:600; font-size:1rem; border:none; border-radius:10px; padding:13px 24px; text-transform:none; letter-spacing:0; box-shadow:0 6px 18px -6px rgba(232,156,12,.55); transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s,background .2s; min-height:44px; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce a.checkout-button:hover{ background:var(--amber-deep); color:var(--amber-ink); transform:translateY(-2px) scale(1.02); box-shadow:0 10px 26px -6px rgba(232,156,12,.7); } /* secondary buttons (Update cart, Apply coupon) */ .woocommerce button.button[name="update_cart"], .woocommerce button[name="apply_coupon"], .woocommerce .button.wc-backward, .woocommerce .return-to-shop a.button{ background:var(--surface-dark);color:#fff;box-shadow:0 6px 18px -8px rgba(22,50,74,.6); } .woocommerce button.button[name="update_cart"]:hover, .woocommerce button[name="apply_coupon"]:hover, .woocommerce .button.wc-backward:hover, .woocommerce .return-to-shop a.button:hover{background:var(--surface-dark-deep);transform:translateY(-2px)} /* ---------- Price ---------- */ .woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce-Price-amount{color:var(--navy);font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700} .woocommerce ul.products li.product .price ins, .woocommerce div.product p.price ins{text-decoration:none} .woocommerce ul.products li.product .price del{color:var(--muted);opacity:.6} /* ---------- Product archive grid (card style) ---------- */ .woocommerce ul.products{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:0 0 2em;padding:0; } .woocommerce ul.products li.product{ background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;box-shadow:0 2px 10px rgba(18,36,55,.07); padding:26px;margin:0;text-align:left;display:flex;flex-direction:column;position:relative; transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s,border-color .28s;overflow:hidden; } .woocommerce ul.products li.product::before{ content:"";position:absolute;left:0;top:0;height:3px;width:100%; background:linear-gradient(90deg,var(--amber),var(--amber-hi));transform:scaleX(0);transform-origin:left; transition:transform .35s cubic-bezier(.22,.61,.36,1); } .woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 18px 40px -12px rgba(18,36,55,.22);border-color:var(--callout-amber-border)} .woocommerce ul.products li.product:hover::before{transform:scaleX(1)} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:"Sora",sans-serif;color:var(--navy);font-size:1.2rem;font-weight:600;margin:0 0 .35em;padding:0} .woocommerce ul.products li.product .price{display:inline-block;background:var(--amber-soft);border-radius:8px;padding:3px 9px;margin-bottom:.8em} .woocommerce ul.products li.product a img{border-radius:10px;margin-bottom:14px;box-shadow:0 2px 10px rgba(18,36,55,.07)} .woocommerce ul.products li.product .button{margin-top:auto;align-self:flex-start} .woocommerce ul.products li.product .star-rating{color:var(--amber)} .woocommerce span.onsale{background:var(--amber);color:var(--amber-ink);font-weight:700;border-radius:8px;font-size:.78rem;padding:4px 10px;min-height:auto;min-width:auto;line-height:1.4;top:14px;left:14px} /* ---------- Single product ---------- */ .woocommerce div.product .product_title{font-size:clamp(1.8rem,4vw,2.6rem)} .woocommerce div.product p.price,.woocommerce div.product span.price{background:var(--amber-soft);border-radius:8px;padding:6px 12px;display:inline-block;font-size:1.3rem;margin-bottom:1em} .woocommerce div.product form.cart{margin:1.5em 0} .woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;padding:18px 22px;margin-bottom:1.5em} .woocommerce div.product .woocommerce-tabs ul.tabs li{background:transparent;border:none;border-bottom:3px solid transparent;border-radius:0;padding:8px 4px;margin-right:18px} .woocommerce div.product .woocommerce-tabs ul.tabs li.active{background:transparent;border-bottom:3px solid var(--amber)} .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--navy)} .woocommerce div.product .woocommerce-tabs ul.tabs li a{color:var(--muted);font-weight:600} .woocommerce div.product .woocommerce-tabs .panel{border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 2px 10px rgba(18,36,55,.07);color:var(--muted)} .woocommerce div.product div.images img{border-radius:14px;box-shadow:0 2px 10px rgba(18,36,55,.07)} /* ---------- Cart ---------- */ .woocommerce-cart table.cart{border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(18,36,55,.07);border-collapse:separate;border-spacing:0;background:var(--card)} .woocommerce-cart table.cart th{background:var(--surface-dark);color:#fff;font-family:"Sora",sans-serif;font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;padding:14px 16px} .woocommerce-cart table.cart td{padding:16px;border-top:1px solid var(--line);vertical-align:middle} .woocommerce-cart table.cart .product-name a{color:var(--navy);font-weight:600} .woocommerce-cart table.cart .product-name a:hover{color:var(--amber)} .woocommerce-cart table.cart img{border-radius:8px} .woocommerce-cart table.cart .product-quantity .qty{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;width:70px} /* remove link — higher specificity than WC, no !important */ .woocommerce-cart table.cart tbody .product-remove a{color:var(--muted);border-radius:50%;background:var(--card)} .woocommerce-cart table.cart tbody .product-remove a:hover{background:var(--bad-wash);color:var(--bad);transform:scale(1.1)} .woocommerce .cart_totals h2{font-size:1.4rem;color:var(--navy)} .woocommerce .cart_totals .shop_table{border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;box-shadow:0 2px 10px rgba(18,36,55,.07);background:var(--card)} .woocommerce .cart_totals .shop_table th{color:var(--navy);font-weight:600;border-top:1px solid var(--line)} .woocommerce .cart_totals .shop_table td{text-align:right;border-top:1px solid var(--line)} .woocommerce .coupon .input-text{border:1px solid var(--line);border-radius:8px;padding:12px;min-width:160px;font:inherit} /* ---------- Checkout ---------- */ .woocommerce-checkout h3{font-size:1.25rem;color:var(--navy);margin-bottom:.7em;padding-bottom:.4em;border-bottom:2px solid var(--amber-soft)} .woocommerce form .form-row label{color:var(--navy);font-weight:600;font-size:.9rem;margin-bottom:4px} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select{border:1px solid var(--line);border-radius:8px;padding:12px;font:inherit;background:var(--card);width:100%;min-height:44px;transition:border-color .2s,box-shadow .2s} .woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,.woocommerce form .form-row select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(232,156,12,.2)} .woocommerce table.shop_table{border:1px solid var(--line);border-radius:14px;border-collapse:separate;border-spacing:0;background:var(--card);overflow:hidden} .woocommerce table.shop_table th{background:var(--surface-dark);color:#fff;font-family:"Sora",sans-serif;font-weight:600;padding:14px 16px;border:none} .woocommerce table.shop_table td{padding:14px 16px;border-top:1px solid var(--line)} .woocommerce-checkout-review-order-table .product-total{text-align:right;font-family:ui-monospace,monospace} .woocommerce-checkout-review-order-table .order-total .amount{font-size:1.2rem} .woocommerce #payment{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;padding:18px;margin-top:1.5em} .woocommerce #payment ul.payment_methods{border-bottom:1px solid var(--line);padding:0 0 12px} .woocommerce #payment ul.payment_methods li{padding:8px 0;color:var(--ink)} .woocommerce #payment div.payment_box{background:var(--amber-soft);color:var(--ink);border-radius:8px;padding:10px 14px;font-size:.9rem} .woocommerce #payment div.payment_box::before{display:none} .woocommerce #payment #place_order{width:100%;padding:16px;font-size:1.1rem;margin-top:1em} /* ---------- Order received ---------- */ .woocommerce-order .woocommerce-thankyou-order-received{background:var(--amber-soft);border:1px solid var(--callout-amber-border);border-left:4px solid var(--amber);border-radius:14px;padding:20px 26px;font-size:1.2rem;font-weight:600;color:var(--navy);text-align:center;box-shadow:0 2px 10px rgba(18,36,55,.07)} .woocommerce-order .woocommerce-order-overview{display:flex;flex-wrap:wrap;gap:12px;margin:1.5em 0;padding:0;list-style:none} .woocommerce-order .woocommerce-order-overview li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;padding:18px;flex:1;min-width:160px;box-shadow:0 2px 10px rgba(18,36,55,.07);text-align:center} .woocommerce-order .woocommerce-order-overview li strong{display:block;color:var(--navy);font-family:"Sora",sans-serif;font-size:1.3rem} .woocommerce-order .woocommerce-order-overview li .woocommerce-order-overview__label{color:var(--muted);font-size:.85rem} /* ---------- Notices (on brand, no default yellow/green) ---------- */ .woocommerce-message,.woocommerce-info{border-top-color:var(--amber);background:var(--amber-soft);color:var(--ink);border-radius:14px;box-shadow:0 2px 10px rgba(18,36,55,.07);padding:16px 20px 16px 48px} .woocommerce-message::before,.woocommerce-info::before{color:var(--amber)} .woocommerce-error{border-top-color:var(--bad);background:var(--bad-wash);color:var(--bad);border-radius:14px;box-shadow:0 2px 10px rgba(18,36,55,.07);padding:16px 20px 16px 48px} .woocommerce-error::before{color:var(--bad)} /* ---------- My Account ---------- */ .woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(18,36,55,.07);background:var(--card)} .woocommerce-account .woocommerce-MyAccount-navigation ul li{border-bottom:1px solid var(--line);margin:0} .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child{border-bottom:none} .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active{background:var(--amber-soft)} .woocommerce-account .woocommerce-MyAccount-navigation ul li a{display:block;padding:14px 18px;color:var(--ink);font-weight:500} .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{background:var(--amber-soft);color:var(--navy)} /* ---------- Responsive ---------- */ @media (max-width:768px){ .woocommerce ul.products{grid-template-columns:1fr} .woocommerce-cart table.cart .product-thumbnail{display:none} .woocommerce #payment #place_order{width:100%} } /* ============================================================ BLOCK CHECKOUT — WooCommerce Blocks (.wc-block-*) The Checkout block renders an entirely different class set than classic WooCommerce, so none of the rules above touch it — it was shipping stock WooCommerce styling. This section carries the navy/amber system onto it: step cards that light an amber hairline while you type, amber focus rings, a sticky summary card, and the Liquid Amber place-order button (same gradient + gleam as the header CTA, so the last click in the funnel matches the first). Design tokens come from style.css :root, which is a declared dependency of this file (see pp_enqueue_assets) — hex fallbacks included anyway so this file degrades on its own. @keyframes pp-gleam is also defined in style.css. ============================================================ */ /* --- layout --- Do NOT add gap/column-gap here. WooCommerce sizes the two columns to fill the container EXACTLY (884 + 476 = 1360 of a 1360px container) and the flex container is flex-wrap:wrap, so any gap overflows and drops the order summary onto its own row below the form. The visual separation already exists as a ~62px padding-right that WooCommerce puts on __main. align-items keeps the summary card from stretching to the full height of the form column. */ body.woocommerce-checkout .wc-block-components-sidebar-layout{ align-items:flex-start; } /* --- step cards --- */ body.woocommerce-checkout .wc-block-components-checkout-step{ background:var(--card,#fff); border:1px solid var(--line,var(--line)); border-radius:16px; padding:26px 28px; margin-bottom:18px; box-shadow:0 2px 10px rgba(18,36,55,.05); position:relative; overflow:hidden; transition:box-shadow .3s cubic-bezier(.22,.61,.36,1),border-color .3s cubic-bezier(.22,.61,.36,1); } /* amber hairline appears on the card you're actively filling in */ body.woocommerce-checkout .wc-block-components-checkout-step::before{ content:"";position:absolute;left:0;top:0;height:3px;width:100%; background:linear-gradient(90deg,var(--amber,var(--amber)),var(--amber-hi,var(--amber-hi))); opacity:0;transition:opacity .3s cubic-bezier(.22,.61,.36,1); } body.woocommerce-checkout .wc-block-components-checkout-step:focus-within{ border-color:var(--callout-amber-border); box-shadow:0 14px 34px -18px rgba(18,36,55,.3); } body.woocommerce-checkout .wc-block-components-checkout-step:focus-within::before{opacity:1} body.woocommerce-checkout .wc-block-components-checkout-step__title, body.woocommerce-checkout .wc-block-components-title{ font-family:var(--font-head,"Sora","Work Sans",sans-serif); font-size:1.05rem; font-weight:700; color:var(--navy,var(--navy)); letter-spacing:-.01em; } body.woocommerce-checkout .wc-block-components-checkout-step__heading{margin:0 0 18px} /* --- inputs --- */ body.woocommerce-checkout .wc-block-components-text-input input[type=text], body.woocommerce-checkout .wc-block-components-text-input input[type=email], body.woocommerce-checkout .wc-block-components-text-input input[type=tel], body.woocommerce-checkout .wc-block-components-text-input input[type=number], body.woocommerce-checkout .wc-blocks-components-select__select{ border:1px solid var(--line,var(--line)); border-radius:10px; background:var(--card); min-height:48px; font-family:var(--font-body,"Work Sans",system-ui,Arial,sans-serif); color:var(--ink,var(--ink)); transition:border-color .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s cubic-bezier(.22,.61,.36,1); } body.woocommerce-checkout .wc-block-components-text-input input:focus, body.woocommerce-checkout .wc-blocks-components-select__select:focus{ outline:none; border-color:var(--amber,var(--amber)); box-shadow:0 0 0 3px rgba(232,156,12,.22); } body.woocommerce-checkout .wc-block-components-text-input label, body.woocommerce-checkout .wc-blocks-components-select__label{ color:var(--muted,var(--muted)); font-family:var(--font-body,"Work Sans",system-ui,Arial,sans-serif); } body.woocommerce-checkout .wc-block-components-text-input.is-active label{color:var(--amber-text,var(--amber-deep))} /* --- express checkout panel --- */ body.woocommerce-checkout .wc-block-components-express-payment--checkout{ background:var(--amber-soft,var(--amber-soft)); border:1px solid var(--callout-amber-border); border-radius:16px; padding:20px 22px 18px; margin-bottom:20px; } body.woocommerce-checkout .wc-block-components-express-payment__title{ font-family:var(--font-head,"Sora","Work Sans",sans-serif); font-weight:700; color:var(--amber-text,var(--amber-deep)); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; } body.woocommerce-checkout .wc-block-components-express-payment-continue-rule{ color:var(--muted,var(--muted)); font-size:.85rem; } /* --- payment method radios --- */ body.woocommerce-checkout .wc-block-components-radio-control__option{ border:1px solid var(--line,var(--line)); border-radius:12px; /* The radio input is position:absolute, sitting 16px in and 20px wide (right edge at 36px). The left padding MUST clear it or the label renders on top of the button. Do not shorten this to a 2-value padding. */ padding:14px 16px 14px 48px; margin-bottom:10px; background:var(--card); transition:border-color .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s cubic-bezier(.22,.61,.36,1),background .25s cubic-bezier(.22,.61,.36,1); } body.woocommerce-checkout .wc-block-components-radio-control__option:hover{border-color:var(--amber-hi,var(--amber-hi))} body.woocommerce-checkout .wc-block-components-radio-control__option-checked{ border-color:var(--amber,var(--amber)); background:var(--amber-soft,var(--amber-soft)); box-shadow:0 0 0 3px rgba(232,156,12,.16); } body.woocommerce-checkout .wc-block-components-radio-control__label{ font-weight:600; color:var(--navy,var(--navy)); } /* --- order summary: sticky card --- */ body.woocommerce-checkout .wc-block-checkout__sidebar{ background:var(--card,#fff); border:1px solid var(--line,var(--line)); border-radius:16px; padding:24px 24px 8px; box-shadow:0 2px 10px rgba(18,36,55,.05); } body.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text{ font-family:var(--font-head,"Sora","Work Sans",sans-serif); font-weight:700; color:var(--navy,var(--navy)); font-size:1.05rem; } body.woocommerce-checkout .wc-block-components-order-summary-item{ padding:16px 0; border-bottom:1px solid var(--line,var(--line)); } body.woocommerce-checkout .wc-block-components-order-summary-item:last-child{border-bottom:none} body.woocommerce-checkout .wc-block-components-order-summary-item__image img{ border-radius:10px; border:1px solid var(--line,var(--line)); background:var(--amber-soft,var(--amber-soft)); } /* quantity pip, navy on white like the cart badge */ body.woocommerce-checkout .wc-block-components-order-summary-item__quantity{ background:var(--surface-dark,var(--surface-dark)); color:#fff; border:2px solid var(--card,#fff); border-radius:999px; font-weight:700; font-size:.75rem; box-shadow:0 2px 8px -2px rgba(18,36,55,.5); } body.woocommerce-checkout .wc-block-components-product-name{ font-family:var(--font-head,"Sora","Work Sans",sans-serif); font-weight:600; color:var(--navy,var(--navy)); font-size:.98rem; line-height:1.35; } body.woocommerce-checkout .wc-block-components-product-metadata__description{ color:var(--muted,var(--muted)); font-size:.85rem; } /* prices stay monospace, matching the shop + cart convention */ body.woocommerce-checkout .wc-block-components-order-summary-item__total-price, body.woocommerce-checkout .wc-block-components-totals-item__value, body.woocommerce-checkout .wc-block-components-product-price__value{ font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; color:var(--navy,var(--navy)); } body.woocommerce-checkout .wc-block-components-totals-item__label{color:var(--muted,var(--muted))} body.woocommerce-checkout .wc-block-components-totals-footer-item{ border-top:2px solid var(--amber-soft,var(--amber-soft)); padding-top:16px; margin-top:4px; } body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{ font-family:var(--font-head,"Sora","Work Sans",sans-serif); font-weight:700; color:var(--navy,var(--navy)); font-size:1.05rem; } body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:1.4rem} /* --- coupon / panel toggles, terms, edit links --- */ body.woocommerce-checkout .wc-block-components-panel__button{ font-family:var(--font-body,"Work Sans",system-ui,Arial,sans-serif); font-weight:600; color:var(--navy,var(--navy)); } body.woocommerce-checkout .wc-block-components-panel__button:hover{color:var(--amber-text,var(--amber-deep))} body.woocommerce-checkout .wc-block-components-address-card__edit{ color:var(--amber-text,var(--amber-deep)); font-weight:600; } body.woocommerce-checkout .wc-block-components-checkbox__label, body.woocommerce-checkout .wc-block-checkout__terms{ color:var(--muted,var(--muted)); font-size:.92rem; } /* --- Place Order: Liquid Amber, same language as the header CTA --- */ body.woocommerce-checkout .wc-block-components-checkout-place-order-button{ position:relative; overflow:hidden; width:100%; min-height:56px; border:none; border-radius:999px; background:linear-gradient(180deg,var(--amber-hi,var(--amber-hi)) 0%,var(--amber,var(--amber)) 60%,var(--amber-deep) 100%); color:var(--amber-ink,var(--amber-ink)); font-family:var(--font-body,"Work Sans",system-ui,Arial,sans-serif); font-weight:700; font-size:1.05rem; letter-spacing:.01em; box-shadow:0 10px 24px -10px rgba(232,156,12,.85),inset 0 1px 0 rgba(255,255,255,.5); transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .3s cubic-bezier(.22,.61,.36,1),background .3s cubic-bezier(.22,.61,.36,1); } body.woocommerce-checkout .wc-block-components-checkout-place-order-button::after{ content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:1; background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%); transform:skewX(-20deg); animation:pp-gleam 3.2s ease-in-out infinite; } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{ background:linear-gradient(180deg,#ffcf6b 0%,var(--amber-hi,var(--amber-hi)) 60%,var(--amber,var(--amber)) 100%); transform:translateY(-2px); box-shadow:0 16px 32px -12px rgba(232,156,12,.95),inset 0 1px 0 rgba(255,255,255,.6); } body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover::after{animation-duration:1.1s} /* keep the label above the shine sweep */ body.woocommerce-checkout .wc-block-components-checkout-place-order-button__text{position:relative;z-index:2} /* Pseudo-elements need their own reduced-motion entry — a rule on the parent does not override a ::after's own animation. */ @media (prefers-reduced-motion:reduce){ body.woocommerce-checkout .wc-block-components-checkout-place-order-button::after{animation:none} body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{transform:none} } /* --- checkout header branding --- Checkout does NOT use parts/header.html. WooCommerce swaps in a minimal distraction-free header (no nav, no topbar, no financing strip) so shoppers don't wander off mid-purchase — worth keeping. But it renders the brand as a plain wp-block-site-title in Work Sans 400, which looks nothing like the site. This restores Sora + the navy-to-amber brand gradient, echoing the two-tone "Pablos Performance" lockup. */ body.woocommerce-checkout .wp-block-site-title a{ font-family:var(--font-head,"Sora","Work Sans",sans-serif); font-weight:800; font-size:1.35rem; letter-spacing:-.015em; background:linear-gradient(96deg,var(--navy,var(--navy)) 0%,var(--navy,var(--navy)) 42%,var(--amber,var(--amber)) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* --- brand wordmark / home button --- Checkout's template has no header template part, so the wordmark lives in the PAGE CONTENT instead (a .pp-checkout-brand paragraph linking to /). That keeps the distraction-free checkout while still giving the customer the brand and a way back to the site. Same navy-to-amber gradient used sitewide. */ body.woocommerce-checkout .pp-checkout-brand{ margin:0 auto 4px; text-align:center; line-height:1.1; } body.woocommerce-checkout .pp-checkout-brand a{ display:inline-block; font-family:var(--font-head,"Sora","Work Sans",sans-serif); font-weight:800; font-size:clamp(1.6rem,3.4vw,2.3rem); letter-spacing:-.015em; background:linear-gradient(96deg,var(--navy,var(--navy)) 0%,var(--navy,var(--navy)) 40%,var(--amber,var(--amber)) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; transition:transform .25s cubic-bezier(.22,.61,.36,1),filter .25s cubic-bezier(.22,.61,.36,1); } body.woocommerce-checkout .pp-checkout-brand a:hover{ transform:translateY(-1px); filter:saturate(1.2); } /* --- reassurance line under the checkout heading --- Paired with a .pp-checkout-quote paragraph in the page content. Amber hairline above, muted confident sub-line. */ body.woocommerce-checkout .pp-checkout-quote{ max-width:640px; margin:0 auto 34px; padding-top:18px; position:relative; text-align:center; color:var(--muted,var(--muted)); font-size:.98rem; font-weight:500; line-height:1.6; } body.woocommerce-checkout .pp-checkout-quote::before{ content:""; position:absolute;top:0;left:50%; transform:translateX(-50%); width:44px;height:3px;border-radius:999px; background:linear-gradient(90deg,var(--amber,var(--amber)),var(--amber-hi,var(--amber-hi))); } /* --- responsive --- */ @media (max-width:900px){ /* still no gap here — the sidebar-layout is container-queried, so a viewport media query can't tell whether it is currently one column or two. Card margins handle stacked spacing. */ body.woocommerce-checkout .wc-block-components-checkout-step{padding:20px 18px} body.woocommerce-checkout .wc-block-checkout__sidebar{padding:20px 18px 6px} body.woocommerce-checkout .pp-checkout-quote{font-size:.9rem;margin-bottom:26px} } /* ============================================================ Order summary: one price per line, not two. WooCommerce blocks print both a per-unit price and a line total for every item. Every booking product here is capped at one per order, so the two are always the same number and it reads as a duplicate ($175.00 stacked above $175.00). Hide the per-unit one; the line total is the figure that matters and it is the one that stays correct if a quantity ever exceeds one. ============================================================ */ .wc-block-components-order-summary-item__individual-prices{display:none} /* Step 2 banner — shown on the shop when the customer arrives from the intake form. Amber-washed so it reads as progress, not an error. */ .pp-step2{ background:var(--amber-soft);border:1px solid var(--callout-amber-border);border-left:4px solid var(--amber); border-radius:var(--r);padding:22px 26px;margin:0 0 28px} .pp-step2-kicker{ display:block;font-family:var(--font-head);font-size:.74rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--amber-text)} .pp-step2 h2{margin:6px 0 8px;color:var(--navy);font-size:1.4rem;line-height:1.2} .pp-step2 p{margin:0 0 10px;color:var(--ink);max-width:64ch;text-wrap:pretty} .pp-step2 p:last-child{margin-bottom:0} .pp-step2-hint{ background:rgba(255,255,255,.7);border:1px solid var(--callout-amber-border);border-left:4px solid var(--amber);border-radius:var(--r-sm); padding:12px 14px;font-size:.93rem}