/* ==================================================================
   13 - RESPONSIVE
   Every breakpoint in the theme, in one place.

   MUST LOAD LAST. Everything here is an override.

   Structure:
     A. min-width ladder    480 -> 600 -> 768 -> 992 -> 1200 -> 1440
     B. max-width refinements for phones and small tablets
     C. capability queries  (hover, pointer, viewport height)
     D. glass tuning for smaller screens
     E. layout-independent product grid rules
     F. visibility utilities

     480px   xs   hero buttons unstack, wider cards
     600px   sm   secondary header icons, footer panels open
     768px   md   shop toolbar horizontal, 3 categories
     992px   lg   THE BIG ONE - nav inline, hero and product split
    1200px   xl   four-column grid, four-column footer
    1440px   2xl  wider gutters

   These are content-driven: each one is where the WaxOrbit layout
   actually starts to break, not where a particular phone ends.
   ================================================================== */


/* ==================================================================
   A. MIN-WIDTH LADDER
   ================================================================== */


/* ------------------------------------------------------------------
   480px - MOBILE LANDSCAPE / LARGE PHONE
   ------------------------------------------------------------------ */

@media (min-width: 480px) {

	/* Hero buttons sit side by side instead of stacking full width. */
	.wo-hero__actions .wo-btn {
		flex: 0 1 auto;
	}

	/* Carousel shows a hint of the next card. */
	.wo-carousel__item {
		width: min(72vw, 300px);
	}

	/* Product card gets a little more breathing room. */
	.wo-product-card__body {
		padding: var(--wo-space-6);
	}
}


/* ------------------------------------------------------------------
   600px - SMALL TABLET / LARGE PHONE LANDSCAPE
   ------------------------------------------------------------------ */

@media (min-width: 600px) {

	/* Wishlist and account icons return to the header. */
	.wo-header__actions .wo-action--secondary {
		display: inline-flex;
	}

	/* Buy row: quantity and wishlist beside the buttons. */
	.wo-product__buy .wo-qty,
	.wo-product__buy .wo-icon-btn {
		flex: 0 0 auto;
	}

	/* ---- Footer: spray interaction off, every panel open ---- */

	.wo-footer__panel {
		grid-template-rows: 1fr;
		overflow: visible;
	}

	.wo-footer__heading {
		cursor: default;
		margin-bottom: var(--wo-space-5);
	}

	.wo-footer__heading-icon {
		display: none;
	}

	@supports not (grid-template-rows: 0fr) {
		.wo-footer__panel {
			max-height: none;
		}
	}
}


/* ------------------------------------------------------------------
   768px - TABLET PORTRAIT
   ------------------------------------------------------------------ */

@media (min-width: 768px) {

	/* ---- Shop toolbar goes horizontal ---- */

	.wo-shop__toolbar {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wo-space-6);
	}

	/* ---- Section head can sit beside the carousel arrows ---- */

	.wo-carousel__head {
		align-items: center;
	}

	/* ---- Categories: three across ---- */

	.wo-grid--categories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* ---- Trust bar: two across ---- */

	.wo-grid--trust {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* ---- Carousel shows two cards ---- */

	.wo-carousel__item {
		width: calc((100% - var(--wo-gap)) / 2);
	}

	/* ---- Cart table gets more room ---- */

	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td {
		padding: var(--wo-space-5) var(--wo-space-6);
	}
}


/* ------------------------------------------------------------------
   992px - THE MAIN DESKTOP SWITCH
   Navigation goes inline, every split layout opens up.
   ------------------------------------------------------------------ */

@media (min-width: 992px) {

	/* ---- HEADER ---- */

	.wo-nav {
		display: block;
	}

	.wo-burger,
	.wo-header__divider {
		display: none;
	}

	/* Drawer can never be left open when resizing up to desktop. */
	.wo-drawer {
		transform: translateX(100%) !important;
		visibility: hidden !important;
	}

	.wo-header__bar {
		padding-left: var(--wo-space-6);
		padding-right: var(--wo-space-4);
	}

	/* ---- HERO ---- */

	.wo-hero {
		padding-bottom: 0;
	}

	.wo-hero__inner {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 5vw, 4rem);
		align-items: center;
		min-height: 82vh;
	}

	/* The media panel bleeds off the right edge of the screen. */
	.wo-hero__media {
		margin-right: calc(var(--wo-gutter) * -1);
		min-height: 72vh;
		align-self: stretch;
	}

	/* ---- WHY WAXORBIT ---- */

	.wo-features__inner {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	/* Centred beside the text rather than stretched to match its
	   height - stretching is what produced the empty panel below
	   the image. */
	.wo-features__media {
		min-height: 0;
		align-self: center;
	}

	/* ---- CATEGORIES: six across ---- */

	.wo-grid--categories {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	/* ---- TRUST BAR: four across ---- */

	.wo-grid--trust {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* ---- CAROUSEL: three cards ---- */

	.wo-carousel__item {
		width: calc((100% - (var(--wo-gap) * 2)) / 3);
	}

	.wo-carousel__dots {
		display: none;   /* arrows are enough with a mouse */
	}

	/* Arrows sit half outside the cards, in the gutter. */
	.wo-carousel__arrow {
		width: 46px;
		height: 46px;
	}

	.wo-carousel__arrow--prev { left: -20px; }
	.wo-carousel__arrow--next { right: -20px; }

	/* ---- SPLIT LAYOUTS ---- */

	.wo-split {
		grid-template-columns: var(--wo-split-cols, 1fr 1fr);
	}

	/* ---- SINGLE PRODUCT ---- */

	.wo-product__layout {
		grid-template-columns: 1.05fr 1fr;
	}

	/* Gallery follows the summary while it scrolls. */
	.wo-product__gallery {
		position: sticky;
		top: var(--wo-header-offset);
	}

	.woocommerce div.product div.images {
		position: sticky;
		top: var(--wo-header-offset);
	}

	/* The mobile buy bar is never needed with the sticky gallery. */
	.wo-sticky-buy {
		display: none;
	}

	/* ---- REVIEWS: list beside the form ---- */

	.wo-reviews {
		grid-template-columns: 1fr 1fr;
	}

	/* ---- CART & CHECKOUT ----
	   Deliberately not here. Both pages are laid out by
	   .wo-shop-page__grid in 14-cart-checkout.css, which loads after
	   this file and owns their columns end to end.

	   Rules for those pages used to live in both files, and the two
	   fought over the grid - which is what squeezed the checkout
	   summary into a narrow strip. Keeping the layout in one place
	   removes the conflict rather than working around it. */

	/* ---- ACCOUNT ----
	   Layout now lives in 10-woocommerce.css (section I). The custom
	   dashboard and its stylesheet were removed. Legacy float rules
	   lived here and fought that layout. Do not re-add floats. */

	/* ---- BLOG: content beside sidebar ---- */

	.wo-blog__layout {
		display: grid;
		grid-template-columns: 1fr 300px;
		gap: clamp(2rem, 4vw, 3.5rem);
		align-items: start;
	}

	.wo-sidebar {
		position: sticky;
		top: var(--wo-header-offset);
	}

	/* ---- FOOTER DENSITY ----
	   Footer links opt out of the global 44px touch-target minimum
	   from 02-base.css. That rule applies to any coarse pointer,
	   including touchscreen laptops, and was setting the row height
	   regardless of the gap value. */

	.wo-footer__list a,
	.wo-footer__legal a {
		min-height: 0;
		padding-block: 0;
		line-height: 1.45;
	}

	.wo-footer__list {
		gap: var(--wo-space-2);
	}

	.wo-footer__heading {
		margin-bottom: var(--wo-space-4);
	}

	.wo-footer__main {
		padding-block: clamp(2.5rem, 4vw, 3.5rem);
	}
}


/* ------------------------------------------------------------------
   1200px - DESKTOP
   ------------------------------------------------------------------ */

@media (min-width: 1200px) {

	/* ---- Four-column product grid ---- */

	.woocommerce ul.products,
	.wo-products,
	.wo-grid--products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* ---- Carousel: four cards ---- */

	.wo-carousel__item {
		width: calc((100% - (var(--wo-gap) * 3)) / 4);
	}

	/* ---- Footer: brand plus three link columns ----
	   Three equal tracks means the gap between Explore -> Help and
	   Help -> Legal is identical regardless of how long the link text
	   is. Sizing them to content is what made the spacing look
	   uneven. */

	.wo-grid--footer {
		grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 2.8vw, 2.75rem);
		row-gap: var(--wo-space-10);
	}

	.wo-footer__brand {
		grid-column: auto;
		max-width: 320px;
	}

	/* ---- Testimonials: three across ---- */

	.wo-grid--cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* ---- Roomier nav ---- */

	.wo-nav__list {
		gap: var(--wo-space-2);
	}

	.wo-nav__list a {
		padding-inline: var(--wo-space-5);
	}
}


/* ------------------------------------------------------------------
   1440px - LARGE DESKTOP
   ------------------------------------------------------------------ */

@media (min-width: 1440px) {

	:root {
		--wo-gutter: 2.5rem;
	}

	/* Hero copy is allowed to breathe rather than stretch. */
	.wo-hero__content {
		max-width: 660px;
	}

	/* Cards keep a comfortable maximum height. */
	.wo-product-card__media {
		aspect-ratio: 1 / 1;
	}
}


/* ==================================================================
   B. MAX-WIDTH REFINEMENTS
   ================================================================== */


/* ------------------------------------------------------------------
   BELOW 768px - PHONE PRODUCT GRID AND FILTERS
   ------------------------------------------------------------------ */

@media (max-width: 767.98px) {

	/* Narrower page gutter so cards get more width. */
	.wo-shop .wo-container,
	.wo-product .wo-container {
		padding-inline: 0.75rem;
	}

	/* Belt and braces: kill any residual Woo width rule. */
	.woocommerce ul.products[class*="columns-"] li.product,
	.woocommerce-page ul.products[class*="columns-"] li.product,
	.woocommerce ul.products li.product {
		width: 100%;
		max-width: none;
		float: none;
		clear: none;
		margin: 0;
	}

	/* Related products two across as well. */
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.625rem;
	}

	/* ---- Card text on phones ----
	   Sizes are not set here. Every card text size is a clamp() in
	   10-woocommerce.css, which scales continuously from 360px to
	   desktop - a fixed value in this block would override the clamp
	   and pin the text small again, which is exactly what used to
	   happen. Only layout concerns belong here. */

	.wo-product-card__excerpt {
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}

	.wo-product-card .wo-btn {
		padding-inline: var(--wo-space-3);
		min-height: 44px;
	}

	/* Slightly tighter internal spacing so the taller text does not
	   push the card height up. */
	.wo-product-card__body {
		gap: var(--wo-space-2);
		padding: clamp(0.75rem, 3vw, 1.125rem);
	}

	.wo-product-card__footer {
		gap: var(--wo-space-3);
	}

	.wo-product-card__wishlist {
		top: var(--wo-space-2);
		right: var(--wo-space-2);
	}

	/* Every axis pinned, or 02-base.css's 44px touch-target minimum
	   stretches the circle into an oval. */
	.wo-product-card__wishlist.wo-icon-btn {
		width: 34px;
		height: 34px;
		min-width: 34px;
		min-height: 34px;
		max-width: 34px;
		max-height: 34px;
	}

	.wo-product-card__badges {
		top: var(--wo-space-2);
		left: var(--wo-space-2);
	}

	/* ---- Shop filter pills wrap instead of scrolling ----
	   Horizontal scrolling hides categories a customer never
	   discovers. Wrapping keeps every scent family visible. */

	.wo-shop__filters .wo-scroll-row {
		flex-wrap: wrap;
		overflow-x: visible;
		scroll-snap-type: none;
		padding-bottom: 0;
		gap: var(--wo-space-2);
	}

	/* Cancel the edge bleed - it only exists to hint at scrolling. */
	.wo-shop__filters .wo-scroll-row--bleed {
		margin-inline: 0;
		padding-inline: 0;
	}

	.wo-shop__filters .wo-scroll-row > * {
		flex: 0 0 auto;
		scroll-snap-align: none;
	}

	.wo-shop__filters .wo-pill {
		padding: 0.4375rem var(--wo-space-4);
		min-height: 34px;
		font-size: var(--wo-text-xs);
	}
}


/* ------------------------------------------------------------------
   BELOW 480px - HEADER FITS THE PILL
   The logo would not shrink, pushing the action icons outside the
   bar. Let it shrink, tighten the spacing, drop the divider.
   ------------------------------------------------------------------ */

@media (max-width: 480px) {

	.wo-header {
		padding-inline: 0.75rem;
	}

	.wo-header__bar {
		gap: var(--wo-space-2);
		padding: var(--wo-space-2) var(--wo-space-2) var(--wo-space-2) var(--wo-space-4);
		min-height: 60px;
	}

	/* min-width: 0 is what actually allows a flex item to shrink. */
	.wo-logo {
		min-width: 0;
		flex-shrink: 1;
		overflow: hidden;
	}

	.wo-logo__text {
		font-size: 1.0625rem;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wo-logo img,
	.custom-logo {
		height: 28px;
	}

	.wo-header__actions {
		gap: 0;
	}

	.wo-header__divider {
		display: none;
	}

	.wo-icon-btn {
		width: 36px;
		height: 36px;
		min-height: 36px;   /* beats the 44px touch-target rule */
	}

	.wo-icon-btn svg {
		width: 17px;
		height: 17px;
	}

	.wo-burger {
		width: 36px;
		height: 36px;
	}
}


/* ------------------------------------------------------------------
   BELOW 360px - VERY SMALL PHONES
   ------------------------------------------------------------------ */

@media (max-width: 360px) {

	.wo-logo__text {
		font-size: 0.9375rem;
	}

	.wo-icon-btn,
	.wo-burger {
		width: 32px;
		height: 32px;
		min-height: 32px;
	}
}


/* ==================================================================
   C. CAPABILITY QUERIES
   ================================================================== */


/* ------------------------------------------------------------------
   HOVER-CAPABLE DEVICES ONLY
   Hover effects on touch screens get stuck in their hover state
   after a tap. Gating them keeps mobile clean.
   ------------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {

	.wo-product-card:hover {
		transform: translateY(-5px);
	}

	.wo-category-card:hover {
		transform: translateY(-4px);
	}

	.wo-testimonial:hover {
		transform: translateY(-3px);
	}
}

@media (hover: none) {

	/* No lift, no image zoom, no alt-image swap on touch. */
	.wo-product-card:hover,
	.wo-category-card:hover,
	.wo-testimonial:hover {
		transform: none;
	}

	.wo-product-card:hover .wo-product-card__media img {
		transform: none;
	}

	.wo-product-card__media-alt {
		display: none;
	}

	/* Dropdowns need a tap, not a hover, so hide the hover version. */
	.wo-nav__list li:hover > .sub-menu {
		opacity: 0;
		visibility: hidden;
	}

	.wo-nav__list li.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateX(-50%) translateY(0);
	}
}


/* ------------------------------------------------------------------
   SHORT VIEWPORTS
   Laptops with limited height should not get an 82vh hero that
   pushes everything below the fold.
   ------------------------------------------------------------------ */

@media (min-width: 992px) and (max-height: 780px) {

	.wo-hero__inner {
		min-height: auto;
		padding-block: var(--wo-space-12);
	}

	.wo-hero__media {
		min-height: 480px;
	}
}


/* ==================================================================
   D. GLASS ON SMALLER SCREENS
   Backdrop blur is GPU-expensive over large areas. Blur radius is
   stepped down as the screen shrinks so the effect stays smooth
   while still reading as glass.
   ================================================================== */

@media (max-width: 991.98px) {

	.wo-header__bar {
		backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
		-webkit-backdrop-filter: blur(22px) saturate(180%) brightness(1.06);
		box-shadow:
			0 14px 38px rgba(6, 3, 20, 0.48),
			inset 0 1px 0 rgba(255, 255, 255, 0.28),
			inset 0 0 30px rgba(214, 202, 255, 0.04);
	}

	.wo-header.is-scrolled .wo-header__bar {
		backdrop-filter: blur(26px) saturate(190%) brightness(1.08);
		-webkit-backdrop-filter: blur(26px) saturate(190%) brightness(1.08);
	}

	.wo-footer {
		backdrop-filter: blur(20px) saturate(175%) brightness(1.04);
		-webkit-backdrop-filter: blur(20px) saturate(175%) brightness(1.04);
	}

	.wo-drawer {
		backdrop-filter: blur(20px) saturate(175%);
		-webkit-backdrop-filter: blur(20px) saturate(175%);
	}
}

@media (max-width: 599.98px) {

	.wo-header__bar {
		backdrop-filter: blur(16px) saturate(170%) brightness(1.05);
		-webkit-backdrop-filter: blur(16px) saturate(170%) brightness(1.05);
	}

	/* A full-height blurred footer is the heaviest surface on the
	   page. Below 600px it becomes a tinted panel with the same edge
	   lighting, which costs nothing to scroll. Delete this rule if
	   your target devices handle the real blur comfortably. */
	.wo-footer {
		background: linear-gradient(
			168deg,
			rgba(38, 27, 82, 0.92) 0%,
			rgba(24, 16, 56, 0.94) 100%
		);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}


/* ==================================================================
   E. PRODUCT GRID - TRACK FILLING
   Not breakpoint-specific: the card must fill its grid track at
   every width. min-width: 0 is the part that actually does it -
   without it a flex item refuses to size below its content.
   ================================================================== */

.woocommerce ul.products,
.wo-products,
.wo-grid--products {
	justify-items: stretch;
	align-items: stretch;
}

.woocommerce ul.products li.product,
.wo-products li.product {
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	float: none;
	display: flex;
}

.woocommerce ul.products li.product > *,
.wo-products li.product > * {
	width: 100%;
	min-width: 0;
}

.wo-product-card {
	width: 100%;
	min-width: 0;
}

/* Any residual Woo column class is neutralised. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	width: 100%;
	max-width: none;
	float: none;
}

/* Three across on tablet - 768px to 1199px. */
@media (min-width: 768px) and (max-width: 1199.98px) {

	.woocommerce ul.products,
	.wo-products,
	.wo-grid--products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(1rem, 2.2vw, 1.5rem);
	}

	/* Related products stay two across on tablet. Three narrow cards
	   in a secondary section made the text look cramped beside the
	   product above it, even at identical font sizes. */
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(1rem, 2.2vw, 1.5rem);
	}
}

/* Narrow tablets and large phones keep two. */
@media (min-width: 600px) and (max-width: 767.98px) {

	.woocommerce ul.products,
	.wo-products,
	.wo-grid--products,
	.woocommerce .related ul.products,
	.woocommerce .upsells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(0.875rem, 2.5vw, 1.25rem);
	}
}


/* ==================================================================
   F. VISIBILITY UTILITIES
   Named by the breakpoint at which the element appears or hides.
   ================================================================== */

.wo-hide-mobile { display: none; }

@media (min-width: 768px) {
	.wo-hide-mobile  { display: block; }
	.wo-hide-desktop { display: none; }
}

@media (max-width: 767.98px) {

	.wo-mobile-full {
		width: 100%;
	}

	.wo-mobile-center {
		text-align: center;
	}

	.wo-mobile-stack {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ==================================================================
   CIRCULAR ICON BUTTONS - GLOBAL GUARANTEE
   Placed at the end of the last-loaded stylesheet so nothing can
   override it downstream.

   Four separate things were turning these circles into ovals:

   1. min-height: 44px in 02-base.css applies to every a and button
      on a coarse pointer. A 34px button became 34 wide and 44 tall.
   2. As a flex child the button shrinks along the main axis while
      its height stays fixed.
   3. As a grid child it stretches to fill its track.
   4. A long sibling label can compress it in a tight row.

   The pattern below pins both axes with min and max, so no parent
   can size the button at all - it is the only reliable way to keep
   a circle circular in an unknown layout context.
   ================================================================== */

.wo-icon-btn,
.wo-product-card__wishlist,
.wo-social__link,
.wo-hero__arrow,
.wo-carousel__arrow,
.wo-to-top {
	box-sizing: border-box;
	flex: 0 0 auto;
	align-self: center;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: visible;
}

/* The heart, and any icon inside a circular button, must not shrink
   or stretch with its container. */
.wo-icon-btn svg,
.wo-product-card__wishlist svg,
.wo-social__link svg,
.wo-hero__arrow svg,
.wo-carousel__arrow svg,
.wo-to-top svg {
	flex: 0 0 auto;
	display: block;
}


/* ---- Size locks ----
   Each size states all six values. Setting width alone leaves the
   inherited min/max in force, which is what caused the distortion
   in the first place. */

.wo-icon-btn {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
}

.wo-icon-btn--sm {
	width: 34px;
	height: 34px;
	min-width: 34px;
	min-height: 34px;
	max-width: 34px;
	max-height: 34px;
}

.wo-icon-btn--lg {
	width: 46px;
	height: 46px;
	min-width: 46px;
	min-height: 46px;
	max-width: 46px;
	max-height: 46px;
}

.wo-social__link {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
}

.wo-to-top {
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	max-width: 44px;
	max-height: 44px;
}

/* The card wishlist heart scales down on smaller cards but stays
   square at every step. */
.wo-product-card__wishlist.wo-icon-btn {
	width: 36px;
	height: 36px;
	min-width: 36px;
	min-height: 36px;
	max-width: 36px;
	max-height: 36px;
}

@media (max-width: 767.98px) {

	.wo-product-card__wishlist.wo-icon-btn {
		width: 34px;
		height: 34px;
		min-width: 34px;
		min-height: 34px;
		max-width: 34px;
		max-height: 34px;
	}
}

@media (max-width: 400px) {

	.wo-product-card__wishlist.wo-icon-btn {
		width: 32px;
		height: 32px;
		min-width: 32px;
		min-height: 32px;
		max-width: 32px;
		max-height: 32px;
	}

	.wo-social__link {
		width: 38px;
		height: 38px;
		min-width: 38px;
		min-height: 38px;
		max-width: 38px;
		max-height: 38px;
	}
}


/* ---- Drawer wishlist ----
   No exception any more. The drawer heart is a circle like every
   other icon button; its exact size is set in 07-header.css, beside
   the row definition it belongs to, rather than being split across
   two files.

   The rule that used to sit here made it a stretched pill to match
   the My Account button's height, which is what made it look oval. */
   
/* ==================================================================
   CAROUSEL EDGE SPACING - ALL WIDTHS
   The bleed is removed outright rather than reduced per breakpoint.
   A breakpoint list only protects the widths it names, and the gaps
   between them are exactly where the first and last cards were still
   touching the screen edge.

   With no negative margin, the track sits inside the container at
   every width, so its first card lines up with the section heading
   above it and the last card keeps the same distance from the right
   edge. The card width still leaves the next one peeking, which is
   what signals the row scrolls.
   ================================================================== */

.wo-carousel__track,
.wo-carousel__track--bleed {
	margin-inline: 0;
	padding-inline: 0;

	/* Room for the card's hover lift and glow, which would otherwise
	   be clipped by the scroll container. */
	padding-block: var(--wo-space-2) var(--wo-space-6);
}

/* Snap the last card to the right edge of the padded area, not to
   the raw container edge - without this, scrolling to the end undoes
   the spacing at the moment it is most visible. */
.wo-carousel__track > *:last-child {
	scroll-snap-align: end;
}

/* Card width is derived from the column count, minus the gap, so the
   next card always peeks by the same amount whatever the width. */
.wo-carousel__item {
	width: calc(100% - var(--wo-space-12));
}

@media (min-width: 600px) {

	.wo-carousel__item {
		width: calc((100% - var(--wo-gap)) / 2 - (var(--wo-space-6) / 2));
	}
}

@media (min-width: 768px) {

	.wo-carousel__item {
		width: calc((100% - var(--wo-gap)) / 2);
	}
}

@media (min-width: 992px) {

	.wo-carousel__item {
		width: calc((100% - (var(--wo-gap) * 2)) / 3);
	}
}

@media (min-width: 1200px) {

	.wo-carousel__item {
		width: calc((100% - (var(--wo-gap) * 3)) / 4);
	}
}