/**
 * shop-pages.css — shared frame for Cart, Checkout and My Account.
 * Loaded after global.css on all three; css/cart.css, css/checkout.css and
 * css/account.css each add only what's specific to that one page.
 *
 * The point of this file: identical outer frame (max-width, side padding,
 * card look) on all three pages, so none of them feel wider/narrower or
 * differently spaced than the others.
 */

.shop-page {
	padding: 3.5rem 0 6rem;
}

.shop-page__head {
	max-width: 660px;
	margin-bottom: 2.4rem;
}

.shop-page__head h1 {
	font-size: clamp(2rem, 4.2vw, 2.8rem);
	margin: .8rem 0 0;
}

.shop-card {
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: 22px;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow: var(--shadow);
	padding: 2.2rem;
}

@media (max-width: 640px) {
	.shop-card {
		padding: 1.4rem;
	}
}

/* Generic notice/message styling (WooCommerce prints these via
   wc_print_notices() — errors, "item removed", "coupon applied", etc.) */
.woocommerce-notices-wrapper {
	margin-bottom: 1.6rem;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
ul.woocommerce-error,
ul.woocommerce-message,
ul.woocommerce-info {
	list-style: none;
	background: var(--glass) !important;
	border: 1px solid var(--line);
	border-left: 3px solid var(--gold);
	border-radius: 14px;
	padding: 1rem 1.4rem;
	font-size: .9rem;
	color: var(--text) !important;
	margin-bottom: 1rem;
}

/* Field-level errors WooCommerce lists as <li> inside the ul above. */
.woocommerce-error li {
	color: var(--text);
}

/* Remove WooCommerce's own default icon-font glyph (::before) -- it's
   absolutely positioned assuming WooCommerce's default layout/padding,
   which we're not using, so it was overlapping the first word instead of
   sitting beside it. Our gold left border is the visual marker instead. */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before {
	content: none;
	display: none;
}

.woocommerce-error {
	border-left-color: #a35b5b;
}

/* Form inputs on Cart/Checkout/Account (coupon field, billing fields,
   address forms, account details, password fields, etc.). WooCommerce's
   own bundled CSS targets these with selectors like
   ".woocommerce form .form-row input.input-text", which is more specific
   than global.css's plain "input" rule and was winning the cascade --
   matching that specificity here to force our dark theme instead. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-account input.input-text,
.woocommerce-account textarea,
.woocommerce-account select,
.woocommerce-page input.input-text,
.woocommerce-page textarea,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page input[type="number"] {
	background: rgba(255, 255, 255, .035);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: .95rem 1.1rem;
	color: var(--text);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 300;
	transition: .35s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce-page input.input-text:focus,
.woocommerce-page textarea:focus,
.woocommerce-page select:focus,
.woocommerce-page input[type="text"]:focus,
.woocommerce-page input[type="email"]:focus,
.woocommerce-page input[type="tel"]:focus,
.woocommerce-page input[type="password"]:focus,
.woocommerce-page input[type="number"]:focus {
	outline: none;
	border-color: var(--gold);
	background: rgba(212, 175, 55, .07);
	box-shadow: 0 0 0 4px rgba(212, 175, 55, .09);
}

.woocommerce-page ::placeholder {
	color: var(--muted);
	opacity: 1;
}

/* Country/state dropdown (select2) -- used on Checkout and My Account's
   address forms. Select2 renders its own markup outside a plain <select>,
   so it needs its own selectors regardless of the input rules above. */
.select2-container .select2-selection--single {
	height: auto;
	background: rgba(255, 255, 255, .035);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: .55rem .5rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--text);
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--muted) transparent transparent transparent;
}

.select2-dropdown {
	background: #0a0a0a;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background: rgba(255, 255, 255, .035);
	border: 1px solid var(--line);
	color: var(--text);
	border-radius: 10px;
}

.select2-results__option {
	color: var(--muted);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: rgba(212, 175, 55, .15);
	color: var(--gold-lt);
}

/* The currently-selected option (not just the hovered one) has its own
   default light-gray background from select2's own CSS -- override separately. */
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: rgba(255, 255, 255, .06);
	color: var(--text);
}

/* Chrome/Edge force their own light-blue background on autofilled fields
   (password managers, saved addresses) that author CSS can't override via
   background-color directly -- this box-shadow trick is the standard fix. */
.woocommerce-page input:-webkit-autofill,
.woocommerce-page input:-webkit-autofill:hover,
.woocommerce-page input:-webkit-autofill:focus,
.woocommerce-page input[autocomplete="current-password"]:-webkit-autofill {
	-webkit-text-fill-color: var(--text) !important;
	-webkit-box-shadow: 0 0 0 1000px #14120a inset !important;
	box-shadow: 0 0 0 1000px #14120a inset !important;
	transition: background-color 5000s ease-in-out 0s !important;
	caret-color: var(--text);
}

/* Belt-and-braces: guarantee every textarea on these pages is dark,
   regardless of which specific WooCommerce markup/hook rendered it
   (order notes, account details bio field, etc.) */
.woocommerce-page textarea {
	background: rgba(255, 255, 255, .035) !important;
	color: var(--text) !important;
	border: 1px solid var(--line) !important;
}