/* ==========================================================================
   Beo Designers Boutique - shop styles
   Colour tokens come from theme.json; this file dresses WooCommerce markup.
   ========================================================================== */

:root {
	--beo-fuchsia: var(--wp--preset--color--accent-1, #E6197D);
	--beo-coral:   var(--wp--preset--color--accent-2, #FF6B4A);
	--beo-violet:  var(--wp--preset--color--accent-3, #7C3AED);
	--beo-muted:   var(--wp--preset--color--accent-4, #6B5B7B);
	--beo-blush:   var(--wp--preset--color--accent-5, #FFF5F9);
	--beo-ink:     var(--wp--preset--color--contrast, #1A0B2E);
	--beo-gold:    var(--wp--preset--color--gold, #FFC233);
	--beo-teal:    var(--wp--preset--color--teal, #00C2A8);
	--beo-radius:  18px;
	--beo-ease:    cubic-bezier(0.22, 0.61, 0.36, 1);

	/* One hairline colour for every bordered box, and deliberately no fainter
	   than this. At a fractional device pixel ratio — Windows at 125% is the
	   common one — a 1px border lands on 1.25 device pixels and the browser
	   rounds each edge on its own. Below roughly this alpha the thinner edges
	   stop being visible at all and the box reads as if its outline had been
	   cut along one side. */
	--beo-hairline: rgba(26, 11, 46, 0.16);
}

/* --------------------------------------------------------------------------
   1. Shared pieces
   -------------------------------------------------------------------------- */

.beo-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--beo-fuchsia);
}

.beo-eyebrow.is-light { color: rgba(255, 255, 255, 0.85); }

/* inline-block shrinks the eyebrow to its text, which leaves the block's own
   alignment with nothing to act on — it sat left under centred headings. */
.beo-eyebrow.has-text-align-center,
.beo-eyebrow.has-text-align-right { display: block; }

.beo-media img {
	border-radius: var(--beo-radius);
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   2. Category tiles
   -------------------------------------------------------------------------- */

.beo-cat-tile {
	position: relative;
	overflow: hidden;
	border-radius: var(--beo-radius);
	transition: transform 0.45s var(--beo-ease), box-shadow 0.45s var(--beo-ease);
}

.beo-cat-tile:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 48px -20px rgba(26, 11, 46, 0.45);
}

.beo-cat-tile img { transition: transform 0.7s var(--beo-ease); }

.beo-cat-tile:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   3. Product grid
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
.wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	float: none;
	position: relative;
	background: #fff;
	border-radius: var(--beo-radius);
	transition: transform 0.4s var(--beo-ease);
}

.woocommerce ul.products li.product:hover { transform: translateY(-5px); }

/* wpautop runs over the [products] shortcode output on the front page and turns
   the loop's newlines into <br> tags inside the product link. On a sale card two
   of them land ahead of the <img>, dropping that photo ~54px below its
   neighbours and knocking the whole row out of line. */
.woocommerce ul.products li.product a br { display: none; }

/* The link wraps image, title, rating and price; stretch it so the price can be
   pinned to the bottom and stay level across every card in the row. */
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link .price { margin-top: auto; }

/* Image frame with a soft blush backdrop while the photo loads. */
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: var(--beo-radius);
	background: var(--beo-blush);
	margin-bottom: 1rem;
	transition: transform 0.7s var(--beo-ease), box-shadow 0.4s var(--beo-ease);
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.03);
	box-shadow: 0 20px 44px -22px rgba(26, 11, 46, 0.5);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--platypi, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--beo-ink);
	padding: 0;
	/* Dress names run to two lines often enough that reserving the second one
	   keeps ratings and prices level right across the row. */
	min-height: 2.7em;
	margin: 0 0 0.35rem;
}

.woocommerce ul.products li.product .price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--manrope, system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--beo-ink);
}

.woocommerce ul.products li.product .price del {
	font-weight: 500;
	opacity: 0.55;
	color: var(--beo-muted);
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--beo-fuchsia);
}

/* Star ratings in the boutique gold. */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before { color: var(--beo-gold); }

.woocommerce ul.products li.product .star-rating {
	font-size: 0.8rem;
	margin: 0 0 0.4rem;
}

.woocommerce ul.products li.product .button {
	display: inline-block;
	/* Sits at the foot of the card so buttons line up whatever the name length. */
	align-self: flex-start;
	margin-top: 0.85rem;
	padding: 0.72rem 1.6rem;
	border-radius: 999px;
	background: var(--beo-ink);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background 0.3s var(--beo-ease), transform 0.3s var(--beo-ease);
}

.woocommerce ul.products li.product .button:hover {
	background: var(--beo-fuchsia);
	transform: translateY(-2px);
}

.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	margin-left: 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--beo-teal);
}

/* Sale badge. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.wc-block-grid__product .wc-block-grid__product-onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	right: auto;
	z-index: 2;
	min-height: 0;
	min-width: 0;
	margin: 0;
	padding: 0.42rem 0.85rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--beo-fuchsia), var(--beo-coral));
	box-shadow: 0 8px 20px -8px rgba(230, 25, 125, 0.7);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   3b. Product cards from the Products blocks (New in store, cross-sells)
   -------------------------------------------------------------------------- */

/* WooCommerce's own block CSS lays this grid out with flex and pins every card
   to `flex: 1 0 25%; max-width: 25%`. Our grid already handles the columns, so
   that 25% was measured against a single track and collapsed each card to a
   sliver - photos shrank to ~55px and "Select options" wrapped one letter per
   line. Reset the sizing and dress the cards like the classic loop ones. */
.wc-block-grid .wc-block-grid__products .wc-block-grid__product {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
	background: #fff;
	border-radius: var(--beo-radius);
	text-align: start;
	transition: transform 0.4s var(--beo-ease);
}

.wc-block-grid .wc-block-grid__products .wc-block-grid__product:hover { transform: translateY(-5px); }

/* The link carries image and title; stretch it so the price and button settle
   at the foot of the card however long the dress name runs. */
.wc-block-grid__product .wc-block-grid__product-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	text-decoration: none;
}

.wc-block-grid__product .wc-block-grid__product-image {
	display: block;
	margin: 0 0 1rem;
	border-radius: var(--beo-radius);
	overflow: hidden;
	background: var(--beo-blush);
}

.wc-block-grid__product .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	margin: 0;
	transition: transform 0.7s var(--beo-ease);
}

.wc-block-grid__product:hover .wc-block-grid__product-image img { transform: scale(1.03); }

.wc-block-grid__product .wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--platypi, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--beo-ink);
	/* Reserve the second line so prices and buttons stay level across a row. */
	min-height: 2.7em;
	margin: 0 0 0.35rem;
	padding: 0;
}

.wc-block-grid__product .wc-block-grid__product-rating { margin: 0 0 0.4rem; }

.wc-block-grid__product .wc-block-grid__product-rating .star-rating {
	margin: 0;
	font-size: 0.8rem;
}

.wc-block-grid__product .wc-block-grid__product-price {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--manrope, system-ui, sans-serif);
	font-size: 1rem;
	font-weight: 700;
	color: var(--beo-ink);
}

.wc-block-grid__product .wc-block-grid__product-price del {
	font-weight: 500;
	opacity: 0.55;
	color: var(--beo-muted);
}

.wc-block-grid__product .wc-block-grid__product-price ins {
	text-decoration: none;
	color: var(--beo-fuchsia);
}

.wc-block-grid__product .wc-block-grid__product-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Shorthand, not margin-top: WooCommerce sets `margin: 0 auto 12px` here and
	   the auto sides were centring the button under a left-aligned card. */
	margin: 0.85rem 0 0;
}

.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-element-button {
	display: inline-block;
	width: auto;
	padding: 0.72rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--beo-ink);
	color: #fff;
	font-family: var(--wp--preset--font-family--manrope, system-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	text-decoration: none;
	/* Two short words, and the card is wide enough for both - never stack. */
	white-space: nowrap;
	transition: background 0.3s var(--beo-ease), transform 0.3s var(--beo-ease);
}

.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product .wc-block-grid__product-add-to-cart .wp-element-button:hover {
	background: var(--beo-fuchsia);
	transform: translateY(-2px);
}

.wc-block-grid__product .wc-block-grid__product-add-to-cart .added_to_cart {
	margin-left: 0.6rem;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--beo-teal);
}

/* --------------------------------------------------------------------------
   4. Shop header and sorting
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count {
	color: var(--beo-muted);
	font-size: 0.9rem;
}

.woocommerce .woocommerce-ordering select,
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea {
	padding: 0.7rem 1rem;
	border: 1px solid var(--beo-hairline);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--beo-ink);
}

.woocommerce select:focus,
.woocommerce input:focus,
.woocommerce textarea:focus {
	outline: 2px solid var(--beo-fuchsia);
	outline-offset: 1px;
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   5. Single product
   -------------------------------------------------------------------------- */

.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--platypi, Georgia, serif);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin-bottom: 0.5rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--beo-ink);
}

.woocommerce div.product p.price ins { text-decoration: none; color: var(--beo-fuchsia); }
.woocommerce div.product p.price del { font-size: 1.1rem; opacity: 0.5; }

.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--beo-radius); }
.woocommerce div.product .woocommerce-product-gallery__wrapper { border-radius: var(--beo-radius); }

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
	padding: 1rem 2.6rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--beo-fuchsia), var(--beo-coral));
	box-shadow: 0 14px 34px -14px rgba(230, 25, 125, 0.75);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: transform 0.3s var(--beo-ease), box-shadow 0.3s var(--beo-ease);
}

.woocommerce div.product form.cart .button:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -14px rgba(230, 25, 125, 0.9);
}

/* Size and colour dropdowns. */
.woocommerce div.product form.cart .variations {
	margin-bottom: 1.2rem;
	border-collapse: separate;
	border-spacing: 0 0.7rem;
}

.woocommerce div.product form.cart .variations th.label {
	padding-right: 1rem;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--beo-muted);
	vertical-align: middle;
}

.woocommerce div.product form.cart .reset_variations {
	font-size: 0.8rem;
	color: var(--beo-muted);
}

.woocommerce .quantity .qty {
	width: 5rem;
	padding: 0.85rem 0.5rem;
	border: 1px solid var(--beo-hairline);
	border-radius: 999px;
	text-align: center;
	font-weight: 700;
}

/* Trust strip injected by functions.php. */
.beo-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 1.4rem;
	margin: 1.4rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid rgba(26, 11, 46, 0.12);
	list-style: none;
	font-size: 0.85rem;
	color: var(--beo-muted);
}

.beo-trust li { display: flex; align-items: center; gap: 0.45rem; }

.beo-trust li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--beo-teal);
	flex: none;
}

/* Tabs. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 2rem;
	border-bottom: 1px solid rgba(26, 11, 46, 0.14);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	margin: 0 1.6rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.7rem 0;
	border-bottom: 2px solid transparent;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--beo-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	border-bottom-color: var(--beo-fuchsia);
	color: var(--beo-ink);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
	font-family: var(--wp--preset--font-family--platypi, Georgia, serif);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: 1.6rem;
}

/* --------------------------------------------------------------------------
   6. Cart, checkout and account
   -------------------------------------------------------------------------- */

.woocommerce table.shop_table {
	border: 1px solid var(--beo-hairline);
	border-radius: var(--beo-radius);
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	padding: 1.1rem;
	background: var(--beo-blush);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--beo-muted);
}

.woocommerce table.shop_table td { padding: 1.1rem; }

.woocommerce table.cart img { width: 76px; border-radius: 12px; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	padding: 0.85rem 1.9rem;
	border-radius: 999px;
	background: var(--beo-ink);
	color: #fff;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background 0.3s var(--beo-ease), transform 0.3s var(--beo-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--beo-fuchsia);
	color: #fff;
	transform: translateY(-2px);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order {
	background: linear-gradient(135deg, var(--beo-fuchsia), var(--beo-coral));
	box-shadow: 0 14px 34px -14px rgba(230, 25, 125, 0.75);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover {
	background: linear-gradient(135deg, var(--beo-violet), var(--beo-fuchsia));
}

.woocommerce-checkout #payment,
.woocommerce .cart_totals,
.woocommerce-checkout-review-order {
	border-radius: var(--beo-radius);
	background: var(--beo-blush);
}

.woocommerce-checkout #payment { padding: 1.4rem; }
.woocommerce .cart_totals { padding: 1.6rem; }

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 0 1rem;
	border-bottom: 1px solid rgba(26, 11, 46, 0.12);
}

.woocommerce-checkout #payment div.form-row { padding: 1rem 0 0; }

.woocommerce form .form-row label {
	margin-bottom: 0.35rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--beo-muted);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container .select2-selection--single {
	height: auto;
	padding: 0.78rem 1rem;
	border: 1px solid var(--beo-hairline);
	border-radius: 12px;
}

/* Notices. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top: 0;
	border-radius: 14px;
	padding: 1.1rem 1.4rem 1.1rem 3.2rem;
	background: var(--beo-blush);
	color: var(--beo-ink);
	font-size: 0.95rem;
}

.woocommerce-message { background: rgba(0, 194, 168, 0.12); }
.woocommerce-message::before { color: var(--beo-teal); }
.woocommerce-info::before { color: var(--beo-violet); }
.woocommerce-error { background: rgba(230, 25, 125, 0.1); }
.woocommerce-error::before { color: var(--beo-fuchsia); }

/* Account navigation. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin-bottom: 0.4rem;
	border-radius: 12px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 1rem;
	border-radius: 12px;
	color: var(--beo-ink);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--beo-blush);
	color: var(--beo-fuchsia);
	text-decoration: none;
}

/* The block theme puts a generous margin between sibling flow elements, and it
   lands on these list items too — the account menu was reading as six widely
   separated links rather than one grouped nav. */
.woocommerce-account .woocommerce-MyAccount-navigation li + li {
	margin-top: 0;
}

/* Login and register.
   WooCommerce ships these two forms with its own generic look — a 5px radius
   and a plain grey box — which is the one corner of the shop that did not
   belong to the boutique. Everything below simply restates the dressing the
   contact form already uses, so an account page reads like the rest. */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	margin: 0;
	padding: clamp(1.4rem, 3vw, 2.2rem);
	border: 1px solid var(--beo-hairline);
	border-radius: var(--beo-radius);
	background: #fff;
	box-shadow: 0 6px 24px -14px rgba(26, 11, 46, 0.3);
}

.woocommerce-account .woocommerce form.login label,
.woocommerce-account .woocommerce form.register label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--beo-muted);
}

.woocommerce-account .woocommerce form.login .woocommerce-Input,
.woocommerce-account .woocommerce form.register .woocommerce-Input,
.woocommerce-account .woocommerce form.login input[type="text"],
.woocommerce-account .woocommerce form.login input[type="email"],
.woocommerce-account .woocommerce form.login input[type="password"],
.woocommerce-account .woocommerce form.register input[type="text"],
.woocommerce-account .woocommerce form.register input[type="email"],
.woocommerce-account .woocommerce form.register input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--beo-hairline);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 0.98rem;
	color: var(--beo-ink);
	transition: border-color 0.25s var(--beo-ease), box-shadow 0.25s var(--beo-ease);
}

.woocommerce-account .woocommerce form.login input:focus,
.woocommerce-account .woocommerce form.register input:focus {
	outline: none;
	border-color: var(--beo-fuchsia);
	box-shadow: 0 0 0 3px rgba(230, 25, 125, 0.12);
}

/* The eye toggle is positioned against this wrapper, so it has to stay
   relative once the input inside it is resized. */
.woocommerce-account .woocommerce .password-input {
	display: block;
	position: relative;
	width: 100%;
}

.woocommerce-account .woocommerce .show-password-input {
	top: 50%;
	transform: translateY(-50%);
	right: 1rem;
}

.woocommerce-account .woocommerce form.login .button,
.woocommerce-account .woocommerce form.register .button {
	padding: 0.78rem 2rem;
	border-radius: 999px;
	background: var(--beo-ink);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background 0.3s var(--beo-ease), transform 0.3s var(--beo-ease);
}

.woocommerce-account .woocommerce form.login .button:hover,
.woocommerce-account .woocommerce form.register .button:hover {
	background: var(--beo-fuchsia);
	transform: translateY(-2px);
}

/* "Remember me" is a checkbox beside its text, not a field with a label above it. */
.woocommerce-account .woocommerce form.login label.woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0 1rem;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--beo-muted);
}

.woocommerce-account .woocommerce form.login .lost_password a {
	color: var(--beo-fuchsia);
	font-size: 0.9rem;
}

/* Login / register tabs.
   JS swaps the two columns for one panel and adds .is-tabbed; everything here
   is scoped to that class, so with scripting off the page keeps WooCommerce's
   two-column layout rather than collapsing to something half-built. */
.woocommerce-account #customer_login.is-tabbed {
	display: block;
	max-width: 33rem;
	margin-inline: auto;
}

.woocommerce-account #customer_login.is-tabbed > .u-column1,
.woocommerce-account #customer_login.is-tabbed > .u-column2 {
	width: 100%;
	float: none;
	margin: 0;
}

.beo-account-tabs {
	display: flex;
	gap: 0.3rem;
	width: fit-content;
	margin: 0 auto 1.75rem;
	padding: 0.35rem;
	border: 1px solid var(--beo-hairline);
	border-radius: 999px;
	background: #fff;
}

.beo-account-tabs__tab {
	appearance: none;
	border: 0;
	padding: 0.72rem clamp(1.1rem, 4vw, 2.1rem);
	border-radius: 999px;
	background: none;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--beo-muted);
	cursor: pointer;
	transition: color 0.25s var(--beo-ease), background 0.25s var(--beo-ease);
}

.beo-account-tabs__tab:hover { color: var(--beo-ink); }

.beo-account-tabs__tab[aria-selected="true"] {
	background: linear-gradient(120deg, var(--beo-fuchsia), var(--beo-coral));
	color: #fff;
	box-shadow: 0 8px 20px -10px rgba(230, 25, 125, 0.8);
}

.beo-account-tabs__tab:focus:not(:focus-visible) { outline: none; }

.beo-account-tabs__tab:focus-visible {
	outline: 2px solid var(--beo-fuchsia);
	outline-offset: 3px;
}

/* The panel fades up as it takes over, so the swap reads as one thing
   replacing another rather than the page jumping. */
.beo-account-panel:not([hidden]) {
	animation: beo-panel-in 0.32s var(--beo-ease) both;
}

@keyframes beo-panel-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.beo-account-panel:not([hidden]) { animation: none; }
	.beo-account-tabs__tab { transition: none; }
}

/* --------------------------------------------------------------------------
   7. Block product grid
   The shop and category archives render through WooCommerce's block templates,
   which use wc-block-* markup rather than the classic ul.products above.
   -------------------------------------------------------------------------- */

/* WooCommerce ships this list as a flow layout sized by a ResizeObserver,
   which leaves very wide cards. Force the boutique's own 4-up grid. */
.wc-block-product-template,
ul.wc-block-product-template.is-layout-flow {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 34px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc-block-product-template > li,
.wc-block-product-template.is-layout-flow > li + li {
	width: 100%;
	max-width: 100%;
	margin: 0;
	float: none;
}

/* Related products come through as a flex-container list, and WooCommerce sizes
   those children with
     .wc-block-product-template.is-flex-container.is-flex-container.columns-N > li
   at width: calc(20% - 1em) — specificity (0,4,1), which outranks the rule
   above. Once this list is a grid that 20% resolves against the grid cell, not
   the row, so each card collapsed to ~45px and the names broke one letter per
   line. Doubling the class and naming the child outranks it without touching
   WooCommerce's own CSS. */
ul.wc-block-product-template.is-flex-container.is-flex-container > li.wc-block-product {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

li.wc-block-product {
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: var(--beo-radius);
	transition: transform 0.4s var(--beo-ease);
}

/* Match the classic grid: price pinned low, button last, so a two-line dress
   name never drags one card out of step with the rest of the row. */
li.wc-block-product .wc-block-components-product-price { margin-top: auto; }

li.wc-block-product .wc-block-components-product-button {
	margin-top: 0.85rem;
	margin-bottom: 0;
}

li.wc-block-product:hover { transform: translateY(-5px); }

/* Dresses want a portrait crop, not WooCommerce's default square. */
.wc-block-components-product-image {
	overflow: hidden;
	border-radius: var(--beo-radius);
	background: var(--beo-blush);
}

.wc-block-components-product-image a,
.wc-block-components-product-image .wc-block-components-product-image__inner-container {
	display: block;
	height: 100%;
}

li.wc-block-product .wc-block-components-product-image img,
.wc-block-components-product-image--aspect-ratio-1-1 img {
	width: 100%;
	height: auto;
	/* The related-products block prints style="aspect-ratio:1/1" on the img
	   itself, and an inline style can only be beaten by !important. Without it
	   related dresses show square while every other grid on the site is 3:4. */
	aspect-ratio: 3 / 4 !important;
	object-fit: cover;
	border-radius: var(--beo-radius);
	transition: transform 0.7s var(--beo-ease);
}

li.wc-block-product:hover .wc-block-components-product-image img { transform: scale(1.04); }

/* The archive renders titles as a post-title block, so style that link too,
   otherwise it inherits the fuchsia link colour from theme.json. */
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-name {
	margin: 0.9rem 0 0.35rem;
	font-family: var(--wp--preset--font-family--platypi, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.01em;
	min-height: 2.7em;
}

li.wc-block-product .wp-block-post-title a,
li.wc-block-product a.wc-block-components-product-name {
	color: var(--beo-ink);
	text-decoration: none;
}

li.wc-block-product .wp-block-post-title a:hover,
li.wc-block-product a.wc-block-components-product-name:hover { color: var(--beo-fuchsia); }

li.wc-block-product .wc-block-components-product-price {
	display: block;
	font-weight: 700;
	color: var(--beo-ink);
}

li.wc-block-product .wc-block-components-product-price del {
	margin-right: 0.45rem;
	opacity: 0.55;
	font-weight: 500;
	color: var(--beo-muted);
}

li.wc-block-product .wc-block-components-product-price ins {
	text-decoration: none;
	color: var(--beo-fuchsia);
}

/* Sale badge, matched to the classic grid badge. */
.wc-block-components-product-sale-badge {
	top: 14px;
	right: 14px;
	padding: 0.42rem 0.85rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--beo-fuchsia), var(--beo-coral));
	box-shadow: 0 8px 20px -8px rgba(230, 25, 125, 0.7);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

li.wc-block-product .wc-block-components-product-button .wp-block-button__link {
	display: inline-block;
	padding: 0.72rem 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--beo-ink);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background 0.3s var(--beo-ease), transform 0.3s var(--beo-ease);
}

li.wc-block-product .wc-block-components-product-button .wp-block-button__link:hover {
	background: var(--beo-fuchsia);
	color: #fff;
	transform: translateY(-2px);
}

/* Archive header: breadcrumb, result count and the sort dropdown. */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	margin-bottom: 1.4rem;
	font-size: 0.85rem;
	color: var(--beo-muted);
}

.woocommerce-breadcrumb a,
.wc-block-breadcrumbs a { color: var(--beo-muted); }

.woocommerce-breadcrumb a:hover,
.wc-block-breadcrumbs a:hover { color: var(--beo-fuchsia); }

.wc-block-product-sort-select select,
.wc-block-catalog-sorting select {
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--beo-hairline);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 0.9rem;
}

/* Term archive intro. */
.term-description {
	max-width: 60ch;
	margin-bottom: 2rem;
	color: var(--beo-muted);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
	.woocommerce ul.products,
	.wc-block-grid__products,
	.wc-block-product-template,
	ul.wc-block-product-template.is-layout-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
	.woocommerce ul.products,
	.wc-block-grid__products,
	.wc-block-product-template,
	ul.wc-block-product-template.is-layout-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.woocommerce div.product .woocommerce-tabs ul.tabs li { margin-right: 1rem; }
}

@media (max-width: 600px) {
	/* Result count and the sort dropdown fight for one line on a phone. */
	.wc-block-product-collection__product-results,
	.woocommerce-result-count {
		display: block;
		width: 100%;
		margin-bottom: 0.75rem;
	}

	.wc-block-product-sort-select,
	.woocommerce-ordering {
		display: block;
		width: 100%;
		float: none;
	}

	.wc-block-product-sort-select select,
	.woocommerce-ordering select { width: 100%; }
}

@media (max-width: 420px) {
	.woocommerce ul.products,
	.wc-block-grid__products,
	.wc-block-product-template,
	ul.wc-block-product-template.is-layout-flow { grid-template-columns: 1fr; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product a img,
	.beo-cat-tile,
	.beo-cat-tile img,
	.woocommerce a.button,
	.woocommerce button.button {
		transition: none !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   9. Contact page
   -------------------------------------------------------------------------- */

/* Quick-contact cards: email, phone, studio. */
.beo-contact-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.9rem 1.7rem;
	border: 1px solid var(--beo-hairline);
	border-radius: var(--beo-radius);
	background: #fff;
	box-shadow: 0 6px 24px -14px rgba(26, 11, 46, 0.3);
	transition: transform 0.4s var(--beo-ease), box-shadow 0.4s var(--beo-ease),
		border-color 0.4s var(--beo-ease);
}

.beo-contact-card:hover {
	transform: translateY(-6px);
	border-color: rgba(230, 25, 125, 0.35);
	box-shadow: 0 22px 48px -24px rgba(26, 11, 46, 0.45);
}

.beo-contact-card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: 1.1rem;
	border-radius: 14px;
	background: var(--beo-blush);
	color: var(--beo-fuchsia);
}

/* Drawn here rather than inline in the page, because wp_kses strips <svg> out
   of post content for anyone without the unfiltered_html capability. */
.beo-contact-card__icon::before {
	content: "";
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: var(--beo-icon) center / contain no-repeat;
	mask: var(--beo-icon) center / contain no-repeat;
}

.beo-contact-card__icon.is-mail {
	--beo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='m3 6.5 9 6 9-6'/%3E%3C/svg%3E");
}

.beo-contact-card__icon.is-phone {
	--beo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h3l1.5 4-2 1.5a12 12 0 0 0 5.5 5.5L16 12l4 1.5v3a2 2 0 0 1-2.2 2A16.5 16.5 0 0 1 4 6.2 2 2 0 0 1 6 3z'/%3E%3C/svg%3E");
}

.beo-contact-card__icon.is-pin {
	--beo-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.2 7-11a7 7 0 1 0-14 0c0 5.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

.beo-contact-card h3 {
	margin: 0 0 0.45rem;
	font-family: var(--wp--preset--font-family--platypi, Georgia, serif);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.beo-contact-card p { margin: 0 0 0.3rem; }

.beo-contact-card a {
	font-weight: 700;
	color: var(--beo-fuchsia);
	overflow-wrap: anywhere;
}

.beo-contact-card__note {
	margin-top: auto;
	padding-top: 0.7rem;
	color: var(--beo-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

/* Opening hours. */
.beo-hours {
	margin: 0;
	padding: 0;
	list-style: none;
}

.beo-hours li {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid rgba(26, 11, 46, 0.1);
	font-size: 0.95rem;
}

.beo-hours li:last-child { border-bottom: 0; }

.beo-hours li span:first-child { font-weight: 700; }

/* The dotted leader keeps day and time tied together on a wide card. */
.beo-hours li span:first-child::after {
	content: "";
	display: inline-block;
	width: 100%;
}

.beo-hours li span:last-child {
	margin-left: auto;
	color: var(--beo-muted);
	white-space: nowrap;
}

.beo-hours li.is-closed span:last-child { color: var(--beo-coral); }

/* Contact form. */
.beo-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.4rem;
}

.beo-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.beo-form__row--full { grid-column: 1 / -1; }

.beo-form__row label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--beo-muted);
}

.beo-form__req { color: var(--beo-fuchsia); }

.beo-form__hint {
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.7;
}

.beo-form input[type="text"],
.beo-form input[type="email"],
.beo-form select,
.beo-form textarea {
	/* Without this the 100% width is measured before the 1rem padding and the
	   border are added, so each field rendered ~33px wider than its grid
	   column - enough for the name box to sit on top of the email one. */
	box-sizing: border-box;
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var(--beo-hairline);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 0.98rem;
	color: var(--beo-ink);
	transition: border-color 0.25s var(--beo-ease), box-shadow 0.25s var(--beo-ease);
}

.beo-form textarea { resize: none; line-height: 1.6; }

.beo-form input:focus,
.beo-form select:focus,
.beo-form textarea:focus {
	outline: none;
	border-color: var(--beo-fuchsia);
	box-shadow: 0 0 0 3px rgba(230, 25, 125, 0.16);
}

/* Off-screen rather than display:none — a bot that skips hidden fields still
   fills this one, which is the whole point of the trap. */
.beo-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.beo-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1.2rem;
	margin: 1.5rem 0 0;
}

.beo-form__submit {
	padding: 0.95rem 2.4rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--beo-fuchsia), var(--beo-coral));
	box-shadow: 0 14px 34px -14px rgba(230, 25, 125, 0.75);
	color: #fff;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.3s var(--beo-ease), box-shadow 0.3s var(--beo-ease),
		background 0.3s var(--beo-ease);
}

.beo-form__submit:hover {
	background: linear-gradient(135deg, var(--beo-violet), var(--beo-fuchsia));
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -14px rgba(230, 25, 125, 0.9);
}

.beo-form__submit:focus-visible {
	outline: 2px solid var(--beo-ink);
	outline-offset: 3px;
}

.beo-form__small {
	color: var(--beo-muted);
	font-size: 0.88rem;
}

.beo-form__notice {
	margin: 0 0 1.4rem;
	padding: 1rem 1.3rem;
	border-radius: 14px;
	border-left: 4px solid var(--beo-teal);
	background: rgba(0, 194, 168, 0.12);
	font-size: 0.95rem;
}

.beo-form__notice.is-error {
	border-left-color: var(--beo-fuchsia);
	background: rgba(230, 25, 125, 0.1);
}

/* FAQ accordion — the core details block, dressed for the boutique. */
.beo-faq .wp-block-details {
	padding: 0.4rem 1.3rem;
	border: 1px solid var(--beo-hairline);
	border-radius: 14px;
	background: #fff;
	transition: border-color 0.3s var(--beo-ease);
}

.beo-faq .wp-block-details[open] { border-color: rgba(230, 25, 125, 0.35); }

.beo-faq .wp-block-details summary {
	padding: 1rem 0;
	font-family: var(--wp--preset--font-family--platypi, Georgia, serif);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	cursor: pointer;
	list-style-position: outside;
}

.beo-faq .wp-block-details summary::marker { color: var(--beo-fuchsia); }

.beo-faq .wp-block-details p {
	margin: 0 0 1rem;
	color: var(--beo-muted);
	font-size: 0.96rem;
	line-height: 1.7;
}

@media (max-width: 781px) {
	.beo-form__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.beo-contact-card,
	.beo-form__submit {
		transition: none !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   10. Newsletter signup
   -------------------------------------------------------------------------- */

.beo-newsletter { max-width: 540px; margin: 0 auto; }

.beo-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin: 0;
}

.beo-newsletter__input {
	flex: 1 1 240px;
	min-width: 0;
	padding: 0.95rem 1.3rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-family: inherit;
	font-size: 0.98rem;
	transition: border-color 0.25s var(--beo-ease), background 0.25s var(--beo-ease);
}

.beo-newsletter__input::placeholder { color: rgba(255, 255, 255, 0.6); }

.beo-newsletter__input:focus {
	outline: none;
	border-color: var(--beo-gold);
	background: rgba(255, 255, 255, 0.2);
}

.beo-newsletter__submit {
	flex: 0 0 auto;
	padding: 0.95rem 2.1rem;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--beo-ink);
	font-family: inherit;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.3s var(--beo-ease), color 0.3s var(--beo-ease),
		transform 0.3s var(--beo-ease);
}

.beo-newsletter__submit:hover {
	background: var(--beo-gold);
	transform: translateY(-2px);
}

.beo-newsletter__submit:focus-visible {
	outline: 2px solid var(--beo-gold);
	outline-offset: 3px;
}

.beo-newsletter__small {
	margin: 0.9rem 0 0;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.85rem;
	text-align: center;
}

/* The notice sits on the dark newsletter band, so lighten it from the version
   used on the white contact page. */
.beo-newsletter .beo-form__notice {
	background: rgba(255, 255, 255, 0.14);
	border-left-color: var(--beo-teal);
	color: #fff;
	text-align: left;
}

.beo-newsletter .beo-form__notice.is-error { border-left-color: var(--beo-gold); }

@media (max-width: 480px) {
	.beo-newsletter__form { flex-direction: column; }
	.beo-newsletter__submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.beo-newsletter__submit { transition: none !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   11. Header
   -------------------------------------------------------------------------- */

/* WooCommerce hooks its account and mini-cart blocks onto the end of the header
   row, which leaves four items in a wrapping space-between flex: the cart kept
   dropping to a line of its own, spread far from the icon it belongs with.
   A grid gives the menu the one flexible track and pins the pair at the end. */
header .wp-block-group.alignwide {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
}

/* The brand is the one thing that must never break across two lines. */
header .wp-block-group.alignwide > .wp-block-site-title {
	white-space: nowrap;
}

header .wp-block-group.alignwide > .wp-block-navigation {
	justify-content: center;
}

/* Between the phone overlay (600px) and a roomy desktop, seven links plus the
   icons are more than the row can hold at full size. Tightening the menu keeps
   it on one line instead of pushing "Contact" onto a second. */
@media (min-width: 600px) and (max-width: 1100px) {
	header .wp-block-navigation {
		font-size: 0.78rem;
	}

	header .wp-block-navigation .wp-block-navigation__container {
		gap: 0.9rem;
	}
}

/* Menu links, dressed as a boutique's rather than a blog's: small caps with
   wide tracking, and a gradient rule that draws itself in from the left. */
header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding-bottom: 5px;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s var(--beo-ease);
}

header .wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--beo-fuchsia), var(--beo-coral));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--beo-ease);
}

header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--beo-fuchsia);
}

/* The page you are on keeps its rule, so the menu always says where you are. */
header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* In the phone overlay the links are the whole screen, so let them breathe. */
header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.05rem;
	letter-spacing: 0.08em;
}

/* The wordmark sweeps from ink into the brand gradient on hover. Clipping a
   background to text means transparent glyphs if that ever fails, so the whole
   effect is kept behind a support check rather than risking an invisible logo. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	header .wp-block-site-title a {
		background-image: linear-gradient(
			100deg,
			var(--beo-ink) 0%,
			var(--beo-ink) 45%,
			var(--beo-fuchsia) 70%,
			var(--beo-violet) 100%
		);
		background-size: 220% 100%;
		background-position: 0% 0;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		transition: background-position 0.7s var(--beo-ease);
	}

	header .wp-block-site-title a:hover {
		background-position: 100% 0;
	}
}

/* Clicking a menu link left an amber outline box sitting around it. That ring
   is there for people tabbing through with a keyboard, who would otherwise have
   no idea where they are, so it is not removed — just narrowed to :focus-visible
   so a mouse click no longer triggers it, and restyled to match the boutique. */
header .wp-block-navigation .wp-block-navigation-item__content:focus:not(:focus-visible),
header .wp-block-site-title a:focus:not(:focus-visible),
header .wp-block-woocommerce-customer-account a:focus:not(:focus-visible),
header .wp-block-woocommerce-mini-cart button:focus:not(:focus-visible) {
	outline: none;
}

header .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
header .wp-block-site-title a:focus-visible,
header .wp-block-woocommerce-customer-account a:focus-visible,
header .wp-block-woocommerce-mini-cart button:focus-visible {
	outline: 2px solid var(--beo-fuchsia);
	outline-offset: 5px;
	border-radius: 4px;
}

/* On a phone the wordmark at full size plus three controls is wider than the
   screen, and because the title may not wrap it was the cart that got pushed
   off the edge. Scaling the wordmark to the viewport keeps the row intact. */
@media (max-width: 600px) {
	header .wp-block-group.alignwide {
		grid-template-columns: minmax(0, auto) auto auto auto;
		column-gap: 0.85rem;
	}

	/* nowrap is what keeps the wordmark on one line on a desktop, but in a
	   375px grid it just overflows its track and sits on top of the menu
	   button. Below 600px let it wrap rather than collide. */
	header .wp-block-group.alignwide > .wp-block-site-title {
		white-space: normal;
	}

	/* The size has to be set on the link: WordPress prints its font-size preset
	   classes with !important, so a rule on the block itself never lands. */
	header .wp-block-group.alignwide > .wp-block-site-title a {
		font-size: clamp(1rem, 4.6vw, 1.3rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	header .wp-block-navigation .wp-block-navigation-item__content::after,
	header .wp-block-site-title a { transition: none; }
}

header .wp-block-woocommerce-customer-account a,
header .wp-block-woocommerce-mini-cart button {
	color: var(--beo-ink);
	transition: color 0.2s var(--beo-ease);
}

header .wp-block-woocommerce-customer-account a:hover,
header .wp-block-woocommerce-mini-cart button:hover {
	color: var(--beo-fuchsia);
}

/* The cart count sits on the fuchsia so a full basket is obvious at a glance. */
header .wc-block-mini-cart__badge {
	background: var(--beo-fuchsia);
	color: #fff;
	font-weight: 700;
}

/* Only the nav row follows the reader down; the delivery bar scrolls away so
   the sticky strip stays slim. */
.beo-header-bar {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.25s var(--beo-ease);
}

.beo-header-bar.is-stuck {
	box-shadow: 0 6px 24px rgba(26, 11, 46, 0.08);
}

/* --------------------------------------------------------------------------
   12. Product card hover
   -------------------------------------------------------------------------- */

/* The second gallery shot is stacked over the first and cross-faded on hover,
   which is how a shopper expects to see the back of a dress. */
.beo-card-media {
	position: relative;
	display: block;
	overflow: hidden;
}

.beo-card-media__alt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.45s var(--beo-ease);
	pointer-events: none;
}

li.product:hover .beo-card-media__alt,
li.product:focus-within .beo-card-media__alt,
.wc-block-product:hover .beo-card-media__alt,
.wc-block-product:focus-within .beo-card-media__alt {
	opacity: 1;
}

/* A slow push-in under the swap gives the card depth without moving the grid. */
li.product:hover .beo-card-media img,
.wc-block-product:hover .beo-card-media img {
	transform: scale(1.04);
}

.beo-card-media img {
	transition: transform 0.6s var(--beo-ease);
}

/* --------------------------------------------------------------------------
   13. Scroll reveal
   -------------------------------------------------------------------------- */

/* Sections lift in once, the first time they reach the viewport. The class is
   only added by JS, so with scripting off everything renders in place. */
.beo-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s var(--beo-ease), transform 0.7s var(--beo-ease);
	will-change: opacity, transform;
}

.beo-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   14. Sticky add to cart
   -------------------------------------------------------------------------- */

/* Once the real add-to-cart form scrolls past, this bar keeps the price and the
   button in reach - the single biggest help on a phone. */
.beo-sticky-atc {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 120;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--wp--preset--color--accent-6, #F2E4EE);
	box-shadow: 0 -8px 28px rgba(26, 11, 46, 0.1);
	transform: translateY(110%);
	/* visibility, not just the transform: a bar parked off-screen must also be
	   out of the tab order, or the keyboard lands on a button nobody can see.
	   It is held visible for the length of the slide, then switched off. */
	visibility: hidden;
	transition: transform 0.35s var(--beo-ease), visibility 0s linear 0.35s;
}

.beo-sticky-atc.is-visible {
	transform: none;
	visibility: visible;
	transition: transform 0.35s var(--beo-ease), visibility 0s;
}

.beo-sticky-atc__thumb {
	width: 46px;
	height: 58px;
	object-fit: cover;
	border-radius: 10px;
	flex: none;
}

.beo-sticky-atc__text {
	min-width: 0;
	line-height: 1.3;
}

.beo-sticky-atc__name {
	display: block;
	font-weight: 700;
	color: var(--beo-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.beo-sticky-atc__price {
	font-size: 0.9rem;
	color: var(--beo-muted);
}

.beo-sticky-atc__price ins { text-decoration: none; color: var(--beo-fuchsia); font-weight: 700; }
.beo-sticky-atc__price del { opacity: 0.6; margin-inline-end: 0.35rem; }

.beo-sticky-atc__button {
	margin-inline-start: auto;
	flex: none;
	padding: 0.7rem 1.6rem;
	border-radius: 999px;
	background: var(--beo-ink);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.2s var(--beo-ease);
}

.beo-sticky-atc__button:hover { background: var(--beo-fuchsia); color: #fff; }

/* The thumbnail and name are the first things to go when the bar gets tight. */
@media (max-width: 480px) {
	.beo-sticky-atc__thumb { display: none; }
	.beo-sticky-atc__button { padding-inline: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
	.beo-reveal { opacity: 1; transform: none; transition: none; }
	.beo-card-media img,
	.beo-card-media__alt,
	.beo-sticky-atc { transition: none !important; }
	li.product:hover .beo-card-media img,
	.wc-block-product:hover .beo-card-media img { transform: none; }
}

/* The wrapper now carries the gap under the photo, so the image itself must
   drop its own margin or the stacked shot would cover it too. */
.beo-card-media { margin-bottom: 1rem; border-radius: var(--beo-radius); }
.woocommerce ul.products li.product .beo-card-media img { margin-bottom: 0; }