/*!
Theme Name: ProfHairClub shop
Theme URI: https://profhairclub.ru/
Author: ProfHairClub
Author URI: https://profhairclub.ru/
Description: Editorial-minimalist WooCommerce storefront for professional hair cosmetics — scroll-story front page, custom-built Woo templates, GSAP/Lenis motion.
Version: 1.0.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: profhairclub-shop
Tags: custom-background, custom-logo, custom-menu, featured-images, translation-ready, e-commerce

Built on the Underscores (_s) scaffold, https://underscores.me/. All visual
design, class taxonomy and component styling below are original work for
this project — none of it is copied from the moodboard references used
during design (an award-winning scroll site and an unrelated storefront),
which were consulted only for the general "one chapter per screen" pacing
idea, not for markup, CSS or assets.
*/

/* =============================================================
   TABLE OF CONTENTS
   01. Reset & base
   02. Design tokens
   03. Typography
   04. Layout primitives
   05. Motion utility classes (hooks for GSAP/Lenis in main.js)
   06. Buttons & form controls
   07. Site header & navigation
   08. Mobile nav drawer
   09. Cart trigger & mini-cart drawer
   10. Footer
   11. Generic content (posts/pages fallback)
   12. Cards
   13. Accessibility & misc
   ============================================================= */

/* -------------------------------------------------------------
   01. Reset & base
   ------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: auto; /* Lenis drives smooth scroll; native CSS smoothing would fight it. */
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

ul[class], ol[class] {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, picture, svg, video {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

a {
	color: inherit;
	text-decoration-color: var(--phc-line);
	text-underline-offset: 0.18em;
}

/* -------------------------------------------------------------
   02. Design tokens
   ------------------------------------------------------------- */
:root {
	/* Brand palette — white / black / grey / yellow, per brief. */
	--phc-paper: #f7f5ef;      /* warm off-white, page ground */
	--phc-white: #ffffff;      /* pure white, cards & surfaces */
	--phc-ink: #14130f;        /* near-black, primary text */
	--phc-black: #0a0a08;      /* true black, hero/dark sections */
	--phc-graphite: #4a473f;   /* secondary text on paper */
	--phc-stone: #8c887c;      /* tertiary text, meta, placeholders */
	--phc-mist: #e6e2d4;       /* hairline borders, subtle fills on paper */
	--phc-fog: #232019;        /* hairline borders on dark sections */
	--phc-yellow: #f0c419;     /* signature accent */
	--phc-yellow-deep: #b98e05;/* accent text-on-light / hover */
	--phc-yellow-wash: #fbf0c8;/* pale accent fill */

	/* The one semantic colour in the set. Yellow is the brand accent, so
	   it cannot also mean "something is wrong" — a form field and a
	   promoted price would signal the same thing. This exact value was
	   already hard-coded in assets/css/woocommerce.css as the error
	   notice's border; promoted to a token here so the notices and Contact
	   Form 7's validation (assets/css/forms.css) share one red instead of
	   drifting into two. */
	--phc-danger: #c0392b;

	/* "Оригинальный товар" mark. Green means "confirmed", the opposite of
	   --phc-danger; kept deep and slightly warm so it sits beside the cream
	   paper and the yellow accent instead of reading as a UI-kit green. */
	--phc-ok: #2e7d4f;
	--phc-ok-deep: #1f5c38;
	--phc-ok-wash: #e3f1e7;

	--phc-line: currentColor;

	--phc-font-sans: "Zapus Sans", "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
	--phc-font-display: "Shobhika", "Lora", "Georgia", serif;

	--phc-container: 1320px;
	--phc-gutter: clamp(20px, 5vw, 64px);
	/* Wide-desktop values below override this. */
	--phc-radius-s: 4px;
	--phc-radius-m: 10px;
	--phc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--phc-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

	--phc-header-h: 84px;
}

/* On a wide desktop the flat 1320px cap above reads as a narrow strip
   with huge dead margins either side (down to ~59% of the viewport on a
   2200px+ screen) — scale the container with the viewport instead, so it
   holds at 84% of it no matter how wide the monitor (no ceiling — a
   genuinely ultra-wide screen gets a genuinely wide container). Left
   untouched below 960px: mobile/tablet is already effectively
   full-width there (the 1320px cap is bigger than the screen), so this
   only ever widens desktop, never narrows anything. */
@media (min-width: 960px) {
	:root {
		--phc-container: 84vw;
	}
}

/* Real Zapus Sans / Shobhika files, self-hosted from assets/fonts/ — see
   assets/fonts/README.md. Each face loads a .woff2 first: the client's
   own .ttf/.otf re-packed and subset with fontTools (2026-09-25) to
   Latin + Cyrillic + punctuation + the handful of symbols shop copy
   actually uses (₽ № ≈ ≤ ● ★ ✓ ✔ ➤ …, list in assets/fonts/README.md).
   As supplied, one Zapus weight was ~1 MB (4600 glyphs: Greek, Braille,
   box drawing, Devanagari in Shobhika…) and a product page pulled ~3.8 MB
   of fonts; the subset is ~31 KB a weight. The original file stays as the
   second src — never fetched by a browser that reads woff2, but it keeps
   every weight working if a .woff2 is ever missing, and a glyph outside
   the subset still falls back cleanly through the --phc-font-* stack.
   Declaring every weight costs nothing: a browser only fetches the
   @font-face file a rendered element actually matches. */
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-thin.woff2") format("woff2"), url("assets/fonts/zapus-sans-thin.ttf") format("truetype");
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-thin-italic.woff2") format("woff2"), url("assets/fonts/zapus-sans-thin-italic.ttf") format("truetype");
	font-weight: 100;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-extralight.woff2") format("woff2"), url("assets/fonts/zapus-sans-extralight.ttf") format("truetype");
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-extralight-italic.woff2") format("woff2"), url("assets/fonts/zapus-sans-extralight-italic.ttf") format("truetype");
	font-weight: 200;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-light.woff2") format("woff2"), url("assets/fonts/zapus-sans-light.ttf") format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-light-italic.woff2") format("woff2"), url("assets/fonts/zapus-sans-light-italic.ttf") format("truetype");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-regular.woff2") format("woff2"), url("assets/fonts/zapus-sans-regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-italic.woff2") format("woff2"), url("assets/fonts/zapus-sans-italic.ttf") format("truetype");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-medium.woff2") format("woff2"), url("assets/fonts/zapus-sans-medium.ttf") format("truetype");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-medium-italic.woff2") format("woff2"), url("assets/fonts/zapus-sans-medium-italic.ttf") format("truetype");
	font-weight: 500;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-semibold.woff2") format("woff2"), url("assets/fonts/zapus-sans-semibold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-semibold-italic.woff2") format("woff2"), url("assets/fonts/zapus-sans-semibold-italic.ttf") format("truetype");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-bold.woff2") format("woff2"), url("assets/fonts/zapus-sans-bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-bold-italic.woff2") format("woff2"), url("assets/fonts/zapus-sans-bold-italic.ttf") format("truetype");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-extrabold.woff2") format("woff2"), url("assets/fonts/zapus-sans-extrabold.ttf") format("truetype");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-extrabold-italic.woff2") format("woff2"), url("assets/fonts/zapus-sans-extrabold-italic.ttf") format("truetype");
	font-weight: 800;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-black.woff2") format("woff2"), url("assets/fonts/zapus-sans-black.ttf") format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Zapus Sans";
	src: url("assets/fonts/zapus-sans-black-italic.woff2") format("woff2"), url("assets/fonts/zapus-sans-black-italic.ttf") format("truetype");
	font-weight: 900;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Shobhika";
	src: url("assets/fonts/shobhika-regular.woff2") format("woff2"), url("assets/fonts/shobhika-regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Shobhika";
	src: url("assets/fonts/shobhika-bold.woff2") format("woff2"), url("assets/fonts/shobhika-bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------
   03. Typography
   ------------------------------------------------------------- */
body {
	background: var(--phc-paper);
	color: var(--phc-ink);
	font-family: var(--phc-font-sans);
	font-size: 16px;
	line-height: 1.55;
	font-feature-settings: "ss01" 1;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.phc-heading {
	font-family: var(--phc-font-display);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--phc-ink);
}

.phc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--phc-font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--phc-stone);
}

.phc-eyebrow::before {
	content: "";
	width: 22px;
	height: 1px;
	background: var(--phc-yellow-deep);
}

.phc-lede {
	font-size: clamp(1.05rem, 1.4vw, 1.25rem);
	color: var(--phc-graphite);
	max-width: 46ch;
}

/* -------------------------------------------------------------
   04. Layout primitives
   ------------------------------------------------------------- */
.phc-container {
	width: 100%;
	max-width: var(--phc-container);
	margin-inline: auto;
	padding-inline: var(--phc-gutter);
}

.phc-grid {
	display: grid;
	gap: var(--phc-gutter);
}

.site {
	overflow: clip;
}

/* -------------------------------------------------------------
   05. Motion utility classes
   Hooks only — main.js/scroll-story.js toggle `.is-visible` via
   GSAP ScrollTrigger, this file just defines the before/after state.
   ------------------------------------------------------------- */
.phc-reveal {
	opacity: 0;
	transform: translateY(28px);
}

.phc-reveal.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s var(--phc-ease-soft), transform 0.9s var(--phc-ease-soft);
}

.phc-reveal-cascade > * {
	opacity: 0;
	transform: translateY(20px);
}

.phc-reveal-cascade.is-visible > * {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s var(--phc-ease-soft), transform 0.7s var(--phc-ease-soft);
}

.phc-reveal-cascade.is-visible > *:nth-child(1) { transition-delay: 0.02s; }
.phc-reveal-cascade.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.phc-reveal-cascade.is-visible > *:nth-child(3) { transition-delay: 0.18s; }
.phc-reveal-cascade.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.phc-reveal-cascade.is-visible > *:nth-child(5) { transition-delay: 0.34s; }
.phc-reveal-cascade.is-visible > *:nth-child(6) { transition-delay: 0.42s; }

@media (prefers-reduced-motion: reduce) {
	.phc-reveal,
	.phc-reveal-cascade > * {
		opacity: 1;
		transform: none;
		transition: none !important;
	}
}

/* -------------------------------------------------------------
   06. Buttons & form controls
   ------------------------------------------------------------- */
.phc-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	padding: 0.95em 1.9em;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--phc-font-sans);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	background: none;
	overflow: hidden;
	text-decoration: none; /* buttons render as <a> — never inherit the browser's default underline */
	transition: color 0.35s var(--phc-ease), border-color 0.35s var(--phc-ease), background-color 0.35s var(--phc-ease);
}

.phc-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateY(101%);
	transition: transform 0.45s var(--phc-ease);
	z-index: -1;
}

.phc-btn--primary {
	background: var(--phc-yellow);
	color: var(--phc-ink);
}

.phc-btn--primary::after {
	background: var(--phc-ink);
}

.phc-btn--primary:hover {
	color: var(--phc-paper);
}

.phc-btn--primary:hover::after {
	transform: translateY(0);
}

.phc-btn--dark {
	background: var(--phc-ink);
	color: var(--phc-paper);
	border-color: var(--phc-ink);
}

.phc-btn--dark::after {
	background: var(--phc-yellow);
}

.phc-btn--dark:hover {
	color: var(--phc-ink);
}

.phc-btn--dark:hover::after {
	transform: translateY(0);
}

.phc-btn--ghost {
	border-color: currentColor;
	color: inherit;
}

.phc-btn--ghost::after {
	background: currentColor;
	opacity: 0.08;
}

.phc-btn--ghost:hover::after {
	transform: translateY(0);
}

.phc-btn:focus-visible {
	outline: 2px solid var(--phc-yellow-deep);
	outline-offset: 3px;
}

/* -------------------------------------------------------------
   07. Site header & navigation
   ------------------------------------------------------------- */
.phc-header {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 60;
	height: var(--phc-header-h);
	display: flex;
	align-items: center;
	color: var(--phc-paper);
	background: transparent;
	box-shadow: none;
	transition: color 0.4s var(--phc-ease), background-color 0.4s var(--phc-ease), box-shadow 0.4s var(--phc-ease);
}

/* Solid-ish backdrop once the page has scrolled at all — matters most
   while still over the hero, before the first light section arrives, so
   the logo/nav stay legible over whatever photo/gradient is behind them. */
.phc-header.is-scrolled {
	background: rgba(10, 10, 8, 0.6);
	backdrop-filter: blur(10px);
}

/* Wins over .is-scrolled on ties (defined later, same specificity) —
   applied whenever main.js's IntersectionObserver finds the header
   currently over a [data-phc-light-header] section. */
.phc-header.is-light-section {
	color: var(--phc-ink);
	background: rgba(247, 245, 239, 0.88);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--phc-mist);
}

.phc-header__inner {
	width: 100%;
	max-width: var(--phc-container);
	margin-inline: auto;
	padding-inline: var(--phc-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.phc-brand {
	font-family: var(--phc-font-display);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	white-space: nowrap;
}

.phc-brand img {
	max-height: 34px;
	width: auto;
}

.phc-header__actions {
	display: flex;
	align-items: center;
	gap: 1.1rem;
}

.phc-menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

/* :not() exclusion, not a bare `span`: the button's 4th child is
   <span class="screen-reader-text">Меню</span>, and `.phc-menu-toggle span`
   (0,1,1) outranks `.screen-reader-text` (0,1,0) regardless of source
   order, so the hidden label was picking up `width: 100%`. Being
   position:absolute with no positioned ancestor, that resolved against the
   initial containing block — a ~1425px-wide box instead of 1px. Harmless in
   practice (the `clip`/`clip-path` on .screen-reader-text keeps clipped
   content out of scrollable overflow), but wrong, and one removed `clip`
   away from dragging the page sideways. */
.phc-menu-toggle span:not(.screen-reader-text) {
	display: block;
	height: 1.5px;
	width: 100%;
	background: currentColor;
	transition: transform 0.35s var(--phc-ease), opacity 0.2s;
}

.phc-menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.phc-menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.phc-menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* -------------------------------------------------------------
   08. Nav drawer — the burger is the only nav trigger at every
   viewport width (desktop included, by request); there's no
   separate horizontal desktop menu to break down at a breakpoint.
   ------------------------------------------------------------- */
.phc-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: var(--phc-ink);
	color: var(--phc-paper);
	display: flex;
	flex-direction: column;
	padding: var(--phc-gutter);
	transform: translateY(-100%);
	transition: transform 0.55s var(--phc-ease);
}

.phc-drawer.is-open {
	transform: translateY(0);
}

/* main.js toggles this on <body> whenever the drawer opens, but never
   defined a rule for it — the page behind the drawer kept scrolling.
   Lenis (when present) is stopped separately in JS; this is what blocks
   scroll on pages that don't run it. */
body.phc-lock-scroll {
	overflow: hidden;
}

/* Takes up all the space between the close button and the footer, and
   centers the menu links within it — this is what keeps the phone/socials
   block pinned to the very bottom instead of the whole drawer being
   centered as one group. */
.phc-drawer nav {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-height: 0;
}

.phc-drawer__close {
	position: absolute;
	top: clamp(18px, 2.6vw, 32px);
	right: var(--phc-gutter);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid rgba(247, 245, 239, 0.25);
	border-radius: 999px;
	color: var(--phc-paper);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.3s var(--phc-ease), border-color 0.3s var(--phc-ease);
}

.phc-drawer__close:hover {
	background: rgba(247, 245, 239, 0.1);
	border-color: rgba(247, 245, 239, 0.5);
}

.phc-drawer ul {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.phc-drawer a {
	font-family: var(--phc-font-display);
	font-size: clamp(2rem, 8vw, 3.2rem);
	text-decoration: none;
	display: inline-block;
}

/* Designer stripe separating the nav links from the phone/socials block —
   echoes the little yellow dash used on .phc-eyebrow throughout the rest
   of the site. */
.phc-drawer__divider {
	position: relative;
	height: 1px;
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	background: rgba(247, 245, 239, 0.14);
}

.phc-drawer__divider::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 1px;
	background: var(--phc-yellow);
}

.phc-drawer__footer {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.8rem;
}

/* Desktop: the same phone/socials block runs as a single horizontal row
   instead of stacking — still the last thing in the drawer, below the
   divider. */
@media (min-width: 960px) {
	.phc-drawer__footer {
		flex-direction: row;
		justify-content: center;
		gap: 3rem;
	}

	.phc-drawer .phc-drawer__socials {
		display: flex;
		gap: 2.2rem;
	}
}

/* Qualified as `.phc-drawer .phc-drawer__socials` (two classes) rather
   than the bare class — `.phc-drawer ul` a few rules up (one class + one
   type selector) is otherwise MORE specific than a single bare class,
   and silently won the `display` property back to its flex/column
   layout regardless of what was set here. Same fix shape as the
   `.site-main a` / `h1` bugs elsewhere in this file — a generic rule
   with a descendant type selector outranking a plain component class. */
.phc-drawer .phc-drawer__socials {
	/* grid-auto-flow: column fills top-to-bottom within a column before
	   moving to the next one — with the array order in inc/site-config.php
	   (telegram, vk, max, whatsapp) that lands col 1 = Telegram/VK,
	   col 2 = MAX/WhatsApp, matching the requested layout. Plain
	   row-major flow (the default) would have paired them across rows
	   instead. */
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	column-gap: 3rem;
	row-gap: 0.7rem;
	justify-content: center;
}

.phc-drawer__socials a {
	font-family: var(--phc-font-sans);
	font-size: 0.85rem;
	opacity: 0.75;
	text-decoration: none;
}

.phc-drawer__socials a:hover {
	opacity: 1;
}

/* Qualified for the same reason as .phc-drawer .phc-drawer__socials
   above: `.phc-drawer a` (one class + one type selector, meant for the
   giant nav-menu links) is more specific than a bare `.phc-btn`/
   `.phc-drawer__phone` class and was winning the font-size/font-family
   fight — at clamp(2rem, 8vw, 3.2rem) with .phc-btn's em-based padding,
   that's what actually made the button balloon, not the line-wrap. */
.phc-drawer .phc-drawer__phone {
	font-family: var(--phc-font-sans);
	font-size: 0.92rem;
	/* Sized to its own content (not width:100%) — outline style, on the
	   dark drawer this reads as a modest secondary action, not a big
	   solid block. .phc-drawer__footer's align-items: center handles
	   the centering. */
	white-space: nowrap; /* the number's own hyphens are valid line-break
	   points otherwise, wrapping it onto 2-3 lines and, combined with
	   .phc-btn's border-radius: 999px, ballooning it into a near-circle */
}

/* -------------------------------------------------------------
   09. Cart trigger & mini-cart drawer
   ------------------------------------------------------------- */
.phc-cart-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	text-decoration: none;
}

.phc-cart-trigger svg {
	width: 22px;
	height: 22px;
}

.phc-cart-trigger__count {
	position: absolute;
	top: -2px;
	right: -6px;
	min-width: 17px;
	height: 17px;
	padding-inline: 3px;
	border-radius: 999px;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	font-size: 0.65rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.phc-mini-cart {
	position: fixed;
	inset-block: 0;
	right: 0;
	width: min(420px, 100vw);
	z-index: 95;
	background: var(--phc-white);
	color: var(--phc-ink);
	box-shadow: -30px 0 60px rgba(10, 10, 8, 0.18);
	transform: translateX(100%);
	transition: transform 0.5s var(--phc-ease);
	display: flex;
	flex-direction: column;
}

.phc-mini-cart.is-open {
	transform: translateX(0);
}

.phc-mini-cart__scrim {
	position: fixed;
	inset: 0;
	z-index: 94;
	background: rgba(10, 10, 8, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s var(--phc-ease);
}

.phc-mini-cart__scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.phc-mini-cart__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.phc-mini-cart__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.6rem clamp(1.2rem, 4vw, 1.8rem) 1.2rem;
	border-bottom: 1px solid var(--phc-mist);
}

.phc-mini-cart__title {
	font-family: var(--phc-font-display);
	font-size: 1.2rem;
	margin: 0;
}

.phc-mini-cart__close {
	width: 32px;
	height: 32px;
	border: none;
	background: none;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--phc-stone);
	cursor: pointer;
	transition: color 0.2s var(--phc-ease);
}

.phc-mini-cart__close:hover {
	color: var(--phc-ink);
}

.phc-mini-cart__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	flex: 1;
	padding: 2rem;
	text-align: center;
	color: var(--phc-graphite);
}

.phc-mini-cart__items {
	list-style: none;
	margin: 0;
	padding: 0.4rem clamp(1.2rem, 4vw, 1.8rem);
	overflow-y: auto;
	flex: 1;
}

.phc-mini-cart__item {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 0.9rem;
	align-items: center;
	padding: 1rem 0;
	border-bottom: 1px solid var(--phc-mist);
}

.phc-mini-cart__item:last-child {
	border-bottom: none;
}

.phc-mini-cart__thumb {
	display: block;
	width: 64px;
	height: 80px;
	border-radius: var(--phc-radius-s);
	overflow: hidden;
	background: var(--phc-mist);
}

.phc-mini-cart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.phc-mini-cart__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.phc-mini-cart__name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--phc-ink);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.phc-mini-cart__name:hover {
	color: var(--phc-yellow-deep);
}

.phc-mini-cart__qty-price {
	font-size: 0.82rem;
	color: var(--phc-stone);
}

.phc-mini-cart__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--phc-stone);
	text-decoration: none;
	font-size: 1.1rem;
	line-height: 1;
	transition: background-color 0.2s var(--phc-ease), color 0.2s var(--phc-ease);
}

.phc-mini-cart__remove:hover {
	background: var(--phc-mist);
	color: var(--phc-ink);
}

.phc-mini-cart__footer {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 1.4rem clamp(1.2rem, 4vw, 1.8rem);
	border-top: 1px solid var(--phc-mist);
}

.phc-mini-cart__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.9rem;
	margin-bottom: 0.4rem;
}

.phc-mini-cart__subtotal strong {
	font-family: var(--phc-font-display);
	font-size: 1.15rem;
}

/* The loyalty-discount explanation line (template-parts/mini-cart.php,
   inc/loyalty-discount.php) reuses .phc-mini-cart__subtotal's layout but
   reads as a footnote, not a second total — smaller, muted, no serif. */
.phc-mini-cart__discount {
	font-size: 0.82rem;
	color: var(--phc-graphite);
	margin-bottom: 0.8rem;
}

.phc-mini-cart__discount strong {
	font-family: var(--phc-font-sans);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--phc-yellow-deep);
}

.phc-mini-cart__footer .phc-btn {
	width: 100%;
}

/* -------------------------------------------------------------
   10. Footer
   ------------------------------------------------------------- */
.phc-footer {
	background: var(--phc-black);
	color: var(--phc-paper);
	padding-block: clamp(60px, 8vw, 120px) 32px;
}

.phc-footer__top {
	display: grid;
	gap: 3rem;
	grid-template-columns: 1.3fr repeat(3, 1fr);
	padding-bottom: clamp(48px, 6vw, 90px);
	border-bottom: 1px solid var(--phc-fog);
}

.phc-footer__brand {
	font-family: var(--phc-font-display);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.phc-footer__tag {
	margin-top: 1rem;
	color: var(--phc-stone);
	max-width: 32ch;
}

.phc-footer h3 {
	font-family: var(--phc-font-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--phc-stone);
	margin-bottom: 1.1rem;
}

.phc-footer ul {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.phc-footer a {
	text-decoration: none;
	font-size: 0.95rem;
}

.phc-footer a:hover {
	color: var(--phc-yellow);
}

.phc-footer__bottom {
	padding-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	font-size: 0.8rem;
	color: var(--phc-stone);
}

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

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

/* -------------------------------------------------------------
   10a. Floating call widget + consultation-request modal
   (inc/consultation-request.php prints the markup on every page via
   wp_footer; JS is in main.js, same open/close pattern as the mini-cart
   drawer above). Lives here, not in a conditionally-enqueued stylesheet,
   because the widget itself is sitewide — page-consultation.php's own
   inline copy of the form (assets/css section further down) reuses
   .phc-consult-form too, so there is exactly one set of rules for it.
   ------------------------------------------------------------- */
.phc-call-widget {
	position: fixed;
	right: clamp(16px, 4vw, 32px);
	bottom: clamp(16px, 4vw, 32px);
	z-index: 70;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

.phc-call-widget__trigger {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	border: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 10px 30px rgba(10, 10, 8, 0.25);
	transition: background-color 0.3s var(--phc-ease), transform 0.3s var(--phc-ease);
}

.phc-call-widget__trigger:hover {
	background: var(--phc-yellow-deep);
}

.phc-call-widget__trigger svg {
	position: relative;
	z-index: 1;
	width: 24px;
	height: 24px;
}

.phc-call-widget.is-open .phc-call-widget__trigger {
	transform: rotate(45deg);
}

/* Breathing pulse ring — calls attention without a jarring animation.
   Its own element (not a box-shadow animation) so it can scale past the
   button's own edge without clipping. */
.phc-call-widget__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--phc-yellow);
	opacity: 0.55;
	animation: phc-call-pulse 2.4s var(--phc-ease-soft) infinite;
}

@keyframes phc-call-pulse {
	0% { transform: scale(1); opacity: 0.55; }
	100% { transform: scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.phc-call-widget__ring {
		animation: none;
		display: none;
	}
}

.phc-call-widget__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.3s var(--phc-ease), transform 0.3s var(--phc-ease);
}

.phc-call-widget.is-open .phc-call-widget__panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.phc-call-widget__option {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.75em 1.2em;
	border-radius: 999px;
	background: var(--phc-white);
	color: var(--phc-ink);
	border: 1px solid var(--phc-mist);
	font-family: var(--phc-font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(10, 10, 8, 0.14);
	transition: background-color 0.25s var(--phc-ease), color 0.25s var(--phc-ease);
}

.phc-call-widget__option:hover {
	background: var(--phc-ink);
	color: var(--phc-paper);
}

.phc-call-widget__option-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
}

.phc-call-widget__option-icon svg {
	width: 100%;
	height: 100%;
}

.phc-consult-modal__scrim {
	position: fixed;
	inset: 0;
	z-index: 96;
	background: rgba(10, 10, 8, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s var(--phc-ease);
}

.phc-consult-modal__scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.phc-consult-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 97;
	width: min(480px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
	padding: clamp(2.4rem, 5vw, 3rem) clamp(1.6rem, 4vw, 2.2rem) clamp(1.6rem, 4vw, 2.2rem);
	transform: translate(-50%, -46%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s var(--phc-ease), transform 0.35s var(--phc-ease);
}

.phc-consult-modal.is-open {
	opacity: 1;
	transform: translate(-50%, -50%);
	pointer-events: auto;
}

.phc-consult-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--phc-mist);
	background: var(--phc-white);
	color: var(--phc-stone);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s var(--phc-ease), border-color 0.2s var(--phc-ease);
}

.phc-consult-modal__close:hover {
	color: var(--phc-ink);
	border-color: var(--phc-stone);
}

/* Shared consultation-request form (template-parts/consultation-form.php)
   — used both inline on page-consultation.php ('page' variant, two-column
   with a photo) and inside the modal above ('modal' variant, single
   column, no photo: a modal is too narrow for one to read as anything
   but a bad crop). */
.phc-consult-form {
	display: grid;
	gap: clamp(1.6rem, 4vw, 2.4rem);
}

.phc-consult-form--page {
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(10, 10, 8, 0.08);
}

@media (min-width: 780px) {
	.phc-consult-form--page {
		grid-template-columns: minmax(260px, 400px) 1fr;
		gap: 0;
	}
}

.phc-consult-form__media {
	position: relative;
	min-height: 240px;
}

.phc-consult-form__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phc-consult-form__body {
	padding: clamp(1.8rem, 4vw, 2.8rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.phc-consult-form--modal .phc-consult-form__body {
	padding: 0;
}

.phc-consult-form__title {
	font-family: var(--phc-font-display);
	font-weight: 600;
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	line-height: 1.25;
	color: var(--phc-ink);
	max-width: 26ch;
}

.phc-consult-form__text {
	margin-top: 0.8rem;
	color: var(--phc-graphite);
	font-size: 0.94rem;
	line-height: 1.6;
}

.phc-consult-form__fields {
	margin-top: 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

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

.phc-consult-form__fields input,
.phc-consult-form__fields textarea {
	width: 100%;
	padding: 0.85em 1.1em;
	border: 1px solid var(--phc-mist);
	border-radius: var(--phc-radius-s);
	background: var(--phc-paper);
	font-family: inherit;
	font-size: 0.95rem;
	resize: vertical;
	transition: border-color 0.2s var(--phc-ease);
}

.phc-consult-form__fields input:focus,
.phc-consult-form__fields textarea:focus {
	outline: none;
	border-color: var(--phc-yellow-deep);
}

.phc-consult-form__submit {
	align-self: flex-start;
}

.phc-consult-form__submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.phc-consult-form__status {
	margin: 0;
	font-size: 0.85rem;
}

.phc-consult-form__status[data-state="success"] {
	color: #2e7d32;
}

.phc-consult-form__status[data-state="error"] {
	color: var(--phc-danger);
}

/* -------------------------------------------------------------
   11. Generic content (blog/page fallback — kept close to the
   underscores defaults so posts/pages stay legible, deliberately
   quieter than the shop/story surfaces above).
   ------------------------------------------------------------- */
.site-main {
	max-width: 760px;
	margin-inline: auto;
	padding: calc(var(--phc-header-h) + 3rem) var(--phc-gutter) 5rem;
}

.site-main img {
	border-radius: var(--phc-radius-m);
}

/* Both :not() exclusions matter: every template that uses this generic
   "content link" color — front-page.php's <main> (.site-main +
   .phc-story-main) and the shop archive's (.site-main + .phc-shop) —
   also contains component anchors of its own (buttons, the product
   card's whole-card link). This selector's specificity (class + type)
   beats those components' single-class color rules, so without the
   exclusions it repaints them the same muted yellow-deep regardless of
   what they're actually supposed to look like. Add a `:not(.whatever)`
   here for any future component anchor that ends up living inside
   .site-main and gets its color silently overridden the same way.
   `:not(.phc-breadcrumb *)` is the descendant form of the same idea:
   breadcrumb links carry no class of their own, so they can only be
   excluded via their container — and they have to be, because every
   cover band sets its own breadcrumb colour and this rule would
   otherwise repaint all of them yellow-deep. */
.site-main a:not(.phc-btn):not(.phc-product-card__media):not(.phc-breadcrumb *):not(.phc-page-door):not(.phc-brands__link) {
	color: var(--phc-yellow-deep);
}

/* -------------------------------------------------------------
   12. Cards
   Product card is defined here (not woocommerce.css) because it's
   reused outside Woo templates — the front-page bestsellers rail
   loads this file but never loads assets/css/woocommerce.css.
   Archive-grid layout around these cards lives in woocommerce.css.
   ------------------------------------------------------------- */
.phc-card {
	background: var(--phc-white);
	border-radius: var(--phc-radius-m);
	overflow: hidden;
}

/* Reusable "photo hero" pair — an oversized cover photo plus a two-layer
   dark scrim, used wherever a full-bleed image needs to sit behind
   light text and stay legible regardless of the photo's own brightness.
   Shared by the front-page hero (assets/js/scroll-story.js parallaxes
   .phc-cover-photo directly) and the shop archive's category hero
   (woocommerce/archive-product.php) — lives here, not in a page-specific
   stylesheet, so both can use it without duplicating the rules. The
   parent needs `position: relative; overflow: hidden;` of its own. */
.phc-cover-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.12);
	will-change: transform;
}

.phc-cover-scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10, 10, 8, 0.35) 0%, rgba(10, 10, 8, 0.55) 55%, rgba(10, 10, 8, 0.86) 100%),
		linear-gradient(90deg, rgba(10, 10, 8, 0.55), transparent 55%);
}

/* Breadcrumb — the third shared piece of the cover band, alongside the
   photo/scrim pair above. Every band on the site prints this same markup
   (woocommerce/archive-product.php, profhairclub_woo_page_header(),
   profhairclub_journal_breadcrumb(), and the story/info page templates),
   so its layout belongs in the always-loaded file.

   It used to live in assets/css/woocommerce.css only, which is enqueued
   on WooCommerce pages alone — blog.css overrides just the colours for
   the journal hero and article cover, so on /blog/ and inside posts the
   breadcrumb had no base at all and rendered as plain inline body-size
   text with underlined links (confirmed against the live site: display
   block, gap normal, font-size 16px, separators at full opacity).

   Colours deliberately stay out of here: a dark cover band and a light
   page need different ones, and each band already sets its own. Only the
   neutral default below, for a band that doesn't. */
.phc-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em;
	font-size: 0.78rem;
	color: var(--phc-stone);
	margin-bottom: 1.4rem;
}

.phc-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.phc-breadcrumb a:hover,
.phc-breadcrumb a:focus-visible {
	text-decoration: underline;
}

.phc-breadcrumb__sep {
	opacity: 0.5;
}

/* Dark cover band for ordinary WordPress pages — the fourth shared piece
   of this component family, and the reason the three above live here.

   The band itself exists in two other places already: the shop archive's
   `.phc-shop__hero` and the cart/checkout `.phc-woo-header--cover`, both
   styled in assets/css/woocommerce.css. Neither is reusable off a
   WooCommerce page, because that stylesheet is only enqueued there — so
   borrowing one of them for «О нас» or «Оферта» would mean loading 45KB
   of shop CSS to get one header. This version is built from the pieces
   above (breadcrumb, cover photo, scrim) and lives in the always-loaded
   file, so both the story pages (page-about.php) and the informational
   pages (template-info-page.php) can use it for free.

   Markup: template-parts/page/cover.php. */
.phc-page-cover {
	position: relative;
	overflow: hidden;
	background: var(--phc-black);
	color: var(--phc-paper);
	padding-block: calc(var(--phc-header-h) + clamp(2.5rem, 6vw, 4.5rem)) clamp(2.8rem, 6vw, 4.5rem);
}

.phc-page-cover__inner {
	position: relative;
	z-index: 1;
}

/* .phc-cover-scrim is built to sit over a photo. With no photo behind it
   its two gradients still darken an already-black band, and the result
   reads muddy rather than deep — so it only paints when there is actually
   an image to hold down. */
.phc-page-cover:not(.has-photo) .phc-cover-scrim {
	display: none;
}

.phc-page-cover .phc-breadcrumb {
	color: rgba(247, 245, 239, 0.6);
}

.phc-page-cover .phc-breadcrumb a:hover,
.phc-page-cover .phc-breadcrumb__current {
	color: var(--phc-paper);
}

/* Two classes, not one: `.phc-eyebrow` above is also (0,1,0), so a single
   class would only win on source order — and cross-file order ties are
   the one thing this project has learned never to lean on. */
.phc-page-cover .phc-page-cover__eyebrow {
	color: var(--phc-yellow);
}

.phc-page-cover .phc-page-cover__eyebrow::before {
	background: var(--phc-yellow);
}

/* Single class is enough here — it beats the global `h1 { color: ink }`,
   which is a bare type selector. Inheriting paper from the band would
   not: a direct element match outranks inheritance. */
.phc-page-cover__title {
	margin-top: 1.1rem;
	font-size: clamp(2.1rem, 5.6vw, 4rem);
	color: var(--phc-paper);
	text-wrap: balance;
	max-width: 22ch;
}

/* Two classes: `.phc-lede`'s own single-class graphite is meant for paper
   and is unreadable on black. */
.phc-page-cover .phc-page-cover__lede {
	margin-top: 1.1rem;
	max-width: 54ch;
	color: rgba(247, 245, 239, 0.72);
}

/* "Cover" card — photo fills the whole thing, name always sits on it,
   category/price/add-to-cart reveal on hover. Chosen over two other
   directions (see "varianty kartochek.txt") specifically for its
   editorial, photo-forward feel; it leans harder on photography quality
   than a plain card-with-info-below would.
   Structure: .phc-product-card__media is the product-link <a> and wraps
   photo + scrim + a single .__info stack (category, name, price — none
   of those are interactive, so nesting them inside the link is fine).
   Only .phc-product-card__add sits outside as a sibling: WooCommerce's
   own add-to-cart markup is itself an <a>, and an anchor can't contain
   another anchor. Keeping .__info as one flex column anchored to the
   card's bottom edge (rather than positioning category/name/price each
   independently) is what lets it grow upward on hover without any of
   them needing a magic offset to avoid overlapping the others. */
.phc-product-card {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--phc-radius-m);
	overflow: hidden;
	color: var(--phc-paper);
	background: var(--phc-mist);
}

.phc-product-card__media {
	position: absolute;
	inset: 0;
	display: block;
	/* Explicitly excluded from the generic .site-main a color rule (see
	   that rule's comment) — this is the whole-card product link, not
	   prose content, and needs to stay paper/no-underline regardless of
	   which page it's rendered on. */
	color: var(--phc-paper);
	text-decoration: none;
}

.phc-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--phc-ease);
}

.phc-product-card:hover .phc-product-card__media img {
	transform: scale(1.05);
}

.phc-product-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35em 0.7em;
	border-radius: 999px;
}

/* "Оригинальный товар" — green check + label. One component, two places:
   a pill laid over the card photo (--card) and a larger one under the price
   on the product page (--single). Markup: profhairclub_original_badge_html()
   in inc/woocommerce-setup.php. */
.phc-original {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--phc-ok-deep);
	font-weight: 700;
	line-height: 1;
}

.phc-original__icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	color: var(--phc-ok);
}

.phc-original--card {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 0.42em 0.75em 0.42em 0.5em;
	border-radius: 999px;
	background: rgba(247, 245, 239, 0.94);
	box-shadow: 0 1px 0 rgba(10, 10, 8, 0.06);
	font-size: 0.64rem;
	letter-spacing: 0.02em;
}

/* Sale badge already owns the top-left corner — sit just below it. */
.phc-product-card__badge ~ .phc-original--card {
	top: 46px;
}

.phc-original-row {
	margin: 0.2rem 0 1.1rem;
}

.phc-original--single {
	padding: 0.55em 0.95em 0.55em 0.65em;
	border-radius: 999px;
	background: var(--phc-ok-wash);
	font-size: 0.82rem;
}

.phc-product-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 35%, rgba(10, 10, 8, 0.55) 68%, rgba(10, 10, 8, 0.92) 100%);
	opacity: 0.72;
	transition: opacity 0.4s var(--phc-ease);
}

.phc-product-card:hover .phc-product-card__scrim {
	opacity: 1;
}

.phc-product-card__info {
	position: absolute;
	left: 1rem;
	right: 6rem; /* clearance for .phc-product-card__add, positioned independently in the corner */
	bottom: 1rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.phc-product-card__cat {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--phc-yellow);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s var(--phc-ease), opacity 0.3s var(--phc-ease);
}

.phc-product-card:hover .phc-product-card__cat {
	max-height: 1.2em;
	opacity: 1;
}

.phc-product-card__name {
	font-family: var(--phc-font-sans);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.3;
	/* Always visible, unlike category/price/add — a long real product
	   name would otherwise just keep wrapping and the "always on" label
	   would swallow more and more of the photo. Two lines, then ellipsis. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.phc-product-card__price {
	font-weight: 700;
	font-size: 0.92rem;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s var(--phc-ease), opacity 0.3s var(--phc-ease);
}

.phc-product-card:hover .phc-product-card__price {
	max-height: 2.4em; /* room for del+ins stacked on their own lines when on sale */
	opacity: 1;
}

.phc-product-card__price del {
	display: block;
	color: rgba(247, 245, 239, 0.6);
	font-weight: 400;
	font-size: 0.85em;
}

.phc-product-card__price ins {
	text-decoration: none;
	color: var(--phc-yellow);
}

.phc-product-card__add {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--phc-paper);
	text-decoration: underline;
	text-decoration-color: var(--phc-yellow);
	text-underline-offset: 0.2em;
	opacity: 0;
	transition: opacity 0.3s var(--phc-ease);
}

.phc-product-card:hover .phc-product-card__add {
	opacity: 1;
}

.phc-product-card__add.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

/* Morphed state (ProfHairClub Cart Motion plugin) — replaces
   .phc-product-card__add in the same corner slot once the item is in the
   cart. Unlike the idle link, this stays visible regardless of hover:
   it's reporting real cart state, not a hover affordance. */
.phc-product-card .phc-atc-stepper--grid {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	opacity: 1;
	background: var(--phc-black);
}

/* Hover doesn't meaningfully exist on touch — below tablet width, skip
   the reveal choreography entirely and keep category/price/add-to-cart
   permanently visible instead of gated behind an interaction most
   shoppers here can't reliably trigger. */
@media (max-width: 720px) {
	.phc-product-card__cat,
	.phc-product-card__price {
		max-height: none;
		opacity: 1;
	}

	.phc-product-card__add {
		opacity: 1;
	}

	.phc-product-card__scrim {
		opacity: 1;
	}
}

/* -------------------------------------------------------------
   13. Accessibility & misc
   ------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 1em 1.4em;
	background: var(--phc-yellow);
	color: var(--phc-ink);
	font-weight: 700;
}

.skip-link:focus {
	left: var(--phc-gutter);
	top: var(--phc-gutter);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

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

::selection {
	background: var(--phc-yellow);
	color: var(--phc-ink);
}