/* ==========================================================================
   Velanta — base reset & layout
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--color-canvas);
	color: var(--color-ink);
	font-family: var(--font-text);
	font-size: 16px;
	line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; border: none; background: none; cursor: pointer; }
input { font: inherit; }

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

@media (min-width: 1920px) {
	.container { padding: 0 var(--gutter-wide); }
}

.section {
	padding-top: var(--space-section);
	padding-bottom: var(--space-section);
}

@media (max-width: 1023px) {
	.section { padding-top: 32px; padding-bottom: 32px; }
}
@media (max-width: 599px) {
	.section { padding-top: 24px; padding-bottom: 24px; }
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-ink);
	color: var(--color-on-primary);
	padding: var(--space-sm) var(--space-md);
	z-index: 1000;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-lg);
	white-space: nowrap;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.5); opacity: 0.5; }

.btn-primary {
	background: var(--color-ink);
	color: var(--color-on-primary);
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	padding: 16px 32px;
	height: 48px;
}

.btn-secondary {
	background: var(--color-soft-cloud);
	color: var(--color-ink);
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	padding: 16px 32px;
	height: 48px;
}

.btn-outline-on-image {
	background: var(--color-canvas);
	color: var(--color-ink);
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	padding: 12px 24px;
}

.btn-icon-circular {
	background: var(--color-soft-cloud);
	color: var(--color-ink);
	border-radius: var(--radius-full);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* ==========================================================================
   Filter chips & badges
   ========================================================================== */

.filter-chip {
	display: inline-flex;
	align-items: center;
	background: var(--color-canvas);
	color: var(--color-ink);
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	padding: 8px 16px;
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	height: 40px;
}
.filter-chip.is-active {
	background: var(--color-ink);
	color: var(--color-on-primary);
	border-color: var(--color-ink);
}

.badge-promo {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	background: var(--color-canvas);
	border: 1px solid var(--color-hairline);
	color: var(--color-ink);
	border-radius: var(--radius-lg);
	padding: 4px 12px;
	font-family: var(--font-text-medium);
	font-size: 12px;
	font-weight: 500;
	z-index: 2;
}

.badge-sale-text { color: var(--color-sale); font-family: var(--font-text-medium); font-size: 14px; font-weight: 500; }
.price-strike { color: var(--color-mute); text-decoration: line-through; font-family: var(--font-text-medium); font-size: 14px; }
.price-regular { color: var(--color-ink); font-family: var(--font-text-medium); font-size: 16px; font-weight: 500; }

/* ==========================================================================
   Search pill
   ========================================================================== */

.search-pill {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	background: var(--color-soft-cloud);
	border-radius: var(--radius-md);
	padding: 8px 16px;
	height: 40px;
	border: 2px solid transparent;
}
.search-pill:focus-within {
	background: var(--color-canvas);
	border-color: var(--color-ink);
	box-shadow: 0 0 0 12px var(--color-soft-cloud);
}
.search-pill input {
	border: none;
	background: transparent;
	outline: none;
	width: 100%;
	color: var(--color-ink);
	font-size: 16px;
}
.search-pill input::placeholder { color: var(--color-mute); }

/* ==========================================================================
   Swatch dots
   ========================================================================== */

.swatch-row { display: flex; gap: var(--space-xs); align-items: center; margin-bottom: var(--space-sm); }
.swatch-dot {
	width: 12px;
	height: 12px;
	border-radius: var(--radius-full);
	box-shadow: inset 0 0 0 1px var(--color-hairline);
}
.swatch-dot--active {
	box-shadow: 0 0 0 2px var(--color-canvas), 0 0 0 4px var(--color-ink);
}

/* ==========================================================================
   Product card
   ========================================================================== */

.product-card {
	display: block;
	background: var(--color-canvas);
	border-radius: var(--radius-none);
}
.product-card__image {
	position: relative;
	background: var(--color-soft-cloud);
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding-top: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-sm); }
.product-card__name { font-family: var(--font-text-medium); font-size: 16px; font-weight: 500; color: var(--color-ink); }
.product-card__subtitle { font-family: var(--font-text-medium); font-size: 14px; font-weight: 500; color: var(--color-mute); }
.product-card__price { display: flex; align-items: center; gap: var(--space-xs); }

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
}
@media (max-width: 1023px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .product-grid { grid-template-columns: 1fr; } }

.product-grid--4up { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .product-grid--4up { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .product-grid--4up { grid-template-columns: 1fr; } }

/* ==========================================================================
   Campaign tile & category cards
   ========================================================================== */

.campaign-tile {
	position: relative;
	background: var(--color-ink);
	color: var(--color-on-primary);
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.campaign-tile img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.campaign-tile__headline {
	position: relative;
	z-index: 1;
	padding: var(--space-xl);
	align-self: flex-end;
}
.campaign-tile__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-xl);
	background: linear-gradient(to top, rgba(17,17,17,0.55), rgba(17,17,17,0));
}
.campaign-tile__cta { margin-top: var(--space-lg); align-self: flex-start; }

@media (max-width: 1023px) { .campaign-tile { aspect-ratio: 4 / 5; } .t-display-campaign.campaign-tile__headline-text { font-size: 64px; } }
@media (max-width: 599px) { .t-display-campaign.campaign-tile__headline-text { font-size: 48px; } }

.category-icon-card {
	background: var(--color-canvas);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}
.category-icon-card img { width: 80px; height: 80px; object-fit: contain; }
.category-icon-card__label { font-family: var(--font-text-medium); font-size: 14px; font-weight: 500; color: var(--color-ink); }

.member-benefit-card {
	position: relative;
	background: var(--color-ink);
	color: var(--color-on-primary);
	aspect-ratio: 4 / 5;
	overflow: hidden;
}
.member-benefit-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0.85; }
.member-benefit-card__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-xl);
	background: linear-gradient(to top, rgba(17,17,17,0.7), rgba(17,17,17,0.1));
}
.member-benefit-card__cta { margin-top: var(--space-lg); align-self: flex-start; }

/* ==========================================================================
   Sport / category rail (horizontal scroll)
   ========================================================================== */

.rail {
	display: flex;
	gap: var(--space-sm);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--space-sm);
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--color-hairline); border-radius: var(--radius-full); }
.rail-item {
	position: relative;
	flex: 0 0 auto;
	width: 260px;
	aspect-ratio: 4 / 5;
	scroll-snap-align: start;
	overflow: hidden;
	background: var(--color-soft-cloud);
}
.rail-item img { width: 100%; height: 100%; object-fit: cover; }
.rail-item .btn-outline-on-image { position: absolute; left: var(--space-sm); bottom: var(--space-sm); }

@media (max-width: 599px) { .rail-item { width: 70vw; } }

/* ==========================================================================
   Utility bar & primary nav
   ========================================================================== */

.utility-bar {
	background: var(--color-soft-cloud);
	color: var(--color-ink);
	height: 36px;
	display: flex;
	align-items: center;
}
.utility-bar .container { display: flex; justify-content: flex-end; }
.utility-bar ul { display: flex; gap: var(--space-lg); }
.utility-bar a { font-family: var(--font-text-medium); font-size: 12px; font-weight: 500; }

@media (max-width: 639px) { .utility-bar { display: none; } }

.primary-nav {
	background: var(--color-canvas);
	color: var(--color-ink);
	height: 64px;
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
}
.primary-nav .container {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xl);
}
.primary-nav__logo { display: flex; align-items: center; height: 100%; flex-shrink: 0; }
.primary-nav__logo img { height: 40px; width: auto; display: block; }
.primary-nav__links { display: flex; gap: var(--space-xl); flex: 1; justify-content: center; }
.primary-nav__links a {
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}
.primary-nav__links a.is-active,
.primary-nav__links a:hover { border-bottom-color: var(--color-ink); }
.primary-nav__actions { display: flex; align-items: center; gap: var(--space-md); }
.primary-nav__actions .search-pill { width: 220px; }
.primary-nav__hamburger { display: none; }

@media (max-width: 960px) {
	.primary-nav__links { display: none; }
	.primary-nav__actions .search-pill { display: none; }
	.primary-nav__hamburger { display: inline-flex; }
}

.nav-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
}
.nav-drawer.is-open { visibility: visible; }
.nav-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17,17,17,0.4);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.nav-drawer.is-open .nav-drawer__backdrop { opacity: 1; }
.nav-drawer__panel {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 80%;
	max-width: 320px;
	background: var(--color-canvas);
	padding: var(--space-xl);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__panel a {
	display: block;
	padding: var(--space-md) 0;
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	border-bottom: 1px solid var(--color-hairline-soft);
}
.nav-drawer__close { margin-bottom: var(--space-lg); }

/* Sub-nav strip (PLP) */
.sub-nav {
	background: var(--color-canvas);
	box-shadow: inset 0 -1px 0 var(--color-hairline-soft);
}
.sub-nav .container { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: var(--space-md); flex-wrap: wrap; }
.sub-nav__breadcrumb { font-family: var(--font-text-medium); font-size: 14px; font-weight: 500; color: var(--color-mute); }
.sub-nav__breadcrumb a { color: var(--color-mute); }
.sub-nav__controls { display: flex; align-items: center; gap: var(--space-lg); }
.sub-nav__controls button, .sub-nav__controls select {
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-ink);
	border: none;
	background: none;
}

/* ==========================================================================
   Filter sidebar (PLP)
   ========================================================================== */

.plp-layout {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: var(--space-xl);
	align-items: start;
}
@media (max-width: 1023px) { .plp-layout { grid-template-columns: 1fr; } }

.filter-sidebar { background: var(--color-canvas); }
.filter-sidebar[hidden] { display: none; }
.filter-sidebar__group { margin-bottom: var(--space-lg); }
.filter-sidebar__group-title {
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-ink);
	margin-bottom: var(--space-md);
}
.filter-sidebar__item {
	display: flex;
	justify-content: space-between;
	padding: var(--space-xs) 0;
	font-family: var(--font-text);
	font-size: 16px;
	color: var(--color-ink);
}
.filter-sidebar__item.is-active { border-bottom: 1px solid var(--color-ink); }
.filter-sidebar__count { color: var(--color-mute); }

/* ==========================================================================
   PDP
   ========================================================================== */

.pdp-layout { display: grid; grid-template-columns: 88px 1fr 1fr; gap: var(--space-xl); }
@media (max-width: 1023px) { .pdp-layout { grid-template-columns: 1fr; } }

.pdp-thumbs { display: flex; flex-direction: column; gap: var(--space-sm); }
.pdp-thumbs img { background: var(--color-soft-cloud); aspect-ratio: 1/1; object-fit: cover; cursor: pointer; }
@media (max-width: 1023px) { .pdp-thumbs { flex-direction: row; overflow-x: auto; } .pdp-thumbs img { width: 64px; flex-shrink: 0; } }

.pdp-main-image { background: var(--color-soft-cloud); aspect-ratio: 1/1; }
.pdp-main-image img { width: 100%; height: 100%; object-fit: cover; }

.pdp-info__title { margin-bottom: var(--space-sm); }
.pdp-info__price { margin-bottom: var(--space-lg); }
.pdp-info__price .heading-lg-price { font-family: var(--font-heading); font-size: 24px; font-weight: 500; }
.pdp-info .swatch-row { margin: var(--space-lg) 0; }
.pdp-info .btn-primary { width: 100%; margin-top: var(--space-lg); }

.pdp-disclosure-row {
	padding: 24px 0;
	border-bottom: 1px solid var(--color-hairline);
}
.pdp-disclosure-row__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-ink);
}
.pdp-disclosure-row__content {
	margin-top: var(--space-md);
	color: var(--color-charcoal);
	display: none;
}
.pdp-disclosure-row.is-open .pdp-disclosure-row__content { display: block; }
.pdp-disclosure-row__toggle .chevron { transition: transform 0.2s ease; }
.pdp-disclosure-row.is-open .chevron { transform: rotate(180deg); }

/* FAQ row reuses the disclosure pattern but with heading-md weight */
.faq-row .pdp-disclosure-row__toggle { font-family: var(--font-heading); font-size: 16px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--color-canvas); border-top: 1px solid var(--color-hairline); }
.footer-columns {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-xl);
	padding: var(--space-section) 0 var(--space-xl);
}
@media (max-width: 960px) { .footer-columns { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .footer-columns { grid-template-columns: 1fr; } }

.footer-col__title { font-family: var(--font-text-medium); font-size: 16px; font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-md); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col a { font-family: var(--font-text-medium); font-size: 14px; font-weight: 500; color: var(--color-mute); }

.footer-fine-print {
	border-top: 1px solid var(--color-hairline);
	padding: var(--space-lg) 0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-sm);
	font-family: var(--font-utility);
	font-size: 9px;
	font-weight: 500;
	color: var(--color-mute);
}

/* ==========================================================================
   Placeholder imagery (until real photography is uploaded)
   ========================================================================== */

.velanta-placeholder {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
	background: var(--color-soft-cloud);
	background-image: repeating-linear-gradient(45deg, var(--color-hairline-soft) 0, var(--color-hairline-soft) 1px, transparent 1px, transparent 12px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-md);
}
.velanta-placeholder span {
	font-family: var(--font-text-medium);
	font-size: 12px;
	font-weight: 500;
	color: var(--color-mute);
	background: var(--color-canvas);
	padding: 4px 12px;
	border-radius: var(--radius-full);
}
.category-icon-card .velanta-placeholder { position: static; width: 80px; height: 80px; border-radius: var(--radius-full); }
.category-icon-card .velanta-placeholder span { display: none; }

/* ==========================================================================
   WooCommerce notice / form resets kept minimal & on-brand
   ========================================================================== */

.woocommerce-message, .woocommerce-error, .woocommerce-info {
	background: var(--color-soft-cloud);
	color: var(--color-ink);
	border-radius: var(--radius-none);
	padding: var(--space-md) var(--space-lg);
	margin-bottom: var(--space-lg);
	list-style: none;
}
.woocommerce-error { color: var(--color-sale); }

.woocommerce-ordering select {
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	color: var(--color-ink);
	border: none;
	background: transparent;
	appearance: none;
	padding-right: 20px;
}
.woocommerce-result-count { display: none; }
.woocommerce-pagination { display: flex; justify-content: center; gap: var(--space-sm); margin-top: var(--space-section); }
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-full);
	font-family: var(--font-text-medium);
	font-size: 14px;
	font-weight: 500;
	color: var(--color-ink);
}
.woocommerce-pagination .page-numbers.current { background: var(--color-ink); color: var(--color-on-primary); }

/* PDP add-to-cart form */
.pdp-add-to-cart .quantity { display: inline-block; margin-right: var(--space-sm); }
.pdp-add-to-cart .quantity .qty {
	width: 64px;
	height: 48px;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-lg);
	text-align: center;
}
.pdp-add-to-cart .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-ink);
	color: var(--color-on-primary);
	font-family: var(--font-text-medium);
	font-size: 16px;
	font-weight: 500;
	padding: 16px 32px;
	height: 48px;
	border-radius: var(--radius-lg);
	width: 100%;
	margin-top: var(--space-lg);
}
.pdp-add-to-cart table.variations { width: 100%; margin-top: var(--space-lg); }
.pdp-add-to-cart table.variations td { padding: var(--space-xs) 0; }
.pdp-add-to-cart table.variations select {
	width: 100%;
	height: 40px;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-md);
	padding: 0 var(--space-md);
}

.related.products { margin-top: var(--space-section); }
.related.products > h2 { font-family: var(--font-heading); font-size: 32px; font-weight: 500; margin-bottom: var(--space-xl); }
.related.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-sm);
	list-style: none;
	padding: 0;
}
@media (max-width: 1023px) { .related.products ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .related.products ul.products { grid-template-columns: 1fr; } }
.related.products ul.products li.product { list-style: none; }
.related.products ul.products img { background: var(--color-soft-cloud); aspect-ratio: 1/1; object-fit: cover; }
.related.products ul.products .woocommerce-loop-product__title { font-family: var(--font-text-medium); font-size: 16px; font-weight: 500; display: block; margin-top: var(--space-sm); }
.related.products ul.products .price { font-family: var(--font-text-medium); font-size: 16px; font-weight: 500; color: var(--color-ink); }