/* Hair For You Beauty — theme chrome
   Tokens come from theme.json; only component styling lives here. */

:root{
	--hfy-pink:var(--wp--preset--color--pink);
	--hfy-fuchsia:var(--wp--preset--color--fuchsia);
	--hfy-blush:var(--wp--preset--color--blush);
	--hfy-soft:var(--wp--preset--color--pink-soft);
	--hfy-ink:var(--wp--preset--color--ink);
	--hfy-body:var(--wp--preset--color--body);
	--hfy-muted:var(--wp--preset--color--muted);
	--hfy-line:var(--wp--preset--color--line);
	--hfy-line-strong:var(--wp--preset--color--line-strong);
	--hfy-r:2px;
}

body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* Accessibility ------------------------------------------------------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--hfy-fuchsia);outline-offset:2px;border-radius:1px}

/* Shared bits ---------------------------------------------------------- */
.hfy-eyebrow{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 10px}
.hfy-link-u a{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid var(--hfy-pink);padding-bottom:4px}
.hfy-media img{width:100%;height:auto;display:block;background:linear-gradient(150deg,#fff,var(--hfy-blush) 60%,#F5E2EC);border:1px solid var(--hfy-line)}
.hfy-section__head{margin-bottom:38px;gap:24px}
.hfy-section__head p{margin:0}

/* Top bar + header ----------------------------------------------------- */
.hfy-topbar{padding-block:9px}
.hfy-topbar__text{margin:0;letter-spacing:.06em;font-weight:450;text-transform:uppercase}
.hfy-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hfy-line)}
.hfy-header__inner{padding-block:16px;gap:24px}
.hfy-header__brand .wp-block-site-logo img{height:40px;width:auto}
.hfy-nav a{font-size:12px;font-weight:450;letter-spacing:.02em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid transparent}
.hfy-nav a:hover,.hfy-nav .current-menu-item a{border-color:var(--hfy-pink);color:var(--hfy-fuchsia)}
.hfy-header__actions{gap:18px}
.hfy-icon{width:20px;height:20px;stroke:var(--hfy-ink);stroke-width:1.3;fill:none;display:block}
.hfy-icon-link,.hfy-cart-link{display:inline-flex;align-items:center;position:relative;line-height:0}
.hfy-cart-count{position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--hfy-pink);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;letter-spacing:0}
.hfy-cart-count.is-empty{display:none}
.hfy-buy-now{display:inline-flex;align-items:center;justify-content:center;background:var(--hfy-pink);color:#fff;font-size:12px;font-weight:590;letter-spacing:.06em;text-transform:uppercase;padding:11px 22px;border-radius:var(--hfy-r);transition:background .25s}
.hfy-buy-now:hover{background:var(--hfy-fuchsia);color:#fff}

/* Hero ------------------------------------------------------------------ */
.hfy-hero__title{margin:0 0 20px}
.hfy-hero__title .hfy-accent{color:var(--hfy-pink)}
.hfy-hero__lede{max-width:44ch;margin:0}
.hfy-hero__meta{gap:40px;margin-top:52px;padding-top:26px;border-top:1px solid var(--hfy-line)}
.hfy-stat{gap:0}
.hfy-stat__value{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--hfy-ink);margin:0}
.hfy-stat__label{margin:0;letter-spacing:.02em;text-transform:uppercase;color:var(--hfy-muted)}

/* Category tiles --------------------------------------------------------- */
.hfy-cats .wp-block-column{gap:0}
.hfy-cats .hfy-media{margin-bottom:16px;transition:transform .4s ease}
.hfy-cats .wp-block-column:hover .hfy-media{transform:translateY(-4px)}
.hfy-cat__name{margin:0 0 2px}
.hfy-cat__name a:hover{color:var(--hfy-fuchsia)}

/* Brand band -------------------------------------------------------------- */
.hfy-brand__quote{margin:0 0 18px;font-weight:500;letter-spacing:-.02em}

/* Footer ------------------------------------------------------------------ */
.hfy-footer{border-top:1px solid var(--hfy-line);padding-top:70px;background:#fff}
.hfy-footer .wp-block-site-logo img{height:34px;width:auto;margin-bottom:18px}
.hfy-footer__blurb{max-width:34ch}
.hfy-footer__title{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--hfy-ink);margin:0 0 18px}
.hfy-footer__nav{gap:11px!important}
.hfy-footer__nav a{font-size:14px}
.hfy-footer__nav a:hover{color:var(--hfy-fuchsia)}
.hfy-footer__bottom{margin-top:56px;border-top:1px solid var(--hfy-line);padding-block:22px 30px}
.hfy-footer__bottom p{margin:0}

/* Prose pages -------------------------------------------------------------- */
.hfy-prose{max-width:none}
.hfy-prose .wp-block-post-content{max-width:72ch}
.hfy-404{text-align:center}
.hfy-404 .wp-block-buttons{justify-content:center;margin-top:26px}

/* Scroll reveal ------------------------------------------------------------
   Only applies when JavaScript has flagged the document, so content is
   always visible without JS. Disabled entirely for reduced motion. */
@media (prefers-reduced-motion: no-preference){
	.hfy-js .hfy-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
	.hfy-js .hfy-reveal.is-visible{opacity:1;transform:none}
}

/* Mobile -------------------------------------------------------------------- */
@media(max-width:820px){
	.hfy-header__inner{padding-block:14px;gap:12px}
	.hfy-header__brand .wp-block-site-logo img{height:30px}
	.hfy-header__actions{gap:14px}
	.hfy-buy-now{padding:10px 16px;font-size:11px}
	.hfy-hero__meta{gap:26px;margin-top:36px}
	.hfy-section__head{flex-direction:column;align-items:flex-start;gap:12px}
	.hfy-footer{padding-top:48px}
	.hfy-footer__bottom{flex-direction:column;gap:8px;margin-top:36px}
}

/* WooCommerce injects its own customer-account and mini-cart blocks into block
   theme headers. This theme supplies its own, so hide the injected pair to
   avoid a duplicated icon row. Everything outside the header is untouched. */
.hfy-header .wp-block-woocommerce-customer-account,
.hfy-header .wc-block-mini-cart{display:none!important}

/* Keep the header readable if the menu is long or not yet configured */
.hfy-nav{max-width:640px}
.hfy-nav ul{flex-wrap:wrap;row-gap:4px}

/* Footer link lists */
.hfy-footer__list{list-style:none;margin:0;padding:0}
.hfy-footer__list li{margin-bottom:11px;font-size:14px}
.hfy-footer__list a:hover{color:var(--hfy-fuchsia)}

/* WooCommerce renders filter and checkout groups in bare <fieldset> elements,
   which carry the browser's default groove border and padding. */
fieldset{border:0;margin:0;padding:0;min-width:0}

/* Model photography in the homepage slots — consistent framing */
.hfy-hero__image img{aspect-ratio:4/5;object-fit:cover;object-position:center top}
.hfy-cats .hfy-media img{aspect-ratio:3/4;object-fit:cover;object-position:center top}
.hfy-brand .hfy-media img{aspect-ratio:4/5;object-fit:cover;object-position:center}