/**
 * Optical shop (WooCommerce) styles, matched to the theme. Every colour comes
 * from the palette, so the Boutique (dark) and Editorial designs work too.
 */

/* Product grids (Product Collection block, shop and category pages). */
.wc-block-product-template { gap: var(--wp--preset--spacing--40) !important; }
.wc-block-product-template .wc-block-product,
.wp-block-woocommerce-product-template .wc-block-product {
	position: relative; display: flex; flex-direction: column; gap: 0.4rem;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	padding: 0.75rem 0.75rem 1.1rem;
	box-shadow: var(--wp--custom--shadow--soft);
	transition: transform 0.25s, box-shadow 0.25s;
	text-align: left;
}
.wc-block-product-template .wc-block-product:hover { transform: translateY(-4px); box-shadow: var(--wp--custom--shadow--lift); }
.wc-block-product .wc-block-components-product-image { margin: 0 0 0.4rem !important; border-radius: calc(var(--wp--custom--radius--md) - 6px); overflow: hidden; background: var(--wp--preset--color--mist); }
.wc-block-product .wc-block-components-product-image img { aspect-ratio: 1; object-fit: cover; transition: transform 0.5s; }
.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }
.wc-block-product .wp-block-post-title { margin: 0 0.35rem !important; font-weight: 600; line-height: 1.35; }
.wc-block-product .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { color: var(--wp--preset--color--sky-deep); }
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wp-block-woocommerce-product-price { margin: 0 0.35rem !important; padding: 0 !important; }
.wc-block-product .wc-block-components-product-button,
.wc-block-product .wp-block-woocommerce-product-button { margin: auto 0.35rem 0 !important; padding-top: 0.5rem; }
.wc-block-product .wc-block-components-product-button .wp-block-button__link { width: 100%; justify-content: center; font-size: 0.9375rem; padding: 0.7rem 1rem; }
.wc-block-product .added_to_cart { display: block; margin-top: 0.4rem; font-size: 0.875rem; font-weight: 600; text-align: center; }

/* Prices and badges. */
.wc-block-components-product-price, .price, .wc-block-components-formatted-money-amount { font-weight: 600; color: var(--wp--preset--color--navy); }
.wc-block-components-product-price del, .price del { color: var(--wp--preset--color--slate); font-weight: 400; opacity: 0.8; }
.wc-block-components-product-price ins, .price ins { text-decoration: none; color: var(--wp--preset--color--sky-deep); }
.wc-block-components-product-sale-badge, .onsale {
	background: var(--wp--preset--color--red) !important; color: #fff !important; border: 0 !important;
	border-radius: 999px !important; padding: 0.25rem 0.7rem !important; font-size: 0.75rem !important; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

/* Buttons WooCommerce draws itself. */
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-product-button .wp-block-button__link,
.single_add_to_cart_button, .woocommerce-button, .woocommerce a.button, .woocommerce button.button {
	background: var(--wp--preset--color--sky-deep) !important; color: var(--gscl-on-deep, #fff) !important;
	border: 0 !important; border-radius: 999px !important; font-weight: 600 !important; min-height: 44px;
	transition: background-color 0.2s, transform 0.2s;
}
.wc-block-components-button:not(.is-link):hover,
.single_add_to_cart_button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--wp--preset--color--navy) !important; color: var(--wp--preset--color--white) !important; }
.wc-block-components-button.is-link { color: var(--wp--preset--color--sky-deep); }

/* Form fields (cart, checkout, account). 16px avoids zoom on iPhone. */
.wc-block-components-text-input input, .wc-block-components-text-input textarea,
.wc-blocks-components-select__select, .wc-block-components-combobox .components-combobox-control__input,
.woocommerce form .input-text, .woocommerce form select, .quantity .qty, .wc-block-components-quantity-selector {
	box-sizing: border-box; max-width: 100%; font-size: 1rem !important;
	background: var(--wp--preset--color--white) !important; color: var(--wp--preset--color--navy) !important;
	border-color: var(--wp--preset--color--line) !important; border-radius: var(--wp--custom--radius--sm) !important;
}
.wc-block-components-text-input label, .wc-blocks-components-select__label { color: var(--wp--preset--color--slate) !important; }
.wc-block-components-text-input.is-active input:focus, .woocommerce form .input-text:focus { border-color: var(--wp--preset--color--sky-deep) !important; box-shadow: 0 0 0 1px var(--wp--preset--color--sky-deep) !important; outline: 0; }
.wc-block-components-radio-control__input, .wc-block-components-checkbox__input { border-color: var(--wp--preset--color--slate) !important; background: var(--wp--preset--color--white) !important; }
.wc-block-components-radio-control__input:checked::before { background: var(--wp--preset--color--sky-deep) !important; }
.wc-block-components-checkbox__mark { fill: var(--wp--preset--color--sky-deep); }

/* Panels: cart and checkout sidebars, totals, payment options. */
.wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-cart__totals-title { color: var(--wp--preset--color--navy); }
.wp-block-woocommerce-checkout-order-summary-block, .wc-block-cart .wc-block-components-sidebar > .wp-block-woocommerce-cart-totals-block {
	background: var(--wp--preset--color--mist); border: 1px solid var(--wp--preset--color--line) !important; border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.wc-block-components-totals-wrapper, .wc-block-components-order-summary-item, .wc-block-cart-items td, .wc-block-cart-items th, .wc-block-components-panel { border-color: var(--wp--preset--color--line) !important; }
.wc-block-components-radio-control-accordion-option, .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-radius: var(--wp--custom--radius--sm) !important; box-shadow: inset 0 0 0 1px var(--wp--preset--color--line);
}
.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted { box-shadow: inset 0 0 0 2px var(--wp--preset--color--sky-deep) !important; }
.wc-block-cart-item__image img, .wc-block-components-order-summary-item__image img { border-radius: var(--wp--custom--radius--sm); }
.wc-block-components-product-name { color: var(--wp--preset--color--navy) !important; font-weight: 600; text-decoration: none; }
.wc-block-components-product-metadata, .wc-block-components-product-details { color: var(--wp--preset--color--slate); }
.wc-block-components-totals-item__label, .wc-block-components-totals-item__value { color: var(--wp--preset--color--navy); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: var(--wp--preset--font-size--large); }

/* Notices. */
.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notices-wrapper > * {
	border-radius: var(--wp--custom--radius--sm) !important; border: 1px solid var(--wp--preset--color--line) !important;
	background: var(--wp--preset--color--sky-tint) !important; color: var(--wp--preset--color--navy) !important;
}
.wc-block-components-notice-banner.is-success { border-color: color-mix(in srgb, #1f9d55 45%, var(--wp--preset--color--line)) !important; }
.wc-block-components-notice-banner.is-error, .woocommerce-error { border-color: color-mix(in srgb, var(--wp--preset--color--red) 55%, var(--wp--preset--color--line)) !important; }
.wc-block-components-notice-banner > svg { fill: #fff; background: var(--wp--preset--color--sky-deep) !important; border-radius: 50%; }
.wc-block-components-notice-banner.is-error > svg { background: var(--wp--preset--color--red) !important; }
.wc-block-components-notice-banner a, .woocommerce-message a { color: var(--wp--preset--color--sky-deep); font-weight: 600; }

/* Single product. */
.wp-block-woocommerce-product-image-gallery img, .woocommerce-product-gallery img,
.wp-block-woocommerce-product-gallery img { border-radius: var(--wp--custom--radius--md); }
.woocommerce-product-gallery, .wp-block-woocommerce-product-image-gallery { background: var(--wp--preset--color--mist); border-radius: var(--wp--custom--radius--md); }
.single-product .wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); }
.single-product .wp-block-woocommerce-product-price { font-size: var(--wp--preset--font-size--x-large); }
.wc-block-add-to-cart-form .quantity .qty, .wp-block-add-to-cart-form .quantity .qty { min-height: 48px; width: 4.5rem; text-align: center; }
.wc-block-add-to-cart-form form.cart, .wp-block-add-to-cart-form form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.woocommerce-tabs .tabs, .wc-tabs { border-bottom: 1px solid var(--wp--preset--color--line) !important; }
.woocommerce-tabs .tabs li a, .wc-tabs li a { color: var(--wp--preset--color--slate) !important; font-weight: 600; }
.woocommerce-tabs .tabs li.active a, .wc-tabs li.active a { color: var(--wp--preset--color--sky-deep) !important; box-shadow: inset 0 -2px 0 var(--wp--preset--color--sky-deep); }
.wp-block-woocommerce-product-meta, .product_meta { color: var(--wp--preset--color--slate); font-size: 0.9375rem; }
.wc-block-components-product-stock-indicator--in-stock, .stock.in-stock { color: #1f7a45; font-weight: 600; }

/* Catalogue toolbar: result count, sorting, filters, breadcrumbs, pagination. */
.woocommerce-result-count, .woocommerce-breadcrumb, .wc-block-breadcrumbs, .wp-block-woocommerce-breadcrumbs { color: var(--wp--preset--color--slate); font-size: 0.9375rem; }
.woocommerce-ordering select, .wc-block-catalog-sorting select { min-height: 44px; border-radius: 999px; padding: 0 1rem; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); font-size: 1rem; }
.wp-block-query-pagination .page-numbers, .woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: 999px; }

/* My account. */
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.woocommerce-MyAccount-navigation a { display: block; padding: 0.7rem 1rem; border-radius: var(--wp--custom--radius--sm); text-decoration: none; color: var(--wp--preset--color--navy); font-weight: 500; }
.woocommerce-MyAccount-navigation .is-active a, .woocommerce-MyAccount-navigation a:hover { background: var(--wp--preset--color--sky-tint); color: var(--wp--preset--color--sky-deep); }
.woocommerce-account .woocommerce table, .woocommerce table.shop_table { border-color: var(--wp--preset--color--line) !important; border-radius: var(--wp--custom--radius--sm); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { border-color: var(--wp--preset--color--line) !important; }
@media (max-width: 781px) {
	.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none !important; width: 100% !important; }
	.woocommerce-MyAccount-navigation ul { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem; }
}

/* Order confirmation. */
.wc-block-order-confirmation-status, .woocommerce-thankyou-order-received { font-size: var(--wp--preset--font-size--large); }
.wc-block-order-confirmation-summary-list, .woocommerce-order-overview { background: var(--wp--preset--color--mist); border-radius: var(--wp--custom--radius--md); padding: var(--wp--preset--spacing--40) !important; border: 1px solid var(--wp--preset--color--line); }

/* Mini-cart drawer. */
.wc-block-mini-cart__drawer .wc-block-components-drawer, .wc-block-components-drawer__content { background: var(--wp--preset--color--white); color: var(--wp--preset--color--navy); }
.wc-block-mini-cart__footer { border-top: 1px solid var(--wp--preset--color--line); }
.wc-block-mini-cart__badge { font-weight: 700; }

/* WooCommerce's own templates (shop, product, cart, checkout): breathing room under the header. */
.wp-site-blocks > main.wp-block-group:not(.gscl-main) { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--70); }
.wp-block-woocommerce-breadcrumbs, .woocommerce-breadcrumb { margin-bottom: var(--wp--preset--spacing--30); }

/* Product page: breathing room between the header and the breadcrumb. */
body.single-product .woocommerce-breadcrumb, body.single-product .wc-block-breadcrumbs { margin-top: var(--wp--preset--spacing--40) !important; }
