/* ==========================================================================
   Plugin Solar — design tokens
   ========================================================================== */
:root {
	--ps-red:    #ec1b39;
	--ps-orange: #f06b3a;
	--ps-black:  #1e1e24;
	--ps-white:  #ffffff;
	--ps-grey-100: #f4f4f6;
	--ps-grey-300: #e2e2e6;
	--ps-grey-600: #6b6b74;

	--ps-radius:     20px;
	--ps-radius-btn: 30px;

	--ps-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--bs-body-font-family: var(--ps-font);
	--bs-link-color: var(--ps-red);
	--bs-link-hover-color: var(--ps-black);
}

body {
	font-family: var(--ps-font);
	color: var(--ps-black);
	background-color: var(--ps-white);
}

/* Safety net: WordPress doesn't constrain uploaded media by default, and an
   oversized custom logo or inline image is the most common cause of
   horizontal scroll on mobile. */
img, svg {
	max-width: 100%;
	height: auto;
}
.custom-logo {
	max-height: 42px;
	width: auto;
}
.footer-logo,
.site-footer .custom-logo {
	max-height: 48px;
	width: auto;
}

html {
	scroll-behavior: smooth;
}

/* Belt-and-braces: admin-editable text (product name/description) might not
   contain break points, which can also force horizontal scroll on mobile. */
h1, h2, h3, .ps-hero-lead, .ps-buy-desc {
	overflow-wrap: break-word;
}

/* Anchored sections shouldn't hide under the sticky header. */
#how-it-works,
#buy-now,
#faq {
	scroll-margin-top: 90px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ps-font);
	font-weight: 700;
	color: var(--ps-black);
}

a {
	transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .8rem;
	font-weight: 700;
	color: var(--ps-red);
	margin-bottom: .75rem;
}

.section-title {
	font-size: clamp(1.6rem, 2.5vw, 2.4rem);
}

/* ==========================================================================
   Buttons — exact brand spec.
   Base .btn resets Bootstrap's own radius/shadow so only our tokens apply.
   ========================================================================== */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
#place_order,
.checkout-button {
	font-family: var(--ps-font);
	font-weight: 600;
	border-radius: var(--ps-radius-btn) !important;
	padding: .75rem 1.75rem;
	border: 2px solid transparent;
	line-height: 1.2;
	box-shadow: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-lg { padding: 1rem 2.25rem; font-size: 1.05rem; }

/* White button — white bg, black text */
.btn-white {
	background-color: var(--ps-white);
	color: var(--ps-black);
	border-color: var(--ps-white);
}
.btn-white:hover,
.btn-white:focus {
	background-color: var(--ps-black);
	color: var(--ps-white);
	border-color: var(--ps-black);
}

/* Red button — red bg, white text. This is WooCommerce's primary action colour too. */
.btn-red,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
#place_order,
.checkout-button,
.ps-add-to-cart-btn {
	background-color: var(--ps-red);
	color: var(--ps-white);
	border-color: var(--ps-red);
}
.btn-red:hover, .btn-red:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
#place_order:hover,
.checkout-button:hover,
.ps-add-to-cart-btn:hover {
	background-color: var(--ps-black);
	color: var(--ps-white);
	border-color: var(--ps-black);
}

/* Orange button — orange bg, white text */
.btn-orange {
	background-color: var(--ps-orange);
	color: var(--ps-white);
	border-color: var(--ps-orange);
}
.btn-orange:hover, .btn-orange:focus {
	background-color: var(--ps-black);
	color: var(--ps-white);
	border-color: var(--ps-black);
}

/* Secondary WooCommerce buttons (e.g. "Continue shopping", coupon apply)
   default to the white treatment unless explicitly flagged red/orange. */
.woocommerce a.button.wc-backward,
.woocommerce input.button.alt ~ input.button:not(.alt) {
	background-color: var(--ps-white);
	color: var(--ps-black);
	border-color: var(--ps-grey-300);
}
.woocommerce a.button.wc-backward:hover {
	background-color: var(--ps-black);
	color: var(--ps-white);
	border-color: var(--ps-black);
}

.btn:disabled, .btn.is-loading {
	opacity: .6;
	pointer-events: none;
}

/* ==========================================================================
   Scroll reveal (progressive enhancement — see initScrollReveal in theme.js)
   ========================================================================== */
.ps-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s ease;
}
.ps-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	background-color: var(--ps-white);
	box-shadow: 0 1px 0 var(--ps-grey-300);
	z-index: 1030;
}
.site-header .navbar {
	padding: 1rem 0;
}

.brand-text {
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--ps-black);
}

.navbar-nav .nav-link {
	position: relative;
	color: var(--ps-black);
	font-weight: 500;
}
.navbar-nav .nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: var(--ps-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.navbar-nav .nav-link:hover {
	color: var(--ps-red);
}
.navbar-nav .nav-link:hover::after {
	transform: scaleX(1);
}

.btn-icon-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ps-grey-100);
	color: var(--ps-black);
}
.btn-icon-cart:hover {
	background: var(--ps-black);
	color: var(--ps-white);
}
.cart-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: var(--ps-red);
	color: var(--ps-white);
	font-size: .65rem;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 3px;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.ps-hero {
	position: relative;
	padding: 4rem 0;
	background: linear-gradient(160deg, var(--ps-grey-100) 0%, var(--ps-white) 60%);
	overflow: hidden;
}
.ps-hero::before {
	content: "";
	position: absolute;
	top: -6rem;
	right: -6rem;
	width: 22rem;
	height: 22rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(240,107,58,.16), rgba(240,107,58,0) 70%);
	pointer-events: none;
}
.ps-hero::after {
	content: "";
	position: absolute;
	bottom: -8rem;
	left: -8rem;
	width: 18rem;
	height: 18rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(236,27,57,.10), rgba(236,27,57,0) 70%);
	pointer-events: none;
}
.ps-hero .container {
	position: relative;
	z-index: 1;
}

.ps-hero-title {
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	line-height: 1.1;
	margin-bottom: 1rem;
}

.ps-hero-lead {
	font-size: 1.15rem;
	color: var(--ps-grey-600);
	max-width: 34rem;
}

/* Mobile-only buy form in the hero (replaces the two CTA buttons < lg). */
.ps-hero-buy {
	background: var(--ps-white);
	border-radius: var(--ps-radius);
	padding: 1.5rem;
	box-shadow: 0 12px 40px rgba(30, 30, 36, .1);
	border-top: 4px solid var(--ps-red);
}

.ps-hero-media img,
.ps-hero-media-placeholder {
	width: 100%;
	border-radius: var(--ps-radius);
	box-shadow: 0 20px 48px rgba(30, 30, 36, .12);
}
.ps-hero-media {
	position: relative;
}
.ps-hero-badge {
	position: absolute;
	bottom: -1.25rem;
	left: 1.5rem;
	display: flex;
	flex-direction: column;
	background: var(--ps-white);
	border-radius: var(--ps-radius);
	padding: .9rem 1.4rem;
	box-shadow: 0 16px 40px rgba(30, 30, 36, .18);
	border-left: 4px solid var(--ps-red);
}
.ps-hero-badge strong {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--ps-red);
	line-height: 1.1;
}
.ps-hero-badge span {
	font-size: .75rem;
	color: var(--ps-grey-600);
}
.ps-hero-media-placeholder {
	aspect-ratio: 4/3;
	background:
		radial-gradient(circle, rgba(255,255,255,.35) 1.5px, transparent 1.6px) 0 0/24px 24px,
		linear-gradient(135deg, var(--ps-orange), var(--ps-red));
}

/* ==========================================================================
   Trust strip
   ========================================================================== */
.ps-trust-strip {
	padding: 2rem 0;
	background: var(--ps-black);
}
.ps-trust-item {
	display: flex;
	align-items: center;
	gap: .75rem;
}
.ps-trust-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: var(--ps-orange);
}
.ps-trust-item strong {
	display: block;
	font-size: 1.1rem;
	color: var(--ps-white);
}
.ps-trust-item span {
	font-size: .82rem;
	color: var(--ps-grey-300);
}

/* ==========================================================================
   Gallery
   ========================================================================== */
.ps-gallery-img {
	border-radius: var(--ps-radius);
	aspect-ratio: 1/1;
	object-fit: cover;
}

/* ==========================================================================
   Steps
   ========================================================================== */
.ps-steps { background: var(--ps-white); }

.ps-steps-grid {
	position: relative;
}
@media (min-width: 768px) {
	.ps-steps-grid::before {
		content: "";
		position: absolute;
		top: 2.75rem;
		left: 16.6%;
		right: 16.6%;
		border-top: 2px dashed var(--ps-grey-300);
		z-index: 0;
	}
}

.ps-step-card {
	position: relative;
	z-index: 1;
	background: var(--ps-grey-100);
	border-radius: var(--ps-radius);
	padding: 2rem;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ps-step-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(30, 30, 36, .1);
}
.ps-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--ps-white);
	color: var(--ps-orange);
	margin-bottom: .75rem;
}

/* ==========================================================================
   Stats / ROI band
   ========================================================================== */
.ps-stats-band {
	padding: 3.5rem 0;
	background: linear-gradient(120deg, var(--ps-orange), var(--ps-red));
	color: var(--ps-white);
}
.ps-stats-title {
	color: var(--ps-white);
	font-size: clamp(1.6rem, 2.5vw, 2.2rem);
	margin-bottom: .75rem;
}
.ps-stats-lead {
	color: rgba(255,255,255,.9);
	max-width: 32rem;
	margin-bottom: 0;
}
.ps-stat {
	display: flex;
	flex-direction: column;
}
.ps-stat strong {
	font-size: 1.6rem;
	font-weight: 800;
}
.ps-stat span {
	font-size: .78rem;
	color: rgba(255,255,255,.85);
}
.ps-stats-footnote {
	font-size: .75rem;
	color: rgba(255,255,255,.75);
	margin: .75rem 0 0;
}

/* ==========================================================================
   Buy panel / size picker
   ========================================================================== */
.ps-buy {
	background: var(--ps-grey-100);
}

.ps-buy-panel {
	background: var(--ps-white);
	border-radius: var(--ps-radius);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: 0 12px 40px rgba(30, 30, 36, .08);
	border-top: 4px solid var(--ps-red);
}
@media (min-width: 992px) {
	.ps-buy-panel {
		position: sticky;
		top: 100px;
	}
}

.ps-buy-desc {
	max-width: 34rem;
}

.ps-size-label {
	display: block;
	font-weight: 600;
	margin-bottom: .6rem;
}

.ps-size-options {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.ps-size-pill {
	font-family: var(--ps-font);
	font-weight: 600;
	background: var(--ps-white);
	color: var(--ps-black);
	border: 2px solid var(--ps-grey-300);
	border-radius: var(--ps-radius-btn);
	padding: .6rem 1.4rem;
	cursor: pointer;
	transition: all .15s ease;
}
.ps-size-pill:hover {
	border-color: var(--ps-black);
}
.ps-size-pill.is-active {
	background: var(--ps-red);
	border-color: var(--ps-red);
	color: var(--ps-white);
}

.ps-fulfilment-options {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.ps-fulfilment-pill {
	font-family: var(--ps-font);
	font-weight: 600;
	background: var(--ps-white);
	color: var(--ps-black);
	border: 2px solid var(--ps-grey-300);
	border-radius: var(--ps-radius-btn);
	padding: .6rem 1.4rem;
	cursor: pointer;
	text-align: left;
	transition: all .15s ease;
}
.ps-fulfilment-pill:hover {
	border-color: var(--ps-black);
}
.ps-fulfilment-pill.is-active {
	background: var(--ps-orange);
	border-color: var(--ps-orange);
	color: var(--ps-white);
}
.ps-fulfilment-fee {
	display: inline-block;
	margin-left: .4rem;
	font-weight: 700;
	opacity: .85;
}

.ps-install-fee-line {
	color: var(--ps-orange);
	font-weight: 600;
}

.ps-price {
	font-size: 1.8rem;
	font-weight: 800;
}
.ps-price del { color: var(--ps-grey-600); font-weight: 400; opacity: .7; }
.ps-price ins { text-decoration: none; color: var(--ps-red); }

.ps-stock { color: var(--ps-red); min-height: 1.2em; }

.ps-qty-stepper {
	display: flex;
	align-items: center;
	border: 2px solid var(--ps-grey-300);
	border-radius: var(--ps-radius-btn);
	overflow: hidden;
}
.ps-qty-stepper button {
	width: 2.5rem;
	height: 2.9rem;
	border: none;
	background: var(--ps-white);
	font-size: 1.2rem;
	color: var(--ps-black);
}
.ps-qty-stepper button:hover {
	background: var(--ps-black);
	color: var(--ps-white);
}
.ps-qty-input {
	width: 3rem;
	border: none;
	text-align: center;
	font-weight: 600;
	-moz-appearance: textfield;
}
.ps-qty-input::-webkit-outer-spin-button,
.ps-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.ps-add-to-cart-msg { color: var(--ps-red); min-height: 1.2em; }

.ps-buy-microcopy {
	font-size: .82rem;
	color: var(--ps-grey-600);
}
.ps-buy-microcopy span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.ps-buy-microcopy svg {
	color: var(--ps-orange);
	flex-shrink: 0;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.ps-testimonials { background: var(--ps-white); }

.ps-testimonial-card {
	background: var(--ps-grey-100);
	border-radius: var(--ps-radius);
	padding: 2rem;
	height: 100%;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ps-testimonial-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(30, 30, 36, .1);
}
.ps-stars {
	color: var(--ps-orange);
	letter-spacing: .15em;
	margin-bottom: .75rem;
}
.ps-testimonial-card p {
	color: var(--ps-black);
	font-size: 1.05rem;
}
.ps-testimonial-author {
	display: block;
	margin-top: 1rem;
	font-size: .8rem;
	color: var(--ps-grey-600);
}

/* ==========================================================================
   Accreditation badges
   ========================================================================== */
.ps-badges { background: var(--ps-grey-100); }
.ps-badges-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}
.ps-badge {
	font-weight: 700;
	font-size: .82rem;
	color: var(--ps-grey-600);
	background: var(--ps-white);
	border: 1px solid var(--ps-grey-300);
	border-radius: var(--ps-radius-btn);
	padding: .5rem 1.1rem;
}
.ps-badges-note {
	color: var(--ps-grey-600);
	margin: 1rem 0 0;
}

/* ==========================================================================
   FAQ (Bootstrap accordion, re-skinned)
   ========================================================================== */
.ps-faq-accordion { max-width: 48rem; }

.accordion-item {
	border: none;
	border-radius: var(--ps-radius) !important;
	overflow: hidden;
	margin-bottom: 1rem;
	background: var(--ps-grey-100);
}
.accordion-button {
	font-family: var(--ps-font);
	font-weight: 600;
	background: var(--ps-grey-100);
	color: var(--ps-black);
	box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
	background: var(--ps-black);
	color: var(--ps-white);
}
.accordion-button::after {
	filter: none;
}
.accordion-button:not(.collapsed)::after {
	filter: invert(1);
}
.accordion-body { color: var(--ps-grey-600); }

/* ==========================================================================
   Sticky mobile buy bar
   ========================================================================== */
.ps-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1040;
	background: var(--ps-white);
	border-top: 1px solid var(--ps-grey-300);
	padding: .75rem 1rem;
	box-shadow: 0 -6px 20px rgba(30, 30, 36, .08);
}
.ps-sticky-price { font-weight: 800; }

/* ==========================================================================
   Pre-footer CTA + Footer
   ========================================================================== */
.ps-footer-cta {
	padding: 3.5rem 0;
	background: linear-gradient(120deg, var(--ps-red), var(--ps-orange));
	color: var(--ps-white);
}
.ps-footer-cta-title {
	color: var(--ps-white);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 800;
	margin-bottom: .5rem;
}
.ps-footer-cta-lead {
	color: rgba(255,255,255,.9);
}

.site-footer {
	background: var(--ps-black);
	color: var(--ps-grey-300);
}
.site-footer a {
	color: var(--ps-grey-300);
}
.site-footer a:hover {
	color: var(--ps-white);
}
.footer-widget-title {
	color: var(--ps-white);
	font-weight: 700;
	margin-bottom: 1rem;
}
.footer-tagline { color: var(--ps-grey-300); font-size: .9rem; max-width: 26rem; }
.footer-nav { display: flex; flex-direction: column; gap: .5rem; }
.footer-divider { border-color: rgba(255,255,255,.12); margin: 2rem 0 1.5rem; }
.footer-legal { color: var(--ps-grey-600); }

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: var(--ps-grey-300);
	transition: all .15s ease;
}
.footer-social a:hover {
	background: var(--ps-red);
	color: var(--ps-white);
	transform: translateY(-2px);
}

/* ==========================================================================
   WooCommerce — cart, checkout, thank-you (default templates, re-skinned)
   ========================================================================== */
.woocommerce-page main.site-main {
	min-height: 50vh;
}

.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	border: none;
	border-radius: var(--ps-radius);
	overflow: hidden;
	box-shadow: 0 1px 0 var(--ps-grey-300);
}
.woocommerce table.shop_table th {
	background: var(--ps-grey-100);
	color: var(--ps-black);
	font-weight: 700;
	border: none;
}
.woocommerce table.shop_table td {
	border-top: 1px solid var(--ps-grey-300);
}

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--ps-grey-100);
	border-radius: var(--ps-radius);
	padding: 1.5rem;
}

.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
	border-radius: var(--ps-radius);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	border: 2px solid var(--ps-grey-300) !important;
	border-radius: 12px !important;
	padding: .6rem .9rem !important;
	font-family: var(--ps-font);
	height: auto !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--ps-red) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(236,27,57,.12);
}

.woocommerce-additional-fields,
.woocommerce-shipping-methods,
.woocommerce-payment-methods,
.wc_payment_methods {
	list-style: none;
	padding-left: 0;
}

.woocommerce ul.payment_methods li,
.woocommerce-checkout .payment_method_wrapper {
	border-color: var(--ps-grey-300);
}

.woocommerce-checkout #payment {
	background: var(--ps-grey-100);
	border-radius: var(--ps-radius);
}
.woocommerce-checkout #payment div.payment_box {
	background: var(--ps-white);
	border-radius: 12px;
}
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--ps-white);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	border-top-color: var(--ps-red) !important;
	border-radius: var(--ps-radius);
	background: var(--ps-grey-100);
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--ps-red);
}

.woocommerce-error {
	border-top-color: var(--ps-black) !important;
}

/* Order received / thank-you */
.woocommerce-order-received .woocommerce-order,
.woocommerce-order-received ul.order_details,
.woocommerce-thankyou-order-received {
	background: var(--ps-grey-100);
	border-radius: var(--ps-radius);
	padding: 2rem;
}
.woocommerce-order-received .woocommerce-thankyou-order-received {
	color: var(--ps-black);
	font-weight: 600;
	font-size: 1.1rem;
}

/* Coupon row */
.woocommerce-cart .coupon .input-text {
	border: 2px solid var(--ps-grey-300);
	border-radius: 12px;
	padding: .6rem .9rem;
}

/* Quantity inputs inside default WC tables (cart) */
.woocommerce table.cart td.actions .coupon,
.woocommerce td.product-quantity .qty,
.woocommerce .quantity .qty {
	border: 2px solid var(--ps-grey-300) !important;
	border-radius: 10px !important;
	padding: .4rem .6rem !important;
	font-family: var(--ps-font);
}

/* ==========================================================================
   WooCommerce Blocks — basket & checkout (block-based templates)
   Mirrors the front page's card language: grey band, white cards,
   red-topped summary panel, brand pill buttons.
   ========================================================================== */
body.woocommerce-cart,
body.woocommerce-checkout {
	background: var(--ps-grey-100);
}

/* Main column (basket line items / checkout form) as a white card. */
.wc-block-cart__main,
.wc-block-checkout__main {
	background: var(--ps-white);
	border-radius: var(--ps-radius);
	box-shadow: 0 12px 40px rgba(30, 30, 36, .08);
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* Totals / order summary sidebar styled like the buy panel. */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	background: var(--ps-white);
	border-radius: var(--ps-radius);
	border-top: 4px solid var(--ps-red);
	box-shadow: 0 12px 40px rgba(30, 30, 36, .08);
	padding: 1.25rem;
}

/* Gutter between the two cards — blocks size the columns 65%/35% with no gap,
   relying on internal padding that now sits inside the white cards. */
.wc-block-components-sidebar-layout.is-large {
	gap: 2rem;
}
.wc-block-components-sidebar-layout.is-large .wc-block-components-main {
	width: calc(65% - 2rem);
	padding-right: clamp(1.25rem, 3vw, 2rem) !important;
}
.wc-block-components-sidebar-layout.is-large .wc-block-components-sidebar {
	width: 35%;
}

/* Brand pill buttons (Proceed to Checkout, Place Order, etc.). */
.wc-block-components-button:not(.is-link) {
	font-family: var(--ps-font);
	font-weight: 600;
	background-color: var(--ps-red);
	color: var(--ps-white);
	border: 2px solid var(--ps-red);
	border-radius: var(--ps-radius-btn);
	padding: .8rem 1.75rem;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
	background-color: var(--ps-black);
	color: var(--ps-white);
	border-color: var(--ps-black);
}

/* Form inputs — match the theme's rounded 2px-border fields. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-form select,
.wc-block-components-combobox input {
	border: 2px solid var(--ps-grey-300) !important;
	border-radius: 12px !important;
	font-family: var(--ps-font);
	box-shadow: none;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-form select:focus {
	border-color: var(--ps-red) !important;
	box-shadow: 0 0 0 3px rgba(236, 27, 57, .12) !important;
	outline: none;
}

/* Quantity stepper + remove link in the basket table. */
.wc-block-components-quantity-selector {
	border: 2px solid var(--ps-grey-300);
	border-radius: var(--ps-radius-btn);
}
.wc-block-components-quantity-selector::after {
	border: none !important;
}
.wc-block-cart-item__remove-link {
	color: var(--ps-grey-600);
}
.wc-block-cart-item__remove-link:hover {
	color: var(--ps-red);
}

/* Product name links in basket/summary pick up the brand colour. */
.wc-block-components-product-name {
	color: var(--ps-red);
	font-weight: 600;
}
.wc-block-components-product-name:hover {
	color: var(--ps-black);
}

@media (max-width: 991.98px) {
	.ps-hero { padding: 2.5rem 0; }
}