/* ==========================================================================
   Ecommerce Layout 3 — layout styles
   Enqueued from functions.php. Colours, type and spacing come from theme.json
   presets (var(--wp--preset--*)), so Global Styles edits flow through here.

   Grids are defined here explicitly rather than trusting the layout CSS
   WordPress generates (see Ecommerce Layout 2: a two-value block gap makes
   WP's grid calc() invalid and everything stacks). `body` in a selector lifts
   specificity above WP's generated .wp-container-* rules.
   ========================================================================== */

/* --- Utilities --------------------------------------------------------- */
.el3-search .screen-reader-text,
.el3-subscribe .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.el3-icon { flex: 0 0 auto; display: block; }

/* Shortcode blocks can leave empty <p> wrappers behind (wpautop). */
.el3-header p:empty,
.el3-footer p:empty,
.el3-newsletter p:empty,
.el3-carousel p:empty { display: none; }

/* --- Header ------------------------------------------------------------ */
/* The header groups are full-bleed with no layout padding of their own, so
   without this the search and cart sit flush against the viewport edges. */
.el3-header,
.el3-header-nav { padding-inline: clamp(16px, 3vw, 44px) !important; }

/* Three equal-weight tracks so the logo sits on the true centre line no
   matter how wide the search or the cart/social group are. */
body .wp-block-group.el3-header-top {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 24px;
}
.el3-header-top > * { margin: 0 !important; }
.el3-header-top > .el3-header-left { justify-self: start; }
.el3-header-top > .wp-block-site-title { justify-self: center; text-align: center; }
.el3-header-top > .el3-header-right { justify-self: end; }

.el3-header .wp-block-site-title a,
.el3-footer .wp-block-site-title a,
.el3-about .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
}

.el3-header-left p,
.el3-header-right p,
.el3-account-wrap p { margin: 0; }

/* Search: icon + borderless field, reads as "🔍 Search" */
.el3-search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.el3-search input[type="search"] {
	width: 9em;
	padding: 4px 0;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	-webkit-appearance: none;
	appearance: none;
}
.el3-search input[type="search"]::placeholder { color: var(--wp--preset--color--contrast); opacity: 1; }
.el3-search input[type="search"]:focus {
	outline: none;
	border-bottom-color: currentColor;
}
.el3-search input[type="search"]::-webkit-search-cancel-button { display: none; }

/* Cart box */
.el3-cart-link {
	display: inline-block;
	padding: 6px 12px;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base) !important;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: .5px;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
}
.el3-cart-link:hover,
.el3-cart-link:focus-visible { background: var(--wp--preset--color--accent-2); }

/* Menu row */
.el3-header-nav {
	border-top: 1px solid var(--wp--preset--color--accent-6);
	border-bottom: 1px solid var(--wp--preset--color--accent-6);
}
.el3-header-nav .el3-account a,
.el3-header-nav .el3-account-sep {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: inherit;
}

/* --- Hero slider ------------------------------------------------------- */
.el3-hero { position: relative; }

/* Before the script runs (and if it never does): show slide one only.
   Front end only — the editor keeps every slide visible for editing. */
.el3-front .el3-hero-slider:not(.is-enhanced) > :not(:first-child) { display: none; }

body .wp-block-group.el3-hero-slider.is-enhanced {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.el3-hero-slider.is-enhanced::-webkit-scrollbar { display: none; }
.el3-hero-slider.is-enhanced > * {
	flex: 0 0 100%;
	margin: 0 !important;
	scroll-snap-align: start;
}

.el3-hero-slide.wp-block-cover {
	min-height: clamp(360px, 48vw, 680px) !important;
	padding-inline: 10vw;
}
.el3-hero-caption { width: fit-content; max-width: 100%; }
.el3-hero-caption h2 { margin: 0; white-space: nowrap; }   /* one line, as designed */

/* Arrows (shared) */
.el3-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.el3-arrow svg { width: 100%; height: 100%; }
.el3-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.el3-hero .el3-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	color: var(--wp--preset--color--base);
}
.el3-hero .el3-arrow--prev { left: max(8px, 1.5vw); }
.el3-hero .el3-arrow--next { right: max(8px, 1.5vw); }

/* Placeholder overlays hide themselves once a real image is added, so the
   100% grey never sits on top of a photo. The hero caption has its own solid
   box, so it stays legible without a dimming overlay. */
.el3-hero-slide:has(.wp-block-cover__image-background) .wp-block-cover__background,
.el3-about-media:has(.wp-block-cover__image-background) .wp-block-cover__background,
.el3-insta-tile:has(.wp-block-cover__image-background) .wp-block-cover__background {
	opacity: 0 !important;
}

/* --- Product carousel -------------------------------------------------- */
.el3-carousel-head { gap: 22px; }
.el3-carousel-head h2 { margin: 0; }
.el3-carousel-head .el3-arrow {
	width: 22px;
	height: 22px;
	padding: 4px;
	color: var(--wp--preset--color--contrast);
}

.el3-see-all {
	font-size: 10px;
	letter-spacing: .5px;
	text-transform: uppercase;
}

.el3-carousel-track {
	display: flex;
	gap: 2vw;
	margin: 0;
	padding: 0 4vw 6px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 4vw;
	scroll-snap-type: x mandatory;
}
.el3-carousel-track:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 4px; }
/* Hide the scrollbar only once arrows exist to replace it. */
.el3-carousel.is-enhanced .el3-carousel-track { scrollbar-width: none; }
.el3-carousel.is-enhanced .el3-carousel-track::-webkit-scrollbar { display: none; }

.el3-product {
	flex: 0 0 clamp(220px, 20.5vw, 340px);
	scroll-snap-align: start;
	text-align: center;
}
.el3-product-link {
	display: block;
	color: inherit;
	text-decoration: none !important;
}
.el3-product-media {
	display: block;
	aspect-ratio: 5 / 4;
	overflow: hidden;
	background: var(--wp--preset--color--accent-2);
}
.el3-product-media img,
.el3-product-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform .35s ease;
}
.el3-product-link:hover .el3-product-media img { transform: scale(1.03); }
.el3-product-title {
	display: block;
	margin-top: 14px;
	font-size: var(--wp--preset--font-size--small);
}
.el3-product-link:hover .el3-product-title { text-decoration: underline; }
.el3-product-price {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
}
.el3-product-price del { margin-right: .4em; font-weight: 400; opacity: .6; }
.el3-product-price ins { text-decoration: none; }

/* --- About ------------------------------------------------------------- */
.el3-about .wp-block-site-title { margin: 0 0 10px; }
.el3-about-media.wp-block-cover {
	min-height: 0;
	aspect-ratio: 7 / 8;
	padding: 0;
}

/* --- Newsletter -------------------------------------------------------- */
.el3-subscribe {
	display: flex;
	width: min(370px, 100%);
	margin: 0 auto;
}
.el3-subscribe input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--accent-5);
	border-right: 0;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: inherit;
	font: inherit;
	font-size: 12px;
}
.el3-subscribe input[type="email"]:focus {
	outline: 1px solid var(--wp--preset--color--contrast);
	outline-offset: -1px;
}
.el3-subscribe-button {
	display: inline-flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}
.el3-subscribe-button:hover,
.el3-subscribe-button:focus-visible { background: var(--wp--preset--color--accent-2); }

/* --- Instagram --------------------------------------------------------- */
body .wp-block-group.el3-instagram-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}
.el3-instagram-grid > * { margin: 0 !important; }
.el3-insta-tile.wp-block-cover {
	min-height: 0;
	aspect-ratio: 4 / 5;
	padding: 0;
}

/* --- Footer ------------------------------------------------------------ */
.el3-footer a { color: inherit; }
.el3-footer .wp-block-site-title {
	margin: 0 0 6px;
	overflow-wrap: anywhere;   /* a long single word must never spill into the menu column */
}

.el3-footer-menu .wp-block-navigation__container {
	display: grid !important;
	grid-auto-flow: column;
	grid-template-rows: repeat(2, auto);
	column-gap: 56px;
	row-gap: 10px;
}

.el3-account.is-stacked a {
	display: block;
	margin-bottom: 10px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.el3-account.is-stacked .el3-account-sep { display: none; }

.el3-copyright { font-size: 12px; font-weight: 600; }

.el3-payments {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.el3-payments li { margin: 0; line-height: 0; }
.el3-payments svg { display: block; border-radius: 3px; }

/* --- Tablet ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.el3-header-top .wp-block-site-title { font-size: var(--wp--preset--font-size--x-large) !important; }
	.el3-footer-menu .wp-block-navigation__container { column-gap: 32px; }
}

/* --- Phone ------------------------------------------------------------- */
@media (max-width: 781px) {
	body .wp-block-group.el3-header-top { column-gap: 12px; }
	.el3-header-top .wp-block-site-title { font-size: 30px !important; }
	.el3-header-right .wp-block-social-links { display: none; }
	.el3-search input[type="search"] { width: 0; padding: 0; }      /* icon only */
	.el3-search input[type="search"]:focus { width: 7em; }

	.el3-hero-slide.wp-block-cover { padding-inline: 14vw; }
	.el3-hero-caption { padding: 16px 20px !important; }
	.el3-hero-caption h2 { font-size: 36px !important; white-space: normal; }

	.el3-product { flex-basis: 62vw; }

	/* Instagram strip becomes a swipeable row instead of five slivers. */
	body .wp-block-group.el3-instagram-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 42vw;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	.el3-insta-tile { scroll-snap-align: start; }

	.el3-footer .wp-block-columns { text-align: center; }
	.el3-footer-menu .wp-block-navigation__container,
	.el3-footer .wp-block-navigation__container { justify-content: center; justify-items: center; }
	.el3-footer .wp-block-social-links { justify-content: center; }
}

/* --- Small phones: logo gets its own row -------------------------------- */
/* Three-track centring needs the side groups to be narrower than the space
   the logo leaves. A real site name plus the cart box breaks that below
   ~600px, so stack: logo centred on top, search left + cart right beneath. */
@media (max-width: 600px) {
	body .wp-block-group.el3-header-top {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "title title" "left right";
		row-gap: 14px;
	}
	.el3-header-top > .wp-block-site-title { grid-area: title; }
	.el3-header-top > .el3-header-left { grid-area: left; }
	.el3-header-top > .el3-header-right { grid-area: right; }
}