/**
 * Re:LAX durable overrides (child-theme enqueue: survives Picostrap recompile).
 */

/* Same rule that works in Customizer Additional CSS */
.bg-light-subtle {
  display: none !important;
}

/* Woo gallery starts at opacity:0; keep images visible if gallery JS is slow/blocked */
.woocommerce-product-gallery,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery img {
  opacity: 1 !important;
}

/* Kill leftover hover-zoom chrome if a plugin re-enables it */
.woocommerce-product-gallery .zoomImg,
.woocommerce-product-gallery .zoomWindow,
.woocommerce-product-gallery .zoomLens {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.single-product .woocommerce-product-gallery__image {
  cursor: zoom-in;
}

/* ===================================================================
   RELAX_PRODUCT_INFO_ACCORDION_V1
   Single-product page: description (open, no title) + Shipping / Refund
   accordion rows. Replaces the default Woo Description/Reviews/Info tabs.
   =================================================================== */
.relax-product-info {
  padding: 2.5rem 0 1rem;
}
.relax-pi-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
}
.relax-pi-desc > :last-child {
  margin-bottom: 0;
}

.relax-pi-accordion .accordion-item {
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 0;
}
.relax-pi-accordion .accordion-item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.relax-pi-accordion .accordion-button {
  display: flex;
  align-items: center;
  padding: 1.15rem 0.25rem;
  background: transparent;
  color: inherit;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  box-shadow: none;
}
.relax-pi-accordion .accordion-button:not(.collapsed) {
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.relax-pi-accordion .accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}
.relax-pi-accordion .accordion-button::after {
  width: 1rem;
  height: 1rem;
  background-size: 1rem;
}

.relax-pi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin-right: 0.85rem;
  flex: 0 0 auto;
}
.relax-pi-icon svg {
  width: 100%;
  height: 100%;
}
.relax-pi-label {
  flex: 1 1 auto;
}

.relax-pi-accordion .accordion-body {
  padding: 0 0.25rem 1.4rem;
  line-height: 1.7;
}
.relax-pi-accordion .accordion-body > :last-child {
  margin-bottom: 0;
}

/* RELAX_PRODUCT_INFO_ACCORDION_V1: drop below the floated gallery/summary
   columns and span full container width (Woo default single uses floats). */
.woocommerce div.product .relax-product-info,
.relax-product-info {
  clear: both;
  float: none;
  width: 100%;
}

/* RELAX_PRODUCT_INFO_ACCORDION_V1: div.product is a 2-col CSS grid on this
   theme; make the info section span the full grid width (not one track). */
.woocommerce div.product > .relax-product-info,
.relax-product-info {
  grid-column: 1 / -1;
  width: auto;
}

/* RELAX_LINKS_AND_NOTICES_V1 */
/* Hide Woo message/info notice boxes */
.woocommerce-message,
.woocommerce-info {
  display: none;
}

/* Active pill = brand orange */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #FFC531;
}

/* Hyperlink color = brand highlight orange (same as cart button #FFC531),
   replacing Bootstrap default blue. */
:root {
  --bs-link-color: #FFC531;
  --bs-link-color-rgb: 255, 197, 49;
  --bs-link-hover-color: #E0A800;
  --bs-link-hover-color-rgb: 224, 168, 0;
}

/* ============================================================
   RELAX_PRODUCT_DETAILS_MATERIALS_V1  (2026-07-22)
   Hide category + SKU on desktop, and style the tabbed
   Details / Materials & Care panel under the Add to Cart button.
   ============================================================ */

/* --- Hide product category + SKU on the single product page (all breakpoints) --- */
.single-product .product_meta .posted_in,
.single-product .product_meta .sku_wrapper {
	display: none !important;
}

/* --- Tabbed Details / Materials & Care panel --- */
.relax-md {
	margin-top: 1.5rem;
}
.relax-md-panel {
	/* Glossy white: soft top-light sheen for contrast against the page */
	background: linear-gradient(180deg, #FFFFFF 0%, #FBFBFC 55%, #F2F2F4 100%);
	border: 1px solid #E6E6E8;
	border-radius: 1rem;
	padding: 1.25rem 1.25rem 1.5rem;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
	            0 6px 18px rgba(23, 21, 19, .06);
}
.relax-md-tabs.nav-pills {
	gap: .5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid #E9E9EC;
	padding-bottom: 1rem;
}
.relax-md-tabs .nav-link {
	color: #4A4137;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .8rem;
	padding: .5rem 1rem;
	border-radius: 50rem;
	background: transparent;
}
.relax-md-tabs .nav-link:hover {
	color: #171513;
}
.relax-md-tabs .nav-link.active {
	color: #fff;
	background: #1F1C19;              /* neutral near-black: avoids competing with the yellow Add to Cart */
}

/* Details bullet list with icons */
.relax-md-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.relax-md-list li {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	padding: .4rem 0;
	color: #2A251F;
	font-size: .95rem;
	line-height: 1.5;
}
.relax-md-list li + li {
	border-top: 1px solid #ECECEF;
}
.relax-md-ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	margin-top: .1rem;
	border-radius: 50rem;
	background: rgba(255, 197, 49, .12);
	color: #FFC531;
}
.relax-md-ico svg {
	width: .85rem;
	height: .85rem;
}

/* Materials & Care paragraph */
.relax-md-care {
	color: #2A251F;
	font-size: .95rem;
	line-height: 1.6;
}
.relax-md-care :last-child {
	margin-bottom: 0;
}

/* --- Single product title size (2026-07-22) --- */
.single-product .product_title.entry-title {
	font-size: 32px;   /* md / sm / xs */
}
@media (min-width: 992px) {
	.single-product .product_title.entry-title {
		font-size: 38px;   /* desktop */
	}
}

/* --- Woo archive header cleanup (2026-07-25) ---
   woocommerce_show_page_title is filtered to false in functions.php, so Woo's
   <header class="woocommerce-products-header"> renders empty on /shop/.
   Collapse it only when it has no element children, so a term description
   (if ever used) still displays. */
.woocommerce-products-header:not(:has(*)) {
	display: none;
}

/* =========================================================================
   RELAX ZINE PANELS v1.0
   Replaces the generic Bootstrap white card (.card.border.shadow-sm.rounded-4)
   used for below-the-grid content on shop/collection/info pages.

   Three shapes:
     .relax-panel                  prose panel  (halftone field + ink rule + drop cap)
     .relax-panel.relax-panel--tile  explainer grid tile (numbered, no box)
     .relax-panel.relax-panel--link  quick-link sticker chip (die-cut, peel hover)

   Bootstrap's .card was removed from the markup, so the card-body spacing
   custom properties are re-declared here: otherwise .card-body loses its
   padding entirely. Declaring the vars (rather than hard-setting padding)
   keeps .p-4 / .p-lg-5 utilities working as normal.
   ========================================================================= */

:root {
  --relax-ink: #171513;
  --relax-sand: #f3efe6;
  --relax-muted: #6f6860;
  --relax-orange: #ffc531;
  --relax-ocean: #163d47;
}

.relax-panel {
  --bs-card-spacer-y: 1.35rem;
  --bs-card-spacer-x: 1.35rem;

  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--relax-sand);
  border: 0;
  border-top: 4px solid var(--relax-ink);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

/* Halftone screen-print field, fading out across the panel. */
.relax-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(23, 21, 19, 0.17) 1px, transparent 1.35px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(215deg, #000 0%, transparent 45%);
  mask-image: linear-gradient(215deg, #000 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.relax-panel > * {
  position: relative;
  z-index: 1;
}

/* Masthead accent under the heavy top rule. */
.relax-panel > .card-body > .lc-block:first-child > h2,
.relax-panel > .card-body > h2 {
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 0.85rem;
}
.relax-panel > .card-body > .lc-block:first-child > h2::after,
.relax-panel > .card-body > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.6rem;
  height: 4px;
  background: var(--relax-orange);
}

/* Zine measure: long SEO copy should not run the full container width. */
.relax-panel:not(.relax-panel--tile):not(.relax-panel--link) p {
  max-width: 68ch;
}

/* -------------------------------------------------------------------------
   Explainer tiles: no box at all. Numbered rule + heading underscore.
   ------------------------------------------------------------------------- */

.row:has(> [class*="col"] > .relax-panel--tile) {
  counter-reset: relax-tile;
}

.relax-panel--tile {
  --bs-card-spacer-x: 0;
  counter-increment: relax-tile;
  background-color: transparent;
  border-top: 3px solid var(--relax-ink);
}

.relax-panel--tile::before {
  display: none;
}

.relax-panel--tile > .card-body::before {
  content: counter(relax-tile, decimal-leading-zero);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--relax-ink);
  opacity: 0.45;
  margin-bottom: 0.6rem;
}

.relax-panel--tile h3 {
  position: relative;
  padding-bottom: 0.5rem;
}
.relax-panel--tile h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.2rem;
  height: 3px;
  background: var(--relax-orange);
}

/* -------------------------------------------------------------------------
   Quick links: die-cut sticker chips.
   ------------------------------------------------------------------------- */

.relax-panel--link {
  background-color: var(--relax-sand);
  border: 2px solid var(--relax-ink);
  border-radius: 0.9rem;
  box-shadow: 4px 4px 0 var(--relax-ink);
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.relax-panel--link::before {
  -webkit-mask-image: linear-gradient(215deg, #000 0%, transparent 60%);
  mask-image: linear-gradient(215deg, #000 0%, transparent 60%);
}

/* Alternating tilt so the row reads as stickers, not a grid. */
.row > [class*="col"]:nth-child(odd) > .relax-panel--link { transform: rotate(-0.7deg); }
.row > [class*="col"]:nth-child(even) > .relax-panel--link { transform: rotate(0.7deg); }

.row > [class*="col"] > .relax-panel--link:hover,
.row > [class*="col"] > .relax-panel--link:focus-visible {
  transform: rotate(0deg) translate(-2px, -3px);
  box-shadow: 7px 9px 0 var(--relax-ink);
  background-color: var(--relax-orange);
}

.relax-panel--link h3 {
  position: relative;
  padding-bottom: 0.45rem;
}
.relax-panel--link h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.8rem;
  height: 3px;
  background: var(--relax-ink);
  transition: width 0.18s ease;
}
.relax-panel--link:hover h3::after {
  width: 3.2rem;
}

/* Copy inside a chip stays readable once the chip flips to orange. */
.relax-panel--link:hover .text-secondary {
  color: var(--relax-ink) !important;
}

@media (prefers-reduced-motion: reduce) {
  .relax-panel--link,
  .relax-panel--link h3::after {
    transition: none;
  }
  .row > [class*="col"] > .relax-panel--link,
  .row > [class*="col"] > .relax-panel--link:hover {
    transform: none;
  }
}

/* ============================================================
   RELAX_CART_V1  (2026-07-25)
   Header cart button with live item count, plus the add-to-cart
   feedback used by the colour tiles in the shop.
   ============================================================ */

.relax-cart-btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	position: relative;
}
.relax-cart-btn svg {
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
}

/* Count badge: dark on the yellow button so it stays legible. */
.relax-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .35rem;
	border-radius: 50rem;
	background: #1F1C19;
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}
.relax-cart-count.is-empty {
	background: rgba(31, 28, 25, .28);
}

/* Badge pop when the count changes. */
.relax-cart-btn.is-bumped .relax-cart-count {
	animation: relax-cart-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes relax-cart-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.45); }
	100% { transform: scale(1); }
}

/* The product image arcing into the cart button. */
.relax-fly-ghost {
	position: fixed;
	z-index: 1080;
	object-fit: cover;
	border-radius: .5rem;
	pointer-events: none;
	opacity: .95;
	box-shadow: 0 8px 24px rgba(23, 21, 19, .22);
	transition: transform .7s cubic-bezier(.5, -0.2, .7, 1),
	            opacity .7s ease-in,
	            border-radius .7s ease-in;
	will-change: transform, opacity;
}

/* Tile button states. */
.relax-ajax-add {
	position: relative;
	transition: background-color .2s ease, color .2s ease;
}
.relax-ajax-add.is-loading {
	opacity: .65;
	pointer-events: none;
}
/* The loop-button colour comes from an inline rule that outranks a bare
   .relax-ajax-add selector, so the state styles are qualified to match it. */
.woocommerce ul.products li.product a.button.relax-ajax-add.is-added,
a.button.relax-ajax-add.is-added {
	background: #1F1C19 !important;
	border-color: #1F1C19 !important;
	color: #fff !important;
}
.relax-ajax-add.is-added::after {
	content: " ✓";
}
.woocommerce ul.products li.product a.button.relax-ajax-add.is-failed,
a.button.relax-ajax-add.is-failed {
	background: #B3261E !important;
	border-color: #B3261E !important;
	color: #fff !important;
}
.relax-ajax-add.is-failed::after {
	content: attr(data-relax-msg);
	margin-left: .35rem;
	font-weight: 400;
}

/* WooCommerce's inline "View cart" link that gets appended under the button: 
   the floating toast is the confirmation now. */
.woocommerce a.added_to_cart,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce div.product .added_to_cart {
	display: none !important;
}

/* Single-product button gets the same feedback states as the tiles. */
.woocommerce div.product form.cart button.single_add_to_cart_button.is-loading,
button.single_add_to_cart_button.is-loading {
	opacity: .65;
	pointer-events: none;
}
.woocommerce div.product form.cart button.single_add_to_cart_button.is-added,
button.single_add_to_cart_button.is-added {
	background: #1F1C19 !important;
	border-color: #1F1C19 !important;
	color: #fff !important;
}
.single_add_to_cart_button.is-added::after {
	content: " ✓";
}
.woocommerce div.product form.cart button.single_add_to_cart_button.is-failed,
button.single_add_to_cart_button.is-failed {
	background: #B3261E !important;
	border-color: #B3261E !important;
	color: #fff !important;
}
.single_add_to_cart_button.is-failed {
	font-size: 0;
}
.single_add_to_cart_button.is-failed::after {
	content: attr(data-relax-msg);
	font-size: 1rem;
	font-weight: 700;
}

/* Confirmation toast: the header cart scrolls out of view on long archives,
   so the badge bump alone is not always visible feedback. */
.relax-cart-toast {
	position: fixed;
	top: 1rem;
	right: 1rem;
	z-index: 1090;
	display: flex;
	align-items: center;
	gap: .75rem;
	max-width: min(22rem, calc(100vw - 2rem));
	padding: .65rem .85rem;
	border-radius: .85rem;
	background: #1F1C19;
	color: #fff;
	box-shadow: 0 10px 30px rgba(23, 21, 19, .28);
	transform: translateY(-12px);
	opacity: 0;
	transition: transform .28s cubic-bezier(.34, 1.4, .64, 1), opacity .28s ease;
}
.relax-cart-toast.is-visible {
	transform: translateY(0);
	opacity: 1;
}
.relax-cart-toast img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: .5rem;
	flex: 0 0 auto;
}
.relax-cart-toast__text {
	min-width: 0;
	line-height: 1.25;
}
.relax-cart-toast__label {
	display: block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: #FFC531;
}
.relax-cart-toast__name {
	display: block;
	font-size: .85rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.relax-cart-toast__link {
	flex: 0 0 auto;
	margin-left: .15rem;
	padding: .3rem .7rem;
	border-radius: 50rem;
	background: #FFC531;
	color: #1F1C19 !important;
	font-size: .72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.relax-cart-btn.is-bumped .relax-cart-count { animation: none; }
	.relax-fly-ghost { display: none; }
}

/* ============================================================
   RELAX_SHOP_HEADER_V1  (2026-07-25)
   Shop All: the page hero carries its own breadcrumb, so Woo's
   duplicate is removed in functions.php and the stacked spacing
   above it is collapsed here. The 87px band under the category
   bar was: 35px header padding + 40px of wpautop debris (a
   stray <br> and an orphan empty <p> before the hero) + the
   section's own top padding.

   Category archives are untouched: they only have Woo's
   breadcrumb and still need that leading space.
   ============================================================ */

.woocommerce-shop #woocommerce-wrapper {
	margin-top: 0 !important;
}
.woocommerce-shop .woocommerce-products-header {
	padding-top: 0 !important;
}
.woocommerce-shop .page-description main > br:first-child,
.woocommerce-shop .page-description main > p:empty {
	display: none;
}
.woocommerce-shop .woocommerce-products-header .page-description section:first-of-type {
	padding-top: .75rem !important;
}

/* ============================================================
   RELAX_HERO_V1  (2026-07-25)
   Homepage banner responsiveness.

   The hero's height was fixed (~579px from the content's
   min-height) while its width grew with the viewport, so the
   box went from near-square on mobile to 3.2:1 at 1920. The
   source photo is 4:3, so object-fit:cover showed 100% of the
   frame on mobile but only 41% at 1920: the "too zoomed in"
   look. Worse, the centre band is empty sky and branches while
   the subject sits low in the frame, so she was half cut off at
   the bottom edge.

   Fix: scale the height with the viewport so the box stays
   nearer the photo's own ratio, and bias the crop downward to
   keep the subject in frame. Mobile and tablet are untouched: 
   they already show the whole photo.
   ============================================================ */

/* Let the image layer fill the taller box (the .lc-block wrapper
   is auto-height, so h-100 on the img alone would come up short). */
.relax-hero > .position-absolute,
.relax-hero > .position-absolute > .lc-block {
	height: 100%;
}
.relax-hero > .position-absolute > .lc-block > img {
	width: 100%;
	height: 100% !important;
	min-height: 0 !important;
	object-fit: cover;
	/* Subject sits low in the frame: favour the lower half. */
	object-position: center 70%;
}

/* The row carries the min-height as well as the container. That is what lets
   the existing .align-items-end sit the eyebrow, headline and CTAs on the
   BOTTOM-LEFT of the banner (client's preference) instead of floating them in
   the upper area with dead image below. It makes the hero taller than a
   content-only height would, which is intended.  */
@media (min-width: 992px) {
	.relax-hero > .container,
	.relax-hero > .container > .row {
		min-height: clamp(540px, 45vw, 760px) !important;
	}
}


/* ============================================================
   RELAX_HERO mobile: pin text to the bottom-left (2026-08-05)
   On phones the eyebrow / headline / CTA block floated in the
   vertical middle of the banner. The banner height is kept
   exactly as before so the photo keeps its size and crop
   (mobile already shows the whole source frame); the space is
   only redistributed -- the container's py-5 / m-3 vertical
   padding moves into the row's min-height, and the existing
   .align-items-end then seats the block flush with the bottom.
   ============================================================ */
@media (max-width: 991.98px) {
	/* !important is required: Bootstrap's .py-5 / .m-3 utilities also carry
	   !important, so a plain override is silently ignored. */
	.relax-hero > .container {
		padding-top: 0 !important;
		padding-bottom: 1.5rem !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	.relax-hero > .container > .row {
		/* 516 + 24 (padding-bottom) = 540 = the banner's original mobile
		   height, so the photo keeps exactly the same size and crop. */
		min-height: 516px !important;
	}
}

/* Section-header rows use .d-flex.flex-wrap.justify-content-between so the
   heading sits left and its CTA button sits right on desktop. On mobile the
   row wraps and the lone wrapped button falls back to the START (left) of its
   line -- the client wants it aligned right. margin-left:auto on the last
   child pushes it right when wrapped, and is a no-op when the row stays on
   one line (justify-content-between already seats it right), so desktop is
   unaffected. Scoped to mobile so >=992px is untouched. */
@media (max-width: 991.98px) {
	.d-flex.flex-wrap.justify-content-between.align-items-end > .lc-block:last-child {
		margin-left: auto;
	}
}



/* ============================================================
   RELAX_FLUENT_FORMS_V1  (2026-07-25)
   Borderless, screen-print styling for every Fluent Form.
   No boxes: fields are ruled lines, labels are letterspaced
   caps, and the submit is a flat die-cut block that flips to
   orange: same language as .relax-panel--link.

   Contexts are driven by custom properties, so the same rules
   serve a form on sand/white AND the subscribe form inside
   .relax-footer.bg-dark (see the invert block at the end).
   ============================================================ */

.fluentform {
	--relax-ff-ink: var(--relax-ink, #171513);
	--relax-ff-muted: var(--relax-muted, #6f6860);
	--relax-ff-line: rgba(23, 21, 19, 0.22);
	--relax-ff-line-strong: var(--relax-ink, #171513);
	--relax-ff-accent: var(--relax-orange, #ffc531);
	--relax-ff-error: #b23b21;

	margin-bottom: 0;
}

/* Fluent Forms ships a default container padding/border on some themes. */
.fluentform .frm-fluent-form,
.fluentform .ff-el-group {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.fluentform .ff-el-group {
	margin-bottom: 1.6rem;
}

/* --- Labels: letterspaced caps, the site's masthead voice --------------- */

.fluentform .ff-el-input--label label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--relax-ff-ink);
}

/* Required marker in brand orange rather than red. */
.fluentform .ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-is-required.asterisk-left label:before {
	color: var(--relax-ff-accent);
	font-weight: 700;
}

/* Inline help text under a label. */
.fluentform .ff-el-help-message {
	margin-top: 0.4rem;
	font-size: 0.82rem;
	color: var(--relax-ff-muted);
}

/* --- Fields: ruled lines, no boxes -------------------------------------- */

.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform input[type="password"],
.fluentform input[type="date"],
.fluentform select,
.fluentform textarea {
	width: 100%;
	padding: 0.55rem 0 0.6rem;
	background-color: transparent;
	background-image: none;
	border: 0;
	border-bottom: 2px solid var(--relax-ff-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--relax-ff-ink);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.fluentform textarea,
.fluentform textarea.ff-el-form-control {
	min-height: 8.5rem;
	resize: vertical;
}

.fluentform .ff-el-form-control::placeholder,
.fluentform textarea::placeholder {
	color: var(--relax-ff-muted);
	opacity: 0.75;
}

/* Hover lifts the rule to full ink; focus adds the orange underscore. */
.fluentform .ff-el-form-control:hover,
.fluentform select:hover,
.fluentform textarea:hover {
	border-bottom-color: var(--relax-ff-line-strong);
}

.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible,
.fluentform select:focus,
.fluentform textarea:focus {
	outline: 0;
	background-color: transparent;
	border-bottom-color: var(--relax-ff-accent);
	box-shadow: 0 2px 0 0 var(--relax-ff-accent);
	color: var(--relax-ff-ink);
}

/* Kill the browser's yellow autofill box: it destroys a borderless field. */
.fluentform input:-webkit-autofill,
.fluentform input:-webkit-autofill:hover,
.fluentform input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--relax-ff-ink);
	-webkit-box-shadow: 0 0 0 1000px transparent inset;
	transition: background-color 5000s ease-in-out 0s;
	caret-color: var(--relax-ff-ink);
}

/* Native select needs its own caret once appearance is stripped. */
.fluentform select,
.fluentform select.ff-el-form-control {
	padding-right: 1.5rem;
	background-repeat: no-repeat;
	background-position: right 0.15rem center;
	background-size: 0.7rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23171513' d='M1.5 4.5 8 11l6.5-6.5'/%3E%3C/svg%3E");
	cursor: pointer;
}

/* --- Checkboxes & radios: square ink marks ------------------------------ */

.fluentform .ff-el-form-check {
	margin-bottom: 0.5rem;
}

.fluentform .ff-el-form-check-label,
.fluentform .ff_item_selectable {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.95rem;
	color: var(--relax-ff-ink);
	cursor: pointer;
}

.fluentform input[type="checkbox"],
.fluentform input[type="radio"] {
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.2rem 0 0;
	background-color: transparent;
	border: 2px solid var(--relax-ff-line-strong);
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease;
}

.fluentform input[type="radio"] {
	border-radius: 50%;
}

.fluentform input[type="checkbox"]:checked,
.fluentform input[type="radio"]:checked {
	background-color: var(--relax-ff-accent);
	border-color: var(--relax-ff-line-strong);
	box-shadow: inset 0 0 0 2px var(--relax-ff-accent);
}

.fluentform input[type="checkbox"]:focus-visible,
.fluentform input[type="radio"]:focus-visible {
	outline: 2px solid var(--relax-ff-accent);
	outline-offset: 2px;
}

/* --- Section breaks & custom HTML --------------------------------------- */

.fluentform .ff-el-section-break {
	margin: 2rem 0 1.4rem;
	padding-top: 1.4rem;
	border-top: 3px solid var(--relax-ff-line-strong);
	border-bottom: 0;
}

.fluentform .ff-el-section-break .ff-el-section-title {
	position: relative;
	margin-bottom: 0.6rem;
	padding-bottom: 0.55rem;
	font-weight: 700;
	color: var(--relax-ff-ink);
}

.fluentform .ff-el-section-break .ff-el-section-title:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.2rem;
	height: 3px;
	background: var(--relax-ff-accent);
}

.fluentform .ff-section_break_desk {
	color: var(--relax-ff-muted);
}

/* --- Submit: flat die-cut block that flips to orange -------------------- */

.fluentform .ff-el-group.ff-text-left,
.fluentform .ff_submit_btn_wrapper {
	margin-top: 2rem;
	margin-bottom: 0;
}

.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit,
.fluentform button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.75rem 1.9rem !important;
	background: var(--relax-ff-line-strong) !important;
	border: 2px solid var(--relax-ff-line-strong) !important;
	border-radius: 0.6rem !important;
	box-shadow: 4px 4px 0 var(--relax-ff-line-strong);
	color: #fff !important;
	font-size: 0.8rem !important;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease,
	            background-color 0.18s ease, color 0.18s ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn.ff-btn-submit:hover,
.fluentform button[type="submit"]:hover,
.fluentform .ff-btn-submit:focus-visible,
.fluentform button[type="submit"]:focus-visible {
	transform: translate(-2px, -3px);
	box-shadow: 7px 9px 0 var(--relax-ff-line-strong);
	background: var(--relax-ff-accent) !important;
	color: var(--relax-ff-ink) !important;
}

.fluentform .ff-btn-submit:active,
.fluentform button[type="submit"]:active {
	transform: translate(1px, 2px);
	box-shadow: 2px 2px 0 var(--relax-ff-line-strong);
}

.fluentform .ff-btn-submit:disabled,
.fluentform button[type="submit"]:disabled {
	transform: none;
	box-shadow: none;
	opacity: 0.55;
	cursor: not-allowed;
}

/* --- Validation & messages ---------------------------------------------- */

.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-form-control.ff-el-is-error {
	border-bottom-color: var(--relax-ff-error);
	box-shadow: 0 2px 0 0 var(--relax-ff-error);
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	margin-top: 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--relax-ff-error) !important;
}

.fluentform .ff-message-success,
.fluentform .ff_message_success {
	padding: 1.1rem 1.25rem;
	background: var(--relax-sand, #f3efe6);
	border: 0;
	border-left: 4px solid var(--relax-ff-accent);
	border-radius: 0;
	color: var(--relax-ink, #171513);
}

.fluentform .ff-errors-in-stack,
.fluentform .ff_submit_error {
	padding: 0.9rem 1.1rem;
	background: rgba(178, 59, 33, 0.08);
	border: 0;
	border-left: 4px solid var(--relax-ff-error);
	border-radius: 0;
	color: var(--relax-ff-error);
}

/* --- Inverted context: the subscribe form in the dark footer ------------ */

.relax-footer .fluentform,
.bg-dark .fluentform,
.relax-form--invert {
	--relax-ff-ink: #ffffff;
	--relax-ff-muted: rgba(255, 255, 255, 0.6);
	--relax-ff-line: rgba(255, 255, 255, 0.3);
	--relax-ff-line-strong: #ffffff;
}

.relax-footer .fluentform select,
.bg-dark .fluentform select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M1.5 4.5 8 11l6.5-6.5'/%3E%3C/svg%3E");
}

/* On dark, the solid-white block would shout: outline until hover. */
.relax-footer .fluentform .ff-btn-submit,
.relax-footer .fluentform button[type="submit"],
.bg-dark .fluentform .ff-btn-submit,
.bg-dark .fluentform button[type="submit"] {
	background: transparent !important;
	color: #fff !important;
	box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.55);
	/* Sit to the field, not the column. Form 2's builder custom CSS ships
	   `form.fluent_form_2 .wpf_has_custom_css.ff-btn-submit{min-width:100%}`,
	   so min-width: not width: is what forces full bleed here. */
	width: auto !important;
	min-width: 10rem !important;
	flex: 0 0 auto;
	align-self: flex-end;
}

.relax-footer .fluentform .ff-btn-submit:hover,
.relax-footer .fluentform button[type="submit"]:hover,
.bg-dark .fluentform .ff-btn-submit:hover,
.bg-dark .fluentform button[type="submit"]:hover {
	background: var(--relax-ff-accent) !important;
	border-color: var(--relax-ff-accent) !important;
	color: var(--relax-ink, #171513) !important;
	box-shadow: 6px 7px 0 rgba(255, 255, 255, 0.55);
}

.relax-footer .fluentform .ff-message-success,
.bg-dark .fluentform .ff-message-success {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* Footer subscribe reads as one inline row on desktop, stacked on mobile. */
@media (min-width: 768px) {
	.relax-footer .fluentform .ff-t-container {
		display: flex;
		align-items: flex-end;
		gap: 1rem;
	}
	.relax-footer .fluentform .ff-el-group.ff-text-left,
	.relax-footer .fluentform .ff_submit_btn_wrapper {
		margin-top: 1.25rem;
	}
}

/* --- Motion & mobile ----------------------------------------------------- */

@media (max-width: 575.98px) {
	.fluentform .ff-btn-submit,
	.fluentform button[type="submit"] {
		width: 100%;
	}
	/* 16px minimum stops iOS Safari zooming on focus. */
	.fluentform .ff-el-form-control,
	.fluentform select,
	.fluentform textarea {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fluentform .ff-el-form-control,
	.fluentform .ff-btn-submit,
	.fluentform button[type="submit"] {
		transition: none;
	}
	.fluentform .ff-btn-submit:hover,
	.fluentform button[type="submit"]:hover,
	.fluentform .ff-btn-submit:active,
	.fluentform button[type="submit"]:active {
		transform: none;
	}
}

/* RELAX_FLUENT_FORMS_V1: specificity patch. Fluent Forms' own stylesheet is
   enqueued after the theme's, so `textarea`/`select` (which only match at
   0-1-1 above) kept the plugin's 1px box while the [type=…] inputs did not.
   Re-state them at the plugin's own weight. */
.fluentform textarea.ff-el-form-control,
.fluentform select.ff-el-form-control,
.fluentform input.ff-el-form-control {
	background-color: transparent;
	border: 0;
	border-bottom: 2px solid var(--relax-ff-line);
	border-radius: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}
.fluentform select.ff-el-form-control {
	padding-right: 1.5rem;
}
.fluentform textarea.ff-el-form-control:hover,
.fluentform select.ff-el-form-control:hover,
.fluentform input.ff-el-form-control:hover {
	border-bottom-color: var(--relax-ff-line-strong);
}
.fluentform textarea.ff-el-form-control:focus,
.fluentform select.ff-el-form-control:focus,
.fluentform input.ff-el-form-control:focus {
	border-bottom-color: var(--relax-ff-accent);
	box-shadow: 0 2px 0 0 var(--relax-ff-accent);
}
.fluentform .ff-el-is-error input.ff-el-form-control,
.fluentform .ff-el-is-error textarea.ff-el-form-control,
.fluentform .ff-el-is-error select.ff-el-form-control {
	border-bottom-color: var(--relax-ff-error);
	box-shadow: 0 2px 0 0 var(--relax-ff-error);
}

/* Required asterisk in brand orange: the plugin colours this with weight we
   have to match explicitly. */
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after,
.fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label:before {
	color: var(--relax-ff-accent) !important;
	opacity: 1;
}

/* ============================================================
   RELAX_EMPTY_CART_ICON_V1  (2026-07-25)
   Replace WooCommerce's generic empty-cart glyph with the Re:LAX
   smiley. Woo draws its icon as a mask-image on the ::before with
   background-color: currentColor, so the mask has to be cleared
   before a background image will show.
   Kept as the colour asset + grayscale filter: one file to
   maintain, and it stays sharp if the logo is ever updated.
   ============================================================ */

.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	-webkit-mask-image: none;
	mask-image: none;
	background-color: transparent;
	background-image: url("/wp-content/uploads/2026/07/cropped-smiley-2.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 96px;
	height: 96px;
	margin: 0 auto 1.25rem;
	filter: grayscale(1);
	opacity: 0.85;
}

/* ============================================================
   RELAX_BUY_ROW_V1  (2026-07-26)
   Price and Add to cart share one row, and the button is slimmer.
   ============================================================ */

.single-product form.cart .woocommerce-variation-add-to-cart,
.single-product form.cart.cart:not(.variations_form) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem .85rem;
}

/* Price sits first in the buy row, sharing the line with the button. */
.single-product .relax-buy-price {
	flex: 0 0 auto;
	margin: 0;
}
.single-product .relax-buy-price .price {
	margin: 0 !important;
	font-size: 1.5rem;
	line-height: 1;
	white-space: nowrap;
}


/* Woo repeats the price inside .single_variation once a variation resolves;
   with the price now in the buy row that is a duplicate. */
.single-product .woocommerce-variation-price {
	display: none !important;
}

/* Slimmer button: it was a 45px-tall, 170px-wide slab. */
.single-product .single_add_to_cart_button {
	padding: .6rem 1.4rem !important;
	font-size: .82rem !important;
	line-height: 1.2 !important;
	min-height: 0 !important;
	width: auto !important;
	flex: 0 0 auto;
}

/* Quantity box scaled to match so the row reads as one unit. */
.single-product form.cart .quantity input.qty {
	height: 38px;
	width: 58px;
	padding: .3rem .4rem;
	text-align: center;
}

/* Tighten what remains above the row. */
.single-product .relax-color-swatches { margin-bottom: 12px; }
.single-product .relax-size-picker { margin-bottom: 14px; }

@media (max-width: 575.98px) {
	.single-product .relax-buy-price .price { font-size: 1.35rem; }
	.single-product .single_add_to_cart_button {
		padding: .6rem 1.15rem !important;
		font-size: .78rem !important;
	}
}

/* ============================================================
   RELAX_MOBILE_OVERFLOW_V1  (2026-07-25)
   Kills the ~12px horizontal drag that let the whole page be
   panned left/right on phones (and hijacked vertical swipes on
   product grids).

   ROOT CAUSE: the global footer uses `.row.g-5` inside a plain
   `.container`. Bootstrap's `g-5` sets --bs-gutter-x: 3rem, so the
   row takes -1.5rem (-24px) side margins while the container only
   pads 1.5rem/2 (12px): 12px of the row hangs off each edge on
   every page. Fixed at source below; the html/body clip is the
   belt-and-braces guard for anything added later.
   ============================================================ */

/* --- Source fix: match the footer row's gutter to its container --- */
.relax-footer .row.g-5 {
	/* Horizontal only: g-5's 3rem vertical gutter is kept, so the
	   stacked footer columns keep their breathing room on mobile. */
	--bs-gutter-x: 1.5rem;
}

/* --- Global guard: no page may scroll or rubber-band sideways ---
   `clip` rather than `hidden` on purpose: `hidden` turns the root
   into a scroll container and breaks `position: sticky` descendants.
   Nested scrollers (e.g. .relax-cat-scroll) are unaffected. */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
	max-width: 100%;
}

@supports not (overflow: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

/* ============================================================
   RELAX_SALE_TICKETS_V1  (2026-07-26)
   The Sale page ran as one uninterrupted sand-coloured column.
   Two things break it up:

   1. .relax-band--ocean: a full-bleed ocean band (the one brand
      colour the site never used) behind the "What's on sale"
      strip, so the page has a hard visual break in the middle
      instead of reading as one continuous scroll.
   2. .relax-panel--ticket: a numbered sale-ticket variant of the
      sticker chip. Same family as .relax-panel--link on Shop All
      (2px rule, hard offset shadow, alternating tilt) but led by
      a big ghost numeral, and it stays 4-across at EVERY width.

   Deliberately NOT a change to .relax-panel--tile: that variant
   is used on 11 other pages.
   ============================================================ */

/* --- Full-bleed colour band -------------------------------------------- */

.relax-band {
	position: relative;
	/* Break out of the container without causing horizontal scroll: 
	   see RELAX_MOBILE_OVERFLOW_V1; the root is overflow-x: clip. */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: calc(50vw - 50%);
	padding-right: calc(50vw - 50%);
}

.relax-band--ocean {
	background-color: var(--relax-ocean, #163d47);
	color: #fff;
}

.relax-band--ocean h2,
.relax-band--ocean h3 {
	color: #fff;
}

/* Halftone wash so the band reads as printed, not as a flat block. */
.relax-band--ocean::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.13) 1px, transparent 1.35px);
	background-size: 7px 7px;
	-webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
	mask-image: linear-gradient(200deg, #000 0%, transparent 55%);
	pointer-events: none;
}

.relax-band > * {
	position: relative;
	z-index: 1;
}

/* Section heading gets the orange underscore, inverted. */
.relax-band--ocean .relax-band__title {
	position: relative;
	padding-bottom: 0.6rem;
}
.relax-band--ocean .relax-band__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.6rem;
	height: 4px;
	background: var(--relax-orange, #ffc531);
}

/* --- Numbered sale tickets ---------------------------------------------- */

.row:has(> [class*="col"] > .relax-panel--ticket) {
	counter-reset: relax-ticket;
}

.relax-panel--ticket {
	--bs-card-spacer-y: 0.85rem;
	--bs-card-spacer-x: 0.75rem;

	counter-increment: relax-ticket;
	background-color: var(--relax-sand, #f3efe6);
	border: 2px solid var(--relax-ink, #171513);
	border-top: 2px solid var(--relax-ink, #171513);
	border-radius: 0.5rem;
	box-shadow: 3px 3px 0 var(--relax-ink, #171513);
	color: var(--relax-ink, #171513);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Perforated ticket stub down the left edge. */
.relax-panel--ticket::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.55rem;
	width: 2px;
	background-image: linear-gradient(
		var(--relax-ink, #171513) 0 3px,
		transparent 3px 7px
	);
	background-size: 2px 7px;
	opacity: 0.35;
	-webkit-mask-image: none;
	mask-image: none;
	pointer-events: none;
}

.relax-panel--ticket > .card-body {
	padding-left: 1.15rem;
}

/* The big ghost numeral. */
.relax-panel--ticket > .card-body::before {
	content: counter(relax-ticket, decimal-leading-zero);
	display: block;
	margin-bottom: 0.15rem;
	font-size: clamp(1.6rem, 6.5vw, 2.4rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--relax-orange, #ffc531);
	-webkit-text-stroke: 1px var(--relax-ink, #171513);
	opacity: 1;
}

.relax-panel--ticket h3 {
	font-size: clamp(0.62rem, 2.3vw, 0.8rem);
	line-height: 1.25;
	letter-spacing: 0.04em;
	hyphens: auto;
	margin-bottom: 0.25rem;
}

/* Alternating tilt, same trick as the Shop All stickers. */
.row > [class*="col"]:nth-child(odd) > .relax-panel--ticket { transform: rotate(-0.8deg); }
.row > [class*="col"]:nth-child(even) > .relax-panel--ticket { transform: rotate(0.8deg); }

.row > [class*="col"] > .relax-panel--ticket:hover {
	transform: rotate(0deg) translate(-2px, -3px);
	box-shadow: 6px 8px 0 var(--relax-ink, #171513);
}

/* Blurb is dead weight in a 4-across mobile column: copy returns at md. */
.relax-ticket__desc {
	display: none;
	font-size: 0.8rem;
}

@media (min-width: 768px) {
	.relax-panel--ticket {
		--bs-card-spacer-x: 1.15rem;
	}
	.relax-panel--ticket > .card-body {
		padding-left: 1.6rem;
	}
	.relax-panel--ticket::before {
		left: 0.8rem;
	}
	.relax-ticket__desc {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.relax-panel--ticket {
		transition: none;
	}
	.row > [class*="col"] > .relax-panel--ticket,
	.row > [class*="col"] > .relax-panel--ticket:hover {
		transform: none;
	}
}

/* RELAX_SALE_TICKETS_V1: corrections after first render.
   1. `.relax-band--ocean h3` was repainting the ticket labels white on a
      sand card. The band's inverted colour must stop at the chip edge.
   2. .relax-panel--ticket inherited the zine prose rules (drop cap +
      68ch measure), which are scoped as :not(--tile):not(--link) and so
      caught the new variant. Neutralised here rather than by editing
      that selector, to stay append-only in a file two sessions share. */

.relax-band--ocean .relax-panel--ticket h3 {
	color: var(--relax-ink, #171513);
}

.relax-band--ocean .relax-panel--ticket .text-secondary {
	color: var(--relax-muted, #6f6860) !important;
}

.relax-panel--ticket .card-body > .lc-block:first-of-type p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
	font-weight: inherit;
}

.relax-panel--ticket p {
	max-width: none;
}

/* RELAX_SALE_TICKETS_V1: drop-cap override, take two.
   The prose rule is
   `.relax-panel:not(--tile):not(--link) .card-body > .lc-block:first-of-type
    p:first-of-type::first-letter`, which scores 7 classes; the previous
   override scored 5 and lost. The :not()s are restated here purely to
   match that weight: a ticket is neither a tile nor a link, so they
   always pass. */
.relax-panel.relax-panel--ticket:not(.relax-panel--tile):not(.relax-panel--link)
	.card-body > .lc-block:first-of-type p:first-of-type::first-letter {
	float: none;
	font-size: inherit;
	line-height: inherit;
	padding: 0;
	font-weight: inherit;
	color: inherit;
}

/* ============================================================
   RELAX_TICKET_MODAL_V1  (2026-07-26)
   4-across tickets leave no room for the blurb on a phone, so the
   chip becomes a tap target below 768px and the copy opens in a
   modal cut from the same ticket stock. Uses Bootstrap's own
   Modal (bundle is already enqueued by the child theme): no
   <script> in page content.

   The chip is a <button> wrapping only spans: a heading inside a
   button is invalid HTML, so the step name is .relax-ticket__label
   here and the real <h2> lives in the modal.
   ============================================================ */

.relax-ticket-trigger {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	appearance: none;
	cursor: pointer;
}

.relax-ticket-trigger:focus-visible {
	outline: 3px solid var(--relax-orange, #ffc531);
	outline-offset: 3px;
}

.relax-ticket__label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: clamp(0.62rem, 2.3vw, 0.8rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--relax-ink, #171513);
	hyphens: auto;
}

/* Tap affordance: a small corner fold, mobile only. */
.relax-ticket-trigger::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 14px 14px;
	border-color: transparent transparent var(--relax-orange, #ffc531) transparent;
}

@media (min-width: 768px) {
	/* Desktop shows the blurb inline, so the chip has nothing to open. */
	.relax-ticket-trigger {
		pointer-events: none;
		cursor: default;
	}
	.relax-ticket-trigger::after {
		display: none;
	}
}

/* --- The modal, cut from the same ticket stock ------------------------- */

.relax-ticket-modal .modal-content {
	position: relative;
	background-color: var(--relax-sand, #f3efe6);
	border: 2px solid var(--relax-ink, #171513);
	border-radius: 0.5rem;
	box-shadow: 6px 7px 0 var(--relax-ink, #171513);
	color: var(--relax-ink, #171513);
	overflow: hidden;
}

/* Same perforated stub as the chip. */
.relax-ticket-modal .modal-content::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0.8rem;
	width: 2px;
	background-image: linear-gradient(
		var(--relax-ink, #171513) 0 3px,
		transparent 3px 7px
	);
	background-size: 2px 7px;
	opacity: 0.35;
	pointer-events: none;
}

.relax-ticket-modal .modal-body {
	position: relative;
	padding: 1.5rem 1.5rem 1.6rem 2rem;
}

.relax-ticket-modal__num {
	display: block;
	margin-bottom: 0.2rem;
	font-size: 2.6rem;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--relax-orange, #ffc531);
	-webkit-text-stroke: 1px var(--relax-ink, #171513);
}

.relax-ticket-modal .btn-close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	padding: 0.4rem;
	background-color: transparent;
	border-radius: 0;
	opacity: 0.65;
}
.relax-ticket-modal .btn-close:hover {
	opacity: 1;
}

.relax-ticket-modal .modal-backdrop,
.modal-backdrop.relax-ticket-backdrop {
	background-color: var(--relax-ink, #171513);
}

/* =========================================================================
   RELAX_SALE_BADGE_V1  (2026-07-26)
   The Woo sale badge sat at top:-6.8px / left:-6.8px, so on single product
   pages it clipped into the breadcrumb row and on archive cards it floated
   off the top edge of the thumbnail. Inset it and give it real padding.
   ========================================================================= */

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.single-product div.product > .onsale {
	padding: 0.62rem 1.25rem;
	min-height: 0;
	min-width: 0;
	line-height: 1.15;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	font-weight: 700;
}

/* Single product: drop it clear of the breadcrumbs, inside the gallery. */
.single-product div.product > .onsale {
	top: 34px;
	left: 20px;
	right: auto;
}

/* Archive / thumbnail cards: inset from the top-right of the image. */
.woocommerce ul.products li.product {
	position: relative;
}

.woocommerce ul.products li.product .onsale {
	top: 20px;
	right: 20px;
	left: auto;
	bottom: auto;
}

@media (max-width: 575.98px) {
	.single-product div.product > .onsale {
		top: 28px;
		left: 14px;
	}

	.woocommerce ul.products li.product .onsale {
		top: 14px;
		right: 14px;
	}
}

/* ============================================================
   RELAX_PRODUCT_REVIEWS_V1  (2026-07-26)
   A small review surface, not a review platform: a badge under
   the title, three cards, and a modal to write one. Markup in
   relax-woo-product-reviews.php (.relax-rv-*).

   Stars are inline SVG rather than Woo's star font, which does
   not survive the brand type stack.
   ============================================================ */

.relax-rv-stars {
	display: inline-flex;
	gap: 0.1em;
	line-height: 1;
	vertical-align: middle;
}

.relax-rv-star {
	width: 1.05rem;
	height: 1.05rem;
	fill: rgba(23, 21, 19, 0.18);
}

.relax-rv-star.is-on {
	fill: var(--relax-orange, #ffc531);
	stroke: var(--relax-ink, #171513);
	stroke-width: 1.1;
	paint-order: stroke fill;
}

.relax-rv-stars--sm .relax-rv-star {
	width: 0.9rem;
	height: 0.9rem;
}

/* --- Badge under the product title ------------------------------------ */

.relax-rv-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: -0.25rem 0 0.85rem;
	font-size: 0.85rem;
}

.relax-rv-avg {
	font-weight: 800;
	color: var(--relax-ink, #171513);
}

.relax-rv-jump {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: rgba(23, 21, 19, 0.62);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.relax-rv-jump:hover,
.relax-rv-jump:focus-visible {
	color: var(--relax-ink, #171513);
}

/* --- The section ------------------------------------------------------- */

.relax-rv {
	padding: 0 0 3rem;
}











.relax-rv-write {
	padding: 0.6rem 1.15rem;
	border: 3px solid var(--relax-ink, #171513);
	border-radius: 0;
	background: var(--relax-orange, #ffc531);
	box-shadow: 3px 3px 0 var(--relax-ink, #171513);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--relax-ink, #171513);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.relax-rv-write:hover,
.relax-rv-write:focus-visible {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--relax-ink, #171513);
}

.relax-rv-write:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--relax-ink, #171513);
}

/* --- Cards ------------------------------------------------------------- */

.relax-rv-list {
	display: grid;
	gap: 1rem;
	padding-top: 1.25rem;
}

@media (min-width: 768px) {
	.relax-rv-list {
		grid-template-columns: repeat(3, 1fr);
	}

	/* The expanded set keeps the same rhythm instead of restarting the grid. */
	.relax-rv-more.show {
		display: grid;
	}
}

.relax-rv-card {
	padding: 1rem 1.1rem;
	border: 2px solid var(--relax-ink, #171513);
	background: var(--relax-sand, #f3efe6);
}

.relax-rv-text {
	margin: 0.6rem 0 0.75rem;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--relax-ink, #171513);
}

.relax-rv-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 0.75rem;
	color: rgba(23, 21, 19, 0.6);
}

.relax-rv-author {
	font-weight: 800;
	color: var(--relax-ink, #171513);
}

.relax-rv-verified {
	padding: 0.1rem 0.4rem;
	border: 1px solid var(--relax-ink, #171513);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --- Read all / show fewer -------------------------------------------- */





.relax-rv-toggle .relax-rv-toggle-less,
.relax-rv-toggle.collapsed .relax-rv-toggle-more {
	display: inline;
}

.relax-rv-toggle .relax-rv-toggle-more,
.relax-rv-toggle.collapsed .relax-rv-toggle-less {
	display: none;
}

/* --- The modal, cut from the same stock as RELAX_TICKET_MODAL_V1 ------- */

.relax-rv-modal .modal-content {
	border: 3px solid var(--relax-ink, #171513);
	border-radius: 0;
	background: var(--relax-sand, #f3efe6);
	box-shadow: 6px 6px 0 var(--relax-ink, #171513);
}

.relax-rv-modal .modal-header {
	align-items: flex-start;
	border-bottom: 3px solid var(--relax-ink, #171513);
}

.relax-rv-modal .modal-title {
	margin: 0;
	font-size: clamp(1.05rem, 3.4vw, 1.3rem);
	font-weight: 900;
	line-height: 1.2;
	color: var(--relax-ink, #171513);
}

.relax-rv-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--relax-ink, #171513);
}

.relax-rv-field {
	margin-bottom: 0.9rem;
}

.relax-rv-field input,
.relax-rv-field textarea {
	width: 100%;
	padding: 0.6rem 0.7rem;
	border: 2px solid var(--relax-ink, #171513);
	border-radius: 0;
	background: #fff;
	font-size: 0.95rem;
	color: var(--relax-ink, #171513);
}

.relax-rv-field input:focus,
.relax-rv-field textarea:focus {
	outline: 3px solid var(--relax-orange, #ffc531);
	outline-offset: 1px;
}

.relax-rv-row {
	display: grid;
	gap: 0 0.75rem;
}

@media (min-width: 576px) {
	.relax-rv-row {
		grid-template-columns: 1fr 1fr;
	}
}

.relax-rv-note {
	margin: -0.35rem 0 0.9rem;
	font-size: 0.72rem;
	color: rgba(23, 21, 19, 0.6);
}

/* Star picker: inputs are visually hidden, the labels are the control.
   Rendered 5 to 1 in the markup so ~ can reach the stars to the left. */

.relax-rv-rating {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.relax-rv-rating legend {
	float: none;
	width: auto;
	margin-bottom: 0.35rem;
	padding: 0;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--relax-ink, #171513);
}

.relax-rv-rating input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.relax-rv-rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.2rem;
}

.relax-rv-rating legend {
	flex: 0 0 100%;
}

.relax-rv-rating label {
	margin: 0;
	cursor: pointer;
}

.relax-rv-rating svg {
	width: 2rem;
	height: 2rem;
	fill: rgba(23, 21, 19, 0.18);
	transition: fill 0.1s ease;
}

/* The hovered or checked star, and every star before it. */
.relax-rv-rating label:hover svg,
.relax-rv-rating label:hover ~ label svg,
.relax-rv-rating input:checked ~ label svg,
.relax-rv-rating input:checked + label svg {
	fill: var(--relax-orange, #ffc531);
	stroke: var(--relax-ink, #171513);
	stroke-width: 1.1;
	paint-order: stroke fill;
}

.relax-rv-rating input:focus-visible + label svg {
	outline: 3px solid var(--relax-orange, #ffc531);
	outline-offset: 2px;
}

.relax-rv-submit {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 3px solid var(--relax-ink, #171513);
	border-radius: 0;
	background: var(--relax-orange, #ffc531);
	box-shadow: 3px 3px 0 var(--relax-ink, #171513);
	font-size: 0.85rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--relax-ink, #171513);
	cursor: pointer;
}

.relax-rv-submit:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--relax-ink, #171513);
}

/* --- The photo column: gallery, then the review CTA -------------------- */

/* Wrapper added around the gallery in relax-woo-product-reviews.php so the
   button shares the photo's grid cell instead of starting a new grid row
   below both columns. */
.relax-media-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Centred under the photo, no rule above it: a full width line with a button
   on the end reads as a text input you can type a review into. */
.relax-rv-cta {
	display: flex;
	justify-content: center;
	padding: 1.5rem 0 0.5rem;
}

/* --- Section heading --------------------------------------------------- */

.relax-rv-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.75rem;
	margin: 0;
	font-size: 1.1rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--relax-ink, #171513);
}

.relax-rv-title-meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(23, 21, 19, 0.62);
}

/* --- Read all / show fewer, as a link rather than a boxed control ------- */

.relax-rv-toggle {
	display: block;
	margin: 1.25rem auto 0;
	padding: 0.25rem;
	border: 0;
	background: none;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--relax-ink, #171513);
	text-decoration: underline;
	text-underline-offset: 5px;
	cursor: pointer;
}

.relax-rv-toggle:hover,
.relax-rv-toggle:focus-visible {
	color: rgba(23, 21, 19, 0.62);
}

/* The section spans both grid tracks; div.product is a 2-col grid and Woo's
   default single uses floats. Same treatment as RELAX_PRODUCT_INFO_ACCORDION_V1. */
.woocommerce div.product > .relax-rv,
.relax-rv {
	grid-column: 1 / -1;
	clear: both;
	float: none;
	width: auto;
}

/* Mobile stacks the columns, so the under-photo button would sit between the
   image and the product title. Swap which of the two buttons shows. */
@media (max-width: 767.98px) {
	.relax-media-col .relax-rv-cta {
		display: none;
	}
}

@media (min-width: 768px) {
	.relax-rv-cta--mobile {
		display: none;
	}
}

/* RELAX_BUY_ROW_V1 moved the short description below the Details / Materials
   panel, where it ended up flush against the panel's bottom edge. */
.woocommerce-product-details__short-description {
	margin-top: 1.5rem;
}

/* ============================================================
   RELAX_ATC_MATCHES_REVIEW_V1  (2026-07-27)
   The add-to-cart button was wearing Woo/Bootstrap's default
   pill while the review button next to it used the screen-print
   block (.relax-rv-write). Same page, two languages. This gives
   add-to-cart the review button's exact treatment: 3px ink
   border, square corners, orange fill, hard offset shadow.
   ============================================================ */

.woocommerce div.product form.cart button.single_add_to_cart_button,
.single-product .single_add_to_cart_button {
	padding: 0.6rem 1.15rem !important;
	border: 3px solid var(--relax-ink, #171513) !important;
	border-radius: 999px !important;
	background: var(--relax-orange, #ffc531) !important;
	box-shadow: 3px 3px 0 var(--relax-ink, #171513);
	font-size: 0.8rem !important;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--relax-ink, #171513) !important;
	line-height: 1.2 !important;
	min-height: 0 !important;
	width: auto !important;
	flex: 0 0 auto;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible,
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus-visible {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--relax-ink, #171513);
	background: var(--relax-orange, #ffc531) !important;
	color: var(--relax-ink, #171513) !important;
}

.woocommerce div.product form.cart button.single_add_to_cart_button:active,
.single-product .single_add_to_cart_button:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--relax-ink, #171513);
}

/* Disabled variation state keeps the shape, drops the confidence. */
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled {
	opacity: 0.45;
	transform: none;
	box-shadow: 3px 3px 0 var(--relax-ink, #171513);
}

@media (max-width: 575.98px) {
	.woocommerce div.product form.cart button.single_add_to_cart_button,
	.single-product .single_add_to_cart_button {
		padding: 0.6rem 1rem !important;
		font-size: 0.78rem !important;
	}
}

/* Re-assert the AJAX feedback states, which are declared earlier in this
   file and would otherwise lose the cascade to the block above. */
.woocommerce div.product form.cart button.single_add_to_cart_button.is-added,
button.single_add_to_cart_button.is-added {
	background: #1F1C19 !important;
	border-color: #1F1C19 !important;
	color: #fff !important;
}
.woocommerce div.product form.cart button.single_add_to_cart_button.is-failed,
button.single_add_to_cart_button.is-failed {
	background: #B3261E !important;
	border-color: #B3261E !important;
	color: #fff !important;
	font-size: 0 !important;
}
.woocommerce div.product form.cart button.single_add_to_cart_button.is-failed::after,
.single_add_to_cart_button.is-failed::after {
	font-size: 1rem;
}