/* ==========================================================================
   Logo-inspired typography + payment section redesign
   Loaded last (see cst_enqueue_typography_payment in functions.php).
   Presentation only: no markup, hooks, IDs or JS are touched, so HPOS,
   cart fragments, Radar autocomplete, WPLoyalty and gateways are unaffected.
   ========================================================================== */
:root {
	--cst-font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cst-porcelain: #F8F5F0;
	--cst-line: #E6E0D6;
	--cst-ink: #11121B;
}

/* ---- Global typeface (form controls + text elements; icon fonts untouched) ---- */
html body,
body button, body input, body select, body textarea,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body li, body label, body th, body td, body a,
body .button, body .amount, body .price {
	font-family: var(--cst-font) !important;
}

/* ---- No all-caps anywhere ---- */
body *, body *::before, body *::after { text-transform: none !important; }

/* ---- Headings: refined, lighter ---- */
body h1, body h2, body h3, body h4, body h5, body h6,
body .entry-title, body .page-title, body .woocommerce-loop-product__title,
body .product_title, body .widget-title, body .section-title,
body #order_review_heading, body .cart_totals h2 {
	font-weight: 500 !important;
	letter-spacing: 0.005em !important;
	line-height: 1.25;
}

/* ---- Forms: labels and inputs ---- */
body .woocommerce form .form-row label,
body .woocommerce-checkout label,
body .woocommerce-account label,
body form label,
body .woocommerce-form__label {
	font-weight: 500 !important;
	letter-spacing: 0.01em !important;
	font-size: 14px;
}
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select,
body .select2-container .select2-selection__rendered,
body input[type="text"], body input[type="email"], body input[type="tel"],
body input[type="password"], body input[type="number"], body input[type="search"] {
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
}

/* ---- Cart / checkout totals, tables, products ---- */
body .shop_table th, body .shop_table td,
body .cart_totals th, body .cart_totals td,
body .woocommerce-checkout-review-order-table th,
body .woocommerce-checkout-review-order-table td,
body .woocommerce-table th, body .woocommerce-table td,
body .woocommerce-orders-table th, body .woocommerce-orders-table td {
	font-weight: 400 !important;
	letter-spacing: 0.01em !important;
}
body .shop_table th, body .cart_totals th,
body .woocommerce-checkout-review-order-table th,
body .order-total th, body .order-total td, body .order-total .amount,
body .woocommerce-orders-table th {
	font-weight: 500 !important;
}
body .product-name, body .product-name a,
body .woocommerce-loop-product__title, body .product_title,
body .price, body .amount {
	font-weight: 500 !important;
	letter-spacing: 0.005em !important;
}
body strong, body b { font-weight: 500; }

/* ---- Buttons and nav ---- */
body .button, body button.button, body button[type="submit"],
body input[type="submit"], body #place_order, body .checkout-button,
body .wp-element-button, body nav a {
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
}

/* ==========================================================================
   Payment section
   ========================================================================== */
body.woocommerce-checkout #payment {
background: linear-gradient(145deg, #F8F5F0 0%, #FBFAF7 45%, #F1EFEA 100%) !important;
border: 1px solid var(--cst-line) !important;
border-radius: 20px !important;
padding: 20px !important;
box-shadow: 0 10px 30px -18px rgba(17, 18, 27, 0.25) !important;
}
body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout #payment ul.wc_payment_methods {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
list-style: none;
}

/* One card per gateway (Interac e-Transfer, Cryptocurrency, Invoice) */
body.woocommerce-checkout #payment ul.payment_methods > li {
position: relative;
margin: 0 !important;
padding: 18px 20px !important;
background: #FFFFFF;
border: 1px solid var(--cst-line);
border-radius: 14px;
list-style: none;
cursor: pointer;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
body.woocommerce-checkout #payment ul.payment_methods > li:hover {
border-color: #C9C1B3;
box-shadow: 0 6px 18px -12px rgba(17, 18, 27, 0.3);
transform: translateY(-1px);
}
body.woocommerce-checkout #payment ul.payment_methods > li:has(input.input-radio:checked) {
border-color: var(--cst-ink);
box-shadow: 0 0 0 1px var(--cst-ink), 0 10px 24px -14px rgba(17, 18, 27, 0.4);
transform: none;
}
body.woocommerce-checkout #payment ul.payment_methods > li:has(input.input-radio:focus-visible) {
outline: 2px solid var(--cst-ink);
outline-offset: 2px;
}

/* Custom radio: native input remains in the DOM and fully functional */
body.woocommerce-checkout #payment ul.payment_methods > li input.input-radio {
-webkit-appearance: none;
appearance: none;
position: absolute;
top: 20px;
left: 20px;
width: 20px;
height: 20px;
margin: 0;
border: 1.5px solid #B9B1A3;
border-radius: 50%;
background: #FFFFFF;
cursor: pointer;
transition: border-color .2s ease, background .2s ease;
}
body.woocommerce-checkout #payment ul.payment_methods > li input.input-radio:hover { border-color: var(--cst-ink); }
body.woocommerce-checkout #payment ul.payment_methods > li input.input-radio:checked {
border-color: var(--cst-ink);
background: radial-gradient(circle, var(--cst-ink) 0 40%, #FFFFFF 45% 100%);
}
body.woocommerce-checkout #payment ul.payment_methods > li > label {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
min-height: 22px;
margin: 0 !important;
padding-left: 36px;
color: var(--cst-ink) !important;
font-size: 15px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
cursor: pointer;
}
body.woocommerce-checkout #payment ul.payment_methods > li > label img {
max-height: 24px;
width: auto;
margin: 0 0 0 auto;
}
body.woocommerce-checkout #payment ul.payment_methods > li .payment_box {
margin: 14px 0 0 !important;
padding: 14px 16px !important;
background: var(--cst-porcelain) !important;
border: 1px solid var(--cst-line) !important;
border-radius: 10px !important;
color: #3A3C4A !important;
font-size: 14px;
font-weight: 400;
line-height: 1.6;
box-shadow: none !important;
}
body.woocommerce-checkout #payment ul.payment_methods > li .payment_box::before { display: none !important; }
body.woocommerce-checkout #payment ul.payment_methods > li .payment_box p { margin: 0 0 8px; color: inherit !important; }
body.woocommerce-checkout #payment ul.payment_methods > li .payment_box p:last-child { margin-bottom: 0; }
body.woocommerce-checkout #payment div.form-row.place-order {
margin: 18px 0 0 !important;
padding: 0 !important;
background: transparent !important;
}
@media (max-width: 520px) {
body.woocommerce-checkout #payment { padding: 14px !important; border-radius: 16px !important; }
body.woocommerce-checkout #payment ul.payment_methods > li { padding: 16px !important; }
body.woocommerce-checkout #payment ul.payment_methods > li input.input-radio { top: 18px; left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
body.woocommerce-checkout #payment ul.payment_methods > li,
body.woocommerce-checkout #payment ul.payment_methods > li input.input-radio { transition: none; transform: none !important; }
}

/* ==========================================================================
   Product grids: solid black Add to Cart / Add to Order buttons
   (shop loop, category archives, related products, AJAX add-to-cart).
   Colour/border only: no markup, classes or JS touched, so AJAX fragments still work.
   ========================================================================== */
body .woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product a.button,
body ul.products li.product .button,
body .woocommerce ul.products li.product a.add_to_cart_button,
body .product_type_simple.add_to_cart_button,
body .product_type_variable.add_to_cart_button,
body .product_type_variation.add_to_cart_button,
body a.button.add_to_cart_button,
body a.button.ajax_add_to_cart,
body .ajax_add_to_cart,
body .cst-card-add,
body .product-card .button,
body .product-card a.button,
body .product-card a.add_to_cart_button,
body .product-card .cst-login-cta,
body .related.products .button,
body .related.products a.button,
body .related.products a.add_to_cart_button,
body .cst-related .button,
body .cst-related .product-card a.button,
body .cst-related .product-card a.add_to_cart_button,
body .cst-related .product-card .cst-login-cta,
body.archive .product-card .button,
body.tax-product_cat .product-card .button,
body.post-type-archive-product .product-card .button {
background: #11121B !important;
background-color: #11121B !important;
background-image: none !important;
color: #FFFFFF !important;
border: 1px solid #11121B !important;
box-shadow: none !important;
transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
body .woocommerce ul.products li.product .button:hover,
body .woocommerce ul.products li.product .button:focus-visible,
body ul.products li.product .button:hover,
body .product_type_simple.add_to_cart_button:hover,
body .product_type_variable.add_to_cart_button:hover,
body .product_type_variation.add_to_cart_button:hover,
body a.button.add_to_cart_button:hover,
body .ajax_add_to_cart:hover,
body .ajax_add_to_cart:focus-visible,
body .cst-card-add:hover,
body .product-card .button:hover,
body .product-card a.button:hover,
body .product-card a.add_to_cart_button:hover,
body .product-card .cst-login-cta:hover,
body .related.products .button:hover,
body .related.products a.add_to_cart_button:hover,
body .cst-related .button:hover,
body .cst-related .product-card a.button:hover,
body .cst-related .product-card a.add_to_cart_button:hover,
body .cst-related .product-card .cst-login-cta:hover {
background: #1F202E !important;
background-color: #1F202E !important;
border-color: #1F202E !important;
color: #FFFFFF !important;
}
/* WooCommerce AJAX states keep the black look */
body a.button.loading, body a.button.added, body .ajax_add_to_cart.loading, body .ajax_add_to_cart.added {
background: #11121B !important;
color: #FFFFFF !important;
opacity: 0.85;
}
body .product-card a.added_to_cart, body ul.products li.product a.added_to_cart { color: #11121B !important; }
/* Disabled / sold-out stays muted */
body .product-card .button.disabled, body .product-card .button:disabled { opacity: 0.45; cursor: not-allowed; }