/**
 * WooCommerce reskin.
 *
 * Two different strategies live in this one file, by design:
 *  - Shop/category archive: fully custom markup (woocommerce/archive-
 *    product.php + content-product.php), so selectors here target our
 *    own .phc-shop-* classes.
 *  - Single product, cart, checkout, account: WooCommerce's stock
 *    templates and hooks are kept (safer — variations JS, gateways,
 *    address validation all keep working out of the box); this file
 *    restyles Woo's own default classes directly instead.
 *
 * Enqueued only on shop/product/cart/checkout/account views — see
 * functions.php.
 *
 * @package ProfHairClub_shop
 */

/* -------------------------------------------------------------
   Notices (shared by every WooCommerce view)
   ------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noticeGroup li {
	list-style: none;
	background: var(--phc-white);
	border-left: 3px solid var(--phc-yellow-deep);
	border-radius: var(--phc-radius-s);
	padding: 1em 1.4em;
	margin: 0 0 1.6rem;
	font-size: 0.92rem;
}

.woocommerce-error {
	border-left-color: var(--phc-danger);
}

.woocommerce-message .button,
.woocommerce-error .button {
	margin-left: 1em;
}

/* -------------------------------------------------------------
   Shop / category archive
   ------------------------------------------------------------- */
.phc-shop {
	padding-bottom: 5rem;
}

/* Hero band — full-viewport treatment, same visual weight as the "О
   брендах" family's own full cover (template-parts/page/cover.php,
   variant=full) — see the docblock at the top of archive-product.php for
   why this duplicates that variant's classes/CSS rather than reusing the
   template part or story-pages.css directly. No `.site-main` on this
   template (see the note at the top of archive-product.php), so this
   owns the fixed-header clearance itself. */
.phc-shop__hero {
	position: relative;
	overflow: hidden;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--phc-black);
	color: var(--phc-paper);
	padding-block: calc(var(--phc-header-h) + 2.5rem) 5rem;
	margin-bottom: clamp(32px, 5vw, 56px);
}

.phc-shop__hero .phc-cover-photo {
	transform: scale(1.12);
}

/* Decorative glow field, parallaxed by main.js alongside the photo (see
   the full-cover script there, which queries .phc-page-cover--full for
   both this and .phc-cover-photo). Same gradients as the brand/about
   pages' own so the two hero families read as one visual language. */
.phc-shop__hero .phc-page-cover__field {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(60% 50% at 82% 12%, rgba(240, 196, 25, 0.16), transparent 60%),
		radial-gradient(45% 45% at 8% 88%, rgba(240, 196, 25, 0.08), transparent 65%);
	will-change: transform;
	pointer-events: none;
}

.phc-shop__hero.has-photo .phc-page-cover__field {
	opacity: 0.55;
	mix-blend-mode: soft-light;
}

/* The "Каталог" eyebrow above the category name — gold, matching the
   brand/about pages' cover eyebrow (.phc-page-cover__eyebrow in
   style.css), not the pale paper tone the cart/checkout cover's plain
   .phc-eyebrow gets (.phc-woo-header below): this hero is meant to read
   as the same family as the full-viewport covers, not the compact ones. */
.phc-shop__hero .phc-eyebrow {
	color: var(--phc-yellow);
}

.phc-shop__hero .phc-eyebrow::before {
	background: var(--phc-yellow);
}

/* .phc-cover-photo/.phc-cover-scrim (style.css) are absolutely positioned
   against this element — the text content needs its own stacking
   context on top of them, same as .phc-hero__inner does on the front
   page for the same reason. */
.phc-shop__hero > .phc-container {
	position: relative;
	z-index: 1;
}

/* Scroll cue — same markup/animation as the brand/about pages' full
   cover (assets/css/story-pages.css); duplicated rather than pulled in
   whole, same reasoning as that file's own note on this. */
.phc-shop__hero .phc-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: clamp(20px, 3vw, 40px);
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	color: rgba(247, 245, 239, 0.6);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

.phc-shop__hero .phc-scroll-cue__line {
	width: 1px;
	height: 34px;
	background: currentColor;
	position: relative;
	overflow: hidden;
}

.phc-shop__hero .phc-scroll-cue__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--phc-yellow);
	transform: translateY(-100%);
	animation: phc-scroll-cue 2.2s var(--phc-ease) infinite;
}

@keyframes phc-scroll-cue {
	0% { transform: translateY(-100%); }
	50% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.phc-shop__hero .phc-scroll-cue__line::after {
		animation: none;
	}
}

/* Base layout (flex/gap/size/link reset) now lives in style.css section
   12, shared with the journal and the story/info pages — see the comment
   there. What stays here is only what is specific to WooCommerce's own
   bands: they are all dark, so hover and the current segment go paper.
   As a site-wide default that would be wrong. */
.phc-breadcrumb a:hover {
	color: var(--phc-paper);
}

.phc-breadcrumb__current {
	color: var(--phc-paper);
}

/* Direct class beats the global `h1 { color: var(--phc-ink) }` (single
   class outranks a bare type selector) — same reasoning as
   .phc-hero__title in front-page.css. Larger + capped width now that the
   category name stands alone under its own "Каталог" eyebrow instead of
   sharing the line with it. */
.phc-shop__title {
	margin-top: 1.1rem;
	color: var(--phc-paper);
	font-size: clamp(2.2rem, 5.6vw, 4rem);
	max-width: 22ch;
}

/* Base shop page only (no category term) — its H1 is now the full
   keyword+city phrase ("Профессиональная косметика для волос в
   Калининграде") instead of a bare "Каталог", so the 22ch column tuned
   for a short brand name like "LUMINOVA" would wrap it into a tall,
   cramped stack. More room, one step down in size. */
.phc-shop__title--wide {
	max-width: 34ch;
	font-size: clamp(1.8rem, 4.4vw, 3.2rem);
}

/* Two classes to safely beat .phc-lede's single-class graphite color
   (meant for paper backgrounds, wrong on this dark hero) rather than
   relying on cross-file source order. */
.phc-shop__hero .phc-shop__desc {
	margin-top: 1.1rem;
	color: rgba(247, 245, 239, 0.72);
	max-width: 54ch;
}

/* Sidebar (filters) + content grid. Collapses to one column, sidebar on
   top, below 900px — same breakpoint the product grid itself steps down
   at, so the two changes read as one layout shift, not two. */
.phc-shop__layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}

.phc-shop__layout--no-sidebar {
	grid-template-columns: 1fr;
}

.phc-shop__sidebar {
	position: sticky;
	top: calc(var(--phc-header-h) + 1.5rem);
}

.phc-shop__filters-toggle {
	display: none;
}

.phc-shop-filter {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--phc-mist);
}

.phc-shop-filter:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.phc-shop-filter__title {
	font-family: var(--phc-font-sans);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--phc-stone);
	margin-bottom: 1rem;
}

.phc-shop-filter ul {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.phc-shop-filter li {
	font-size: 0.9rem;
}

.phc-shop-filter a {
	color: var(--phc-graphite);
	text-decoration: none;
}

.phc-shop-filter a:hover,
.phc-shop-filter li.chosen a {
	color: var(--phc-ink);
	font-weight: 600;
}

.phc-shop-filter .count {
	color: var(--phc-stone);
	font-size: 0.82rem;
	margin-left: 0.3em;
}

/* "Active filters" widget — chips instead of a plain list */
.phc-shop-filter.widget_layered_nav_filters ul {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.phc-shop-filter.widget_layered_nav_filters li a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.35em 0.8em;
	border-radius: 999px;
	background: var(--phc-mist);
	color: var(--phc-ink);
	font-size: 0.8rem;
}

/* Price filter — WooCommerce's own jQuery UI slider markup */
.phc-shop-filter .price_slider {
	margin-bottom: 1.1rem;
}

.phc-shop-filter .ui-slider {
	position: relative;
	height: 3px;
	background: var(--phc-mist);
	border-radius: 999px;
}

.phc-shop-filter .ui-slider .ui-slider-range {
	position: absolute;
	height: 100%;
	background: var(--phc-yellow-deep);
	border-radius: 999px;
}

.phc-shop-filter .ui-slider .ui-slider-handle {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	margin-left: -7px;
	background: var(--phc-ink);
	border-radius: 999px;
	cursor: pointer;
	outline: none;
}

.phc-shop-filter .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	font-size: 0.85rem;
}

.phc-shop-filter .price_slider_amount button {
	background: var(--phc-ink);
	color: var(--phc-paper);
	border: none;
	border-radius: 999px;
	padding: 0.5em 1.1em;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
}

/* -------------------------------------------------------------
   Product Filters block (WooCommerce 8+ "woocommerce/product-filters")
   -- everything above this point styles the classic PHP widgets
   (Filter by Price / Filter by Attribute); this sidebar's actual widget
   is the new block-based one, whose markup shares none of those classes,
   so it rendered with zero theme styling until now. The block exposes
   its own CSS custom properties for exactly this — using them means we
   don't have to fight the block's internal specificity or its :checked /
   display:none toggle logic, which stays untouched.
   ------------------------------------------------------------- */
.phc-shop-filter {
	--wc-product-filter-checkbox-list-option-element: var(--phc-white);
	--wc-product-filter-checkbox-list-option-element-border: var(--phc-mist);
	--wc-product-filter-checkbox-list-option-element-selected: var(--phc-yellow-deep);
	--wc-product-filter-checkbox-list-label-element: var(--phc-graphite);
	--wc-product-filter-price-slider: var(--phc-yellow-deep);
	--wc-product-filter-price-slider-handle-border: var(--phc-ink);
	--wc-product-filter-removable-chips-background: var(--phc-mist);
	--wc-product-filter-removable-chips-border: var(--phc-mist);
	--wc-product-filter-removable-chips-text: var(--phc-ink);
	--wc-product-filters-overlay-background-color: var(--phc-paper);
	--wc-product-filters-overlay-text-color: var(--phc-ink);
	--wc-product-filter-block-spacing: 1.4rem;
}

/* The trigger button ("Фильтрация товаров") is now the ONE control that
   opens the filters -- see the note in woocommerce/archive-product.php
   about why the theme's own accordion toggle is skipped whenever this
   block is what's in the sidebar. Styled like the accordion toggle it
   replaces, but shown at every width, not just below 900px.
   `.phc-shop__filters-btn` (the toolbar pill archive-product.php also
   prints, meant to eventually replace this button below 900px with a
   nicer one carrying a live filter-count badge) is hidden below -- that
   redesign was started but never finished: nothing ever hid THIS button
   in favour of it, so both rendered at once, and the block's own overlay
   sharing a grid cell with this button (see the next rule) turned into
   the giant stretched pill reported live. Reverting to just this one
   button, proven to work at every width, until/unless the toolbar-pill
   version gets finished properly (hiding this one, styling that one,
   and reproducing an "always open, no scrim" inline mode above 900px --
   real work, not a quick follow-on to this fix). */
.wc-block-product-filters__open-overlay {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	height: auto;
	align-self: start;
	padding: 0.9em 1.2em;
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	background: var(--phc-white);
	color: var(--phc-ink);
	font-family: var(--phc-font-sans);
	font-weight: 700;
	font-size: 0.85rem;
	cursor: pointer;
	transition: border-color 0.3s var(--phc-ease);
}

.phc-shop__filters-btn {
	display: none;
}

/* WooCommerce's own default rule for this is the same value (`position:
   fixed`) but lives in a `<style>` tag this block injects itself once
   its JS finishes mounting -- until that happens, the overlay sits in
   NORMAL DOCUMENT FLOW. Worse than just "briefly wrong": while it's
   static/relative like that, it and the trigger button above share the
   same CSS Grid cell (this block's own layout), and grid sizes that cell
   -- and stretches every item in it, including the button -- to fit
   whichever child is tallest. A `position: fixed` element never counts
   toward a grid parent's sizing.

   Root cause, found live: four of this block's own stylesheets --
   product-filters.css, product-filter-price.css,
   product-filter-checkbox-list.css and product-filter-price-slider.css
   -- 404 outright on this server (checked directly; the sibling
   product-filter-status.css/-attribute.css/-rating.css/-taxonomy.css all
   load fine), almost certainly an incomplete WooCommerce file transfer/
   update rather than anything wrong in this theme. Whatever rule
   WooCommerce normally ships to hide this overlay while closed lives in
   one of those missing files, so it's never applied at all -- not a
   timing race, an actually-absent stylesheet. Reinstalling/updating
   WooCommerce from wp-admin (Plugins) to restore those four files is the
   real fix and would very likely make this whole block below moot; until
   then, this rule collapses the overlay to nothing while closed
   (`.is-overlay-opened` is the same class WooCommerce's own JS already
   toggles reliably — confirmed live — so this only touches the closed
   state, never the open one). The opened state's own centering/backdrop
   polish is exactly the kind of thing those missing files would have
   supplied, so it may still look rough until WooCommerce is reinstalled
   — that's the missing-file problem surfacing again, not a new bug here.
   !important throughout because a same-specificity tie against whatever
   partial styling *does* still apply isn't a safe bet to leave to source
   order alone. */
.wc-block-product-filters:not(.is-overlay-opened) .wc-block-product-filters__overlay {
	position: fixed !important;
	inset: 0 !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

.wc-block-product-filters__open-overlay:hover,
.wc-block-product-filters__open-overlay:focus-visible {
	border-color: var(--phc-yellow-deep);
}

.wc-block-product-filters__open-overlay svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

/* Empty groups -- "Рейтинг" has no products rated yet and "Brand" has
   zero terms assigned to the product_brand taxonomy (see
   profhairclub_cart_item_brand()) -- would otherwise show a heading over
   an empty list. :has() support is universal on anything current enough
   to run this site's GSAP/Lenis stack, and the rule self-clears the day
   either one actually has options: nothing to maintain. */
.wp-block-woocommerce-product-filter-rating:not(:has(.wc-block-product-filter-checkbox-list__item)),
.wp-block-woocommerce-product-filter-attribute:not(:has(.wc-block-product-filter-checkbox-list__item)) {
	display: none;
}

.wc-block-product-filters__overlay-content > h2.wp-block-heading {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--phc-ink);
}

/* Each filter group's own heading ("Цена", "Категория", …) -- same
   treatment as the classic-widget title above, so the two systems read
   as one design if they're ever mixed in the same sidebar. */
.wc-block-product-filters__overlay-content h3.wp-block-heading {
	font-family: var(--phc-font-sans);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--phc-stone);
}

.wc-block-product-filters__overlay-header {
	border-bottom: 1px solid var(--phc-mist);
}

.wc-block-product-filters__close-overlay {
	color: var(--phc-graphite);
}

.wc-block-product-filters__overlay-footer {
	border-top: 1px solid var(--phc-mist);
}

.wc-block-product-filters__apply {
	width: 100%;
	background: var(--phc-yellow) !important;
	color: var(--phc-ink) !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: var(--phc-font-sans);
	font-weight: 700 !important;
}

.wp-block-woocommerce-product-filter-price,
.wp-block-woocommerce-product-filter-rating,
.wp-block-woocommerce-product-filter-attribute,
.wp-block-woocommerce-product-filter-taxonomy,
.wp-block-woocommerce-product-filter-status {
	padding-top: 1.4rem;
	border-top: 1px solid var(--phc-mist);
}

/* Chips ("Категория: MOCHEQI MUSK ×") + "Очистить фильтры" -- same pill
   language as the classic widget's .widget_layered_nav_filters chips. */
.wc-block-product-filter-removable-chips__item {
	border-radius: 999px;
	font-size: 0.8rem;
}

.wc-block-product-filter-clear-button .wp-block-button__link {
	border-radius: 999px !important;
	font-family: var(--phc-font-sans);
	font-weight: 700;
	font-size: 0.78rem !important;
	color: var(--phc-graphite) !important;
	/* Left unset before, this button fell back to a generic dark
	   slate-grey (not any --phc-* token) with the graphite text above
	   sitting almost unreadable on top of it — looked broken rather than
	   themed. Same white/mist ghost-pill language as .phc-btn--ghost. */
	background: var(--phc-white) !important;
	border: 1px solid var(--phc-mist) !important;
}

.wc-block-product-filter-clear-button .wp-block-button__link:hover {
	border-color: var(--phc-yellow-deep) !important;
	color: var(--phc-ink) !important;
}

/* Checkbox list */
.wc-block-product-filter-checkbox-list__label {
	font-size: 0.9rem;
}

.wc-block-product-filter-checkbox-list__input-wrapper {
	border-radius: 3px;
	overflow: hidden;
}

.wc-block-product-filter-checkbox-list__show-more-button {
	color: var(--phc-yellow-deep);
	font-weight: 700;
	font-size: 0.82rem;
}

/* Price slider -- native dual-thumb <input type="range">, styled per
   vendor prefix since neither Chromium nor Firefox reads the other's
   ::-*-slider-thumb rule (an unknown pseudo-element invalidates the whole
   selector, so these can't be combined into one rule). */
.wc-block-product-filter-price-slider__left,
.wc-block-product-filter-price-slider__right {
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	padding: 0.5em 1rem;
}

/* The block injects its OWN inline <style> at mount time with
   `.wc-block-product-filter-price-slider .text input[type="text"]`
   (0,3,1) — same specificity trap as everywhere else in this theme. The
   plain `__left input` / `__right input` pair below is only (0,1,1) and
   was losing outright (confirmed live: a dark rectangular input box
   sitting inside the pill, exactly the "прямоугольник в овале" look).
   Four class-level selectors -- .phc-shop-filter (the widget wrapper),
   .wc-block-product-filter-price-slider, __left/__right, [type="text"] --
   gives (0,4,1), which beats the injected rule outright regardless of
   which stylesheet loads last. */
.phc-shop-filter .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__left input[type="text"],
.phc-shop-filter .wc-block-product-filter-price-slider .wc-block-product-filter-price-slider__right input[type="text"] {
	/* The pill border above lives on the wrapping div — reset the input's
	   own default text-field chrome so it doesn't draw a second box
	   inside that pill. */
	border: none;
	background: transparent;
	outline: none;
	font-family: var(--phc-font-sans);
	font-size: 0.85rem;
	color: var(--phc-ink);
}

.wc-block-product-filter-price-slider input[type="range"]::-webkit-slider-thumb {
	background: var(--phc-ink) !important;
	border: 2px solid var(--phc-paper) !important;
	box-shadow: 0 0 0 1px var(--phc-mist);
}

.wc-block-product-filter-price-slider input[type="range"]::-moz-range-thumb {
	background: var(--phc-ink) !important;
	border: 2px solid var(--phc-paper) !important;
	box-shadow: 0 0 0 1px var(--phc-mist);
}

.phc-shop__content {
	min-width: 0; /* grid item with a wide child (the product grid) needs this or it refuses to shrink below content size */
}

.phc-shop__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1.2rem;
	margin-bottom: 1.6rem;
	border-bottom: 1px solid var(--phc-mist);
	font-size: 0.88rem;
	color: var(--phc-stone);
}

.phc-shop__sort select {
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	padding: 0.5em 2em 0.5em 1.1em;
	background: var(--phc-white);
}

/* archive-product.php wraps woocommerce_product_loop_start()'s own
   <ul class="products"> in a <div class="phc-shop__grid"> — the grid
   belongs on the actual <ul>, so this has to be a descendant selector,
   not a combined class (the two classes never land on the same element). */
.phc-shop__grid ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.6rem 1.4rem;
}

@media (max-width: 1100px) {
	.phc-shop__grid ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.phc-shop__layout {
		grid-template-columns: 1fr;
	}

	.phc-shop__sidebar {
		position: static;
	}

	.phc-shop__filters-toggle {
		display: block;
		width: 100%;
		text-align: left;
		padding: 0.9em 1.2em;
		border: 1px solid var(--phc-mist);
		border-radius: 999px;
		background: var(--phc-white);
		font-family: var(--phc-font-sans);
		font-weight: 700;
		font-size: 0.85rem;
		margin-bottom: 1rem;
		cursor: pointer;
	}

	.phc-shop__filters {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.4s var(--phc-ease);
	}

	.phc-shop__filters.is-open {
		max-height: 2000px; /* generous cap — real filter content never gets close */
	}

	.phc-shop__grid ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 640px) {
	.phc-shop__grid ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.phc-shop__grid ul.products {
		grid-template-columns: 1fr;
	}
}

.woocommerce-pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}

/* wrap + centre: 361 products over 12 per page means 31 pages, and the
   pill row (9 items incl. "…" and "→") measured 378px against a 375px
   viewport — nowrap left it overflowing horizontally on phones. Wrapping
   onto a second line beats a sideways-scrolling pagination row. */
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.woocommerce-pagination a,
.woocommerce-pagination span.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.88rem;
}

.woocommerce-pagination span.current {
	background: var(--phc-ink);
	color: var(--phc-paper);
}

/* -------------------------------------------------------------
   Single product
   ------------------------------------------------------------- */
.single-product .site-main {
	max-width: var(--phc-container);
	padding-top: calc(var(--phc-header-h) + 2.5rem);
}

/* .phc-breadcrumb (added to this page via inc/woocommerce-setup.php's
   profhairclub_single_product_breadcrumb()) is otherwise only used on
   the shop archive's dark hero, where hover/current turn paper-white —
   invisible on this page's plain light background. */
.single-product .phc-breadcrumb {
	margin-bottom: 1rem;
}

.single-product .phc-breadcrumb a:hover,
.single-product .phc-breadcrumb__current {
	color: var(--phc-ink);
}

/* Grid lives on .phc-product-top (woocommerce/content-single-product.php),
   not directly on div.product — div.product also contains the tabs and
   related-products sections below, and position: sticky on the gallery
   is bounded by ITS containing block. Without this separate wrapper the
   gallery kept sticking all the way through the tabs/related-products
   scroll instead of releasing once the summary column ends. */
/* minmax(0, …) rather than a bare `1fr`, and min-width: 0 on the items:
   a `1fr` track keeps an implicit `min-width: auto`, so any descendant
   with a hard pixel width can push the track — and the page — wider than
   the viewport. FlexSlider does exactly that: it writes inline pixel
   widths onto the slides, and it doesn't always recompute them when the
   window changes (rotating a phone, dragging a desktop window). Measured
   195px of horizontal page scroll that way at 375px. A fresh load is
   fine either way; this makes the resize case safe too. */
.single-product div.product .phc-product-top {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary {
	min-width: 0;
}

.single-product div.product .woocommerce-product-gallery {
	position: sticky;
	top: calc(var(--phc-header-h) + 1.5rem);
}

/* The visible frame. Which element that *is* depends on whether
   FlexSlider initialised: with more than one photo it wraps the slide
   track in `.flex-viewport` and that becomes the window; with a single
   photo there's no viewport and `__wrapper` is the window itself. Both
   get the frame treatment, so either case looks the same.

   The fixed ratio must NOT live on `__wrapper`: once FlexSlider runs it
   sets `width: 600%` on that element (it's the sliding track, six slides
   wide). An `aspect-ratio` there is computed from that inflated width —
   574px column → 3442px track → 4302px tall — which is exactly the bug
   this replaced: a 4415px gallery column, a page-long sticky element and
   photos stretched down the whole viewport. The ratio belongs on each
   slide instead (below), which is always exactly one column wide. */
.single-product div.product .flex-viewport,
.single-product div.product .woocommerce-product-gallery__wrapper {
	border-radius: var(--phc-radius-m);
	overflow: hidden;
	background: var(--phc-mist);
}

/* One slide = one visible box, so this is where the 4:5 crop belongs.
   Cropping to a fixed ratio rather than letting each photo set its own
   height is deliberate: the catalogue mixes 680×556 landscape renders
   with square 600×600 ones, and a gallery that changes height as you
   page through it drags the sticky column and the whole scroll with it. */
.single-product div.product .woocommerce-product-gallery__image {
	position: relative;
	aspect-ratio: 4 / 5;
}

/* Chain of definite heights down to the <img>: the slide has a definite
   height from its aspect-ratio, but a percentage height only resolves if
   every ancestor in between resolves too — one `height: auto` link and
   the image falls back to its intrinsic size, which is what used to leave
   photos top-aligned with mist-grey showing underneath. */
.single-product div.product .woocommerce-product-gallery__image > a {
	display: block;
	height: 100%;
	cursor: zoom-in;
}

.single-product div.product .woocommerce-product-gallery__wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.single-product div.product .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.8rem;
	padding: 0;
}

.single-product div.product .flex-control-thumbs li {
	list-style: none;
	width: 72px;
}

/* Real bug, not just a design ask: WooCommerce prints these thumbnails
   with `width="0" height="0"` and an inline `onload="this.width =
   this.naturalWidth; this.height = this.naturalHeight"` — it means to
   size itself from whichever photo loads, but the handler doesn't fire
   for an image FlexSlider re-parents/clones after it was already
   `complete` (confirmed live: `img.complete` was true, the attributes
   still read "0"). Even where it does fire, a landscape or portrait
   source photo sets mismatched width/height attributes while our own
   CSS only ever constrained `li` to 72px — width got squeezed to fit,
   height stayed at the attribute's raw pixel value, stretching the crop.
   Explicit box + object-fit bypasses that mechanism entirely instead of
   patching it: the browser never needs the attributes for layout, so a
   failed onload can't collapse it and a non-square photo can't stretch
   it. */
.single-product div.product .flex-control-thumbs img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--phc-radius-s);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.3s var(--phc-ease);
}

.single-product div.product .flex-control-thumbs img.flex-active {
	opacity: 1;
	outline: 1.5px solid var(--phc-ink);
}

/* The magnifier icon is gone by request — clicking the photo itself still
   opens the lightbox (WooCommerce binds PhotoSwipe to any link inside
   .woocommerce-product-gallery, not just this trigger), so hiding it
   loses nothing functionally. */
.single-product div.product .woocommerce-product-gallery__trigger {
	display: none;
}

.single-product div.product .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	padding: 0.4em 0.8em;
	border-radius: 999px;
}

.single-product div.product .summary {
	max-width: 480px;
}

.single-product div.product .summary .product_title {
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	margin-bottom: 0.6rem;
}

.single-product div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
}

/* WooCommerce's default .star-rating renders stars via its own bundled
   icon font ("star"), registered by the woocommerce-general.css stylesheet
   we dequeue in inc/performance.php — without that font-face the glyphs
   core outputs (content: "\53\53\53\53\53") would just show as literal
   "S" characters. This reimplements the same width-clipped-overlay trick
   with a plain ★ character instead, so it needs no icon font at all.
   Markup core outputs: <div class="star-rating"><span style="width:80%">
   Оценка 4.00 из 5</span></div> — the inline width is the rating. */
.star-rating {
	position: relative;
	width: 5.4em;
	height: 1em;
	line-height: 1;
	font-size: 0.9rem;
	letter-spacing: 0.18em;
	overflow: hidden;
}

.star-rating::before {
	content: "★★★★★";
	display: block;
	color: var(--phc-mist);
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--phc-yellow-deep);
}

.star-rating span::before {
	content: "★★★★★";
	display: block;
}

.single-product div.product p.price {
	font-family: var(--phc-font-display);
	font-size: 1.6rem;
	margin-bottom: 1.2rem;
}

.single-product div.product p.price ins {
	text-decoration: none;
	color: var(--phc-yellow-deep);
}

.single-product div.product p.price del {
	color: var(--phc-stone);
	font-size: 0.75em;
}

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--phc-graphite);
	margin-bottom: 1.6rem;
}

.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.6rem;
}

.single-product div.product .quantity {
	display: inline-flex;
}

.single-product div.product .quantity .qty {
	width: 76px;
	padding: 0.85em 1em;
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	text-align: center;
	background: var(--phc-white);
}

/* Grows into whatever the quantity stepper leaves: a 149px button beside
   a 76px stepper in a 335px column left most of the row empty, and the
   primary action on a product page should be the widest tap target on it. */
.single-product div.product .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 12ch;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	border: none;
	border-radius: 999px;
	padding: 0.95em 2.2em;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.3s var(--phc-ease);
}

.single-product div.product .single_add_to_cart_button:hover {
	background: var(--phc-yellow-deep);
}

.single-product div.product table.variations {
	width: 100%;
	margin-bottom: 1.2rem;
}

.single-product div.product table.variations td {
	padding-bottom: 0.8rem;
}

.single-product div.product table.variations select {
	width: 100%;
	padding: 0.8em 1.1em;
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	background: var(--phc-white);
}

.single-product div.product .product_meta {
	font-size: 0.82rem;
	color: var(--phc-stone);
	border-top: 1px solid var(--phc-mist);
	padding-top: 1.2rem;
}

.single-product div.product .product_meta a {
	color: inherit;
}

/* Tabs — plain block-level now (a sibling of .phc-product-top, not a
   grid item inside it), no grid-column needed. */
.woocommerce-tabs {
	margin-top: clamp(2.4rem, 5vw, 4rem);
	border-top: 1px solid var(--phc-mist);
	padding-top: 2rem;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 2rem;
	margin-bottom: 1.8rem;
	padding: 0;
}

.woocommerce-tabs ul.tabs li {
	list-style: none;
}

.woocommerce-tabs ul.tabs li a {
	text-decoration: none;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--phc-stone);
	padding-bottom: 0.4em;
	border-bottom: 2px solid transparent;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--phc-ink);
	border-bottom-color: var(--phc-yellow-deep);
}

.woocommerce-tabs .panel {
	max-width: 68ch;
}

/* Related products — plain block-level now, same reasoning as .woocommerce-tabs above. */
.related.products {
	margin-top: clamp(2.6rem, 5vw, 4.5rem);
	border-top: 1px solid var(--phc-mist);
	padding-top: 2.2rem;
}

.related.products > h2 {
	font-size: 1.4rem;
	margin-bottom: 1.4rem;
}

.related.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
}

/* Related products step down on the same widths as the shop grid
   (.phc-shop__grid), so a shopper moving between the archive and a
   product page sees cards of the same size, not two different rhythms. */
@media (max-width: 1100px) {
	.related.products ul.products,
	.cross-sells ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Two columns held until 900px, not 1100px. Between those widths there is
   still room for gallery + buy block side by side, and collapsing early
   was the thing that let the gallery balloon: as the only item in a
   full-width column it went to 676–907px, which on a 4:5 crop means a
   photo over 1100px tall. */
@media (max-width: 900px) {
	.single-product div.product .phc-product-top {
		grid-template-columns: minmax(0, 1fr);
	}

	.single-product div.product .woocommerce-product-gallery {
		position: static;
		/* Cap it once it's alone in the column — a product shot doesn't get
		   more useful past this, it just pushes the buy block off-screen. */
		max-width: 460px;
	}

	/* The 480px cap is a reading measure for the short description while
	   the summary shares a row; alone in the column it can use more. */
	.single-product div.product .summary {
		max-width: 560px;
	}
}

@media (max-width: 780px) {
	.related.products ul.products,
	.cross-sells ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.related.products ul.products,
	.cross-sells ul.products {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------
   Cart / checkout / thank-you — «Обложка»
   Approved direction: the same dark cover band as the shop archive's
   .phc-shop__hero, so these pages read as chapters of the catalogue.
   Markup: inc/woocommerce-pages.php (profhairclub_woo_page_header())
   inside woocommerce-page.php's full-bleed <main>.
   ------------------------------------------------------------- */

/* The band has to run edge to edge, so <main> carries no width limit or
   inline padding of its own — woocommerce-page.php wraps the actual cart
   markup in its own .phc-container instead. Clearance for the fixed
   header lives on the band (below), same as .phc-shop__hero. */
.phc-woo-page {
	padding-bottom: 5rem;
}

.phc-woo-content {
	min-width: 0;
}

.phc-woo-header {
	position: relative;
	overflow: hidden;
	background: var(--phc-black);
	color: var(--phc-paper);
	padding: calc(var(--phc-header-h) + 2.6rem) 0 clamp(34px, 5.5vw, 56px);
	margin-bottom: clamp(28px, 5vw, 52px);
}

/* Text needs its own stacking context above the scrim — same reason
   .phc-shop__hero > .phc-container needs it. */
.phc-woo-header > .phc-container {
	position: relative;
	z-index: 1;
}

/* No photo layer on these pages (a cart has no meaningful image), so the
   scrim is doing the work a photo would: a faint warm wash off the top
   right that keeps a large flat black band from reading as dead space.
   .phc-cover-scrim's own gradients (style.css) assume a photo beneath,
   hence the override rather than reuse. */
.phc-woo-header .phc-cover-scrim {
	background:
		radial-gradient(115% 90% at 88% 8%, rgba(240, 196, 25, 0.15), transparent 62%),
		linear-gradient(90deg, rgba(10, 10, 8, 0.6), transparent 65%);
}

/* .phc-breadcrumb's base colours target the light pages; on the dark band
   the links need the paper end of the palette. Same pattern the archive
   hero uses. */
.phc-woo-header .phc-breadcrumb {
	color: rgba(247, 245, 239, 0.6);
	margin-bottom: 1.3rem;
}

.phc-woo-header .phc-breadcrumb a:hover {
	color: var(--phc-paper);
}

.phc-woo-header .phc-breadcrumb__current {
	color: var(--phc-paper);
}

.phc-woo-header .phc-eyebrow {
	color: rgba(247, 245, 239, 0.7);
}

/* Two classes so this beats the global `h1 { color: var(--phc-ink) }`
   without leaning on source order — the recurring trap in this theme. */
.phc-woo-header .phc-woo-header__title {
	color: var(--phc-paper);
	font-size: clamp(1.9rem, 4.2vw, 3.1rem);
	margin-top: 0.45rem;
}

.phc-woo-header__meta {
	margin: 0.75rem 0 0;
	font-size: 0.85rem;
	color: rgba(247, 245, 239, 0.6);
}

.phc-woo-header__desc {
	margin-top: 0.8rem;
	color: rgba(247, 245, 239, 0.68);
	max-width: 56ch;
}

/* Thank-you: same band, centred, with the success mark above the eyebrow. */
.phc-woo-header--thankyou {
	text-align: center;
}

.phc-woo-header--thankyou .phc-container {
	max-width: 64ch;
}

.phc-woo-header--thankyou .phc-eyebrow {
	justify-content: center;
}

.phc-woo-header__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	margin-bottom: 1.3rem;
}

.phc-woo-header__icon svg {
	width: 28px;
	height: 28px;
}

/* -------------------------------------------------------------
   Cart body — items left, totals sticky right

   WooCommerce's cart.php emits the notices wrapper, then
   form.woocommerce-cart-form, then .cart-collaterals as three flat
   siblings inside the shortcode/block wrapper, stacked. The approved
   layout puts the first two side by side, so the wrapper becomes the
   grid and each child is placed explicitly. Cross-sells are re-hooked
   out of .cart-collaterals in inc/woocommerce-pages.php so only the
   totals table sits in the narrow column.
   ------------------------------------------------------------- */
.woocommerce-cart .phc-woo-content > .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
	grid-template-rows: auto auto;
	gap: 0 clamp(1.6rem, 3.5vw, 3.2rem);
	align-items: start;
}

.woocommerce-cart .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

.woocommerce-cart form.woocommerce-cart-form {
	grid-column: 1;
	grid-row: 2;
	min-width: 0;
}

.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: calc(var(--phc-header-h) + 1.5rem);
}

.woocommerce-cart .cart-collaterals .cart_totals {
	max-width: none;
	margin-left: 0;
}

/* The empty cart, the "Новинки" rail and the re-hooked cross-sells are
   all full-width children of the same wrapper. */
.woocommerce-cart .phc-woo-content > .woocommerce > .wc-empty-cart-message,
.woocommerce-cart .phc-woo-content > .woocommerce > .cart-empty,
.woocommerce-cart .phc-woo-content > .woocommerce > .return-to-shop,
.woocommerce-cart .phc-woo-content > .woocommerce > .cross-sells,
.woocommerce-cart .phc-woo-content > .woocommerce > .phc-woo-rail {
	grid-column: 1 / -1;
}

@media (max-width: 900px) {
	.woocommerce-cart .phc-woo-content > .woocommerce {
		display: block;
	}

	.woocommerce-cart .cart-collaterals {
		position: static;
		margin-top: 2rem;
	}
}

/* Cart rows: grid, not table cells — a 62px photo, the name with its brand
   line above it, the stepper, then the line total. Woo's own `price`
   column is dropped on purpose: with a quantity stepper right there, unit
   price next to line total is two numbers doing one job. It stays in the
   markup for screen readers and small screens (see the stacked rules
   further down), just not as its own desktop column. */
.woocommerce-cart table.shop_table.cart,
.woocommerce-cart table.shop_table.cart tbody {
	display: block;
	width: 100%;
}

.woocommerce-cart table.shop_table.cart thead {
	display: none;
}

.woocommerce-cart table.shop_table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) auto auto;
	gap: 0.6rem 1rem;
	align-items: center;
	padding: 1.05rem 0;
	border-bottom: 1px solid var(--phc-mist);
}

.woocommerce-cart table.shop_table.cart tr.cart_item:first-child {
	border-top: 1px solid var(--phc-mist);
}

.woocommerce-cart table.shop_table.cart tr.cart_item td {
	display: block;
	padding: 0;
	border: none;
}

.woocommerce-cart td.product-thumbnail {
	grid-column: 1;
}

.woocommerce-cart td.product-name {
	grid-column: 2;
	font-size: 0.9rem;
	line-height: 1.4;
}

.woocommerce-cart td.product-name a {
	font-weight: 600;
	color: var(--phc-ink);
	text-decoration: none;
}

.woocommerce-cart td.product-name a:hover {
	color: var(--phc-yellow-deep);
}

/* Brand line above the product name. WooCommerce prints no brand of its
   own, so this is populated from the product's first category by
   profhairclub_cart_item_brand() (inc/woocommerce-pages.php). */
.phc-cart-brand {
	display: block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--phc-stone);
	margin-bottom: 0.2rem;
}

.woocommerce-cart td.product-quantity {
	grid-column: 3;
}

.woocommerce-cart td.product-subtotal {
	grid-column: 4;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

/* Unit price: folded under the name rather than given a column. */
.woocommerce-cart td.product-price {
	grid-column: 2;
	grid-row: 2;
	font-size: 0.78rem;
	color: var(--phc-stone);
	font-variant-numeric: tabular-nums;
}

/* Remove "×" rides in the row's top-right corner instead of taking a
   column of its own. */
.woocommerce-cart tr.cart_item {
	position: relative;
}

.woocommerce-cart td.product-remove {
	position: absolute;
	top: 0.5rem;
	right: 0;
}

.woocommerce-cart td.product-thumbnail img {
	width: 62px;
	height: 78px;
	object-fit: cover;
	border-radius: var(--phc-radius-s);
	display: block;
}

/* The coupon / update row is Woo's own <td class="actions"> spanning the
   old table; as a grid child it needs the full width back. */
.woocommerce-cart table.shop_table.cart tr:not(.cart_item) {
	display: block;
	padding-top: 1.2rem;
}

.woocommerce-cart table.shop_table.cart tr:not(.cart_item) td {
	display: block;
	padding: 0;
	border: none;
}

@media (max-width: 620px) {
	.woocommerce-cart table.shop_table.cart tr.cart_item {
		grid-template-columns: 62px minmax(0, 1fr);
	}

	.woocommerce-cart td.product-quantity {
		grid-column: 2;
		grid-row: 3;
	}

	.woocommerce-cart td.product-subtotal {
		grid-column: 2;
		grid-row: 4;
		text-align: left;
	}
}

/* -------------------------------------------------------------
   "Новинки" rail — empty cart + thank-you page
   (inc/woocommerce-pages.php: profhairclub_woo_new_arrivals_rail())

   Same idea as .phc-bestsellers__rail/__track on the front page
   (template-parts/story/bestsellers.php) — deliberately a separate,
   generic component here rather than reusing those classes directly:
   front-page.css (where those live) only loads on the front page, and
   this needed its own selectors regardless of any styling decisions
   made there later.
   ------------------------------------------------------------- */
.phc-woo-rail {
	padding-top: clamp(2.4rem, 5vw, 4rem);
	padding-bottom: clamp(1rem, 3vw, 2rem);
	border-top: 1px solid var(--phc-mist);
	margin-top: clamp(1rem, 3vw, 2rem);
}

.phc-rail__head {
	margin-bottom: clamp(1.4rem, 3vw, 2rem);
}

.phc-rail__head h2 {
	margin-top: 0.5rem;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.phc-rail {
	overflow-x: auto;
	scrollbar-width: none;
	margin-inline: calc(var(--phc-gutter) * -1);
	padding-inline: var(--phc-gutter);
}

.phc-rail::-webkit-scrollbar {
	display: none;
}

.phc-rail__track {
	display: flex;
	gap: 1.4rem;
}

.phc-rail__track .phc-product-card {
	flex: 0 0 auto;
	width: min(240px, 68vw);
}

/* -------------------------------------------------------------
   Cart
   ------------------------------------------------------------- */

/* Empty state — WooCommerce's own .cart-empty/.return-to-shop markup,
   restyled rather than replaced (no template override needed). */
.woocommerce-cart-form ~ .cart-empty,
p.cart-empty {
	background: none;
	border-left: none;
	padding: clamp(2.5rem, 6vw, 4rem) 0;
	text-align: center;
	font-family: var(--phc-font-display);
	font-size: 1.3rem;
	color: var(--phc-graphite);
}

.return-to-shop {
	text-align: center;
	margin-top: -1rem;
	margin-bottom: 3rem;
}

.return-to-shop .button {
	display: inline-flex;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	border-radius: 999px;
	padding: 0.9em 2.2em;
	font-weight: 700;
	text-decoration: none;
}

/* Quantity stepper — base look for the +/- controls the ProfHairClub
   Cart Motion plugin wraps around every WooCommerce `.quantity` field
   (cart table, mini-cart, single product). Pure CSS here; the plugin
   only injects the two <button> elements and toggles disabled state. */
.phc-qty-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	overflow: hidden;
}

.phc-qty-stepper .quantity {
	display: inline-flex;
}

.phc-qty-stepper .qty {
	width: 44px;
	border: none;
	border-radius: 0;
	text-align: center;
	background: transparent;
	padding: 0.85em 0;
	-moz-appearance: textfield;
}

.phc-qty-stepper .qty::-webkit-inner-spin-button,
.phc-qty-stepper .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.phc-qty-stepper__btn {
	border: none;
	background: var(--phc-white);
	color: var(--phc-ink);
	width: 34px;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s var(--phc-ease);
}

.phc-qty-stepper__btn:hover {
	background: var(--phc-mist);
}

.phc-qty-stepper__btn:disabled {
	opacity: 0.35;
	cursor: default;
	background: var(--phc-white);
}

/* Coupon row + "update cart" — both live in one <td> at the foot of
   table.shop_table on the cart page. */
.woocommerce-cart-form .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.woocommerce-cart-form .coupon label {
	font-size: 0.85rem;
	color: var(--phc-graphite);
}

.woocommerce-cart-form .coupon .input-text {
	padding: 0.7em 1.1em;
	border: 1px solid var(--phc-mist);
	border-radius: 999px;
	background: var(--phc-white);
	width: auto;
	min-width: 180px;
}

.woocommerce-cart-form table.shop_table .button {
	background: var(--phc-ink);
	color: var(--phc-paper);
	border: none;
	border-radius: 999px;
	padding: 0.7em 1.4em;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
}

.woocommerce-cart-form table.shop_table [name="update_cart"] {
	background: transparent;
	color: var(--phc-graphite);
	border: 1px solid var(--phc-mist);
	margin-top: 0.8rem;
}

/* WooCommerce paints this `#a00` red with an `!important` of its own, at
   the same (0,2,1) specificity as `.product-remove a.remove` — an exact
   tie, decided by source order, which Woo won because its stylesheet gets
   printed in the footer (see the ClassicShortcode note in
   inc/performance.php). Woo's CSS is off at the source now; the extra
   `td` here breaks the tie outright regardless. */
td.product-remove a.remove,
.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: none;
	color: var(--phc-stone) !important;
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 1;
	transition: background-color 0.2s var(--phc-ease), color 0.2s var(--phc-ease);
}

td.product-remove a.remove:hover,
.product-remove a.remove:hover {
	background: var(--phc-mist);
	color: var(--phc-ink) !important;
}

/* Cross-sells — same `ul.products` → template-parts/product-card.php
   loop as the shop grid, just a narrower row here. */
.cross-sells {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--phc-mist);
}

.cross-sells > h2 {
	font-size: 1.3rem;
	margin-bottom: 1.2rem;
}

.cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
}

table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
}

table.shop_table th {
	text-align: left;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--phc-stone);
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--phc-mist);
}

table.shop_table td {
	padding: 1.1rem 0.6rem;
	border-bottom: 1px solid var(--phc-mist);
	vertical-align: middle;
}

/* Fixed box + object-fit, NOT a bare `width` — WooCommerce prints these
   thumbnails with hard-coded `width="600" height="600"` HTML attributes,
   so setting only the CSS width leaves the height at the raw attribute
   value: the image rendered 76px wide by 600px tall and stretched the
   cart row to 636px. Woo's own stylesheet used to paper over this with a
   `height: auto`; with that stylesheet switched off (inc/performance.php)
   the incomplete rule showed through. 3:4 to match the catalog crop and
   the mini-cart thumb. */
table.shop_table td.product-thumbnail img {
	width: 76px;
	height: 96px;
	object-fit: cover;
	display: block;
	border-radius: var(--phc-radius-s);
}

/* Same trap, anywhere else a Woo table prints an image with baked-in
   dimension attributes (order-received line items, for one). */
table.shop_table img {
	max-width: 100%;
	height: auto;
}

/* Cart/order-review tables carry WooCommerce's own `shop_table_responsive`
   class + a `data-title="…"` attribute on every <td> — core's own CSS
   (which we dequeue, see inc/performance.php) normally switches to a
   stacked card layout with those as labels below 768px. Without our own
   version of that switch, cells were rendering as one plain unstyled
   column with the raw `data-title` text doing nothing below ~900px —
   exactly the "corzina не до конца стилизована" gap. This re-implements
   the same stacked-card idea in the site's own voice instead of leaving
   it to core's (absent) styling. */
@media (max-width: 768px) {
	table.shop_table_responsive thead {
		display: none;
	}

	table.shop_table_responsive,
	table.shop_table_responsive tbody,
	table.shop_table_responsive tr {
		display: block;
		width: 100%;
	}

	table.shop_table_responsive tr {
		position: relative;
		background: var(--phc-white);
		border-radius: var(--phc-radius-m);
		padding: 1.2rem;
		margin-bottom: 1rem;
	}

	table.shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.5rem 0;
		border-bottom: none;
		text-align: right;
	}

	table.shop_table_responsive td[data-title]::before {
		content: attr(data-title);
		font-size: 0.72rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--phc-stone);
		text-align: left;
	}

	/* Thumbnail + remove "×" float in the card's top-right corner instead
	   of taking their own labelled rows — a photo and a delete control
	   don't need "Миниатюра:" / "Удалить:" spelled out next to them. */
	table.shop_table_responsive td.product-thumbnail {
		justify-content: flex-end;
		padding-bottom: 0;
	}

	table.shop_table_responsive td.product-remove {
		position: absolute;
		top: 0.6rem;
		right: 0.6rem;
		padding: 0;
		width: auto;
	}

	table.shop_table_responsive td.product-name {
		justify-content: flex-start;
		text-align: left;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
	}

	table.shop_table_responsive td.product-name::before {
		display: none;
	}

	table.shop_table_responsive td.actions {
		display: block;
	}
}

.cart-collaterals .cart_totals {
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
	padding: 1.8rem;
	max-width: 400px;
	margin-left: auto;
}

.cart-collaterals .cart_totals h2 {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

/* `a.checkout-button` (element + 2 classes), not the plainer
   `.wc-proceed-to-checkout .checkout-button` this used to be: WooCommerce's
   own `.woocommerce a.button.alt` rule is (0,3,1) and outranked the old
   (0,2,0) selector, painting this button WooCommerce-purple. Woo's
   stylesheet is switched off at the source now (see
   profhairclub_disable_woocommerce_styles() in inc/performance.php), so
   this is belt-and-braces — but cheap insurance against the same clash
   coming back via a plugin that re-enables those styles. */
.wc-proceed-to-checkout a.checkout-button.button {
	display: flex;
	width: 100%;
	text-align: center;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	border: none;
	border-radius: 999px;
	padding: 1em;
	font-weight: 700;
	text-decoration: none;
	justify-content: center;
	margin-top: 1rem;
	transition: background-color 0.3s var(--phc-ease);
}

.wc-proceed-to-checkout a.checkout-button.button:hover {
	background: var(--phc-yellow-deep);
	color: var(--phc-ink);
}

/* -------------------------------------------------------------
   Checkout
   ------------------------------------------------------------- */
.woocommerce-checkout form .form-row {
	margin-bottom: 1.1rem;
}

.woocommerce-checkout form label {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 0.4em;
	color: var(--phc-graphite);
}

.woocommerce-checkout form .input-text,
.woocommerce-checkout form select {
	width: 100%;
	padding: 0.85em 1.1em;
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-s);
	background: var(--phc-white);
}

/* Two-column layout: billing/shipping fields left, order review sticky
   on the right. form.checkout's direct children are exactly `.col2-set`,
   `#order_review_heading` and `#order_review` (WooCommerce's own
   templates/checkout/form-checkout.php) — no markup override needed,
   just placing those three on a grid. */
form.checkout {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	grid-template-rows: auto 1fr;
	gap: 0 clamp(2rem, 4vw, 3.5rem);
}

form.checkout .col2-set {
	grid-column: 1;
	grid-row: 1 / span 2;
}

/* `.col-1` (billing) and `.col-2` (shipping) inside `.col2-set` used to be
   floated side by side by WooCommerce's own woocommerce-layout.css, which
   this theme now switches off entirely (inc/performance.php). Stacking
   them is the deliberate choice, not a leftover: they're both full address
   blocks, and squeezing two of those into half of an already-narrow left
   column made every field cramped. Explicit `float: none; width: auto`
   rather than relying on layout.css simply being absent, so this still
   holds if anything re-enables it. */
form.checkout .col2-set .col-1,
form.checkout .col2-set .col-2 {
	float: none;
	width: auto;
}

form.checkout .col2-set .col-2 {
	margin-top: 1.8rem;
}

form.checkout #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

form.checkout #order_review {
	grid-column: 2;
	grid-row: 2;
	position: sticky;
	top: calc(var(--phc-header-h) + 1.5rem);
	align-self: start;
}

@media (max-width: 900px) {
	form.checkout {
		display: block;
	}

	form.checkout #order_review {
		position: static;
		margin-top: 2rem;
	}
}

.woocommerce-billing-fields h3,
#ship-to-different-address {
	font-size: 1.1rem;
	margin-bottom: 1.2rem;
}

.woocommerce-shipping-fields {
	margin-top: 1.8rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--phc-mist);
}

.woocommerce-additional-fields {
	margin-top: 1.8rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--phc-mist);
}

#order_review {
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
	padding: 1.8rem;
}

.woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout-review-order-table tfoot tr:last-child td {
	border-bottom: none;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--phc-ink);
}

/* Payment methods */
ul.wc_payment_methods {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
}

li.wc_payment_method {
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-s);
	margin-bottom: 0.7rem;
	padding: 0.9em 1.1em;
}

li.wc_payment_method label {
	font-weight: 600;
	cursor: pointer;
}

li.wc_payment_method img {
	max-height: 20px;
	vertical-align: middle;
	margin-left: 0.5em;
}

.payment_box {
	margin-top: 0.8em;
	padding-top: 0.8em;
	border-top: 1px solid var(--phc-mist);
	font-size: 0.86rem;
	color: var(--phc-graphite);
}

.payment_box p:last-child {
	margin-bottom: 0;
}

/* Terms + place order */
.woocommerce-terms-and-conditions-wrapper {
	margin: 1.4rem 0;
	font-size: 0.85rem;
}

.woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	cursor: pointer;
}

.woocommerce-form__input-checkbox {
	margin-top: 0.2em;
}

#place_order {
	width: 100%;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	border: none;
	border-radius: 999px;
	padding: 1.1em;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.3s var(--phc-ease);
}

#place_order:hover {
	background: var(--phc-yellow-deep);
}

/* -------------------------------------------------------------
   Thank-you / order-received
   ------------------------------------------------------------- */
.woocommerce-order {
	max-width: 68ch;
	margin: 0 auto;
}

.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	list-style: none;
	padding: 1.6rem clamp(1.2rem, 4vw, 2rem);
	margin: 0 0 2.4rem;
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
}

.woocommerce-order-overview li {
	font-size: 0.8rem;
	color: var(--phc-stone);
}

.woocommerce-order-overview li strong {
	display: block;
	margin-top: 0.3em;
	font-size: 1rem;
	color: var(--phc-ink);
	font-weight: 700;
}

.woocommerce-order table.shop_table {
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
	padding: 0 1.8rem;
}

.woocommerce-order table.shop_table th,
.woocommerce-order table.shop_table td {
	padding: 1.1rem 0.6rem;
}

.woocommerce-order-received .woocommerce-customer-details {
	margin-top: 2.4rem;
	padding-top: 2rem;
	border-top: 1px solid var(--phc-mist);
}

.woocommerce-order-received .woocommerce-customer-details address {
	font-style: normal;
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
	padding: 1.4rem 1.6rem;
	line-height: 1.7;
}

/* -------------------------------------------------------------
   My account
   ------------------------------------------------------------- */
.woocommerce-account .site-main {
	max-width: var(--phc-container);
	padding-top: calc(var(--phc-header-h) + 2.5rem);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--phc-mist);
	padding-bottom: 1.2rem;
}

.woocommerce-MyAccount-navigation a {
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--phc-stone);
}

.woocommerce-MyAccount-navigation li.is-active a {
	color: var(--phc-ink);
}

.woocommerce-MyAccount-content {
	max-width: 640px;
}

/* Login / register (myaccount/form-login.php, WC's own default template
   -- no override in this theme, styled via its stock classes only, same
   strategy as checkout above). Had ZERO theme styling before this: raw
   browser form controls, no branding. This is the logged-out view only;
   the logged-in dashboard is the profhairclub-account plugin's own AJAX
   UI (separate CSS). Rules below are deliberately not scoped to
   #customer_login alone, so lost-password and edit-account -- which
   reuse the same .form-row/.input-text/.woocommerce-button classes --
   get the same look for free. */
.woocommerce-account form .form-row {
	margin-bottom: 1.1rem;
}

.woocommerce-account form label {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 0.4em;
	color: var(--phc-graphite);
}

.woocommerce-account form .input-text {
	width: 100%;
	padding: 0.85em 1.1em;
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-s);
	background: var(--phc-white);
}

.woocommerce-account form .password-input {
	position: relative;
	display: block;
}

.woocommerce-account form .password-input .input-text {
	padding-right: 2.6em;
}

/* WooCommerce normally draws this button's eye icon as a background-image
   from its own woocommerce-general.css — which this theme dequeues
   sitewide (inc/performance.php, profhairclub_disable_woocommerce_styles())
   for the checkout/cart-CSS-clash reasons documented there. That leaves
   this one button with no icon at all, on every page that has a password
   field (my account, lost password, checkout account-creation) — not
   something introduced here, just never covered before. A plain emoji
   glyph rather than an SVG/icon font, consistent with how little this
   theme otherwise leans on icon systems. */
.woocommerce-account form .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.6em;
	transform: translateY(-50%);
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	border: none;
	background: none;
	color: var(--phc-stone);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.woocommerce-account form .show-password-input::before {
	content: "\1F441";
}

.woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	gap: 0.5em;
	font-size: 0.9rem;
	color: var(--phc-graphite);
	cursor: pointer;
}

.woocommerce-account form .woocommerce-button,
.woocommerce-account form .woocommerce-Button {
	width: 100%;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	border: none;
	border-radius: 999px;
	padding: 1em;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.3s var(--phc-ease);
}

.woocommerce-account form .woocommerce-button:hover,
.woocommerce-account form .woocommerce-Button:hover {
	background: var(--phc-yellow-deep);
}

.woocommerce-LostPassword a {
	color: var(--phc-yellow-deep);
	font-size: 0.88rem;
}

/* -------------------------------------------------------------
   Lost / reset password (myaccount/form-lost-password.php +
   myaccount/form-reset-password.php — WC's own default templates,
   no override here). This endpoint renders through the generic
   page.php, not page-account.php (that "Личный кабинет" template
   isn't actually assigned to the My Account page — confirmed live,
   body carries no page-account.php markup at all), so WC was
   printing a bare heading + paragraph + form straight into
   .entry-content with none of #customer_login's card treatment.
   Scoped to the endpoint's own body class (present regardless of
   which page template the My Account page ends up using) rather
   than to page-account.php markup, so it can't go dark again the
   same way. Its submit button was ALSO invisible as a brand button
   until the fix above: WC prints `woocommerce-Button` (capital B)
   here specifically, not the lowercase `woocommerce-button` every
   other account form uses. */
.woocommerce-lost-password .entry-title {
	max-width: 460px;
	margin: 0 auto 1.4rem;
}

.woocommerce-lost-password .entry-content > .woocommerce {
	max-width: 460px;
	margin: 0 auto;
	background: var(--phc-white);
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-m);
	padding: clamp(1.6rem, 3.5vw, 2.2rem);
}

.woocommerce-lost-password .woocommerce-ResetPassword > p:first-child {
	color: var(--phc-graphite);
	font-size: 0.92rem;
	line-height: 1.5;
	margin-bottom: 1.4rem;
}

/* Login + register side by side -- WC's own u-columns/col2-set float
   layout depended on woocommerce-layout.css, which this theme switches
   off sitewide (inc/performance.php, same reason the checkout col2-set
   needed its own explicit rule) — without this, both forms just stack as
   plain blocks. */
#customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 780px) {
	#customer_login.u-columns {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 4vw, 3rem);
	}
}

#customer_login .u-column1,
#customer_login .u-column2 {
	float: none;
	width: auto;
	background: var(--phc-white);
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-m);
	padding: clamp(1.6rem, 3.5vw, 2.2rem);
}

#customer_login h2 {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: 1.3rem;
	color: var(--phc-ink);
	margin-bottom: 1.2rem;
}

/* Tabbed login/register (main.js adds the intro heading, the tab
   buttons and the .phc-account-tabs-enabled class; see the comment
   there). This is the universal baseline — it has to look right however
   the page around #customer_login is templated, since main.js builds
   this markup unconditionally rather than checking for page-account.php.
   Only ever applied once JS has actually built the tab buttons, so this
   can safely hide the inactive column outright — a no-JS visitor never
   gets the .phc-account-tabs-enabled class at all and keeps seeing both
   forms via the side-by-side rules above. */
.phc-account-tabs__intro-title {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: 1.5rem;
	color: var(--phc-ink);
}

.phc-account-tabs__intro-sub {
	margin-top: 0.3rem;
	color: var(--phc-graphite);
	font-size: 0.9rem;
}

/* Segmented pill switcher — matches the boxed Вход/Регистрация toggle in
   the reference the client pointed to for this page's whole layout. */
.phc-account-tabs {
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	margin: 1.8rem 0;
	background: var(--phc-mist);
	border-radius: 999px;
}

.phc-account-tabs__tab {
	flex: 1 1 0;
	padding: 0.7em 1em;
	border: none;
	border-radius: 999px;
	background: transparent;
	font-family: var(--phc-font-sans);
	font-weight: 700;
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--phc-graphite);
	cursor: pointer;
	transition: background-color 0.3s var(--phc-ease), color 0.3s var(--phc-ease);
}

.phc-account-tabs__tab[aria-selected="true"] {
	background: var(--phc-white);
	color: var(--phc-ink);
	box-shadow: 0 1px 3px rgba(10, 10, 8, 0.12);
}

#customer_login.phc-account-tabs-enabled {
	display: block;
	max-width: 460px;
}

#customer_login.phc-account-tabs-enabled .u-column1,
#customer_login.phc-account-tabs-enabled .u-column2 {
	display: none;
}

#customer_login.phc-account-tabs-enabled .u-column1.is-active,
#customer_login.phc-account-tabs-enabled .u-column2.is-active {
	display: block;
}

/* -------------------------------------------------------------
   Catalog infinite scroll — assets/js/catalog-infinite.js
   ------------------------------------------------------------- */
.phc-shop__load-sentinel {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	margin-top: 1rem;
}

.phc-shop__load-sentinel::before {
	content: "";
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--phc-mist);
	border-top-color: var(--phc-yellow-deep);
	opacity: 0;
	animation: phc-shop-spin 0.8s linear infinite;
}

.phc-shop__load-sentinel.is-loading::before {
	opacity: 1;
}

@keyframes phc-shop-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.phc-shop__load-sentinel::before {
		animation: none;
	}
}

/* ------------------------------------------------------------------ */
/* Способ получения — delivery/pickup chooser (checkout)               */
/* Markup: profhairclub_shipping_choice_html() in inc/checkout-fields.php.
   Radios are WooCommerce's own real .shipping_method inputs, visually
   hidden — the label they sit inside draws a custom dot so the control
   reads consistently across browsers, same reasoning as the star rating
   on product reviews (see profhairclub-project memory). ------------- */

.phc-ship {
	margin-block: 1.6rem;
}

.phc-ship__title {
	margin: 0 0 0.8rem;
	font-family: var(--phc-font-display);
	font-size: 1rem;
	color: var(--phc-ink);
}

.phc-ship__opts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.7rem;
}

/* `.phc-ship .phc-ship__opt`, not a bare `.phc-ship__opt`: this option is
   itself a <label>, and `.woocommerce-checkout form label` above (a class
   + two type selectors, (0,1,2)) otherwise beats a single class at
   (0,1,0) regardless of source order — same recurring specificity trap
   as everywhere else on this site (profhairclub-project memory), it just
   sets display:block/font-size/margin-bottom this time instead of a
   color. Extra ancestor class pushes this to (0,2,0), which wins on the
   class column alone before the type column is even compared. */
.phc-ship .phc-ship__opt {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	margin-bottom: 0;
	padding: 0.9em 1.1em;
	background: var(--phc-white);
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-m);
	cursor: pointer;
	transition: border-color 0.2s var(--phc-ease), background 0.2s var(--phc-ease);
}

.phc-ship__opt input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.phc-ship__name {
	position: relative;
	padding-left: 1.6rem;
	font-weight: 600;
	font-size: 0.92rem;
	color: var(--phc-ink);
}

.phc-ship__name::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	border-radius: 50%;
	border: 1.5px solid var(--phc-stone);
	background: var(--phc-white);
	transition: border-color 0.2s var(--phc-ease), border-width 0.2s var(--phc-ease);
}

.phc-ship__cost {
	flex-shrink: 0;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--phc-graphite);
	white-space: nowrap;
}

.phc-ship .phc-ship__opt:hover {
	border-color: var(--phc-yellow-deep);
}

.phc-ship .phc-ship__opt:has(:checked) {
	border-color: var(--phc-yellow-deep);
	background: var(--phc-yellow-wash);
}

.phc-ship .phc-ship__opt:has(:checked) .phc-ship__name::before {
	border-color: var(--phc-yellow-deep);
	border-width: 5px;
}

.phc-ship .phc-ship__opt:has(:checked) .phc-ship__cost {
	color: var(--phc-ink);
}

.phc-ship .phc-ship__opt:has(:focus-visible) {
	outline: 2px solid var(--phc-yellow-deep);
	outline-offset: 2px;
}

/* Empty state — no zone matched at all (e.g. a genuinely unsupported
   address). Rare now that profhairclub_default_shipping_package_postcode()
   pins the one zone this shop actually has, but the message stays
   honest rather than silently hiding a real edge case. */
.phc-ship__empty {
	padding: 0.9em 1.1em;
	background: var(--phc-yellow-wash);
	border: 1px solid var(--phc-yellow-deep);
	border-radius: var(--phc-radius-m);
	font-size: 0.88rem;
	color: var(--phc-ink);
}

.phc-ship__pickup {
	margin-top: 0.8rem;
	font-size: 0.84rem;
	color: var(--phc-graphite);
}

@media (max-width: 480px) {
	.phc-ship__opts {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------
   Checkout — one consent row, trust strip, honest required marks
   ------------------------------------------------------------- */
.phc-pd-consent {
	margin: 1rem 0;
}

.phc-pd-consent .woocommerce-form__label-for-checkbox {
	align-items: flex-start;
	font-size: 0.85rem;
	line-height: 1.45;
}

.phc-pd-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0.05em 0 0;
	accent-color: var(--phc-yellow-deep);
}

.phc-pd-consent a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.phc-address-field label .required {
	color: var(--phc-danger);
	text-decoration: none;
}

.phc-trust {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--phc-graphite);
}

.phc-trust li {
	position: relative;
	padding-left: 1.3rem;
}

.phc-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--phc-yellow);
}

.phc-trust a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.phc-price-tbd {
	color: var(--phc-stone);
	font-size: 0.9em;
}

/* The floating call button sits over the right edge of the delivery options
   and the order button on a phone; the phone number is in .phc-trust there. */
@media (max-width: 720px) {
	body.woocommerce-checkout .phc-call-widget {
		display: none;
	}
}