/* =========================================================
   SecureSnow — restyle of native WooCommerce output (cart, checkout,
   thank-you, login/register, my account). Structure/logic stays native;
   this file only restyles the default markup WooCommerce renders.
   ========================================================= */

/* ---- Notices ---- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	background: var(--panel);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin: 0 0 20px;
	color: var(--text);
	font-size: 13px;
}

.woocommerce-error {
	border-left-color: var(--danger);
}

.woocommerce-message .button,
.woocommerce-info .button {
	background: var(--accent) !important;
	color: var(--bg) !important;
	border-radius: var(--radius-sm);
	padding: 6px 14px;
	margin-left: 10px;
}

/* ---- Cart page ----
   .woocommerce-cart-form and .cart-collaterals are sibling children of the
   same .woocommerce wrapper div. Flexbox instead of auto-fit CSS grid here:
   the grid track auto-collapsing behaviour needed to handle the 3rd empty
   notices-wrapper sibling correctly (without it silently claiming a column,
   or - worse - blocking collapse of the unused ones and shrinking the real
   content into a fraction of the row) proved unreliable in practice. Flex
   with explicit basis/grow is simple to reason about: the notices wrapper
   is hidden while empty via :empty, and the two real children grow 2:1 (line
   items : order summary), wrapping to stacked full-width rows on narrow
   viewports once neither basis fits beside the other plus the 32px gap. */
.woocommerce-cart .ss-content-page > .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

.woocommerce-cart .ss-content-page > .woocommerce > .woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-cart .ss-content-page > .woocommerce > .woocommerce-cart-form {
	flex: 2 1 400px;
	min-width: 0;
}

.woocommerce-cart .ss-content-page > .woocommerce > .cart-collaterals {
	flex: 1 1 280px;
	min-width: 0;
}

.woocommerce-cart table.cart,
.woocommerce-cart table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 24px;
}

.woocommerce-cart table.cart th,
.woocommerce-cart table.shop_table th {
	text-align: left;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--text-secondary);
	border-bottom: 1px solid var(--border);
	padding: 12px 10px;
}

.woocommerce-cart table.cart td,
.woocommerce-cart table.shop_table td {
	border-bottom: 1px solid var(--border-subtle);
	padding: 14px 10px;
	color: var(--text);
	vertical-align: middle;
}

.woocommerce-cart table.cart img {
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.woocommerce-cart .product-remove a {
	color: var(--danger);
	font-size: 18px;
}

.woocommerce-cart .quantity .qty {
	width: 60px !important;
	text-align: center;
	padding: 10px 8px !important;
	background: var(--panel) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text) !important;
	line-height: normal;
	box-sizing: border-box;
}

.woocommerce-cart table.cart td.actions .button,
.woocommerce-cart table.cart td.actions input[type="submit"] {
	background: transparent !important;
	border: 1px solid var(--border);
	color: var(--text) !important;
	border-radius: var(--radius-sm);
	padding: 10px 18px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.woocommerce-cart table.cart td.actions .button:hover {
	border-color: var(--accent);
	color: var(--accent) !important;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.woocommerce-cart table.cart td.actions .coupon input#coupon_code {
	width: 160px;
}

/* .cart-collaterals only ever wraps one real child here (.cart_totals -
   there are no cross-sells configured), so the grid it used to have was
   dead weight that quietly left .cart_totals free to size to its own
   content instead of filling the flex column - explicit width:100% on the
   panel itself is what actually makes it fill the space. */
.woocommerce-cart .cart_totals {
	width: 100% !important;
	box-sizing: border-box;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 24px;
}

.woocommerce-cart .cart_totals h2 {
	font-size: 18px;
}

.woocommerce-cart .cart_totals table {
	width: 100%;
}

.woocommerce-cart .cart_totals table th {
	color: var(--text-secondary);
	font-weight: 500;
	padding: 12px 16px !important;
	border-bottom: 1px solid var(--border-subtle);
	text-align: left;
}

.woocommerce-cart .cart_totals table td {
	padding: 12px 16px !important;
	border-bottom: 1px solid var(--border-subtle);
	text-align: right;
	color: var(--text);
}

.woocommerce-cart .cart_totals .order-total td,
.woocommerce-cart .cart_totals .order-total th {
	font-weight: 700;
	font-size: 16px;
	color: var(--accent);
	border-bottom: none;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--accent) !important;
	color: var(--bg) !important;
	border-radius: var(--radius-sm) !important;
	padding: 14px;
	font-weight: 700;
	font-size: 14px;
	margin-top: 16px;
}

.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
a.checkout-button:hover {
	background: var(--accent-hover) !important;
}

/* ---- Empty cart ---- */
.woocommerce-cart-form ~ .cart-empty,
.cart-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--text-secondary);
	font-size: 15px;
}

.return-to-shop .button {
	display: inline-block;
	margin-top: 14px;
	background: var(--accent) !important;
	color: var(--bg) !important;
	border-radius: var(--radius-sm);
	padding: 12px 22px;
	font-weight: 600;
}

/* ---- Checkout ----
   WooCommerce injects an empty <wc-order-attribution-inputs> custom element
   (hidden tracking fields) as a real DOM sibling in two places: inside
   #customer_details, and again as a direct child of the checkout <form>
   itself. As a grid/flex item it's invisible but still claims layout space,
   which is what broke #customer_details into a lopsided 2-column split
   earlier - it's never meant to be visible, so hide it unconditionally
   everywhere rather than special-case each occurrence. */
.woocommerce-checkout wc-order-attribution-inputs {
	display: none !important;
}

/* #customer_details (class col2-set) wraps its two sections in WooCommerce's
   own legacy .col-1/.col-2 float layout (float:left/right, width:48%, from
   WC core CSS) - floats don't reliably top-align against sibling grid items
   and drag in clearfix side effects, so replace it with flex here instead:
   .col-1 (billing) and .col-2 (additional info) become plain flex items,
   guaranteed to share the same top edge via align-items. */
.woocommerce-checkout #customer_details {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

.woocommerce-checkout #customer_details > .col-1,
.woocommerce-checkout #customer_details > .col-2 {
	float: none !important;
	width: auto !important;
	flex: 1 1 260px;
	min-width: 0;
}

/* Outer 2-column checkout layout: #customer_details (fields + payment) on
   the left, "Your order" heading + #order_review (summary + place order) on
   the right - these three are sibling children of the same <form>, not
   nested, so explicit grid placement (not source order) puts the heading
   and the summary into one right-hand column while the fields column spans
   both rows on the left. */
.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 32px;
	align-items: start;
}

.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.woocommerce-checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin: 0;
}

.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 2;
}

@media (max-width: 700px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
	}
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		grid-column: 1;
		grid-row: auto;
	}
}

.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-additional-fields h3 {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-secondary);
	margin: 0 0 16px;
}


.woocommerce-checkout .form-row label {
	display: block;
	font-size: 12px;
	color: var(--text-secondary);
	margin-bottom: 6px;
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
	width: 100% !important;
	background: var(--panel) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text) !important;
	padding: 10px 12px !important;
	box-sizing: border-box;
}

.woocommerce-checkout #order_review {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 24px;
}

.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
	border-bottom: 1px solid var(--border-subtle);
	padding: 10px 4px;
	color: var(--text);
}

.woocommerce-checkout .payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .wc_payment_methods .wc_payment_method {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	margin-bottom: 8px;
}

.woocommerce-checkout .wc_payment_method label {
	font-weight: 600;
	color: var(--text);
}

.woocommerce-checkout .payment_box {
	background: var(--bg-section);
	border-radius: var(--radius-sm);
	padding: 12px;
	margin-top: 10px;
	font-size: 13px;
	color: var(--text-secondary);
}

.woocommerce-checkout #place_order {
	width: 100%;
	background: var(--accent) !important;
	color: var(--bg) !important;
	border: none;
	border-radius: var(--radius-sm);
	padding: 16px;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	margin-top: 16px;
}

.woocommerce-checkout #place_order:hover {
	background: var(--accent-hover) !important;
}

/* ---- Order received / thank you ---- */
.woocommerce-order {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 40px 0;
}

.woocommerce-order .ss-order-check {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--success);
	color: var(--bg-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 20px;
	font-size: 30px;
}

.woocommerce-order-overview {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 16px;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 24px;
	margin: 24px 0;
	text-align: left;
}

.woocommerce-order-overview li {
	font-size: 13px;
	color: var(--text-secondary);
}

.woocommerce-order-overview li strong {
	display: block;
	color: var(--text);
	font-size: 15px;
	margin-top: 4px;
}

/* ---- Login / register ---- */
.woocommerce-account .woocommerce > form:not(.woocommerce-form-login):not(.woocommerce-form-register),
.woocommerce-form-login,
.woocommerce-form-register {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 28px;
	max-width: 1260px;
	box-sizing: border-box;
	margin: 0 auto 24px;
}

.woocommerce-form-login h2,
.woocommerce-form-register h2 {
	font-size: 20px;
	text-align: center;
}

.woocommerce-form-login .form-row label:not(.woocommerce-form-login__rememberme),
.woocommerce-form-register .form-row label {
	display: block;
	font-size: 12px;
	color: var(--text-secondary);
	margin-bottom: 6px;
}

.woocommerce-form-login .form-row input:not([type="checkbox"]),
.woocommerce-form-register .form-row input:not([type="checkbox"]) {
	width: 100% !important;
	background: var(--bg) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	color: var(--text) !important;
	padding: 10px 12px !important;
	box-sizing: border-box;
}

.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"] {
	background: var(--accent) !important;
	color: var(--bg) !important;
	border: none;
	border-radius: var(--radius-sm);
	padding: 12px 20px;
	font-weight: 700;
	cursor: pointer;
	width: 100%;
	margin-top: 8px;
}

.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover {
	background: var(--accent-hover) !important;
}

.woocommerce-form-login .woocommerce-LostPassword {
	text-align: center;
	margin-top: 12px;
	font-size: 12px;
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-secondary);
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
	width: 14px;
	height: 14px;
	accent-color: var(--accent);
}

.u-columns.woocommerce-Addresses,
.woocommerce-account .woocommerce {
	max-width: 900px;
	margin: 0 auto;
}

.u-columns .col-1,
.u-columns .col-2 {
	display: inline-block;
	width: 48%;
	vertical-align: top;
}

/* Sign In / Register pill switcher (progressive enhancement over the
   native two-column #customer_login markup — see assets/js/theme.js).
   The JS keeps .ss-account-tabs-wrap right after whichever column's
   heading ("Login" / "Register") is currently visible, and this puts
   that heading + the pill on one row, pill pinned to the right, with
   the form itself wrapping onto its own row below. */
.ss-account-columns.col2-set .col-1,
.ss-account-columns.col2-set .col-2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 16px;
}

.ss-account-columns.col2-set .col-1 > h2,
.ss-account-columns.col2-set .col-2 > h2 {
	flex: 1 1 auto;
	margin: 0;
	text-align: left;
}

.ss-account-columns.col2-set .col-1 > form,
.ss-account-columns.col2-set .col-2 > form {
	flex-basis: 100%;
}

.ss-account-tabs-wrap {
	display: flex;
	flex: 0 0 auto;
}

.ss-account-tabs {
	display: flex;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.ss-account-tabs button {
	padding: 10px 24px;
	background: var(--panel);
	border: none;
	color: var(--text-secondary);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.ss-account-tabs button.is-active {
	background: var(--accent);
	color: var(--bg);
}

#customer_login.ss-account-columns {
	max-width: 720px;
	margin: 0 auto;
}

.ss-account-columns.col2-set .col-1,
.ss-account-columns.col2-set .col-2 {
	width: 100%;
}

.ss-account-columns:not(.ss-show-register) .col-2 {
	display: none;
}

.ss-account-columns.ss-show-register .col-1 {
	display: none;
}

/* ---- My Account dashboard ----
   Scoped to :has(.woocommerce-MyAccount-navigation) so this grid only
   kicks in once logged in (nav + content side by side). Without the
   scope it also grabbed the login/register page's .woocommerce wrapper,
   splitting the notices div, the tab pill, and #customer_login into
   three separate auto-fit tracks and shrinking the login form. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	align-items: start;
}

.woocommerce-MyAccount-navigation {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-MyAccount-navigation ul {
	margin: 0;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--border-subtle);
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 18px;
	color: var(--text-secondary);
	font-size: 13px;
	font-weight: 500;
	border-left: 3px solid transparent;
}

.woocommerce-MyAccount-navigation li a:hover {
	color: var(--text);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--accent);
	border-left-color: var(--accent);
	background: rgba(201, 161, 92, .06);
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

.woocommerce-MyAccount-content table.shop_table {
	width: 100%;
}

.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
	border-bottom: 1px solid var(--border-subtle);
	padding: 10px 8px;
	font-size: 13px;
	color: var(--text);
}

.woocommerce-MyAccount-content .button {
	background: var(--accent) !important;
	color: var(--bg) !important;
	border-radius: var(--radius-sm);
	padding: 8px 16px;
	font-size: 12px;
	font-weight: 600;
	display: inline-block;
}

.woocommerce-MyAccount-content address {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 18px;
	font-style: normal;
	color: var(--text-body);
}

/* ---- Star rating (kept subtle, gold) ---- */
.star-rating {
	color: var(--accent);
}

.star-rating span::before {
	color: var(--accent);
}

/* ---- Sale flash on default WC templates we don't fully override ---- */
.onsale {
	background: var(--danger);
	color: var(--text);
	border-radius: var(--radius-sm);
	font-size: 10.5px;
	text-transform: uppercase;
	padding: 4px 9px;
}