/* GMB Promotions — WooCommerce storefront overrides
   Brand: indigo #0F0C1B / violet #1B1530 / softwhite #F8F9FA /
   magenta #FF007A / cyan #00E5FF / sunset #FFB800 */

:root {
	--gmb-indigo: var(--wp--preset--color--indigo);
	--gmb-violet: var(--wp--preset--color--violet);
	--gmb-softwhite: var(--wp--preset--color--softwhite);
	--gmb-magenta: var(--wp--preset--color--magenta);
	--gmb-cyan: var(--wp--preset--color--cyan);
	--gmb-sunset: var(--wp--preset--color--sunset);
	--gmb-line: var(--wp--preset--color--line);
	--gmb-field: var(--wp--preset--color--field);
	--gmb-muted: var(--wp--preset--color--muted);
}

body {
	background: var(--gmb-indigo);
	color: var(--gmb-softwhite);
}

body.woocommerce-page,
.wp-site-blocks {
	background: var(--gmb-indigo);
}

h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.woocommerce-loop-product__title,
.product_title {
	font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	color: var(--gmb-softwhite);
}

a { color: var(--gmb-cyan); }
a:hover, a:focus { color: var(--gmb-magenta); }

/* Header / footer bars pick up the violet surface tone */
header.wp-block-template-part,
footer.wp-block-template-part {
	background: var(--gmb-violet);
	border-color: var(--gmb-line);
}

/* Shop grid + product cards */
ul.products li.product,
.wc-block-grid__product {
	background: var(--gmb-violet);
	border: 1px solid var(--gmb-line);
	border-radius: 10px;
	padding: 1rem;
	transition: border-color 0.2s, transform 0.2s;
}
ul.products li.product:hover {
	border-color: var(--gmb-cyan);
	transform: translateY(-2px);
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.05rem;
}

/* Product photos come from a mix of sources (mockup crops, future real
   photography) with inconsistent native aspect ratios — without a fixed box
   the grid renders with ragged, mismatched card heights. */
ul.products li.product a.woocommerce-loop-product__link img,
ul.products li.product img.attachment-woocommerce_thumbnail {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
}

/* Archive-only editorial CTA — scoped to the shop-grid card, distinct from the
   shared single-product/cart/checkout button rule below (never modified). */
ul.products li.product a.button {
	background: transparent;
	color: var(--gmb-magenta);
	border: 1px solid var(--gmb-magenta);
	border-radius: 999px;
	font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.6em 1.3em;
	box-shadow: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}
ul.products li.product a.button:hover {
	background: var(--gmb-magenta);
	color: var(--gmb-indigo);
	border-color: var(--gmb-magenta);
}

/* Prices */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.price {
	color: var(--gmb-sunset);
	font-weight: 600;
}
.woocommerce ul.products li.product .price del {
	color: #8a8298;
}
.woocommerce ul.products li.product .price ins {
	color: var(--gmb-sunset);
}

/* Buttons: Add to cart, Checkout, Place order */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	background: var(--gmb-magenta);
	color: var(--gmb-softwhite);
	border: none;
	border-radius: 8px;
	font-weight: 500;
	font-size: 0.92rem;
	letter-spacing: 0.01em;
	padding: 0.65em 1.4em;
	box-shadow: none;
	transition: background 0.2s, color 0.2s;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:hover {
	background: var(--gmb-cyan);
	color: var(--gmb-indigo);
}

/* Secondary / outline buttons (e.g. "Select options") */
.woocommerce a.added_to_cart {
	color: var(--gmb-cyan);
}

/* Cart & checkout tables */
.woocommerce table.shop_table,
.woocommerce-cart table.cart,
.woocommerce-checkout table.shop_table {
	background: var(--gmb-violet);
	border: 1px solid var(--gmb-line);
	color: var(--gmb-softwhite);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: var(--gmb-line);
}

/* Forms (checkout fields, quantity inputs, search, comments) */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce select,
.woocommerce textarea,
.wc-block-components-text-input input,
.search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form textarea {
	background: var(--gmb-field) !important;
	border: 1px solid var(--gmb-line) !important;
	color: var(--gmb-softwhite) !important;
	border-radius: 6px;
	font-weight: 400;
	padding: 0.55em 0.75em;
}
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.search-field:focus,
.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--gmb-cyan) !important;
	outline: none;
}

/* Browser autofill / contact-suggestion overlays (Safari's proactive first/last
   name + email suggestion, Chrome's saved-credential highlight) ignore normal
   background/color rules on empty recognized fields — override via the
   -webkit-autofill pseudo-class so those fields stay on-brand instead of
   reverting to a bright default. */
.woocommerce input:-webkit-autofill,
.woocommerce input:-webkit-autofill:hover,
.woocommerce input:-webkit-autofill:focus,
.woocommerce input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--gmb-softwhite);
	-webkit-box-shadow: 0 0 0 1000px var(--gmb-field) inset;
	box-shadow: 0 0 0 1000px var(--gmb-field) inset;
	caret-color: var(--gmb-softwhite);
	transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Placeholder text was invisible (default grey-on-dark) — make it a
   legible muted lavender instead of pure white, so it still reads as
   a placeholder and not as entered text. */
.woocommerce input::placeholder,
.woocommerce textarea::placeholder,
.search-field::placeholder,
.comment-form input::placeholder,
.comment-form textarea::placeholder {
	color: var(--gmb-muted) !important;
	opacity: 1 !important;
}

/* Field labels */
.woocommerce form .form-row label,
.comment-form label {
	color: var(--gmb-muted) !important;
	font-weight: 400;
}

/* WooCommerce Blocks checkout (Cart & Checkout Blocks) — this markup has no
   .woocommerce ancestor wrapping the form fields (only a sibling notices div
   carries that class), so every .woocommerce-prefixed rule above silently
   never matches here. These block-native selectors need no such ancestor. */
.wc-block-components-text-input input::placeholder {
	color: var(--gmb-muted) !important;
	opacity: 1 !important;
}
.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	color: var(--gmb-muted) !important;
}
.wc-block-components-text-input input:focus {
	border-color: var(--gmb-cyan) !important;
	outline: none;
}
.wc-blocks-components-select__select {
	background: var(--gmb-field) !important;
	border: 1px solid var(--gmb-line) !important;
	color: var(--gmb-softwhite) !important;
	border-radius: 6px;
}
.wc-blocks-components-select__select:focus {
	border-color: var(--gmb-cyan) !important;
	outline: none;
}
.wc-blocks-components-select__expand {
	fill: var(--gmb-muted) !important;
}
.wc-block-components-checkbox__input {
	background: var(--gmb-field) !important;
	border-color: var(--gmb-line) !important;
}
.wc-block-components-checkbox__input:checked {
	background: var(--gmb-magenta) !important;
	border-color: var(--gmb-magenta) !important;
}
.wc-block-components-checkbox__mark {
	fill: var(--gmb-softwhite);
}
.wc-block-components-checkbox__label {
	color: var(--gmb-muted) !important;
}
.wc-block-components-textarea {
	background: var(--gmb-field) !important;
	border: 1px solid var(--gmb-line) !important;
	color: var(--gmb-softwhite) !important;
	border-radius: 6px;
}
.wc-block-components-textarea::placeholder {
	color: var(--gmb-muted) !important;
	opacity: 1 !important;
}
.wc-block-components-textarea:focus {
	border-color: var(--gmb-cyan) !important;
	outline: none;
}

/* Category / sale badges */
.woocommerce span.onsale {
	background: var(--gmb-magenta);
	color: var(--gmb-softwhite);
	border-radius: 999px;
}

/* Stars / ratings keep the sunset accent */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--gmb-sunset);
}

/* Breadcrumbs + muted text */
.woocommerce-breadcrumb,
.woocommerce-Price-currencySymbol {
	color: #b6aed0;
}

/* WooCommerce "coming soon" / notice banners keep readable contrast */
.woocommerce-message,
.woocommerce-info {
	background: var(--gmb-violet);
	border-top-color: var(--gmb-cyan);
	color: var(--gmb-softwhite);
}
.woocommerce-error {
	background: var(--gmb-violet);
	border-top-color: var(--gmb-magenta);
	color: var(--gmb-softwhite);
}