/**
 * Oh My Mogra — commerce surfaces.
 *
 * WooCommerce's own general/layout/smallscreen stylesheets are dequeued in
 * inc/woocommerce.php, so this file is not fighting them for specificity. The
 * block Cart and Checkout keep their structural stylesheets — those are layout,
 * not decoration — so rules aimed at them override rather than replace.
 */

/* -------------------------------------------------------------------------
 * Shared
 * ---------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border: 1px solid var(--omm-line-2);
	border-left: 3px solid var(--omm-brand);
	border-radius: var(--omm-r);
	background: var(--omm-surface-2);
	color: var(--omm-ink);
	padding: .875rem 1.125rem;
	font-size: .875rem;
	list-style: none;
	margin: 0 0 1.375rem;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: #7A2118;
}

.omm-stock {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	margin: 0;
	font-family: var(--omm-mono);
	font-size: .65625rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--omm-brand);
}

.omm-stock i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.omm-stock--low {
	color: var(--omm-oil);
}

.omm-stock--out {
	color: var(--omm-muted);
}

.omm-hairtype {
	margin: .625rem 0 0;
	padding-top: .5rem;
	border-top: 1px solid var(--omm-line);
	font-family: var(--omm-mono);
	font-size: .625rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--omm-muted);
}

/* -------------------------------------------------------------------------
 * Product archive
 *
 * With two SKUs a dense grid looks broken, so cards are large and editorial.
 * A fixed 4:5 ratio is what keeps every row aligned regardless of what gets
 * uploaded — see the image-size setup in inc/woocommerce.php.
 * ---------------------------------------------------------------------- */

.wc-block-product-template,
ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wc-block-product-template__responsive-wrapper img,
ul.products li.product img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--omm-r);
	background: var(--omm-oil-soft);
	width: 100%;
	height: auto;
}

.woocommerce-loop-product__title,
.wc-block-components-product-title {
	font-family: var(--omm-serif);
	font-size: 1.0625rem !important;
	font-weight: 500;
	letter-spacing: -.01em;
	margin: .75rem 0 .25rem;
}

.wc-block-components-product-price,
.price {
	font-family: var(--omm-mono);
	font-variant-numeric: tabular-nums;
	color: var(--omm-ink);
}

.wc-block-components-product-price del,
.price del {
	color: var(--omm-muted);
	opacity: 1;
}

.wc-block-components-product-price ins,
.price ins {
	text-decoration: none;
	font-weight: 500;
}

/* Sale badge — carries the actual saving, not the word "Sale". */
.omm-badge,
span.onsale {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
}

ul.products li.product,
.wc-block-product {
	position: relative;
}

/* -------------------------------------------------------------------------
 * Single product
 * ---------------------------------------------------------------------- */

.omm-product-hero {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 782px) {
	.omm-product-hero {
		grid-template-columns: 1.05fr 1fr;
		gap: 3rem;
		align-items: start;
	}
}

/* Gallery */
.woocommerce-product-gallery,
.wp-block-woocommerce-product-image-gallery {
	margin: 0;
}

.woocommerce-product-gallery__image img,
.wp-block-woocommerce-product-image-gallery img {
	border-radius: var(--omm-r);
	background: var(--omm-oil-soft);
	width: 100%;
	height: auto;
}

.flex-control-thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .5rem;
	margin: .625rem 0 0;
	padding: 0;
}

.flex-control-thumbs li img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--omm-r-sm);
	border: 1px solid transparent;
	cursor: pointer;
	opacity: .72;
	transition: opacity .16s var(--omm-ease), border-color .16s var(--omm-ease);
}

.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li img:hover {
	opacity: 1;
	border-color: var(--omm-ink);
}

/* Buy column — pinned on desktop because the page is long by design. */
.omm-buy {
	display: grid;
	gap: 1.125rem;
	align-content: start;
}

@media (min-width: 782px) {
	.omm-buy {
		position: sticky;
		top: calc(var(--omm-header-h) + 1.125rem);
	}
}

.omm-buy .product_title,
.omm-buy .wp-block-post-title {
	font-family: var(--omm-serif);
	font-size: clamp(1.6875rem, 4vw, 2.25rem);
	font-weight: 500;
	letter-spacing: -.015em;
	margin: 0;
}

.omm-buy .woocommerce-product-details__short-description,
.omm-buy .wc-block-components-product-summary {
	color: var(--omm-ink-2);
	font-size: .90625rem;
	max-width: 44ch;
}

.omm-buy .price,
.omm-buy .wc-block-components-product-price {
	font-size: 1.5rem;
}

/* Rating */
.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .78125rem;
	color: var(--omm-muted);
	margin: 0;
}

.star-rating,
.wc-block-components-product-rating__stars {
	color: var(--omm-oil);
	letter-spacing: .1em;
}

/* --- Variation pills -----------------------------------------------------
   Woo's dropdowns stay in the DOM as the source of truth and are visually
   hidden; assets/js/product.js mirrors them into these. Without JS the
   selects come back and the page still works. */

.omm-select-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

table.variations {
	width: 100%;
	border: 0;
	margin: 0;
}

table.variations th,
table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: left;
}

table.variations th label {
	font-family: var(--omm-mono);
	font-size: .625rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--omm-muted);
	display: block;
	margin-bottom: .5rem;
}

table.variations tr + tr th {
	padding-top: 1.125rem;
}

.omm-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.omm-pill {
	min-width: 84px;
	padding: .5625rem .9375rem;
	border: 1px solid var(--omm-line-2);
	border-radius: var(--omm-r);
	background: var(--omm-surface);
	color: var(--omm-ink);
	font-family: var(--omm-sans);
	font-size: .84375rem;
	cursor: pointer;
	transition: border-color .14s var(--omm-ease), box-shadow .14s var(--omm-ease);
}

.omm-pill:hover:not(.is-off) {
	border-color: var(--omm-ink);
}

.omm-pill.is-on {
	border-color: var(--omm-ink);
	box-shadow: inset 0 0 0 1px var(--omm-ink);
}

/* Unavailable combinations stay visible and struck through. A size that
   disappears reads as one you never stocked. */
.omm-pill.is-off {
	opacity: .45;
	text-decoration: line-through;
	cursor: not-allowed;
}

.reset_variations {
	display: inline-block;
	margin-top: .625rem;
	font-size: .78125rem;
	color: var(--omm-muted);
}

.woocommerce-variation-price {
	margin: 1rem 0 .5rem;
	font-family: var(--omm-mono);
	font-size: 1.25rem;
	font-variant-numeric: tabular-nums;
}

/* Add to cart */
form.cart {
	display: grid;
	gap: 1.125rem;
	margin: 0;
}

form.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--omm-line-2);
	border-radius: var(--omm-r);
	overflow: hidden;
}

form.cart .quantity input.qty {
	width: 56px;
	height: 44px;
	border: 0;
	background: var(--omm-surface);
	text-align: center;
	font-family: var(--omm-mono);
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	color: var(--omm-ink);
	-moz-appearance: textfield;
}

form.cart .quantity input.qty::-webkit-outer-spin-button,
form.cart .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: .9375rem 1.375rem;
	border: 1px solid var(--omm-brand);
	border-radius: var(--omm-r);
	background: var(--omm-brand);
	color: #fff;
	font-family: var(--omm-sans);
	font-size: .9375rem;
	font-weight: 500;
	cursor: pointer;
	transition: background .16s var(--omm-ease);
}

.single_add_to_cart_button:hover {
	background: #183524;
}

.single_add_to_cart_button.disabled,
.single_add_to_cart_button[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

/* Trust row under the button — shipping, returns, formulation. */
.omm-trust {
	display: grid;
	gap: .4375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.omm-trust li {
	display: grid;
	grid-template-columns: 15px 1fr;
	gap: .5625rem;
	align-items: start;
	font-size: .8125rem;
	color: var(--omm-ink-2);
}

.omm-trust svg {
	color: var(--omm-brand);
	margin-top: 2px;
}

/* Buy-box accordions — real <details>, so they are keyboard operable and
   open when the browser's find-in-page hits them. */
.omm-acc {
	border-top: 1px solid var(--omm-line);
}

.omm-acc:last-of-type {
	border-bottom: 1px solid var(--omm-line);
}

.omm-acc > summary {
	list-style: none;
	cursor: pointer;
	padding: .8125rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	font-size: .84375rem;
	font-weight: 500;
}

.omm-acc > summary::-webkit-details-marker {
	display: none;
}

.omm-acc > summary::after {
	content: "+";
	font-family: var(--omm-mono);
	font-size: .9375rem;
	color: var(--omm-muted);
}

.omm-acc[open] > summary::after {
	content: "\2013";
}

.omm-acc-body {
	padding: 0 0 .9375rem;
	font-size: .84375rem;
	color: var(--omm-ink-2);
	max-width: 52ch;
}

/* Sticky add-to-cart — mobile only; on desktop the buy column is pinned
   instead, so a bar would be redundant. */
.omm-sticky-atc {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: .75rem;
	align-items: center;
	padding: .6875rem 1rem;
	background: color-mix(in srgb, var(--omm-surface) 94%, transparent);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--omm-line-2);
	transform: translateY(100%);
	transition: transform .28s var(--omm-ease);
}

.omm-sticky-atc.is-visible {
	transform: translateY(0);
}

.omm-sticky-copy {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.omm-sticky-copy b {
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.omm-sticky-copy span {
	font-family: var(--omm-mono);
	font-size: .71875rem;
	color: var(--omm-muted);
}

.omm-sticky-add {
	width: auto;
	padding: .6875rem 1.25rem;
}

@media (min-width: 782px) {
	.omm-sticky-atc {
		display: none;
	}
}

/* Reviews */
.woocommerce-Reviews .comment-reply-title {
	font-family: var(--omm-serif);
	font-size: 1.25rem;
}

.woocommerce-Reviews ol.commentlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.woocommerce-Reviews ol.commentlist li {
	padding: 1rem;
	border: 1px solid var(--omm-line);
	border-radius: var(--omm-r);
	background: var(--omm-surface);
}

.woocommerce-review__author {
	font-weight: 600;
	font-size: .84375rem;
}

.woocommerce-review__published-date {
	font-family: var(--omm-mono);
	font-size: .6875rem;
	color: var(--omm-muted);
}

.comment-form-hair-type select,
.comment-form-rating select {
	border: 1px solid var(--omm-line-2);
	border-radius: var(--omm-r);
	padding: .5rem .625rem;
	background: var(--omm-surface);
	font-family: var(--omm-sans);
	font-size: .875rem;
	color: var(--omm-ink);
}

/* -------------------------------------------------------------------------
 * WooCommerce auto-inserts a Mini-Cart and a Customer Account block into the
 * header template part of block themes. This theme provides both controls in
 * its own tools cluster, so the injected copies are suppressed — otherwise the
 * header carries two bag icons and two account icons.
 *
 * To remove them properly rather than hide them: Appearance → Editor →
 * Patterns → Header, delete the blocks, save.
 * ---------------------------------------------------------------------- */

.omm-header .wp-block-woocommerce-mini-cart,
.omm-header .wp-block-woocommerce-customer-account {
	display: none;
}

/* -------------------------------------------------------------------------
 * Checkout: strip the header
 *
 * Done in CSS rather than with a separate template so WooCommerce keeps
 * ownership of its own cart/checkout block templates — overriding those in the
 * theme is what breaks on a Woo update. Nothing on this page should compete
 * with the pay button, so nav, search and the bag icon all go.
 * ---------------------------------------------------------------------- */

.woocommerce-checkout .omm-header-nav,
.woocommerce-checkout .omm-header-tools,
.woocommerce-checkout .omm-announce {
	display: none;
}

.woocommerce-checkout .omm-header-inner {
	grid-template-columns: 1fr;
	justify-items: center;
}

.woocommerce-checkout .omm-sticky-atc {
	display: none;
}

/* -------------------------------------------------------------------------
 * Cart block
 *
 * Already AJAX by construction — it talks to the Store API over fetch, so
 * quantity and removal never reload. This is purely a re-skin.
 * ---------------------------------------------------------------------- */

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: var(--omm-r) !important;
	background: var(--omm-brand) !important;
	color: #fff !important;
	font-family: var(--omm-sans) !important;
	font-weight: 500 !important;
	padding: .9375rem 1.375rem !important;
}

.wc-block-cart-items {
	border-collapse: collapse;
}

.wc-block-cart-items__row {
	border-top: 1px solid var(--omm-line);
}

.wc-block-cart-item__image img {
	border-radius: var(--omm-r-sm);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--omm-oil-soft);
}

.wc-block-components-product-name {
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--omm-ink);
}

.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--omm-line);
}

.wc-block-components-totals-item__value {
	font-family: var(--omm-mono);
	font-variant-numeric: tabular-nums;
}

.wc-block-cart__sidebar .wc-block-components-sidebar {
	background: var(--omm-surface-2);
	border: 1px solid var(--omm-line);
	border-radius: var(--omm-r);
	padding: 1.25rem;
}

/* The coupon accordion stays collapsed. A prominent coupon field sends people
   off-site hunting codes; the free-shipping meter earns those pixels instead. */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-size: .8125rem;
	color: var(--omm-muted);
}

/* -------------------------------------------------------------------------
 * Checkout block
 * ---------------------------------------------------------------------- */

.wc-block-checkout__form {
	max-width: none;
}

.wc-block-components-title,
.wc-block-checkout__form h2 {
	font-family: var(--omm-mono) !important;
	font-size: .65625rem !important;
	letter-spacing: .13em !important;
	text-transform: uppercase !important;
	color: var(--omm-muted) !important;
	font-weight: 500 !important;
	padding-bottom: .5625rem;
	border-bottom: 1px solid var(--omm-line);
}

.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-combobox input,
.wc-block-components-textarea {
	border: 1px solid var(--omm-line-2) !important;
	border-radius: var(--omm-r) !important;
	background: var(--omm-surface) !important;
	color: var(--omm-ink) !important;
	font-family: var(--omm-sans) !important;
	font-size: .90625rem !important;
}

.wc-block-components-text-input label {
	font-family: var(--omm-mono);
	font-size: .59375rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--omm-muted);
}

.wc-block-components-radio-control__option,
.wc-block-components-checkout-step {
	border-color: var(--omm-line);
}

.wc-block-components-radio-control-accordion-option--checked,
.wc-block-components-radio-control__option--checked-option-highlighted {
	border-color: var(--omm-brand) !important;
	box-shadow: inset 0 0 0 1px var(--omm-brand);
}

.wc-block-components-order-summary {
	background: var(--omm-surface-2);
	border-radius: var(--omm-r);
}

/* Express wallets sit above the form: most mobile orders should never touch
   a keyboard. */
.wc-block-checkout__express-payment {
	background: transparent !important;
	padding: 0 0 1.375rem !important;
	border-bottom: 1px solid var(--omm-line);
	margin-bottom: 1.375rem;
}

/* -------------------------------------------------------------------------
 * My account
 *
 * Woo's default here looks like a 2013 admin panel, and for a repeat-purchase
 * product it is a page people actually come back to.
 * ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 782px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: 220px 1fr;
		gap: 3rem;
		align-items: start;
	}
}

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .25rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--omm-line);
}

.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
	display: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	white-space: nowrap;
	padding: .4375rem .8125rem;
	border-radius: 100px;
	font-size: .8125rem;
	color: var(--omm-ink-2);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--omm-brand);
	color: #fff;
}

@media (min-width: 782px) {
	.woocommerce-MyAccount-navigation ul {
		display: grid;
		gap: 2px;
		overflow: visible;
		padding-bottom: 0;
		border-bottom: 0;
		border-right: 1px solid var(--omm-line);
		padding-right: 1rem;
	}

	.woocommerce-MyAccount-navigation li a {
		border-radius: var(--omm-r);
		padding: .5625rem .8125rem;
	}

	.woocommerce-MyAccount-navigation li.is-active a {
		background: var(--omm-brand-soft);
		color: var(--omm-brand);
	}
}

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

.woocommerce-orders-table,
.woocommerce-table--order-details,
.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--omm-line);
	border-radius: var(--omm-r);
	overflow: hidden;
	font-size: .875rem;
}

.woocommerce-orders-table th,
.woocommerce-table--order-details th,
.shop_table th {
	background: var(--omm-surface-2);
	font-family: var(--omm-mono);
	font-size: .59375rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--omm-muted);
	font-weight: 500;
	text-align: left;
	padding: .5625rem 1rem;
}

.woocommerce-orders-table td,
.woocommerce-table--order-details td,
.shop_table td {
	padding: .875rem 1rem;
	border-top: 1px solid var(--omm-line);
}

.woocommerce-orders-table__cell-order-number,
.woocommerce-orders-table__cell-order-total {
	font-family: var(--omm-mono);
	font-variant-numeric: tabular-nums;
}

/* Order tables reflow into stacked cards rather than scrolling sideways. */
@media (max-width: 781px) {
	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr,
	.woocommerce-orders-table td {
		display: block;
		width: 100%;
	}

	.woocommerce-orders-table tr {
		border-top: 1px solid var(--omm-line);
		padding: .5rem 0;
	}

	.woocommerce-orders-table td {
		border: 0;
		padding: .1875rem 1rem;
	}

	.woocommerce-orders-table td::before {
		content: attr(data-title) ": ";
		font-family: var(--omm-mono);
		font-size: .59375rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--omm-muted);
	}
}

/* Account forms */
.woocommerce-form,
.woocommerce-address-fields,
.woocommerce-EditAccountForm {
	display: grid;
	gap: .875rem;
	max-width: 480px;
}

.woocommerce-form-row label,
.woocommerce-address-fields label,
.form-row label {
	display: block;
	font-family: var(--omm-mono);
	font-size: .59375rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--omm-muted);
	margin-bottom: .25rem;
}

.woocommerce-Input,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce select {
	width: 100%;
	padding: .6875rem .8125rem;
	border: 1px solid var(--omm-line-2);
	border-radius: var(--omm-r);
	background: var(--omm-surface);
	font-family: var(--omm-sans);
	font-size: .90625rem;
	color: var(--omm-ink);
}

.woocommerce-Button,
.woocommerce button.button,
.woocommerce a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .75rem 1.25rem;
	border: 1px solid var(--omm-brand);
	border-radius: var(--omm-r);
	background: var(--omm-brand);
	color: #fff;
	font-family: var(--omm-sans);
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.woocommerce a.button.wc-forward,
.woocommerce .button.alt--ghost {
	background: transparent;
	color: var(--omm-ink);
	border-color: var(--omm-line-2);
}

.woocommerce-privacy-policy-text {
	font-size: .78125rem;
	color: var(--omm-muted);
}