/* ==========================================================================
   ZamFit — storefront styles
   ========================================================================== */

:root {
	--ink: #111111;
	--ink-2: #707072;
	--ink-3: #9e9ea0;
	--line: #e5e5e5;
	--paper: #ffffff;
	--snow: #f2f2f2; /* matches product photo backgrounds */
	--accent: #ff8a3d;
	--blue: #1677cf;
	--sale: #d33918;
	--ok: #128a09;
	--radius: 30px;
	--gutter: clamp(16px, 4vw, 48px);
	--max: 1920px;
	--display: "Anton", "Arial Narrow", Impact, sans-serif;
	--body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--header-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.2; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.screen-reader-text, .zf-skip:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.zf-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 999; background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 4px; }

.zf-icon { width: 24px; height: 24px; flex: none; }

.zf-container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* --- Type -------------------------------------------------------------- */

.zf-display {
	font-family: var(--display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(48px, 8vw, 104px);
	line-height: .92;
	letter-spacing: -.01em;
	margin: 0 0 16px;
}
.zf-display--md { font-size: clamp(36px, 4.5vw, 64px); }
.zf-h2 { font-size: clamp(20px, 2vw, 24px); font-weight: 500; }
.zf-eyebrow { font-size: 15px; font-weight: 500; margin: 0 0 8px; }
.zf-link { font-size: 16px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

/* --- Buttons ----------------------------------------------------------- */

.zf-btn,
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border: 1.5px solid var(--ink);
	border-radius: var(--radius);
	background: var(--ink);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.zf-btn:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover { background: #3a3a3a; border-color: #3a3a3a; color: #fff; }
.zf-btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.zf-btn--light:hover { background: #e5e5e5; border-color: #e5e5e5; color: var(--ink); }
.zf-btn--outline { background: transparent; color: var(--ink); border-color: #cacacb; }
.zf-btn--outline:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.woocommerce .button:disabled, .woocommerce .button.disabled { opacity: .4; cursor: not-allowed; }

.zf-round {
	display: inline-grid; place-items: center;
	width: 48px; height: 48px; border-radius: 50%;
	border: 0; background: var(--snow); transition: background .2s;
}
.zf-round:hover { background: var(--line); }
.zf-round:disabled { opacity: .35; cursor: default; }
.zf-round .zf-icon { width: 20px; height: 20px; }

/* --- Utility bar ------------------------------------------------------- */

.zf-utility { background: var(--snow); font-size: 12px; font-weight: 500; }
.zf-utility__inner {
	max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
	height: 36px; display: flex; align-items: center; justify-content: space-between;
}
.zf-utility__wa { display: inline-flex; align-items: center; gap: 6px; }
.zf-utility__wa .zf-icon { width: 16px; height: 16px; }
.zf-utility__links { display: flex; gap: 12px; align-items: center; }
.zf-utility__links a:hover { color: var(--ink-2); }

/* --- Header ------------------------------------------------------------ */

.zf-header {
	position: sticky; top: 0; z-index: 50;
	background: #fff;
	transition: transform .3s ease;
}
.zf-header.is-hidden { transform: translateY(-100%); }
.zf-header__inner {
	max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
	height: var(--header-h);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}

.zf-logo { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
.zf-logo img { width: 40px; height: 40px; border-radius: 8px; }
.zf-logo span { font-family: var(--display); font-size: 26px; letter-spacing: .02em; line-height: 1; }

.zf-nav__list { display: flex; }
.zf-nav__link {
	display: block; padding: 18px 12px; font-weight: 500; font-size: 16px;
	border-bottom: 2px solid transparent;
}
.zf-nav__item:hover > .zf-nav__link { border-bottom-color: var(--ink); }

.zf-mega {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff;
	visibility: hidden; opacity: 0;
	transition: opacity .2s ease, visibility 0s .2s;
	box-shadow: 0 30px 40px -30px rgba(0,0,0,.15);
}
.zf-nav__item:hover > .zf-mega,
.zf-nav__item:focus-within > .zf-mega { visibility: visible; opacity: 1; transition-delay: .12s, 0s; }
.zf-mega__inner {
	max-width: 1100px; margin: 0 auto; padding: 28px var(--gutter) 48px;
	display: flex; justify-content: center; gap: 72px;
}
.zf-mega__head { font-weight: 500; margin: 0 0 14px; }
.zf-mega__col li a { display: block; padding: 4px 0; color: var(--ink-2); font-size: 14px; font-weight: 500; }
.zf-mega__col li a:hover { color: var(--ink); }

.zf-header__tools { justify-self: end; display: flex; align-items: center; gap: 4px; }
.zf-tool {
	position: relative; display: inline-grid; place-items: center;
	width: 40px; height: 40px; border-radius: 50%; border: 0; background: none;
}
.zf-tool:hover { background: var(--line); }
.zf-bag-count {
	position: absolute; top: 15px; left: 0; right: 0; text-align: center;
	font-size: 9px; font-weight: 700; line-height: 1;
}
.zf-menu-toggle { display: none; }

.zf-search {
	display: flex; align-items: center;
	background: var(--snow); border-radius: 24px; height: 40px; width: 180px;
	transition: background .2s;
}
.zf-search:hover { background: var(--line); }
.zf-search__btn { border: 0; background: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; flex: none; }
.zf-search input[type=search] {
	border: 0; background: none; outline: none; min-width: 0; width: 100%; padding: 0 16px 0 0; font-size: 16px;
}
.zf-search input::placeholder { color: var(--ink-2); }
.zf-search input::-webkit-search-cancel-button { display: none; }

/* --- Promo strip ------------------------------------------------------- */

.zf-promo { background: var(--snow); text-align: center; position: relative; min-height: 56px; display: grid; }
.zf-promo p {
	grid-area: 1 / 1; margin: 0; padding: 10px var(--gutter); align-self: center;
	font-size: 14px; font-weight: 500;
	opacity: 0; transition: opacity .5s ease;
}
.zf-promo p.is-active { opacity: 1; }
.zf-promo a { text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }

/* --- Drawer (mobile nav) ----------------------------------------------- */

.zf-drawer { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.35); }
.zf-drawer[hidden] { display: none; }
.zf-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw);
	background: #fff; overflow-y: auto; padding: 20px 24px 40px;
	animation: zf-slide .3s ease;
}
@keyframes zf-slide { from { transform: translateX(100%); } }
.zf-drawer__close { display: block; margin-left: auto; border: 0; background: none; padding: 8px; }
.zf-search--drawer { width: 100%; margin: 8px 0 24px; }
.zf-drawer__nav > li { border: 0; }
.zf-drawer__nav summary,
.zf-drawer__top {
	display: flex; justify-content: space-between; align-items: center;
	padding: 10px 0; font-size: 24px; font-weight: 500; list-style: none; cursor: pointer;
}
.zf-drawer__nav summary::-webkit-details-marker { display: none; }
.zf-drawer__nav details[open] summary .zf-icon { transform: rotate(180deg); }
.zf-drawer__nav details a { display: block; padding: 6px 0; color: var(--ink-2); font-weight: 500; }
.zf-drawer__nav details .zf-mega__head { margin: 16px 0 4px; }
.zf-drawer__all { color: var(--ink) !important; text-decoration: underline; }
.zf-drawer__foot { margin-top: 32px; }
.zf-drawer__foot p { color: var(--ink-2); font-size: 18px; font-weight: 500; }
.zf-drawer__foot .zf-btn { margin: 0 8px 12px 0; padding: 8px 20px; min-height: 40px; }
.zf-drawer__line { display: flex; align-items: center; gap: 14px; padding: 10px 0; font-weight: 500; }

/* --- Hero -------------------------------------------------------------- */

.zf-hero { max-width: var(--max); margin: 0 auto 72px; padding: 0 var(--gutter); }
.zf-hero__inner {
	position: relative; overflow: hidden; background: var(--snow);
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
	min-height: min(78vh, 760px);
}
.zf-hero__copy { position: relative; z-index: 2; padding: clamp(32px, 6vw, 96px); }
.zf-hero__copy .zf-display { font-size: clamp(56px, 8.5vw, 140px); }
.zf-hero__lede { max-width: 440px; margin: 0 0 28px; font-size: 18px; }
.zf-hero__ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.zf-hero__ctas .zf-btn--light { border-color: #cacacb; }
.zf-hero__media { position: relative; height: 100%; display: grid; place-items: center; }
.zf-hero__media { overflow: hidden; }
.zf-hero__media img { height: 100%; max-height: 760px; width: auto; object-fit: contain; transform: scale(1.45); animation: zf-float 6s ease-in-out infinite; }
@keyframes zf-float { 50% { transform: scale(1.45) translateY(-2%); } }
.zf-hero__word { display: none; }
.zf-hero__tag { position: absolute; left: clamp(32px, 6vw, 96px); bottom: 28px; z-index: 2; font-size: 14px; color: var(--ink-2); }
.zf-hero__tag a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* --- Sections ---------------------------------------------------------- */

.zf-section { margin: 0 0 72px; }
.zf-section > .zf-h2 { margin-bottom: 20px; }

/* Product rail */
.zf-rail { margin: 0 0 72px; }
.zf-rail__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 16px; }
.zf-rail__actions { display: flex; align-items: center; gap: 12px; }
.zf-rail__actions .zf-link { margin-right: 8px; }
.zf-rail__track {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3);
	gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	scroll-behavior: smooth;
}
.zf-rail__track::-webkit-scrollbar { display: none; }
.zf-rail__track > li { scroll-snap-align: start; }

/* Brand tiles */
.zf-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.zf-brand {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	aspect-ratio: 4 / 5; padding: 0 20px 18px; background: var(--snow); overflow: hidden;
}
.zf-brand img {
	position: absolute; inset: 0 0 auto; width: 100%; height: 78%; object-fit: cover; object-position: center 58%;
	transition: transform .4s ease;
}
.zf-brand:hover img { transform: scale(1.06) rotate(-4deg); }
.zf-brand__name { position: relative; font-family: var(--display); font-size: 28px; text-transform: uppercase; line-height: 1; }
.zf-brand__count { position: relative; color: var(--ink-2); font-size: 14px; }

/* Features */
.zf-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.zf-feature { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--snow); }
.zf-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.zf-feature:hover img { transform: scale(1.03); }
.zf-feature--dark { background: #1b1b1b; }
.zf-feature--dark { background: var(--snow); }
.zf-feature--dark img { object-fit: cover; object-position: center 35%; transform: scale(1.1); }
.zf-feature--dark .zf-feature__copy { color: var(--ink); top: 48px; bottom: auto; }
.zf-feature--dark img { object-position: center 70%; }
.zf-feature--dark .zf-btn--light { background: var(--ink); color: #fff; border-color: var(--ink); }
.zf-feature--photo::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.zf-feature__copy { position: absolute; left: 48px; right: 48px; bottom: 48px; z-index: 1; color: #fff; }
.zf-feature__copy .zf-display { margin-bottom: 20px; }

/* Category circles */
.zf-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 24px 12px; }
.zf-cat { text-align: center; }
.zf-cat__img { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--snow); margin-bottom: 12px; overflow: hidden; }
.zf-cat__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform .3s; }
.zf-cat:hover .zf-cat__img img { transform: scale(1.25); }
.zf-cat__name { font-weight: 500; }

/* Men/Women/Kids */
.zf-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.zf-tile { position: relative; aspect-ratio: 3 / 4; background: var(--snow); display: grid; place-items: center; overflow: hidden; }
.zf-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.zf-tile:hover img { transform: scale(1.05); }
.zf-tile .zf-btn { position: absolute; left: 32px; bottom: 32px; border-color: var(--ink); background: #fff; }
.zf-tile:hover .zf-btn { background: var(--ink); color: #fff; }

/* Supplements band */
.zf-fuel {
	display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 32px;
	background: linear-gradient(135deg, var(--blue) 0%, #0f5a9e 100%); color: #fff;
	padding: clamp(32px, 5vw, 72px);
}
.zf-fuel .zf-btn { background: #fff; color: var(--ink); border-color: #fff; }
.zf-fuel .zf-btn:hover { background: var(--accent); border-color: var(--accent); }
.zf-fuel__img { justify-self: center; background: #fff; border-radius: 50%; padding: 8%; width: min(380px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.zf-fuel__img img { max-height: 100%; object-fit: contain; }

/* Perks */
.zf-perks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 72px; }
.zf-perk { display: flex; gap: 14px; align-items: flex-start; padding: 24px; background: var(--snow); }
.zf-perk strong { display: block; font-weight: 500; }
.zf-perk span { color: var(--ink-2); font-size: 14px; }

/* --- Product card ------------------------------------------------------ */

.zf-card { list-style: none; margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; }
.zf-card__link { display: block; }
.zf-card__media { position: relative; aspect-ratio: 1; background: var(--snow); overflow: hidden; }
.zf-card__img {
	position: absolute; inset: 0; width: 100% !important; height: 100% !important;
	object-fit: cover; transition: opacity .25s ease;
}
.zf-card__img--hover { opacity: 0; }
@media (hover: hover) {
	.zf-card__media.has-hover:hover .zf-card__img:not(.zf-card__img--hover) { opacity: 0; }
	.zf-card__media.has-hover:hover .zf-card__img--hover { opacity: 1; }
}
.zf-card__body { padding: 12px 0 24px; }
.zf-card__badge { color: #9e3500; font-weight: 500; margin: 0 0 2px; font-size: 15px; }
.zf-card.sale .zf-card__badge { color: var(--sale); }
.zf-card__title { font-size: 16px; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.zf-card__sub { color: var(--ink-2); margin: 0; font-size: 16px; }
.zf-card__price { margin: 8px 0 0; font-weight: 500; }
.zf-card__price del, .zf-pdp__price del { color: var(--ink-2); font-weight: 400; margin-left: 8px; }
.zf-card__price ins, .zf-pdp__price ins { text-decoration: none; order: -1; }
.zf-card__price .price, .zf-card__price > span { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.zf-card .onsale, .zf-card .button, .zf-card .star-rating { display: none !important; }

/* --- Listing page (PLP) ------------------------------------------------ */

.zf-main { min-height: 50vh; }
.zf-shop { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.zf-crumbs { font-size: 14px; color: var(--ink-2); padding-top: 16px; }
.zf-crumbs a:hover { color: var(--ink); }
.zf-crumbs .sep { margin: 0 6px; }

.zf-plp__bar {
	position: sticky; top: 0; z-index: 20; background: #fff;
	display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
	padding: 8px 0 16px;
}
.zf-plp__title { font-size: 24px; font-weight: 500; }
.zf-plp__title span { color: var(--ink); }
.zf-plp__tools { display: flex; align-items: center; gap: 24px; }
.zf-plp__toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; font-size: 16px; font-weight: 500; padding: 0; }
.zf-plp[data-filters-hidden] .zf-hide-label, .zf-plp:not([data-filters-hidden]) .zf-show-label { display: none; }
.woocommerce-ordering { margin: 0 !important; }
.woocommerce-ordering select {
	border: 0; background: transparent; font-weight: 500; font-size: 16px; padding: 4px 24px 4px 0; cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right center; background-size: 18px;
}

.zf-plp__body { display: grid; grid-template-columns: 260px 1fr; gap: 0 48px; transition: grid-template-columns .3s ease; }
.zf-plp[data-filters-hidden] .zf-plp__body { grid-template-columns: 0 1fr; gap: 0; }
.zf-plp[data-filters-hidden] .zf-filters { visibility: hidden; opacity: 0; }

.zf-filters {
	position: sticky; top: 90px; align-self: start;
	max-height: calc(100vh - 110px); overflow-y: auto; padding: 0 12px 40px 0;
	scrollbar-width: thin; transition: opacity .2s;
}
.zf-filters__mobile-head { display: none; }
.zf-filters__clear { display: inline-block; margin-bottom: 12px; text-decoration: underline; font-weight: 500; }
.zf-filters__back { display: flex; align-items: center; gap: 4px; font-weight: 500; margin-bottom: 8px; }
.zf-filters__back .zf-icon { width: 18px; height: 18px; }
.zf-filter { border-top: 1px solid var(--line); }
.zf-filter summary {
	list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
	padding: 14px 0; font-weight: 500;
}
.zf-filter summary span { margin-right: auto; margin-left: 4px; }
.zf-filter summary::-webkit-details-marker { display: none; }
.zf-filter summary .zf-icon { width: 20px; height: 20px; transition: transform .2s; }
.zf-filter[open] summary .zf-icon { transform: rotate(180deg); }
.zf-filter__list { padding-bottom: 16px; }
.zf-filter__list.is-long li:nth-child(n+9) { display: none; }
.zf-filter__list.is-expanded li { display: list-item !important; }
.zf-filter__more { border: 0; background: none; padding: 0 0 16px; font-weight: 500; text-decoration: underline; }
.zf-check { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-weight: 500; }
.zf-check:hover .zf-check__box { border-color: var(--ink); }
.zf-check__box { width: 20px; height: 20px; border: 1px solid #cacacb; border-radius: 4px; flex: none; display: grid; place-items: center; }
.zf-check.is-on .zf-check__box { background: var(--ink); border-color: var(--ink); }
.zf-check.is-on .zf-check__box::after { content: ""; width: 10px; height: 6px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }

.zf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.zf-plp[data-filters-hidden] .zf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zf-plp__fab { display: none; }

.woocommerce-pagination { margin: 24px 0 72px; text-align: center; }
.woocommerce-pagination ul.page-numbers { display: inline-flex !important; gap: 6px; border: 0 !important; }
.woocommerce-pagination ul.page-numbers li { border: 0 !important; }
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: grid !important; place-items: center; min-width: 44px; height: 44px; padding: 0 12px !important;
	border-radius: 22px; font-weight: 500; background: var(--snow);
}
.woocommerce-pagination .page-numbers .current { background: var(--ink) !important; color: #fff; }

.zf-plp__results { min-width: 0; }
.zf-empty { padding: 80px 0; text-align: center; }
.zf-empty p { color: var(--ink-2); }

/* --- Product page (PDP) ------------------------------------------------ */

.zf-pdp {
	display: grid; grid-template-columns: minmax(0, 1fr) 456px; gap: 48px;
	max-width: 1280px; margin: 32px auto 80px;
}
.zf-pdp__gallery { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-self: start; position: sticky; top: 80px; }
.zf-pdp__thumbs { display: flex; flex-direction: column; gap: 8px; }
.zf-pdp__thumb { padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--snow); width: 64px; height: 64px; opacity: .6; }
.zf-pdp__thumb.is-active, .zf-pdp__thumb:hover { opacity: 1; outline: 1.5px solid var(--ink); outline-offset: -1.5px; }
.zf-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.zf-pdp__gallery:not(:has(.zf-pdp__thumbs)) { grid-template-columns: 1fr; }
.zf-pdp__stage { position: relative; background: var(--snow); border-radius: 8px; aspect-ratio: 3 / 4; max-height: calc(100vh - 120px); overflow: hidden; }
.zf-pdp__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .3s; display: grid; place-items: center; }
.zf-pdp__slide.is-active { opacity: 1; }
.zf-pdp__slide img { width: 100%; height: 100%; object-fit: contain; }
.zf-pdp__arrows { position: absolute; right: 24px; bottom: 24px; display: flex; gap: 8px; }
.zf-pdp__arrows .zf-round { background: #fff; }

.zf-pdp__info { padding-top: 8px; }
.zf-pdp__brand { display: inline-block; font-weight: 500; color: var(--ink-2); margin-bottom: 4px; }
.zf-pdp__title { font-size: 28px; font-weight: 500; line-height: 1.15; }
.zf-pdp__sub { font-size: 16px; font-weight: 500; margin: 4px 0 16px; }
.zf-pdp__price { font-size: 18px; font-weight: 500; margin: 0 0 4px; }
.zf-pdp__save { color: var(--ok); font-weight: 500; }
.zf-pdp__buy { margin: 32px 0 24px; }
.zf-pdp__buy form.cart { display: flex; flex-direction: column; gap: 12px; }
.zf-pdp__buy .quantity { display: none !important; }
.zf-pdp__buy .single_add_to_cart_button,
.zf-pdp__buy .zf-wa { width: 100%; min-height: 60px; font-size: 16px; }
.zf-pdp__buy .stock { color: var(--ink-2); }

.zf-sizes { border: 0; padding: 0; margin: 0 0 12px; }
.zf-sizes__head { display: flex; justify-content: space-between; width: 100%; font-weight: 500; margin-bottom: 12px; padding: 0; }
.zf-sizes__guide { color: var(--ink-2); }
.zf-sizes__guide:hover { color: var(--ink); }
.zf-sizes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zf-size { position: relative; }
.zf-size input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.zf-size span {
	display: grid; place-items: center; height: 48px; border: 1px solid var(--line); border-radius: 6px;
	font-size: 16px; transition: border-color .15s;
}
.zf-size:hover span { border-color: var(--ink); }
.zf-size input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.zf-size input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.zf-sizes.is-invalid .zf-size span { border-color: var(--sale); }
.zf-sizes.is-invalid .zf-sizes__head span:first-child, .zf-sizes__error { color: var(--sale); }
.zf-sizes__error { margin: 8px 0 0; font-size: 14px; }

.zf-pdp__assure { border-top: 1px solid var(--line); padding: 20px 0; }
.zf-pdp__assure p { display: flex; gap: 12px; font-size: 14px; color: var(--ink-2); }
.zf-pdp__assure strong { color: var(--ink); font-weight: 500; }
.zf-pdp__desc { padding: 8px 0 24px; }
.zf-pdp__facts { list-style: disc; padding-left: 20px; margin-top: 16px; }
.zf-pdp__facts li { margin-bottom: 4px; }

.zf-acc { border-top: 1px solid var(--line); }
.zf-acc:last-child { border-bottom: 1px solid var(--line); }
.zf-acc summary { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; font-size: 20px; font-weight: 500; list-style: none; cursor: pointer; }
.zf-acc summary::-webkit-details-marker { display: none; }
.zf-acc[open] summary .zf-icon { transform: rotate(180deg); }
.zf-acc > div { padding-bottom: 24px; }
.zf-acc a { text-decoration: underline; }

/* --- Size guide modal -------------------------------------------------- */

.zf-modal { border: 0; border-radius: 12px; padding: 32px; max-width: 640px; width: calc(100% - 32px); }
.zf-modal::backdrop { background: rgba(0,0,0,.4); }
.zf-modal__close { position: absolute; top: 16px; right: 16px; border: 0; background: var(--snow); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; }
.zf-modal .zf-h2 { margin-bottom: 12px; }
.zf-modal p { color: var(--ink-2); }
.zf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.zf-table th, .zf-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.zf-table th { font-weight: 500; }

/* --- Floating WhatsApp ------------------------------------------------- */

.zf-wa-float {
	position: fixed; right: 20px; bottom: 20px; z-index: 40;
	width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
	background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18);
	transition: transform .2s;
}
.zf-wa-float:hover { transform: scale(1.06); }

/* --- Footer ------------------------------------------------------------ */

.zf-footer { border-top: 1px solid var(--line); margin-top: 24px; }
.zf-footer__inner { max-width: var(--max); margin: 0 auto; padding: 40px var(--gutter) 24px; }
.zf-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-bottom: 48px; }
.zf-footer__col { display: flex; flex-direction: column; gap: 10px; }
.zf-footer__col a { color: var(--ink-2); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.zf-footer__col a:hover { color: var(--ink); }
.zf-footer__col .zf-icon { width: 18px; height: 18px; }
.zf-footer__head { font-weight: 500; margin: 0 0 8px; }
.zf-footer__note { color: var(--ink-2); font-size: 14px; margin: 0; }
.zf-footer__pay { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.zf-footer__pay span { font-size: 12px; font-weight: 600; border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }
.zf-footer__base { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 12px; border-top: 1px solid var(--line); padding-top: 20px; }

/* --- Pages ------------------------------------------------------------- */

.zf-page { padding-top: 40px; padding-bottom: 80px; max-width: 1200px; }
.zf-page__title { font-family: var(--display); font-size: clamp(36px, 5vw, 64px); text-transform: uppercase; margin-bottom: 32px; line-height: 1; font-weight: 400; }
.zf-prose { font-size: 16px; }
.zf-prose a:not(.button) { text-decoration: underline; }
.zf-prose a.button { text-decoration: none; }
.zf-404 { text-align: center; padding: 120px var(--gutter); }

/* --- WooCommerce: notices, cart, checkout, account -------------------- */

.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	list-style: none; margin: 16px 0 24px !important; padding: 16px 20px !important;
	background: var(--snow); border: 0 !important; border-left: 4px solid var(--ink) !important; border-radius: 4px;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce-error { border-left-color: var(--sale) !important; flex-direction: column; align-items: flex-start; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; min-height: 40px; padding: 8px 18px; }

.woocommerce-cart .zf-page, .woocommerce-checkout .zf-page, .woocommerce-account .zf-page { max-width: 1100px; }
.woocommerce table.shop_table { border: 0; border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th { font-weight: 500; text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.woocommerce table.shop_table td { padding: 20px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.woocommerce table.cart img { width: 120px; background: var(--snow); }
.woocommerce table.cart td.product-name a { font-weight: 500; }
.woocommerce table.cart td.product-name dl.variation { color: var(--ink-2); margin: 4px 0 0; font-size: 14px; }
.woocommerce table.cart td.product-name dl.variation dt, .woocommerce table.cart td.product-name dl.variation dd { display: inline; margin: 0; }
.woocommerce table.cart td.product-name dl.variation dd p { display: inline; margin: 0; }
.woocommerce a.remove { color: var(--ink-2) !important; font-size: 22px; width: 32px; height: 32px; line-height: 30px; text-align: center; border-radius: 50%; display: inline-block; }
.woocommerce a.remove:hover { background: var(--snow); color: var(--ink) !important; }
.woocommerce .quantity .qty { width: 72px; height: 44px; border: 1px solid #cacacb; border-radius: 8px; text-align: center; }
.woocommerce .cart .actions .coupon { display: flex; gap: 8px; }
.woocommerce .cart .actions .coupon .input-text { min-width: 180px; }
.woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 420px; margin-left: auto; }
.woocommerce .cart-collaterals h2, .woocommerce-checkout h3 { font-size: 22px; font-weight: 500; margin: 32px 0 16px; }
.woocommerce .wc-proceed-to-checkout .checkout-button { width: 100%; min-height: 60px; }

.woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce .input-text,
.select2-container--default .select2-selection--single {
	width: 100%; min-height: 52px; padding: 12px 16px; border: 1px solid #cacacb; border-radius: 8px; background: #fff; font-size: 16px;
}
.select2-container--default .select2-selection--single { padding: 10px 12px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; right: 8px; }
.woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus { border-color: var(--ink); outline: none; }
.woocommerce form .form-row.woocommerce-invalid .input-text { border-color: var(--sale); }

.woocommerce-checkout #customer_details { margin-bottom: 24px; }
.woocommerce-checkout #order_review_heading { margin-top: 0; }
@media (min-width: 990px) {
	.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto 1fr; gap: 0 64px; align-items: start; }
	.woocommerce-checkout form.checkout > * { grid-column: 1; }
	.woocommerce-checkout form.checkout > #customer_details { grid-row: 1 / span 2; }
	.woocommerce-checkout form.checkout > #customer_details .col-1,
	.woocommerce-checkout form.checkout > #customer_details .col-2 { float: none; width: 100%; }
	.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
	.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 90px; }
}
#order_review { background: var(--snow); padding: 24px; border-radius: 8px; }
.woocommerce-checkout-review-order-table td, .woocommerce-checkout-review-order-table th { border-color: #ddd !important; }
#payment { background: transparent !important; }
#payment ul.payment_methods { padding: 16px 0 !important; border-bottom: 1px solid #ddd !important; }
#payment ul.payment_methods li { list-style: none; margin-bottom: 8px; }
#payment div.payment_box { background: #fff !important; border-radius: 8px; padding: 12px 16px !important; font-size: 14px; color: var(--ink-2); }
#payment div.payment_box::before { display: none; }
#payment #place_order { width: 100%; min-height: 60px; float: none; margin-top: 16px; }

.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px 1fr; gap: 48px; }
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-account:not(.logged-in) .woocommerce > * { grid-column: 1 / -1; }
.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content { float: none !important; width: auto !important; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 10px 0; font-weight: 500; color: var(--ink-2); }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { color: var(--ink); }
.woocommerce-account:not(.logged-in) .u-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.woocommerce-account .u-column1, .woocommerce-account .u-column2 { float: none !important; width: auto !important; }
.woocommerce form.login, .woocommerce form.register { border: 0 !important; padding: 0 !important; margin: 0 !important; }

/* Hide leftovers from plugins that expect another theme */
.woocommerce-store-notice { background: var(--ink) !important; }

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 1200px) {
	.zf-nav__link { padding: 18px 8px; font-size: 15px; }
	.zf-search { width: 140px; }
	.zf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zf-plp[data-filters-hidden] .zf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.zf-pdp { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; }
	.zf-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
	.zf-nav { display: none; }
	.zf-menu-toggle { display: inline-grid; }
	.zf-header__inner { grid-template-columns: auto 1fr; }
	.zf-header__tools .zf-search { width: 40px; background: none; }
	.zf-header__tools .zf-search input { display: none; }
	.zf-header__tools .zf-search .zf-search__btn:hover { background: var(--line); }
	.zf-tool--account { display: none; }

	.zf-rail__track { grid-auto-columns: 46%; }
	.zf-rail__actions .zf-round { display: none; }
	.zf-split, .zf-trio { grid-template-columns: 1fr; }
	.zf-hero__inner { grid-template-columns: 1fr; min-height: 0; }
	.zf-hero__media { order: -1; height: auto; }
	.zf-hero__media img { height: auto; width: 100%; max-height: 62vh; transform: scale(1.25); }
	.zf-hero__copy { padding: 8px 24px 64px; }
	.zf-hero__tag { left: 24px; bottom: 20px; }
	.zf-trio { grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; }
	.zf-tile { scroll-snap-align: start; }
	.zf-feature__copy { left: 24px; right: 24px; bottom: 24px; }
	.zf-fuel { grid-template-columns: 1fr; text-align: center; }
	.zf-fuel__img { width: min(260px, 70%); }

	.zf-plp__body, .zf-plp[data-filters-hidden] .zf-plp__body { grid-template-columns: minmax(0, 1fr); }
	.zf-plp__toggle { display: none; }
	.zf-filters {
		position: fixed; inset: 0; z-index: 120; max-height: none; background: #fff;
		padding: 0 20px 40px; transform: translateY(100%); transition: transform .3s ease; visibility: hidden;
	}
	.zf-filters.is-open { transform: none; visibility: visible; }
	.zf-filters__mobile-head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; padding: 16px 0; z-index: 1; font-size: 20px; }
	.zf-filters__mobile-head button { border: 0; background: var(--snow); border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; }
	.zf-plp[data-filters-hidden] .zf-filters { opacity: 1; }
	.zf-plp__fab {
		display: inline-flex; align-items: center; gap: 8px;
		position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30;
		padding: 12px 22px; border-radius: 30px; border: 0; background: var(--ink); color: #fff; font-weight: 500;
		box-shadow: 0 8px 24px rgba(0,0,0,.2);
	}
	.zf-plp__fab .zf-icon { width: 20px; height: 20px; }
	.zf-grid, .zf-plp[data-filters-hidden] .zf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }

	.zf-pdp { grid-template-columns: 1fr; gap: 24px; margin-top: 0; }
	.zf-pdp__gallery { position: static; grid-template-columns: minmax(0, 1fr); margin: 0 calc(-1 * var(--gutter)); align-self: stretch; }
	.zf-pdp__stage { max-height: none; }
	.zf-pdp__thumbs { display: none; }
	.zf-pdp__stage { border-radius: 0; }
	.zf-pdp__info { order: -1; }
	.zf-pdp__gallery { order: 0; }
	.zf-pdp__buy, .zf-pdp__assure, .zf-pdp__desc, .zf-acc { order: 1; }

	.zf-footer__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.woocommerce-account .woocommerce, .woocommerce-account:not(.logged-in) .u-columns { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 960px) {
	/* Mobile PDP shows title, then images, then the buy box — like Nike */
	.zf-pdp { display: flex; flex-direction: column; gap: 0; }
	.zf-pdp__gallery { margin-top: 16px !important; margin-bottom: 8px !important; }
	.zf-pdp__info { display: contents; }
	.zf-pdp__brand, .zf-pdp__title, .zf-pdp__sub, .zf-pdp__price, .zf-pdp__save { order: -1; margin-left: 0; }
	.zf-pdp__brand { margin-top: 16px; }
}

@media (max-width: 600px) {
	.zf-utility__links { display: none; }
	.zf-utility__inner { justify-content: center; }
	.zf-logo span { font-size: 22px; }
	.zf-logo img { width: 34px; height: 34px; }

	.zf-rail__track { grid-auto-columns: 66%; }
	.zf-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.zf-brand { padding: 14px; }
	.zf-brand__name { font-size: 20px; }
	.zf-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
	.zf-cat__name { font-size: 13px; }
	.zf-perks { grid-template-columns: 1fr; }
	.zf-footer__cols { grid-template-columns: 1fr; }
	.zf-footer__base { flex-direction: column; gap: 8px; }
	.zf-card__title, .zf-card__sub, .zf-card__price { font-size: 14px; }
	.zf-plp__title { font-size: 20px; }
	.zf-plp__bar { flex-wrap: wrap; position: static; }
	.zf-pdp__title { font-size: 24px; }
	.zf-wa-float { width: 50px; height: 50px; right: 14px; bottom: 80px; }
	.woocommerce table.cart img { width: 80px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Size line under cart/checkout items */
.woocommerce dl.variation { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.woocommerce dl.variation dt, .woocommerce dl.variation dd, .woocommerce dl.variation dd p { display: inline; margin: 0; padding: 0; font-weight: 400; }