/*
 * Reefcoff Storefront — WP/Woo glue styles.
 * Bridges the bundled reefcoff.com design system with WordPress output and the
 * JS-driven open/close states (drawers, modals, carousels).
 */

/* ---------- Promo announcement banner ---------- */
promo-carousel { display: block; }
/* Promo bar is fixed to the very top; the site header sits fixed right below it
   (header top offset is driven by reef.js via --reefcoff-header-offset). Both stay
   visible on scroll and never overlap each other. */
.promo-banner {
	position: fixed;
	top: 0; left: 0; right: 0;
	width: 100%;
	background: #1c1c1c;
	z-index: 60;
}
.promo-banner:after { content: none; }
.promo-banner__slide { display: none; }
.promo-banner__slide:first-child { display: block; }
.promo-banner__slider-control { position: absolute; right: var(--space-16); left: auto; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--color-white); cursor: pointer; z-index: 2; padding: 4px; display: none; }
.promo-banner:hover .promo-banner__slider-control { display: block; }
.promo-banner__slider-control .icon-play { display: none; }
.promo-banner__slider-control--paused .icon-pause { display: none; }
.promo-banner__slider-control--paused .icon-play { display: block; }
.promo-banner__popup {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(0, 0, 0, .6);
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--space-16);
}
.promo-banner__popup--open { display: flex; }
.promo-banner__popup img { max-width: min(90vw, 48rem); max-height: 86vh; width: auto; height: auto; display: block; position: static; }
.promo-banner__popup-close {
	position: absolute;
	top: var(--space-12);
	right: var(--space-12);
	left: auto;
	background: none;
	border: 0;
	color: var(--color-white);
	cursor: pointer;
	text-decoration: underline;
	text-transform: uppercase;
}

/* ---------- Custom element wrappers ---------- */
section-header, product-card, product-carousel, media-carousel, media-gallery-desktop,
content-cards, content-cards-carousel, two-column-banner, promo-banner, filter-drawer,
filter-accordion, main-collection, facet-sort-form, product-info, product-form,
main-product-reviews, news-letter, weather-forecast, quickshop-hero {
	display: block;
}

/* ---------- Header spacer (header is position:fixed) ----------
   The header stack is entirely out of flow: `.promo-banner` (32px) and `.header`
   (63px) are BOTH `position:fixed`. `body { padding-top: var(--reefcoff-header-offset) }`
   below already reserves exactly 32+63=95px, which is the correct and only spacer.

   Upstream reef.css also hard-codes the custom element height:
       section-header { display:block; height:4.5rem; }   /* 63px *\/
   Its only in-flow children are the fixed bars, so that 63px box renders as
   PURE EMPTY SPACE between the nav and the page content — the "blank strip under
   the mobile navbar". The `.reefcoff-header-section { padding-bottom }` spacer was
   a second, redundant attempt at the same job.

   Reset both to zero so the fixed bars + body padding are the single source of
   truth for header height. Keep the section itself `display:block` (it wraps the
   mega-menu markup). */
section-header { height: auto; }
.reefcoff-header-section,
body:has([data-promo-banner]) header.reefcoff-header-section {
	height: auto;
	padding-bottom: 0;
	margin-top: 0;
	display: block;
}
/* Admin bar shifts the fixed bars down; body padding already tracks the offset
   via --reefcoff-header-offset, so no extra spacer is needed here either. */
body.admin-bar .reefcoff-header-section { padding-bottom: 0; }
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .reefcoff-header-section { padding-bottom: 0; }
	body.admin-bar .header { top: 46px; }
}

/* Mega panel visibility driven by aria-hidden (bridged from reefcoff's .is-visible).
   display toggling (not opacity) keeps the panel deterministic without the
   original SplitType/swiper runtime. */
.mega-menu__panel {
	display: none;
}
.mega-menu__panel[aria-hidden="false"] {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* ---------- Search modal ----------
   Upstream reef.css sizes `.search-modal` as a 33vw x 132vh docked column
   (top:-2.2857rem) left over from the original SplitType/swiper runtime. With our
   plain header the result was a tall white column bleeding down the right edge and
   a search field floating in the middle of the page; on mobile the 100vw input
   container overflowed the viewport by 63px and pushed the heading/close button
   off-screen to the left.

   Rebuilt as a full-width bar that anchors directly beneath the site header on
   every breakpoint, with a proper dimming backdrop. All selectors are anchored
   under `.header__icon--search` (and the open state) so they outrank the plain
   upstream rules without `!important` everywhere. */
.header__icon--search {
	position: static;
}
/* Backdrop: fixed, below the bar, above page content. */
.header__icon--search .header__grid-overlay--search {
	display: none;
}
.header__icon--search.search--open .header__grid-overlay--search {
	display: block;
	position: fixed;
	inset: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: auto;
	height: auto;
	background: rgba(0, 0, 0, .35);
	/* Upstream reef.css leaves .header__grid-overlay at opacity:0 AND
	   visibility:hidden, expecting its own runtime to reveal it. Both must be
	   forced here: an invisible element still occupies space but receives no
	   pointer events, so clicking outside never closed the modal. */
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: none;
	z-index: 40;
}
/* The bar itself. `position:fixed` escapes the header's stacking/overflow context. */
.header__icon--search .search-modal,
.header__icon--search .search-modal.search-modal--open {
	position: fixed;
	top: var(--reefcoff-header-offset, 63px);
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	display: none;
	z-index: 45;
	background: var(--color-white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.header__icon--search.search--open .search-modal {
	display: block;
}
/* Inner form: a single horizontal row, never centered vertically. */
.header__icon--search .search-modal .search {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	height: auto;
	min-height: 0;
	background: transparent;
	transition: none;
}
/* Heading row: title left, close button right, inside the page gutters. */
.header__icon--search .search-modal .search__search-heading-container,
.header__icon--search .search-modal .search .search__search-heading-container {
	display: flex;
	width: 100%;
	padding: var(--space-16) var(--space-16) 0;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}
.header__icon--search .search-modal .search__search-heading,
.header__icon--search .search-modal .search .search__search-heading {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	margin: 0;
}
.header__icon--search .search-modal .search__close-button {
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	line-height: 0;
	flex: 0 0 auto;
}
/* Input row: full width of the gutters, never 100vw (that caused the overflow). */
.header__icon--search .search-modal .search .input-container,
.header__icon--search .search-modal .input-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0 var(--space-16);
	margin: var(--space-16) 0;
	height: auto;
	min-height: 0;
}
.header__icon--search .search-modal .search__input {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 3.25rem;
	/* Left padding clears the absolutely-positioned search button (20px @ 16px inset). */
	padding: 0 3rem 0 3.5rem;
	border: 1px solid var(--color-light-grey);
	border-radius: 8px;
	font-size: 16px;
	background: var(--color-white);
}
/* Only the BUTTON is positioned; the SVG inside it must stay in normal flow.
   (Positioning both double-applied the offset and pushed the icon over the text.) */
.header__icon--search .search-modal .search .search__button {
	position: absolute;
	top: 50%;
	left: calc(var(--space-16) + 14px);
	transform: translateY(-50%);
	margin: 0;
	width: 20px;
	height: 20px;
	background: none;
	border: 0;
	padding: 0;
	line-height: 0;
	z-index: 1;
}
.header__icon--search .search-modal .search .search__button .icon--search {
	position: static;
	top: auto;
	left: auto;
	transform: none;
	margin: 0;
	width: 20px;
	height: 20px;
	display: block;
}
.header__icon--search .search-modal .search .clear-input {
	display: flex;
	position: absolute;
	right: calc(var(--space-16) + 12px);
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	background: none;
	border: 0;
	padding: 0;
	line-height: 0;
	cursor: pointer;
	z-index: 1;
}
.header__icon--search .search-modal .search .clear-input[disabled] {
	display: none;
}
@media (max-width: 767px) {
	.header__icon--search .search-modal,
	.header__icon--search .search-modal.search-modal--open {
		top: var(--reefcoff-header-offset, 56px);
	}
}

/* ---------- Mobile menu drawer ---------- */
.menu-drawer { display: none; }
.menu-drawer.menu-drawer--open,
.menu-drawer.menu-drawer--open[hidden] { display: block !important; }
.menu-drawer .menu-drawer__inner {
	transform: translate3d(100%, 0, 0);
	transition: transform .5s cubic-bezier(0, 0, 0.2, 1);
}
.menu-drawer.menu-drawer--open .menu-drawer__inner { transform: translate3d(0, 0, 0); }
.menu-drawer.menu-drawer--open .menu-drawer__overlay { opacity: 1; }
.menu-drawer__panel { display: none; }
.menu-drawer__panel[aria-hidden="false"] { display: block; }
.menu-drawer__sale { color: var(--color-red); }

/* ---------- Mini-cart drawer ----------
   Reworked from the original. Problems fixed:
   1. The header used `.h4` on the title but reef.css sizes `.mini-cart__header`
      with `font: var(--font-p-2)`, which resolved far larger than the 60px
      header row could hold — "Your Bag (0)" was vertically clipped by
      overflow. Set an explicit, contained type scale.
   2. The drawer sat at z-index 40, below the promo bar (60) and the header
      (55), so the promo strip was painted on top of the drawer.
   3. The overlay only covered the drawer element, leaving the site header
      clickable; a stray click closed the cart unexpectedly.
   Also: mobile gets a full-width panel with safe-area padding. */
.mini-cart {
	position: fixed;
	inset: 0;
	left: auto;
	width: 100%;
	height: 100%;
	z-index: 90;
	pointer-events: none;
	overflow: hidden;
}
.mini-cart.mini-cart--open { pointer-events: auto; }
.mini-cart__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	transition: opacity .3s ease;
	z-index: 0;
}
.mini-cart--open .mini-cart__overlay { opacity: 1; }
.mini-cart__panel {
	width: min(100vw, 30.7142857143rem);
	background-color: var(--color-white);
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	transform: translate3d(100%, 0, 0);
	transition: transform .4s cubic-bezier(0, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.mini-cart--open .mini-cart__panel { transform: translate3d(0, 0, 0); }

.mini-cart__header {
	flex: 0 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 64px;
	border-bottom: .0714285714rem solid var(--color-light-grey);
}
/* Beat reef.css's `.mini-cart__header{font:var(--font-p-2)}` on specificity
   so the title stays inside the header row. */
.mini-cart__panel .mini-cart__header .h4,
.mini-cart__header p.h4,
.mini-cart__header .h4 {
	margin: 0;
	font: var(--font-h4);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* reef.css positions .mini-cart__inner with `position:absolute; inset:0`, which
   covers the header. We lay the panel out as a flex column instead, so the
   inner must be a static flex child that owns the scrolling. Override with
   panel-scoped specificity so the parent theme rule loses. */
.mini-cart__panel .mini-cart__inner,
.mini-cart .mini-cart__inner {
	position: static;
	inset: auto;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	padding: var(--space-24) var(--space-16);
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	-webkit-overflow-scrolling: touch;
}
.mini-cart__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-24); }
.mini-cart__item { display: block; }
.mini-cart__link { display: flex; gap: var(--space-16); text-decoration: none; color: inherit; align-items: flex-start; }
.mini-cart__item-media { flex: 0 0 auto; }
.mini-cart__item-media img { width: 88px; height: 88px; object-fit: contain; background: var(--color-off-white); display: block; }
.mini-cart__item-info { display: flex; flex-direction: column; gap: var(--space-8); min-width: 0; flex: 1 1 auto; }
.mini-cart__item-info strong { display: block; word-break: break-word; }
.mini-cart__item-price { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
.mini-cart__line { display: flex; justify-content: flex-end; margin-top: var(--space-8); }
.mini-cart__remove { color: var(--color-dark-grey); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.mini-cart__bottom {
	flex: 0 0 auto;
	border-top: .0714285714rem solid var(--color-light-grey);
	padding: var(--space-24) var(--space-16);
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	background: var(--color-white);
}
.mini-cart__subtotal { display: flex; justify-content: space-between; gap: 12px; }
.mini-cart__disclaimer { color: var(--color-dark-grey); }
.mini-cart__empty { display: flex; flex-direction: column; gap: var(--space-24); align-items: center; padding-top: var(--space-56); text-align: center; }
.mini-cart__close {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 4px;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mini-cart__close .icon--close { display: block; }
body.mini-cart-open { overflow: hidden; }
/* Keep the promo banner from painting over an open cart. */
body.mini-cart-open .promo-banner,
body.mini-cart-open [data-promo-banner],
body.mini-cart-open [data-promo-carousel] { display: none !important; }

@media (max-width: 767px) {
	.mini-cart__panel { width: 100vw; max-width: 100vw; }
	.mini-cart__inner { padding: 20px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
	.mini-cart__header { min-height: 56px; padding: 0 14px; }
	.mini-cart__panel .mini-cart__header .h4,
	.mini-cart__header .h4 { font-size: 1.125rem; }
	.mini-cart__item-media img { width: 72px; height: 72px; }
	.mini-cart__bottom { padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Carousels: scroll-snap tracks ---------- */
.reefcoff-track {
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.reefcoff-track::-webkit-scrollbar { display: none; }
.reefcoff-track > * { scroll-snap-align: start; }
@media (max-width: 1023px) {
	.product-carousel__cards.reefcoff-track > .product-card { flex: 0 0 46%; }
}
@media (min-width: 1024px) {
	.product-carousel__cards.reefcoff-track > .product-card { flex: 0 0 calc(25% - 13px); }
	.content-cards__cards.reefcoff-track > .content-cards__card { flex: 0 0 33.3333%; scroll-snap-align: start; }
}
.product-carousel__controls { display: none; }
@media (min-width: 1024px) {
	.product-carousel__controls {
		display: flex;
		gap: var(--space-8);
		justify-content: flex-end;
	}
	.product-carousel__arrow {
		background: none;
		border: .0714285714rem solid var(--color-light-grey);
		border-radius: 50%;
		width: 2.8571428571rem;
		height: 2.8571428571rem;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all .3s ease;
	}
	.product-carousel__arrow:hover { border-color: var(--color-black); }
	.product-carousel__arrow.is-hidden { opacity: .3; pointer-events: none; }
}

/* ---------- Product card swatches ---------- */
.product-card__swatches { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.product-card__swatch { width: 2.8571428571rem; height: 2.8571428571rem; border-radius: 50%; overflow: hidden; border: .0714285714rem solid transparent; padding: 0; background: none; cursor: pointer; }
.product-card__swatch img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-card__swatch:hover { border-color: var(--color-medium-grey); }

/* ---------- PLP ---------- */
.main-collection__wrapper { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
	.main-collection__wrapper { grid-template-columns: 16.2857142857rem 1fr; gap: var(--space-40); }
	.main-collection__filters { position: sticky; top: 63px; align-self: start; }
}
.product-card { position: relative; }
.reefcoff-no-results { padding: var(--space-56) 0; }
.sort__options {
	font: var(--font-p-4);
	border: 0;
	background: transparent;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.filter__drawer-footer { padding: var(--space-16); }
@media (min-width: 1024px) {
	.filter__drawer-footer { display: none; }
}
@media (max-width: 1023px) {
	.main-collection__filter-drawer {
		position: fixed;
		inset: 0;
		/* Above the sticky header (z 55) and the promo bar (z 60) — at z 30 the
		   fixed header covered the panel's own heading row, so its close button
		   was unreachable. Below the mini-cart (z 90). */
		z-index: 75;
		/* No scrim: the panel slides over the page and leaves the header
		   visible behind it, exactly like the reference. The wrapper still
		   covers the viewport and swallows the tap that dismisses the drawer. */
		background: transparent;
		display: block;
		visibility: hidden;
		pointer-events: none;
	}
	.main-collection__filter-drawer.filter-drawer--open {
		visibility: visible;
		pointer-events: auto;
	}
	.main-collection__filter-drawer .filter__drawer {
		position: absolute;
		right: 0;
		top: 0;
		height: 100%;
		width: min(79vw, 26rem);
		background: var(--color-white);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		box-shadow: 0 0 24px rgba(0, 0, 0, .14);
		/* Upstream parks the panel off-screen with `translateX(100%)` and only
		   releases it through `.filter__drawer--open` — a class the original JS
		   set on the panel itself. Ours toggles it on the <filter-drawer>
		   wrapper instead, so the panel stayed 100% off the right edge and the
		   drawer read as "empty". Repeat the reset here for both hooks. */
		transform: translateX(100%);
		transition: transform .33s ease-in-out;
	}
	.main-collection__filter-drawer.filter-drawer--open .filter__drawer,
	.main-collection__filter-drawer .filter__drawer.filter-drawer--open {
		transform: translateX(0);
	}
	/* The heading stays put; only the facet list scrolls. */
	.main-collection__filter-drawer .filter__drawer-content {
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding: var(--space-16);
	}
}
@media (min-width: 1024px) {
	.filter__drawer-heading { display: none; }
}

/* ---------- PDP ---------- */
.main-product__wrap { display: grid; grid-template-columns: 1fr; gap: var(--space-24); }
@media (min-width: 1024px) {
	.main-product__wrap { grid-template-columns: 1.45fr 1fr; gap: var(--space-80); align-items: start; }
}
.main-product__desktop-container { display: none; }
.main-product__price--desktop { display: none; }
@media (min-width: 1024px) {
	.main-product__desktop-container { display: block; }
	.main-product__price--desktop { display: block; }
	.main-product__mobile-top-container { display: none; }
}
.main-product__media { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.main-product__media-item { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.main-product__media--wrap { position: relative; }
.main-product__badge {
	position: absolute;
	top: var(--space-12);
	left: var(--space-12);
	z-index: 2;
	padding: var(--space-4) var(--space-12);
	border-radius: .2857142857rem;
}
.main-product__media-item .image img { width: 100%; height: auto; display: block; object-fit: contain; }
.media-slider__slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.media-slider__slides::-webkit-scrollbar { display: none; }
.media-slider__slide { flex: 0 0 100%; scroll-snap-align: start; }
.media-slider__item { position: relative; }
.media-slider__item img { width: 100%; height: auto; display: block; object-fit: contain; }
.media-slider__pagination { display: flex; gap: var(--space-8); justify-content: center; padding: var(--space-16) 0; }
.media-slider__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-light-grey); }
.media-slider__dot.is-active { background: var(--color-black); }

/* Color swatches (buy box) */
.product-form__swatches--images { display: flex; gap: var(--space-12); flex-wrap: wrap; }
.product-form__swatch--image {
	border: .0714285714rem solid transparent;
	border-radius: 50%;
	padding: 2px;
	background: none;
	cursor: pointer;
	width: 5.2142857143rem;
	height: 5.2142857143rem;
}
.product-form__swatch--image img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.product-form__swatch--selected { border-color: var(--color-black); }

/* Size pills */
.product-form__sizes { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-8); padding: 0; margin: var(--space-12) 0 0; }
.product-form__sizes-option-input { position: absolute; opacity: 0; pointer-events: none; }
.product-form__sizes-option {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 4.0714285714rem;
	padding: var(--space-12) var(--space-8);
	border: .0714285714rem solid var(--color-light-grey);
	border-radius: .2857142857rem;
	cursor: pointer;
	font: var(--font-p-4);
	transition: all .2s ease;
	text-align: center;
}
.product-form__sizes-option:hover { border-color: var(--color-black); }
.product-form__sizes-option-input:checked + .product-form__sizes-option {
	border-color: var(--color-black);
	background: var(--color-black);
	color: var(--color-white);
}
.product-form__sizes-option--disabled { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.product-form__option-label { display: flex; justify-content: space-between; align-items: center; }
.product-form__size-guide { background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--color-black); }

/* Buy box price (desktop shows under title; mobile near ATC) */
.product-form .reefcoff-promo-desktop { margin-top: var(--space-16); }
@media (max-width: 1023px) {
	.reefcoff-promo-desktop { display: none; }
}

/* Size guide modal */
.reefcoff-modal {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-16);
}
.reefcoff-modal[hidden] { display: none; }
.reefcoff-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.reefcoff-modal__content {
	position: relative;
	background: var(--color-white);
	max-width: 40rem;
	width: 100%;
	max-height: 80vh;
	overflow: auto;
	padding: var(--space-40);
}
.reefcoff-modal__content table { width: 100%; border-collapse: collapse; margin-top: var(--space-16); }
.reefcoff-modal__content th, .reefcoff-modal__content td { border: .0714285714rem solid var(--color-light-grey); padding: var(--space-8) var(--space-12); text-align: left; font: var(--font-p-4); }
.reefcoff-modal__close {
	position: absolute;
	top: var(--space-12);
	right: var(--space-12);
	background: none;
	border: 0;
	cursor: pointer;
}

/* ---------- WooCommerce integration ---------- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	font: var(--font-p-3);
	padding: var(--space-16);
	margin: 0 0 var(--space-24);
	background: var(--color-off-white);
	border-left: .2142857143rem solid var(--color-teal);
	list-style: none;
}
.woocommerce-error { border-left-color: var(--color-red); }
.woocommerce-notices-wrapper:empty { display: none; }

/* Clear WP default styles that leak through */
body.reefcoff-site {
	margin: 0;
	background: var(--color-white);
}
/* Zero-specificity base resets so reefcoff.css component rules always win. */
:where(body.reefcoff-site img) { max-width: 100%; height: auto; }
:where(body.reefcoff-site a) { color: inherit; }
:where(body.reefcoff-site button) { font-family: inherit; }
.screen-reader-text,
.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link:focus {
	position: fixed !important;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100;
	background: var(--color-white);
	padding: var(--space-12);
}

/* Swiper-class compat (reefcoff.css references --swiper vars only) */
.swiper-pagination { min-height: 1rem; }

/* ===== Persistent top bar + nav (both stay fixed on scroll) ===== */
.header {
	/* Higher than promo so hover panels/dropdowns never sit under the bar.
	   Promo (z-index 60) and header don't overlap vertically anyway. */
	z-index: 55;
	top: var(--reefcoff-header-offset, 32px);
}
body {
	/* Reserve space for the fixed promo bar + fixed nav so page content
	   starts below them. reef.js updates --reefcoff-header-offset. */
	padding-top: var(--reefcoff-header-offset, 0px);
}

/* ===== Static policy/landing page typography =====
   page.php wraps WP block-editor content in .main-product__tab-text (the same
   wrapper used by the product description tab). reef.css resets *all* child
   text to --font-p-3 inside that wrapper with no margin recovery, which
   collapses h2/h3/p together for Terms, Privacy, Shipping, etc. pages.
   Restore proper rhythm and heading hierarchy for block content only.

   Selector specificity note: reef.css uses
   `.main-product__tab-text:not(.main-product__tab-text--benefits) *` which has
   specificity (0,2,1). We use `:not(...).main-product__tab-text h2/h3/p` to
   match (0,3,2) so our rules win without `!important`. */
.main-product__tab-text:not(.main-product__tab-text--benefits) h2,
.main-product__tab-text:not(.main-product__tab-text--benefits) h3,
.main-product__tab-text:not(.main-product__tab-text--benefits) .wp-block-heading {
	margin: 1.7142857143rem 0 0.5714285714rem;
	font-weight: 600;
	color: var(--color-off-black);
	line-height: 1.25;
}
.main-product__tab-text:not(.main-product__tab-text--benefits) h2 { font-size: 1.4285714286rem; }
.main-product__tab-text:not(.main-product__tab-text--benefits) h3,
.main-product__tab-text:not(.main-product__tab-text--benefits) .wp-block-heading { font-size: 1.1428571429rem; letter-spacing: -0.5px; }
/* WP block editor wraps heading text in <strong>. reef.css uses
   .main-product__tab-text:not(--benefits) * to reset every descendant font
   back to --font-p-3 (size:1rem / weight:400), so the visible text shrinks
   back to 14px and the strong styling is lost. Restore heading size + weight
   on the inner strong only when it sits inside a heading element. */
.main-product__tab-text:not(.main-product__tab-text--benefits) h1 strong,
.main-product__tab-text:not(.main-product__tab-text--benefits) h2 strong,
.main-product__tab-text:not(.main-product__tab-text--benefits) h3 strong,
.main-product__tab-text:not(.main-product__tab-text--benefits) h4 strong,
.main-product__tab-text:not(.main-product__tab-text--benefits) h5 strong,
.main-product__tab-text:not(.main-product__tab-text--benefits) h6 strong,
.main-product__tab-text:not(.main-product__tab-text--benefits) .wp-block-heading strong {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}
.main-product__tab-text:not(.main-product__tab-text--benefits) p,
.main-product__tab-text:not(.main-product__tab-text--benefits) .wp-block-paragraph {
	margin: 0 0 1rem;
	font: inherit;
	color: var(--color-off-black);
	line-height: 1.6;
}
.main-product__tab-text > *:first-child { margin-top: 0 !important; }
.main-product__tab-text p + h2,
.main-product__tab-text p + h3,
.main-product__tab-text .wp-block-paragraph + .wp-block-heading {
	margin-top: 2.2857142857rem;
}
.main-product__tab-text a {
	color: var(--color-off-black);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.main-product__tab-text a:hover { color: var(--color-teal); }
.main-product__tab-text strong { font-weight: 600; }

/* ===== Mobile menu drawer state compat =====
   reef.css drives visibility off `body.is-drawer-open`. reef.js currently only
   toggles `.menu-drawer--open` on the drawer itself (which CSS doesn't honor)
   and never flips aria-expanded on the hamburger button. Sync both states and
   make the .menu-drawer--open class also work as a fallback. */
.menu-drawer--open,
body.is-drawer-open .menu-drawer { pointer-events: auto; }
.menu-drawer--open .menu-drawer__inner,
body.is-drawer-open .menu-drawer__inner {
	transform: translate3d(0, 0, 0);
	transition-duration: .5s;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.menu-drawer--open .menu-drawer__overlay,
body.is-drawer-open .menu-drawer__overlay { opacity: 1; }


/* ===== Mobile menu drawer stacking fix =====
   reef.css gives .menu-drawer z-index:10 but the promo banner sits at z-index:60
   and the header at z-index:55, so when the drawer slides in it ends up visually
   'under' both of them. The Free Shipping promo bar keeps showing at the top of
   the open drawer and the drawer's close button (inside .menu-drawer__header)
   gets hidden behind the promo strip. Lift the whole drawer above promo + header
   so its own close button and overlay are visible. */
.menu-drawer { z-index: 70; }
.menu-drawer__overlay { z-index: 70; }
/* The overlay is a sibling of .menu-drawer__inner, both inside the drawer.
   To keep the header (with its close button) visible above the dim overlay,
   promote .menu-drawer__inner above the overlay. */
.menu-drawer__inner { z-index: 71; position: absolute; }
/* Close button itself needs to sit on top of any sibling header content. */
.menu-drawer__header,
.menu-drawer__close-btn { position: relative; z-index: 72; }
/* drawer is rendered INSIDE .header (which is fixed z-index:55, creating a
   stacking context). The promo banner is a sibling of .header at the same
   level with z-index:60, so it visually sits on top of the drawer even
   though the drawer's own z-index is 70.

   We can't simply hide .header because the drawer is a child of .header. The
   cleanest CSS-only fix is to hide the promo banner while the drawer is open
   (the drawer's own close button is the user-facing affordance to leave the
   drawer). The fixed .header still hosts the drawer, but the only visible
   part of .header at that point is the drawer itself. */
body.is-drawer-open .promo-banner,
body.is-drawer-open [data-promo-banner] { display: none !important; }
body.is-drawer-open [data-promo-carousel] { display: none !important; }
/* Drop header z-index so it doesn't fight the drawer visually. */
body.is-drawer-open .header { z-index: 70; }


/* ===== Mobile menu drawer: redesign =====
   Problem with the previous build: every row used the `.h4` class, which
   resolves to 24px/600 in reef.css. Inside a 390px drawer that made long
   labels ("Reecoff x Jenny Reimold") dominate the screen, forced awkward
   wrapping, and produced uneven 48-56px gaps. The panel header also stacked
   a "Main Menu" back button directly above the "Women" breadcrumb, so the two
   collided.

   Rebuilt to match the reference site's drawer rhythm:
     - top-level / sub links ........ 15px / 600 and 14px / 400 respectively
     - rows ......................... 44px tap targets, no vertical gaps
     - panel header ................. single 48px row: back chevron + label
     - group separation ............. 1px hairline dividers
   All selectors are parent-scoped under `.menu-drawer` so they outrank the
   plain `.h4` rules without `!important`. */

.menu-drawer [data-menu-panel]:not([hidden]),
.menu-drawer [data-drawer-home]:not([hidden]) {
	animation: menu-panel-in 0.28s cubic-bezier(0.2, 0, 0, 1);
	transform-origin: right center;
}
@keyframes menu-panel-in {
	from { opacity: 0; transform: translateX(24px); }
	to { opacity: 1; transform: translateX(0); }
}

/* ---- Drawer chrome ---- */
.menu-drawer__header {
	padding: 0 16px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--color-light-grey);
}
.menu-drawer__header p,
.menu-drawer__header .p2 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}
.menu-drawer__close-btn {
	background: none;
	border: 0;
	padding: 4px;
	line-height: 0;
	cursor: pointer;
}

/* ---- Vertical rhythm ----
   The list itself provides no padding; rows are the only spacing.
   IMPORTANT: upstream reef.css makes `.menu-drawer__submenu-list` a flex
   container, which then *distributes* leftover height across the items and
   blew each 44px row apart to ~69px on a tall viewport. Force normal block
   flow so rows keep their own height. */
.menu-drawer__home { padding-top: 0; padding-bottom: 8px; }
.menu-drawer__toplist { padding: 0; margin: 0; list-style: none; display: block; }
.menu-drawer__topitem { list-style: none; }
.menu-drawer__submenu-list { padding: 0; margin: 0; list-style: none; display: block; }
.menu-drawer__nav-item { list-style: none; display: block; }

/* Every row is one consistent 44px tap target with its content on the
   baseline. Both plain links and expander buttons share the same geometry so
   the left edge of the text lines up down the whole list. */
.menu-drawer .menu-drawer__toplink-row {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
}
.menu-drawer .menu-drawer__toplink,
.menu-drawer .menu-drawer__expand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	color: var(--color-off-black);
	/* Override the .h4 (24px) these elements carry by default. */
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
}
.menu-drawer .menu-drawer__toplink:hover,
.menu-drawer .menu-drawer__expand:hover { color: var(--color-black); }

/* The chevron is a small, right-aligned glyph — not a 20px block that shoves
   the label. Fixed basis keeps every row's text end consistent. */
.menu-drawer .menu-drawer__expand .icon--caret-right,
.menu-drawer .menu-drawer__toplink .icon--caret-right {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-left: auto;
	opacity: .55;
}

/* Sub-items read lighter than their section header, and leaf links inside a
   group get a small indent so the hierarchy reads at a glance (the reference
   site uses ~20px).
   NOTE: the expandable rows carry `.menu-drawer__nav-label .h4` on the inner
   span, while leaf rows carry `.menu-drawer__toplink .h4` on the anchor. Both
   must be normalised — targeting only the button/anchor leaves the inner span
   at the .h4 size (24px), which is how the three "Shop by …" rows ended up
   twice as large as their neighbours. */
.menu-drawer .menu-drawer__nav-label,
.menu-drawer .menu-drawer__toplink-row .menu-drawer__toplink,
.menu-drawer .menu-drawer__toplink-row .menu-drawer__expand {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -.01em;
}
.menu-drawer .menu-drawer__submenu-list--level-2 > .menu-drawer__nav-item > .menu-drawer__toplink-row {
	padding-left: 32px;
}
.menu-drawer .menu-drawer__submenu-list--level-2 > .menu-drawer__nav-item > .menu-drawer__toplink-row .menu-drawer__toplink,
.menu-drawer .menu-drawer__submenu-list--level-2 > .menu-drawer__nav-item > .menu-drawer__toplink-row .menu-drawer__toplink-row .menu-drawer__toplink {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-dark-grey);
}
.menu-drawer .menu-drawer__submenu-list--level-2 > .menu-drawer__nav-item > .menu-drawer__toplink-row .menu-drawer__toplink:hover {
	color: var(--color-off-black);
}

.menu-drawer .menu-drawer__sale { color: var(--color-red); }

/* Group separators only — dividing every single row is too busy. The reference
   site draws one hairline after each collapsible group. */
.menu-drawer__topitem + .menu-drawer__topitem { border-top: 1px solid var(--color-light-grey); }
.menu-drawer .menu-drawer__submenu-list--level-1 .menu-drawer__nav-item[data-has-children] { border-top: 1px solid var(--color-light-grey); }
/* The trailing "Explore X" link sits in its own nav-item after the last
   collapsible group, and without a rule above it the row visually merges into
   the group and reads like a small grey sub-item instead of a top-level link.
   `[data-has-children] + .menu-drawer__nav-item` is exactly that row. */
.menu-drawer .menu-drawer__submenu-list--level-1 .menu-drawer__nav-item[data-has-children] + .menu-drawer__nav-item {
	border-top: 1px solid var(--color-light-grey);
}

/* ---- Panel header (breadcrumb row) ----
   Used to stack "Main Menu" above the section name, which collided. Now a
   single 48px bar: back chevron on the left, current section on the right. */
.menu-drawer__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 0 16px;
	border-bottom: 1px solid var(--color-light-grey);
	background: var(--color-white);
	position: sticky;
	top: 0;
	z-index: 2;
}
.menu-drawer__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: var(--color-dark-grey);
	font-weight: 500;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}
.menu-drawer__back:hover { color: var(--color-off-black); }
.menu-drawer__back .icon--arrow-left {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	margin: 0;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	display: block;
	transform: none;
}

.menu-drawer__panel-header .menu-drawer__breadcrumbs {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--color-off-black);
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Trailing image banner ---- */
.menu-drawer__panel > .menu-drawer__tab-banner {
	margin: 8px 0 0;
}
.menu-drawer__tab-banner {
	display: block;
	text-decoration: none;
}
.menu-drawer__tab-media img { display: block; width: 100%; height: auto; }

/* ---- Footer (Explore + utility links) ----
   Both the Explore button and the utility links carry upstream's `p-3` class,
   whose padding fights our own 16px gutter and makes each row start at a
   different x. Pin padding here and let the icon be a fixed 15px glyph. */
.menu-drawer__footer { padding: 0 0 24px; }
.menu-drawer .menu-drawer__explore-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 44px;
	padding: 0 16px;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-off-black);
}
.menu-drawer .menu-drawer__explore-btn > svg:first-child {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin: 0;
}
.menu-drawer__explore-btn .menu-drawer__explore-label { flex: 1 1 auto; }
.menu-drawer__explore-btn .icon--caret-right { margin-left: auto; opacity: .55; width: 16px; height: 16px; flex: 0 0 auto; }
.menu-drawer__footer-grid { padding: 0; margin: 0; list-style: none; display: block; }
.menu-drawer__footer-item { list-style: none; display: block; }
.menu-drawer .menu-drawer__footer-link {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 400;
	color: var(--color-dark-grey);
	text-decoration: none;
}
.menu-drawer__footer-link:hover { color: var(--color-off-black); }

/* Smooth drawer overlay and inner transitions on open/close. */
.menu-drawer__overlay { transition: opacity 0.3s ease; }


/* ===== PDP gallery: reef sale-style carousel + thumbnail strip =====
   The original desktop gallery was a two-column mosaic (first two images full
   width, the rest at 50%) which made every product image a different size and
   the column ran very tall. Match the reference layout instead: one large
   square main image on top, a horizontally scrolling thumbnail strip below,
   arrows on the main image, and a highlighted border on the active thumb. */
.main-product__gallery-slot { width: 100%; }

.pdp-gallery {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.pdp-gallery__stage { position: relative; width: 100%; max-width: 100%; min-width: 0; }

.pdp-gallery__slider {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	background: var(--color-off-white, #f5f5f5);
	overflow: hidden;
}

/* The track is a horizontal scroller. `min-width:0` keeps the flex parent from
   being stretched by the 100%-wide slides (flex items default to min-content). */
.pdp-gallery__track {
	display: flex;
	flex-direction: row;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.pdp-gallery__track::-webkit-scrollbar { display: none; }

.pdp-gallery__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pdp-gallery__slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pdp-gallery__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--color-black, #000);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background-color .2s ease;
	z-index: 2;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.pdp-gallery__slider:hover .pdp-gallery__arrow { opacity: 1; }
.pdp-gallery__arrow:hover { background: #fff; }
.pdp-gallery__arrow--prev { left: 12px; }
.pdp-gallery__arrow--next { right: 12px; }
@media (hover: none) {
	.pdp-gallery__arrow { opacity: 1; }
}

.pdp-gallery__thumbs {
	display: flex;
	flex-direction: row;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 2px;
}
.pdp-gallery__thumbs::-webkit-scrollbar { display: none; }

.pdp-gallery__thumb {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	padding: 0;
	border: 1px solid var(--color-light-grey, #e5e5e5);
	background: var(--color-off-white, #f5f5f5);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.pdp-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.pdp-gallery__thumb:hover { border-color: var(--color-dark-grey, #999); }
.pdp-gallery__thumb.is-active {
	border-color: var(--color-black, #000);
	box-shadow: inset 0 0 0 1px var(--color-black, #000);
}

/* The mobile slider is the mobile gallery — hide the desktop carousel there. */
@media (max-width: 1023px) {
	.pdp-gallery { display: none; }
}
@media (min-width: 1024px) {
	[data-media-slider-wrapper].hide-desktop { display: none !important; }
}

/* ===== Footer newsletter signup =====
   The markup carries `footer__signup-row` / `footer__email-input`, but NOTHING
   in reef.css or reef-wp.css ever styled them — the input was rendering with raw
   browser defaults (`2px inset #767676`, `border-radius:0`, `appearance:auto`)
   and, because the row has no flex context, the button wrapped onto its own line.
   Style the pair as a single joined pill: input left, button right, sharing an
   outer radius. Tokens match the header search field for consistency.
   NOTE: upstream caps `.footer__newsletter` at `max-width:334px`, which left the
   input only 215px once the 111px button took its share. Locally lift the cap so
   the column can breathe; the copy block above still wraps at its own width. */
.footer .footer__newsletter { max-width: 420px; }
.footer .footer__signup-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
}
.footer .footer__email-input {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 46px;
	box-sizing: border-box;
	margin: 0;
	padding: 0 16px;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--color-light-grey);
	border-radius: 8px;
	background: var(--color-white);
	color: var(--color-off-black);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	box-shadow: none;
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.footer .footer__email-input::placeholder {
	color: var(--color-dark-grey);
	opacity: 1;
}
.footer .footer__email-input:hover { border-color: var(--color-dark-grey); }
.footer .footer__email-input:focus,
.footer .footer__email-input:focus-visible {
	border-color: var(--color-off-black);
	box-shadow: 0 0 0 3px rgba(51, 51, 51, .12);
	outline: none;
}
/* The button is an inline-block `.btn .btn--primary` (pill, 12px 32px). Pin its
   height to the input so the two sit on one baseline, and stop it shrinking. */
.footer .footer__signup-row .btn,
.footer .footer__signup-row .btn--primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: 46px;
	margin: 0;
	padding: 0 28px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
/* Inline confirmation/error text under the row. */
.footer .footer__signup-message {
	margin: 8px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-dark-grey);
}
.footer .footer__signup-message.is-error { color: var(--color-red); }

/* Stack on narrow phones: full-width input, full-width button. */
@media (max-width: 479px) {
	.footer .footer__signup-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.footer .footer__signup-row .btn,
	.footer .footer__signup-row .btn--primary {
		width: 100%;
		height: 48px;
	}
	.footer .footer__email-input { height: 48px; }
}

/* ===== WooCommerce forms (my-account, checkout, etc.) =====
   WooCommerce ships `input-text` / `woocommerce-button button` classes, but the
   Storefront-based upstream here never styled them — login fields rendered with
   browser defaults (2px inset grey border, 25px tall) and the submit button was
   a 41×21 text speck. Normalise every WC form control to the same tokens as the
   newsletter + header search fields. */
.woocommerce input.input-text,
.woocommerce textarea.input-text,
.woocommerce select.input-text {
	display: block;
	width: 100%;
	max-width: 420px;
	height: 46px;
	box-sizing: border-box;
	padding: 0 16px;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--color-light-grey);
	border-radius: 8px;
	background: var(--color-white);
	color: var(--color-off-black);
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	box-shadow: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce textarea.input-text { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; }
.woocommerce input.input-text:hover,
.woocommerce textarea.input-text:hover { border-color: var(--color-dark-grey); }
.woocommerce input.input-text:focus,
.woocommerce input.input-text:focus-visible,
.woocommerce textarea.input-text:focus,
.woocommerce textarea.input-text:focus-visible {
	border-color: var(--color-off-black);
	box-shadow: 0 0 0 3px rgba(51, 51, 51, .12);
	outline: none;
}
/* Submit/secondary buttons inside WC forms → same pill as .btn--primary. */
.woocommerce .woocommerce-button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	margin: 0;
	padding: 0 28px;
	border: 1px solid var(--color-off-black);
	border-radius: 200px;
	background-color: var(--color-off-black);
	color: var(--color-white);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease;
}
.woocommerce .woocommerce-button.button:hover {
	background-color: var(--color-black, #000);
	border-color: var(--color-black, #000);
	color: var(--color-white);
	text-decoration: none;
}
/* Form row rhythm: label above field, consistent spacing. */
.woocommerce form .form-row {
	padding: 0;
	margin: 0 0 16px;
}
.woocommerce form .form-row label {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-dark-grey);
	line-height: 1.3;
}
.woocommerce form .form-row .required { color: var(--color-red); text-decoration: none; }

/* My-account section heading: upstream resets the form <h2> to 14px body text,
   which reads as a stray caption under the huge "My account" h1. Give it the
   same treatment as the policy-page headings. */
/* Specificity note: upstream's `.main-product__tab-text:not(...):not(.product-card__title *)`
   reset is (0,3,0) and beats a plain (0,2,1) heading rule. Match it with three
   classes + element = (0,3,1). */
.woocommerce-account .main-product__tab-text .woocommerce h2 {
	margin: 0 0 16px;
	font-size: 1.4285714286rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--color-off-black);
}
/* Remember-me row: keep the pill button off the checkbox label. */
.woocommerce form.login .form-row .woocommerce-button.button { margin-left: 16px; }
@media (max-width: 479px) {
	.woocommerce form.login .form-row .woocommerce-button.button { margin-left: 0; width: 100%; }
}

/* ============================================================================
   Mobile drawer: BACK-NAVIGATION HARDENING
   ----------------------------------------------------------------------------
   Symptoms reported: after drilling Women > <category> the sub-panel's back
   button did not return to the previous level.

   Root causes addressed here:
   1. Panel visibility depended on the `hidden` attribute alone. reef.css paints
      panels with `display:block` in several places, and iOS Safari resolves the
      UA `[hidden]` rule differently from Chrome, so a dismissed panel could stay
      painted and swallow taps meant for the panel underneath.
   2. Upstream disables the home list while a panel is open via
      `.menu-drawer.is-panel-open` — a class the old JS never toggled, leaving
      two layers simultaneously interactive.
   3. The back button was a 16px-tall inline-flex box inside a 48px header bar,
      so taps landing in the upper/lower 16px of the visually obvious row hit the
      header background instead of the button.

   Fix: pin visibility with high-specificity rules, and make the whole back row
   a comfortable 44px tap target.
   ============================================================================ */

/* 1+2. Only the active layer is painted and interactive. */
.menu-drawer [data-menu-panel][hidden],
.menu-drawer [data-drawer-home][hidden] {
	display: none !important;
}
.menu-drawer [data-menu-panel]:not([hidden]),
.menu-drawer [data-drawer-home]:not([hidden]) {
	display: block;
}

/* 3. Turn the panel header into a full-width 48px back row: the button fills the
   row, so anywhere the user taps the strip goes back. The breadcrumb sits above
   the hit area via pointer-events:none. */
.menu-drawer .menu-drawer__panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 0 16px;
	border-bottom: 1px solid var(--color-light-grey);
	background: var(--color-white);
	position: sticky;
	top: 0;
	z-index: 3;
}
.menu-drawer .menu-drawer__panel-header .menu-drawer__back {
	display: flex;
	align-items: center;
	gap: 8px;
	/* Fill the header vertically + eat the symmetric padding so the tap target is
	   the full 48px row height rather than just the 16px text line. */
	flex: 1 1 auto;
	align-self: stretch;
	min-height: 48px;
	margin: 0 -16px 0 0;
	padding: 0 16px;
	background: none;
	border: 0;
	color: var(--color-dark-grey);
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.menu-drawer .menu-drawer__panel-header .menu-drawer__back:hover,
.menu-drawer .menu-drawer__panel-header .menu-drawer__back:focus-visible {
	color: var(--color-off-black);
	outline: none;
}
.menu-drawer .menu-drawer__panel-header .menu-drawer__back .icon--arrow-left {
	position: static;
	top: auto;
	left: auto;
	right: auto;
	margin: 0;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	display: block;
	transform: none;
	pointer-events: none;
}
/* Breadcrumb is decorative inside the tap row — never intercept the tap. */
.menu-drawer .menu-drawer__panel-header .menu-drawer__breadcrumbs {
	margin: 0;
	padding-left: 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--color-off-black);
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
	flex: 0 1 auto;
	min-width: 0;
}

/* Panels scroll on their own so a long category list cannot push the sticky
   back row out of reach. */
.menu-drawer .menu-drawer__panel {
	height: calc(100dvh - 4.35714rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* ============================================================================
   PDP colour swatches — attribute image was oversized
   ----------------------------------------------------------------------------
   Upstream sizes the single-product image swatch at 8.14286rem (= 114px) on
   mobile and 5.14286rem (= 72px) on desktop, so a single colour chip filled a
   third of the phone screen. Drop it to a compact 64px / 56px chip.
   ============================================================================ */
.product-form__swatches--images .product-form__swatch,
.product-form__swatches--images.swatches-carousel .swiper-slide,
.product-form__options-wrapper .product-form__swatches--images.swatches-carousel .swiper-slide .product-form__swatch {
	width: 64px;
	height: 64px;
	aspect-ratio: 1 / 1;
}
.product-form__swatches--images .product-form__swatch img,
.product-form__swatch--image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* Our own earlier rule set the swatch to 5.21429rem with a circular crop; keep
   the square image treatment consistent with the PDP grid. */
.product-form__swatch--image {
	width: 64px;
	height: 64px;
	padding: 2px;
	border: 1px solid var(--color-light-grey);
	border-radius: 0;
	background: var(--color-white);
}
.product-form__swatch--image img {
	border-radius: 0;
}
.product-form__swatch--selected {
	border-color: var(--color-black);
	box-shadow: inset 0 0 0 1px var(--color-black);
}
@media (min-width: 1024px) {
	.product-form__swatches--images .product-form__swatch,
	.product-form__swatches--images.swatches-carousel .swiper-slide,
	.product-form__options-wrapper .product-form__swatches--images.swatches-carousel .swiper-slide .product-form__swatch,
	.product-form__swatch--image {
		width: 56px;
		height: 56px;
	}
}

/* ============================================================================
   PDP mobile gallery — thumbnails were invisible
   ----------------------------------------------------------------------------
   The mobile carousel is a 1:1 slide track (390x390) with a pagination strip
   whose dots have no width, so there was no way to see or jump to other images.
   Constrain the stage height so the main image and a real thumbnail strip both
   fit above the fold, and give the dots a concrete size.
   ============================================================================ */
@media (max-width: 1023px) {
	/* Ceiling for the stage, only used to keep portrait art in check. */
	.media-slider {
		--reefcoff-pdp-media-h: min(78vw, 46vh);
	}
	/* Upstream lays the wrapper out as a row, so `.media-slider__pagination`
	   becomes a sibling column squeezed next to the slide track and its dots
	   collapse to zero width. Stack them instead: slides on top, rail below. */
	.media-slider__swipper-wrapper {
		display: block;
		padding-bottom: 0;
	}
	/* KEY FIX — a flex item's automatic minimum size is its content's min-content
	   width, so `.media-slider__slide { flex: 1 0 100% }` refused to shrink below
	   the 416px-wide source image. On products with a longer gallery the track
	   inflated to ~688px inside a 360px viewport, and `object-fit: contain` then
	   centred the photo off-screen so the right half of the product was cut off.
	   `min-width: 0` removes that floor for good. */
	.media-slider__slides {
		display: flex;
		flex-wrap: nowrap;
		width: 100%;
		max-width: 100%;
		height: auto;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
	}
	.media-slider__slide,
	.media-slider__item {
		flex: 0 0 100%;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		height: auto;
	}
	/* Let the image define the stage height: full width, natural aspect, never
	   letterboxed and never clipped. */
	.media-slider__item img {
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: 130vw;
		object-fit: contain;
		display: block;
		margin: 0 auto;
	}

	/* Real, tappable dots (upstream gives them no width, so they never painted).
	   Specificity note: upstream `.main-product__wrap .media-slider__pagination`
	   is (0,2,0) and forces `display:block`, which stacks the inline dots into a
	   vertical column. Match the ancestor chain to win. */
	.main-product__wrap .media-slider__pagination,
	.media-slider .media-slider__pagination {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 8px;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: auto;
		min-height: 0;
		padding: 14px 0 6px;
		position: static;
		pointer-events: auto;
	}
	.main-product__wrap .media-slider__dot,
	.media-slider .media-slider__dot {
		display: inline-block;
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		min-width: 7px;
		min-height: 7px;
		margin: 0;
		border-radius: 50%;
		background: var(--color-light-grey, #e5e5e5);
		opacity: 1;
		transition: background-color .2s ease, transform .2s ease;
	}
	.main-product__wrap .media-slider__dot.is-active,
	.media-slider .media-slider__dot.is-active {
		width: 9px;
		height: 9px;
		min-width: 9px;
		min-height: 9px;
		background: var(--color-black, #000);
	}
}

/* ============================================================================
   PDP desktop gallery — main image was taller than the viewport
   ----------------------------------------------------------------------------
   The stage is a 1:1 aspect-ratio box sized off the 690px column, so on a
   1440x900 screen the image ran to y=812 and pushed the 72px thumbnail rail to
   y=824-896, right at (and effectively past) the fold. Cap the stage so the
   image and the full thumb rail always fit under the header in one screen.
   ============================================================================ */
@media (min-width: 1024px) {
	.pdp-gallery {
		/* header offset (95px desktop / 81px without the promo bar) + thumb rail
		   (72px) + its 12px gap + breathing room. */
		--reefcoff-pdp-desk-h: calc(100vh - 260px);
	}
	.pdp-gallery__slide {
		/* Swap the rigid 1:1 box for a viewport-aware cap. */
		aspect-ratio: auto;
		height: var(--reefcoff-pdp-desk-h);
		max-height: 690px;
		min-height: 320px;
	}
	.pdp-gallery__slide img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}
@media (min-width: 1024px) and (min-height: 1000px) {
	/* Tall screens can afford the full square. */
	.pdp-gallery__slide {
		height: auto;
		aspect-ratio: 1 / 1;
		max-height: 690px;
	}
}

/* ============================================================================
   PDP mobile gallery — real thumbnail rail
   ----------------------------------------------------------------------------
   Upstream only rendered zero-sized `.media-slider__dot` spans under the mobile
   image, so a phone showed no image indicator at all. `reef-woo.js` now fills
   `.media-slider__pagination` with actual thumbnail buttons; this block styles
   that rail and keeps it inside the viewport.
   ============================================================================ */
@media (max-width: 1023px) {
	.media-slider__pagination--thumbs {
		display: flex !important;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		width: 100%;
		height: auto;
		min-height: 0;
		margin: 0;
		padding: 12px 12px 2px;
		/* Long galleries scroll the rail instead of wrapping it onto a 2nd row. */
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		position: static;
		pointer-events: auto;
	}
	/* Auto margins on the pseudos centre the rail when it fits and collapse to 0
	   when it overflows — `justify-content:center` would make the first thumb
	   unreachable once the rail scrolls. */
	.media-slider__pagination--thumbs::before,
	.media-slider__pagination--thumbs::after {
		content: '';
		flex: 0 0 auto;
		width: 0;
		margin: auto;
	}
	.media-slider__pagination--thumbs::-webkit-scrollbar { display: none; }

	.media-slider__thumb {
		flex: 0 0 auto;
		width: 60px;
		height: 60px;
		padding: 0;
		margin: 0;
		border: 1px solid var(--color-light-grey, #e5e5e5);
		border-radius: 0;
		background: var(--color-white, #fff);
		overflow: hidden;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.media-slider__thumb img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		display: block;
	}
	.media-slider__thumb.is-active {
		border-color: var(--color-black, #000);
		box-shadow: inset 0 0 0 1px var(--color-black, #000);
	}
}

/* ============================================================================
   PDP mobile — kill the min-width:auto floor that inflated the whole column
   ----------------------------------------------------------------------------
   `.main-product__gallery-slot` is `display:contents` on mobile, so the mobile
   slider and the desktop gallery become grid items of `.main-product__wrap`.
   A grid item's automatic minimum size is its min-content width, and the new
   thumbnail rail's min-content is the full row of thumbs (~680px). That widened
   the shared single column to ~688px, so:
     - the carousel image was centred inside a 688px box and clipped on the right;
     - `.main-product__info` stretched to 688px too, pushing the add-to-cart
       button past the viewport edge with its label off-centre.
   `min-width: 0` on every item in that chain caps the column to the viewport.
   ============================================================================ */
@media (max-width: 1023px) {
	.main-product__gallery-slot > *,
	.main-product__gallery-slot,
	.main-product__info,
	.media-slider,
	.media-slider__swipper-wrapper,
	.media-slider__slides,
	.media-slider__pagination--thumbs {
		min-width: 0;
		max-width: 100%;
	}
	.main-product__wrap {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================================
   PLP mobile filter drawer — "Filter by price" + "Top rated products"
   ----------------------------------------------------------------------------
   The drawer used to open to a blank white sheet: the facets only rendered
   Gender/Size/Color and, worse, the panel itself was parked 100% off-screen by
   upstream's translateX(100%). This block supplies the two sections the mobile
   drawer is supposed to lead with — a dual-thumb price slider with an apply
   button, then a short list of top rated products — and styles them.
   ============================================================================ */
@media (max-width: 1023px) {
	.main-collection__filter-drawer .filter__drawer-heading {
		flex: 0 0 auto;
		padding: var(--space-12) var(--space-16);
		border-bottom: .0714285714rem solid var(--color-light-grey);
		background: var(--color-white);
	}
	.main-collection__filter-drawer .filter__drawer-heading .filter__close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		margin: 0 -8px 0 0;
		cursor: pointer;
	}
}

/* ---------- Section heading (shared by both blocks) ---------- */
.filter__section-title {
	margin: 0 0 var(--space-16);
	color: var(--color-black);
	font-size: .7857142857rem;   /* 11px */
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* ---------- Filter by price ---------- */
.filter__price-block {
	padding: var(--space-8) 0 var(--space-24);
	border-bottom: .0714285714rem solid var(--color-light-grey);
}
.filter__price-slider {
	position: relative;
	height: 22px;
	margin: 0 0 var(--space-16);
}
.filter__price-rail,
.filter__price-fill {
	position: absolute;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	pointer-events: none;
}
.filter__price-rail {
	left: 0;
	right: 0;
	background: var(--color-light-grey);
}
.filter__price-fill {
	background: var(--color-black);
}
/* Two range inputs share one track; only their thumbs are draggable, so both
   handles stay reachable on touch. */
.filter__price-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 22px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	outline: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.filter__price-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: var(--color-black);
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}
.filter__price-input::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: var(--color-black);
	cursor: pointer;
	pointer-events: auto;
}
.filter__price-input::-webkit-slider-runnable-track {
	background: none;
	height: 22px;
}
.filter__price-input::-moz-range-track {
	background: none;
	height: 22px;
}
.filter__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-12);
}
.filter__price-apply {
	display: inline-block;
	flex: 0 0 auto;
	min-height: 0;
	height: auto;
	padding: 6px 16px;
	border: 0;
	border-radius: 999px;
	background-color: var(--color-black);
	color: var(--color-white);
	font-size: .7857142857rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: .02em;
	cursor: pointer;
}
.filter__price-apply:hover,
.filter__price-apply:focus-visible {
	background-color: var(--color-off-black);
	color: var(--color-white);
	outline: none;
}
.filter__price-value {
	color: var(--color-dark-grey);
	font-size: .8571428571rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

/* ---------- Top rated products ---------- */
.filter__top-rated {
	padding: var(--space-24) 0 var(--space-8);
	border-bottom: .0714285714rem solid var(--color-light-grey);
}
.filter__top-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.filter__top-item {
	border-top: .0714285714rem solid var(--color-light-grey);
}
.filter__top-item:first-child {
	border-top: 0;
}
.filter__top-link {
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-12) 0;
	color: inherit;
	text-decoration: none;
}
.filter__top-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.filter__top-name {
	color: var(--color-black);
	font-size: .9285714286rem;
	font-weight: 500;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.filter__top-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: .8571428571rem;
	line-height: 1.3;
}
.filter__top-compare {
	color: var(--color-dark-grey);
	opacity: .7;
	text-decoration: line-through;
}
.filter__top-now {
	color: var(--color-black);
	font-weight: 600;
}
.filter__top-thumb {
	display: block;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	background: var(--color-off-white);
}
.filter__top-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* The price slider + top-rated list belong to the mobile drawer only — the
   desktop PLP sidebar keeps the facet list it has always had. */
@media (min-width: 1024px) {
	.filter__price-block,
	.filter__top-rated { display: none; }
}