/**
 * Theme overrides.
 *
 * Loaded after the parent theme's stylesheets and after the design variables
 * copied from the reference storefront. Only layout glue lives here; all
 * colours, fonts, radii and container widths come from theme-options.css.
 */

/* ------------------------------------------------------------------ layout */
.wd-content-layout {
	padding-block: 0;
}

/* Homepage sections -------------------------------------------------------- */

/* The homepage fragment is plain markup: one <section> per reference block, so
   all of its layout lives here rather than coming from a page builder's
   container styles. */

.ms-page {
	display: block;
}

/* Sections are plain blocks. Do NOT set width: 100% here: a pinned width stops
   the full-bleed rows below from widening when they pull their margins negative,
   which shifts them sideways and clips the first card instead. */
.ms-section {
	display: block;
}

/* The hero row and the product rows break out of the container to the viewport
   width, as the reference does. */
.ms-section-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding-block: 45px 0;
}

/* Artwork left, copy right. The copy is one flex column, mirroring the reference
   (its hero copy sits in a `flex column / justify:center / gap:20px` container).
   As plain grid siblings the banner's height sets row 1 and pushes the button
   into row 2 -- 227px below the heading instead of 20px. */
.ms-section-hero > .elementor-widget-wd_banner {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.ms-hero-copy {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	min-width: 0;
}

.ms-hero-copy > .elementor-widget-wd_title {
	margin-bottom: 0;
}

.ms-hero-copy > .elementor-widget-wd_button {
	margin-top: 0;
}

@media (max-width: 768px) {
	.ms-section-hero {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 30px 0;
	}

	.ms-section-hero > .elementor-widget-wd_banner,
	.ms-hero-copy {
		grid-column: 1;
		grid-row: auto;
	}
}

/* The three category banners: a full-bleed row where the middle one is roughly
   twice as wide, all 516px tall with cover-cropped artwork. Matches the
   reference's 314 / 680 / 314 boxes. */
.ms-section-categories {
	/* the parent's banner stylesheet crops artwork to this variable, so set it
	   instead of fighting the height chain */
	--wd-img-height: 516px;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 20px;
	height: 516px;
	overflow: hidden;
	margin-inline: calc(50% - 50vw);
	margin-block: 45px;
}

.ms-section-categories > .elementor-widget-wd_banner {
	flex: 0 0 314px;
	min-width: 0;
	margin: 0;
}

.ms-section-categories > .elementor-widget-wd_banner:nth-child(2) {
	flex-basis: 680px;
}

/* After the parent crops the artwork, the boxes only need a definite height so
   the flex row cannot be pushed around by the image's natural size. */
.ms-section-categories .elementor-widget-container,
.ms-section-categories .promo-banner-wrapper,
.ms-section-categories .promo-banner,
.ms-section-categories .main-wrapp-img,
.ms-section-categories .banner-image {
	height: 100%;
	overflow: hidden;
}

.ms-section-categories .banner-image img {
	display: block;
	width: 100%;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.ms-section-categories {
		flex-wrap: wrap;
		height: auto;
		padding-inline: 20px;
		margin-block: 30px;
	}

	.ms-section-categories > .elementor-widget-wd_banner,
	.ms-section-categories > .elementor-widget-wd_banner:nth-child(2) {
		flex: 1 1 100%;
	}

	.ms-section-categories .banner-image img {
		height: auto;
	}
}

/* Product sections: a heading row, then the full-bleed grid. The section itself
   stays a plain block -- the grid inside pulls its margins negative to bleed to
   the viewport edge, and a grid parent would let that stretch its tracks and push
   the button off the right edge. */
.ms-section-products {
	padding-block: 70px 90px;
}

.ms-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 30px;
}

.ms-section-head > .elementor-widget-wd_title {
	margin-bottom: 0;
}

.ms-section-head > .elementor-widget-wd_button {
	flex: 0 0 auto;
	margin-top: 0;
}

@media (max-width: 768px) {
	.ms-section-products {
		padding-block: 45px 55px;
	}

	.ms-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

/* Guide carousel: the reference shows its five product guides one slide at a
   time, each slide a full-width card with the cover on the left and centred copy
   on the right, 795px tall. Scroll-snap reproduces that shape: one card per view,
   swipe or scroll to reach the rest, no script involved. */
.ms-section-guides {
	padding-block: 37px;
}

.ms-guides-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 30px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.ms-guides-track::-webkit-scrollbar {
	display: none;
}

.ms-guide-card {
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
	gap: 60px;
	align-items: center;
	min-height: 720px;
	padding-inline: 20px;
}

/* artwork left */
.ms-guide-card > .elementor-widget-wd_banner {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
}

/* copy right: heading above, call to action below, each in its own row */
.ms-guide-card > .elementor-widget-wd_title {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	text-align: center;
	margin-bottom: 12px;
}

.ms-guide-card > .elementor-widget-wd_button {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
	margin-top: 12px;
}

.ms-guide-card > .elementor-widget-wd_button .wd-btn-wrap,
.ms-guide-card > .elementor-widget-wd_button a {
	margin-inline: auto;
}

/* Artwork keeps its ratio instead of stretching to the copy height. */
.ms-section .banner-image img,
.ms-section .promo-banner-wrapper img {
	display: block;
	width: 100%;
	height: auto;
}

/* Narrower viewports: one column everywhere, with the reference's side margins. */
@media (max-width: 1024px) {
	.ms-section-hero,
	.ms-section-categories {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ms-guide-card {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		min-height: 0;
		padding-inline: 20px;
	}

	.ms-guide-card > * {
		grid-column: auto;
		grid-row: auto;
	}
}

@media (max-width: 1024px) {
	.ms-section-hero,
	.ms-section-categories,
	.ms-section-products,
	.ms-section-guide,
	.ms-section-carousel {
		padding-inline: 20px;
	}
}

/* Product tiles ------------------------------------------------------------ */

/* The reference renders each product block as a full-bleed carousel: five cards
   per row, cards 264px wide with a 30px gutter, starting 17px in from the
   viewport edge. A static grid reproduces that shape: break out of the container
   by pulling the margins negative, then lay out five columns. The width has to
   stay auto -- pinning it to 100% would shift the element sideways without
   widening it, clipping the first card. */
.ms-home-grid {
	margin-inline: calc(50% - 50vw);
	padding-inline: 17px;
}

.ms-home-grid .products {
	--wd-col-lg: 5;
	--wd-col-md: 4;
	--wd-col-sm: 2;
	--wd-gap-lg: 30px;
	--wd-gap-md: 20px;
	--wd-gap-sm: 10px;
	row-gap: 30px;
}

.ms-home-grid .products.grid-columns-4 {
	--wd-col-lg: 4;
}

/* One row per block, which is what the reference shows. */
.ms-home-grid .products > .wd-product:nth-child(n + 6) {
	display: none;
}

@media (max-width: 1024px) {
	.ms-home-grid .products > .wd-product:nth-child(n + 9) {
		display: none;
	}
}

@media (max-width: 768px) {
	.ms-home-grid .products > .wd-product:nth-child(n + 5) {
		display: none;
	}
}

/* Category banner crop ------------------------------------------------------ */

/* This has to sit at the very end of the file, and carry one more class than the
   generic artwork rule above: that rule sets height:auto at the same specificity,
   and a later rule of equal specificity wins, so the crop would never apply. The
   height itself comes from the parent banner stylesheet's `--wd-img-height`. */
.ms-section-categories > .elementor-widget-wd_banner .banner-image img {
	height: var(--wd-img-height, 516px);
	object-fit: cover;
	object-position: center;
}

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

@media (max-width: 576px) {
	.elementor-image-box-wrapper {
		display: flex;
		align-items: center;
	}
}

/* The full-bleed rows are 100vw wide, which adds horizontal overflow when a
   classic scrollbar narrows the viewport. The clip has to be on body, not on
   .ms-page: .ms-page is only as wide as the content container, so clipping
   there cut the rows to the container width and hid the first and last card. */
body {
	overflow-x: clip;
}

/* Mobile layout ------------------------------------------------------------- */

/* The reference stacks its category banners on mobile: three full-width banners of
   358x215 at 16px side margins (measured at a 390px viewport). As a wrapping flex
   row ours collapsed into slivers -- 84/182/84 x 516. */
@media (max-width: 1024px) {
	.ms-section-categories {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		height: auto;
		overflow: visible;
		gap: 20px;
		padding-inline: 16px;
		margin-block: 30px;
	}

	/* The page CSS pins each banner with a three-class selector
	   (`.elementor-1670 .elementor-element.elementor-element-<id>`: max-width 24% /
	   52% / 24%, mirroring the desktop 314 / 680 / 314 row, plus its own
	   --wd-img-height). Matching that specificity is what makes the override stick:
	   a two-class selector only won for the middle banner, which also matched its
	   :nth-child(2) half. */
	.ms-section-categories > .elementor-element.elementor-widget-wd_banner {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		height: 215px;
		--wd-img-height: 215px;
	}

	/* The reference's mobile hero runs edge to edge: a full-width banner, then the
	   copy at full width with its content inset 30px. */
	.ms-section-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		padding-block: 24px 0;
		padding-inline: 0;
		margin-inline: calc(50% - 50vw);
	}

	.ms-section-hero > .elementor-widget-wd_banner {
		grid-column: 1;
		grid-row: auto;
	}

	.ms-hero-copy {
		grid-column: 1;
		grid-row: auto;
		padding-inline: 30px;
	}
}

/* Mobile guide cards -------------------------------------------------------- */

/* Two specificity problems, both from the mobile block above being too polite:
   `.ms-guide-card > *` (one class) loses to `.ms-guide-card > .elementor-widget-wd_banner`
   (two), so the artwork stayed in column 1 of the desktop two-column grid -- and
   that column collapses to zero on a 360px card, rendering the cover at 0x0. The
   per-element page CSS also pins each cover's size, so one card came out 78x78 and
   the next 320x260. */
@media (max-width: 1024px) {
	.ms-guide-card {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		min-height: 0;
		padding-inline: 20px;
	}

	.ms-guide-card > .elementor-element.elementor-widget {
		grid-column: 1;
		grid-row: auto;
	}

	.ms-guide-card > .elementor-element.elementor-widget-wd_banner {
		width: 100%;
		max-width: none;
		height: auto;
		--wd-img-height: auto;
	}

	.ms-guide-card > .elementor-element.elementor-widget-wd_banner .banner-image img,
	.ms-guide-card > .elementor-element.elementor-widget-wd_banner .promo-banner-wrapper img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}
}

/* The guide copy's container carries padding-inline: 132px from the page CSS
   (copied from the reference's roomy desktop inset). With box-sizing: border-box
   on a 320px card that leaves a 56px content box, so `width: 100%` resolves to
   56px and the copy wraps to a couple of characters a line -- no width or
   min-width declaration can fix that, the padding has to go. Scoped to the guide
   cards on narrow viewports. */
@media (max-width: 1024px) {
	.ms-guide-card > .elementor-element.elementor-widget-wd_title .elementor-widget-container,
	.ms-guide-card > .elementor-element.elementor-widget-wd_button .elementor-widget-container {
		padding-inline: 0;
	}
}

/* Call-to-action buttons ---------------------------------------------------- */

/* The page CSS pins every button widget (max-width: 33%, per-element widths) and
   pads its container 25px / 40px, which on a phone is narrower than the label --
   "Dive in & Explore" wrapped onto three lines. Size them to their label instead. */
@media (max-width: 1024px) {
	.ms-hero-copy > .elementor-element.elementor-widget-wd_button,
	.ms-section-head > .elementor-element.elementor-widget-wd_button {
		width: auto;
		max-width: none;
	}

	.ms-hero-copy > .elementor-element.elementor-widget-wd_button .elementor-widget-container,
	.ms-section-head > .elementor-element.elementor-widget-wd_button .elementor-widget-container {
		width: auto;
		max-width: none;
		padding-inline: 0;
	}

	.ms-hero-copy .elementor-widget-wd_button a,
	.ms-section-head .elementor-widget-wd_button a {
		white-space: nowrap;
	}
}

/* The hero copy's title container carries padding-left: 115px from the page CSS.
   With box-sizing: border-box on a 330px widget that leaves a 215px content box
   starting at x=145 on a 390px screen, while the button below it sits at x=30 --
   the copy looked right-aligned and detached from its own call to action. The
   reference's mobile layout runs both to the card's left edge. */
@media (max-width: 1024px) {
	.ms-hero-copy > .elementor-element.elementor-widget-wd_title .elementor-widget-container {
		padding-inline: 0;
	}
}