/*
Theme Name:   WowMayaWow Child
Theme URI:    https://wowmayawow.co.il
Description:  Child theme of Storefront for wowmayawow.co.il
Author:       maya372
Template:     storefront
Version:      1.0.0
Text Domain:  wowmayawow-child
*/

:root {
	--color-bg: #fbf7f1;
	--color-bg-alt: #f3eee3;
	--color-text: #2a241d;
	--color-text-muted: #766b5e;
	--color-gold: #b8902a;
	--color-gold-dark: #8f6f1f;
	--color-pink: #f4d9dc;
	--color-mint: #cfe8dc;
	--color-lavender: #e1d9f0;
	--color-coral: #f2a97e;
	--color-butter: #faf6d9;
	--radius: 18px;
	--radius-pill: 999px;
	--shadow: 0 8px 24px rgba(60, 45, 10, 0.08);
	--shadow-hover: 0 14px 32px rgba(60, 45, 10, 0.14);
	--font-body: "Rubik", -apple-system, "Segoe UI", Arial, sans-serif;
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	line-height: 1.6;
}

h1, h2, h3, h4,
.site-title,
.woocommerce-Price-amount {
	font-family: var(--font-body);
	font-weight: 700;
}

h2 {
	color: var(--color-gold-dark);
	letter-spacing: -0.01em;
}

a {
	color: var(--color-gold-dark);
}

/* Thin free-shipping announcement strip above the header */
.announcement-bar {
	background: var(--color-butter);
	color: var(--color-text);
	text-align: center;
	padding: 0.5em 1em;
	font-size: 0.85rem;
	font-weight: 600;
}

.section-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, var(--color-pink), var(--color-lavender), var(--color-mint));
}

.section-hero .full-bleed-inner {
	position: relative;
	z-index: 1;
}

.mobile-break {
	display: none;
}

@media (max-width: 700px) {
	.mobile-break {
		display: block;
	}
}

/* Faint wireframe 3D primitives (cube, cylinder, sphere, pyramid) that
   quietly draw themselves in, hold, then fade — nodding to 3D printing.
   Staggered per shape so they never all animate in sync. */
.hero-doodles {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.hero-doodle {
	fill: none;
	stroke: #fff;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 320;
	stroke-dashoffset: 320;
	opacity: 0;
	animation: hero-doodle-draw 24s ease-in-out infinite;
	vector-effect: non-scaling-stroke;
}

.hero-doodle-1 { animation-delay: 0s; }
.hero-doodle-2 { animation-delay: -1.6s; }
.hero-doodle-3 { animation-delay: -3.2s; }
.hero-doodle-4 { animation-delay: -4.8s; }
.hero-doodle-5 { animation-delay: -6.4s; }
.hero-doodle-6 { animation-delay: -8s; }
.hero-doodle-7 { animation-delay: -9.6s; }
.hero-doodle-8 { animation-delay: -11.2s; }
.hero-doodle-9 { animation-delay: -12.8s; }
.hero-doodle-10 { animation-delay: -14.4s; }
.hero-doodle-11 { animation-delay: -16s; }
.hero-doodle-12 { animation-delay: -17.6s; }
.hero-doodle-13 { animation-delay: -19.2s; }
.hero-doodle-14 { animation-delay: -20.8s; }
.hero-doodle-15 { animation-delay: -22.4s; }

/* Separate hero doodle layouts: desktop spreads shapes to the far edges
   (cropping allowed), mobile uses its own portrait arrangement so nothing
   gets awkwardly cut off on a tall narrow screen. */
.hero-doodles--mobile {
	display: block;
}

.hero-doodles--desktop {
	display: none;
}

@media (min-width: 769px) {
	.hero-doodles--mobile {
		display: none;
	}

	.hero-doodles--desktop {
		display: block;
	}
}

@keyframes hero-doodle-draw {
	0% {
		stroke-dashoffset: 320;
		opacity: 0;
	}
	3% {
		opacity: 0.7;
	}
	12% {
		stroke-dashoffset: 0;
		opacity: 0.7;
	}
	20% {
		stroke-dashoffset: 0;
		opacity: 0.7;
	}
	23% {
		opacity: 0;
	}
	100% {
		stroke-dashoffset: 0;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-doodle {
		animation: none;
	}
}

/* Header — boutique-style: generous spacing, refined nav type, single clean row */
.site-header {
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
	padding: 0.5em 0;
}

.site-header .site-title,
.site-header .site-title a {
	color: var(--color-gold-dark);
}

.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 0.5em 1.1em;
}

.site-header-cart .amount {
	font-weight: 600;
	color: var(--color-gold-dark);
}

/* WooCommerce's own core CSS sets a more specific
   ".site-header-cart .cart-contents .amount { margin-left: .327em; }" at
   min-width:768px, which was beating our rule above. Match that specificity
   (via the #site-header-cart id) and use a logical property so it's correct
   in RTL, instead of WooCommerce's physical margin-left. The cart icon
   renders via a ::after on .cart-contents (after .amount in the DOM), so in
   RTL it sits to .amount's visual left — the gap needs margin-inline-end,
   not -start. */
.site-header #site-header-cart .cart-contents .amount {
	margin-inline-end: 1.1em;
}

/* Cart icon + price is enough in the header — the item count adds noise */
.site-header-cart .count {
	display: none !important;
}

/* The Font Awesome breadcrumb separator always points the same way regardless
   of text direction. Use the solid caret-left glyph for this RTL site (the
   thinner angle-left glyph rendered oddly). */
.woocommerce-breadcrumb .breadcrumb-separator::after {
	content: "\f0d9";
}

/* "Added to cart" notice — swap Storefront's default solid green for a
   softer pastel matching the rest of the site. */
.woocommerce-message {
	background: var(--color-mint) !important;
	border-top-color: var(--color-mint) !important;
	color: var(--color-text) !important;
}

/* Shop page top bar: "showing X of Y results" text and the sort-by dropdown
   sit side by side but weren't vertically centered against each other. */
.storefront-sorting {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75em;
}

.storefront-sorting .woocommerce-result-count,
.storefront-sorting .woocommerce-ordering {
	margin: 0;
}

/* The browser's native dropdown arrow sits flush against the pill's rounded
   edge with no breathing room. Swap it for a custom SVG chevron with its own
   padding, so there's a visible gap between the arrow and the edge. */
.woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-inline-end: 2.5em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f6f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 1em center;
	background-size: 1em;
}

/* Collapse the header onto a single row: logo, nav, cart and search side by side.
   Storefront splits these across two nested ".col-full" wrappers in two separate
   rows — unwrap both with display:contents so their children become direct flex
   items of .site-header itself, then reorder. */
.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	row-gap: 0.75em;
	column-gap: 0;
	padding-inline: 2.5em;
}

.site-header .main-navigation {
	margin-inline-start: 1.25em;
}

.site-header .site-search {
	margin-inline-start: 1.25em;
}

.site-header > .col-full,
.site-header .storefront-primary-navigation,
.site-header .storefront-primary-navigation > .col-full {
	display: contents;
}

.site-header .site-branding,
.site-header .site-branding .site-title,
.site-header .site-branding .site-title a {
	margin: 0 !important;
	padding: 0 !important;
}

.site-header .site-branding {
	order: 1;
	width: auto !important;
	flex: 0 0 auto !important;
}

.site-header .main-navigation {
	order: 2;
	width: auto !important;
	flex: 0 0 auto !important;
}

.site-header .main-navigation .primary-navigation > ul.menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header .main-navigation .primary-navigation ~ .menu {
	display: none;
}

.site-header #site-header-cart {
	order: 3;
	display: flex !important;
	align-items: center;
	list-style: none;
	margin: 0;
	margin-inline-start: auto !important;
	padding: 0;
	width: auto !important;
	flex: 0 0 auto !important;
}

/* The mini-cart dropdown was inheriting the same shrink-to-fit width as the
   collapsed #site-header-cart flex item above, squeezing it down to icon
   width and wrapping every word onto its own line. Give it a real width. */
.site-header #site-header-cart .widget_shopping_cart_content {
	width: 300px !important;
	max-width: 90vw !important;
	background: #fff;
}

.site-header #site-header-cart .widget_shopping_cart_content .cart_list li {
	background: transparent;
}

.site-header form.woocommerce-product-search,
.site-header .site-search {
	order: 4;
	max-width: 200px;
	width: auto !important;
	flex: 0 0 auto !important;
	margin: 0;
	margin-inline-start: 1.75em;
}

/* Buttons */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.add_to_cart_button,
.wp-block-buttons .wp-block-button__link,
.wp-element-button {
	background: var(--color-coral) !important;
	color: var(--color-text) !important;
	border: none;
	border-radius: var(--radius-pill);
	padding: 0.85em 2em;
	font-weight: 600;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: none;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.wp-block-buttons .wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--color-coral) !important;
	color: var(--color-text) !important;
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

/* Storefront appends a fixed left-to-right arrow to .wc-forward buttons
   ("View cart", "Proceed to checkout") via an icon font, regardless of text
   direction — pointing the wrong way on this RTL site. A plain "«" character
   didn't work either: angle quotes are in Unicode's bidi-mirroring list, so
   the browser auto-flips them back to "»" inside RTL text. Use a Font
   Awesome chevron instead, which isn't subject to bidi mirroring. */
.woocommerce a.button.wc-forward::after,
.woocommerce-page a.button.wc-forward::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f053";
}

/* Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
	border: 1px solid var(--color-bg-alt);
	border-radius: var(--radius-pill);
	padding: 0.75em 1.25em;
	background: #fff;
}

textarea {
	border-radius: var(--radius);
}

/* Placeholder text (and WooCommerce Blocks checkout's floating field labels,
   which look like placeholder text until the field is focused/filled) */
::placeholder {
	color: #c3b6a0;
	opacity: 1;
	font-weight: 400;
}

.wc-block-components-text-input label {
	color: #c3b6a0 !important;
	font-weight: 400 !important;
}

/* Product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: #fff;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.25em;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-hover);
}

.woocommerce ul.products li.product .price {
	color: var(--color-gold-dark);
	font-weight: 700;
}

.woocommerce span.onsale {
	background: var(--color-coral);
	color: var(--color-text);
	border-radius: var(--radius-pill);
}

/* Testimonial cards: a happy little bounce on hover, varied per card — pure vertical motion, no rotate/scale/shadow */
.wp-block-column[style*="border-radius"].bg-pink:hover {
	animation: wowmayawow-bounce-a 0.5s ease-out;
}

.wp-block-column[style*="border-radius"].bg-mint:hover {
	animation: wowmayawow-bounce-b 0.55s ease-out;
}

.wp-block-column[style*="border-radius"].bg-lavender:hover {
	animation: wowmayawow-bounce-a 0.45s ease-out;
}

.wp-block-column[style*="border-radius"].has-white-background-color:hover {
	animation: wowmayawow-bounce-b 0.6s ease-out;
}

@keyframes wowmayawow-bounce-a {
	0% { transform: translateY(0); }
	30% { transform: translateY(-8px); }
	50% { transform: translateY(0); }
	65% { transform: translateY(-4px); }
	80% { transform: translateY(0); }
	90% { transform: translateY(-1px); }
	100% { transform: translateY(0); }
}

@keyframes wowmayawow-bounce-b {
	0%, 100% { transform: translateY(0); }
	25% { transform: translateY(-6px); }
	45% { transform: translateY(0); }
	60% { transform: translateY(-6px); }
	80% { transform: translateY(0); }
}

/* Homepage renders its own hero heading via the block pattern, so hide the theme's default page title there */
body.home .entry-header {
	display: none;
}

/* Storefront adds a large margin-bottom to .site-header on the homepage (to make
   room for its default page title, which we hide above) — cancel it so the hero
   block sits flush under the header. */
body.home.page:not(.page-template-template-homepage) .site-header,
body.home.blog .site-header,
body.home.post-type-archive-product .site-header {
	margin-bottom: 0;
}

/* Section background helpers — apply via the block/section's "additional CSS class" field */
.bg-cream { background: var(--color-bg-alt); }
.bg-pink { background: var(--color-pink); }
.bg-mint { background: var(--color-mint); }
.bg-lavender { background: var(--color-lavender); }

/* About page (page-about.php) — rounded content cards, photo beside text on
   desktop (alternating sides), stacked photo-then-text on mobile. */
.about-section {
	max-width: 1100px;
	margin: 24px auto;
	padding: 48px 1.5em;
	border-radius: var(--radius);
}

.about-section:first-child {
	margin-top: 0;
}

.about-section:last-child {
	margin-bottom: 0;
}

/* WooCommerce always renders an empty notices wrapper div (class
   "woocommerce") right before the page content, even with nothing to show —
   and WooCommerce's own core CSS gives it height regardless. Hide it
   whenever it has nothing in it. */
.site-content .col-full > div.woocommerce:empty {
	display: none;
}

/* The actual source of the gap above the footer: Storefront's own core CSS
   gives #primary.content-area a fixed margin-bottom (its golden-ratio
   spacing unit, ~42px) on every page, regardless of what's inside. Our
   custom page templates already supply their own vertical rhythm via each
   section's own padding, so this is never wanted. */
#primary.content-area,
#main.site-main {
	margin-bottom: 0;
}

.about-section-inner {
	max-width: 820px;
	margin-inline: auto;
	text-align: center;
}

.about-row {
	display: flex;
	align-items: center;
	gap: 40px;
}

.about-row--reverse {
	flex-direction: row-reverse;
}

.about-row-text {
	flex: 1 1 0;
	min-width: 0;
}

.about-photo {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

@media (max-width: 768px) {
	.about-row,
	.about-row--reverse {
		flex-direction: column;
		text-align: center;
	}

	/* Mobile always reads text first, then the photo, regardless of the
	   desktop side the photo sits on. */
	.about-row-text {
		order: 1;
	}

	.about-photo {
		order: 2;
	}

	/* Homepage about teaser (front-page.php) wants the opposite: each row's
	   own photo first, then its text. */
	.section-about-teaser .about-photo {
		order: 1;
	}

	.section-about-teaser .about-row-text {
		order: 2;
	}
}

/* Contact page (page-contact.php) */
.contact-columns {
	display: flex;
	gap: 60px;
}

.contact-col {
	flex: 1 1 0;
	min-width: 0;
}

.contact-form label {
	display: block;
	font-weight: 600;
	color: var(--color-gold-dark);
	margin-top: 1em;
	margin-bottom: 0.4em;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	background: var(--color-bg-alt);
	border-color: var(--color-bg-alt);
}

.contact-form button[type="submit"] {
	margin-top: 1.5em;
}

.contact-form-honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.contact-form-message {
	padding: 0.85em 1.25em;
	border-radius: var(--radius);
	margin-bottom: 1em;
}

.contact-form-message--success {
	background: var(--color-mint);
}

.contact-form-message--error {
	background: var(--color-pink);
}

@media (max-width: 768px) {
	.contact-columns {
		flex-direction: column;
		gap: 40px;
	}
}

/* Returns page (page-returns.php) — lists inside centered content cards */
.about-section-inner ul {
	display: inline-block;
	text-align: start;
	margin-top: 12px;
}

/* Front page (front-page.php) — full-bleed color bands, edge to edge,
   with content constrained and centered inside */
.full-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.full-bleed-inner {
	max-width: 1100px;
	margin-inline: auto;
	padding: 60px 1.5em;
}

.full-bleed-inner--center {
	text-align: center;
}

/* padding-top, not margin-top: an h2's top margin as the first child of
   .section-categories collapses through the section, pushing the whole
   colored box down instead of adding space inside it. */
.section-categories h2 {
	text-align: center;
	margin: 0 0 20px !important;
	padding-top: 40px !important;
}

.category-strip {
	display: flex;
	width: 100%;
}

.category-tile {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: 320px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	transition: flex-grow 0.35s ease;
}

.category-tile:hover {
	flex-grow: 1.6;
}

.category-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.15);
}

.category-tile-label {
	position: relative;
	z-index: 1;
	color: #fff;
	font-weight: 700;
	font-size: 1.4rem;
	text-align: center;
	padding: 1em 0.5em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

@media (max-width: 700px) {
	.category-strip {
		flex-wrap: wrap;
	}

	.category-tile {
		flex: 1 1 50%;
		height: 200px;
	}
}

.front-lower-sections {
	display: flex;
	flex-direction: column;
}

.about-teaser-rows {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* On mobile: "about me" before "about the printer", and testimonials
   after the about-teaser section instead of before it. gap (not
   margin) so the spacing follows the reordered layout correctly. */
@media (max-width: 768px) {
	.front-lower-sections .section-about-teaser {
		order: -1;
	}

	.about-teaser-rows .about-row-maya {
		order: -1;
	}
}

.testimonial-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	text-align: start;
	margin-top: 24px;
}

.testimonial-card {
	border-radius: var(--radius);
	padding: 24px;
}

@media (max-width: 640px) {
	.testimonial-grid {
		grid-template-columns: 1fr;
	}
}

/* Custom design page (page-custom-design.php) */
.custom-design-hero {
	background-color: var(--color-lavender);
	background-size: cover;
	background-position: center;
	text-align: center;
	padding: 100px 1.5em;
	max-width: 1100px;
	margin: 0 auto 24px;
	border-radius: var(--radius);
}

.custom-design-bubble {
	max-width: 820px;
	margin: 0 auto 32px;
	padding: 48px 56px;
	border-radius: 60px;
	background: var(--color-butter);
	box-shadow: var(--shadow);
}

.custom-design-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 820px;
	margin-inline: auto;
}

.custom-design-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

@media (max-width: 600px) {
	.custom-design-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

.custom-design-form {
	max-width: 560px;
	margin-inline: auto;
	text-align: start;
}

.custom-design-form .form-field {
	margin-bottom: 20px;
}

.custom-design-form label {
	display: block;
	font-weight: 600;
	color: var(--color-gold-dark);
	margin-bottom: 6px;
}

.custom-design-form input,
.custom-design-form textarea {
	width: 100%;
}

.custom-design-form textarea {
	min-height: 140px;
	resize: vertical;
}

.custom-design-form-actions {
	text-align: center;
	margin-top: 8px;
}

/* Per-product "custom text" field, shown before the add-to-cart button on
   products with personalization turned on (see functions.php). */
.wowmayawow-personalization-field {
	margin-bottom: 1.2em;
	max-width: 420px;
}

.wowmayawow-personalization-field label {
	display: block;
	font-weight: 600;
	color: var(--color-gold-dark);
	margin-bottom: 6px;
}

.wowmayawow-personalization-field input {
	width: 100%;
}

.form-message {
	max-width: 560px;
	margin: 0 auto 24px;
	padding: 16px 24px;
	border-radius: var(--radius);
	text-align: center;
}

.form-message--success { background: var(--color-mint); }
.form-message--error { background: var(--color-pink); }

/* Full-width sections (hero/testimonials/instagram/products) bled edge-to-edge with
   no side breathing room. Keep the background full-bleed but pad and center the content. */
.alignfull {
	padding-inline: 1.5em;
}

.alignfull > :where(h1, h2, h3, p, .wp-block-columns, .wp-block-buttons, .woocommerce) {
	max-width: 1100px;
	margin-inline: auto;
}

/* The homepage's full-bleed sections already include their own vertical
   padding — Storefront's default content-area padding was leaving an extra
   plain-background gap between the last section and the footer. */
.home #primary.content-area {
	padding-bottom: 0;
}

/* Footer */
.site-footer,
footer.site-footer {
	background: var(--color-bg-alt);
	padding: 3em 0;
}

.site-footer a {
	color: var(--color-gold-dark);
}

/* Hide Storefront's "Built with WooCommerce" credit link, keep the
   copyright line next to it. */
.site-footer .site-info a {
	display: none !important;
}

.site-footer .site-info {
	text-align: center;
}

.footer-legal-links ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5em 1.5em;
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}

.footer-legal-links a {
	text-decoration: none;
}

.footer-legal-links a:hover {
	text-decoration: underline;
}

/* Mobile header: hamburger + cart on one row, centered logo below, full-width search below that */
@media (max-width: 768px) {
	/* Switched from flex order/margin tricks to CSS Grid with explicit
	   placement — Storefront's own core CSS repeatedly beat our flex
	   order/auto-margin overrides in ways that were hard to pin down.
	   Grid line numbers are direction-aware: in this RTL site, column 1
	   is the visual right edge and the last column is the visual left
	   edge, so placing the toggle in the last column and the cart just
	   before it puts both on the left, with column 1 left empty/flexible
	   on the right. */
	.site-header {
		display: grid !important;
		grid-template-columns: 1fr auto auto;
		column-gap: 0.5em;
		row-gap: 0.5em;
		align-items: center;
		/* Less padding on the right (inline-start, in RTL) than the base
		   2.5em, so the title/search sit closer to that edge — left side
		   (where the hamburger sits) stays as-is. */
		padding-inline-start: 0;
		/* Positioning context for the toggled nav below, which overlays the
		   page as a dropdown instead of sitting in the grid flow and pushing
		   the rest of the page down. */
		position: relative;
	}

	.site-header > .col-full,
	.site-header .storefront-primary-navigation,
	.site-header .storefront-primary-navigation > .col-full {
		display: contents !important;
	}

	.site-header .menu-toggle {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 2.5em;
		height: 2.5em;
		padding: 0;
		border: none !important;
		background: var(--color-bg-alt) !important;
		border-radius: var(--radius-pill) !important;
	}

	.site-header .menu-toggle span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.site-header .menu-toggle::before {
		content: "";
		display: block;
		width: 1.4em;
		height: 3px;
		border-radius: 2px;
		background: var(--color-gold-dark);
		box-shadow: 0 -6px 0 var(--color-gold-dark), 0 6px 0 var(--color-gold-dark);
	}

	/* Storefront core draws its own icon using ::before + ::after together;
	   we only replaced ::before with our 3-bar design above, leaving its
	   ::after as a stray extra line. Remove it. */
	.site-header .menu-toggle::after {
		content: none;
	}

	.site-header #site-navigation.main-navigation {
		grid-column: 3 !important;
		grid-row: 1 !important;
	}

	.site-header #site-navigation.main-navigation.toggled {
		/* Plain in-flow block, closest to Storefront's own default mobile
		   menu behavior — a position:absolute overlay was tried here but
		   rendered off-screen to the side on a real phone (worked fine in
		   devtools' emulated viewport, but not on an actual device). */
		grid-column: 1 / -1 !important;
		grid-row: 3 !important;
		position: static !important;
	}

	/* Toggling .toggled correctly repositions the nav in the grid, but the
	   menu inside it (.primary-navigation > ul.menu) was still collapsing to
	   zero height — something in Storefront core's own show/hide mechanism
	   (or a leftover inline style from its nav JS) was beating our unscoped
	   "display: flex" rule above. Force every property that could be
	   collapsing it, the same way #site-header-cart was forced visible below. */
	.site-header #site-navigation.main-navigation.toggled .primary-navigation {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: static !important;
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		min-height: auto !important;
		overflow: visible !important;
	}

	.site-header #site-navigation.main-navigation.toggled .primary-navigation > ul.menu {
		display: flex !important;
		flex-direction: column;
		visibility: visible !important;
		opacity: 1 !important;
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.site-header #site-navigation.main-navigation.toggled .primary-navigation > ul.menu > li > a {
		display: block;
		padding: 0.75em 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}

	body .site-header ul#site-header-cart.site-header-cart {
		grid-column: 2 !important;
		grid-row: 1 !important;
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: static !important;
		margin: 0 !important;
		width: auto !important;
		height: auto !important;
		max-width: none !important;
		max-height: none !important;
		min-width: auto !important;
		min-height: auto !important;
		overflow: visible !important;
	}

	.site-header #site-header-cart li {
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
	}

	.site-header #site-header-cart .cart-contents {
		display: flex !important;
		align-items: center;
		width: auto !important;
	}

	.site-header #site-header-cart .cart-contents::before {
		content: "";
		display: inline-block;
		width: 1.3em;
		height: 1.3em;
		margin-inline-end: 0.35em;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f6f1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
	}

	.site-header #site-header-cart .woocommerce-Price-amount {
		display: none;
	}

	/* text-align alone doesn't reposition a block-level child (.site-title
	   is a div, not inline content) — force right alignment explicitly at
	   every level instead of relying on it inheriting/cascading down. */
	.site-header .site-branding,
	.site-header .site-branding .site-title,
	.site-header .site-branding .site-title a {
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: right !important;
	}

	.site-header .site-branding {
		grid-column: 1 !important;
		grid-row: 1 !important;
		justify-self: stretch;
	}

	.site-header .site-search {
		grid-column: 1 / -1 !important;
		grid-row: 2 !important;
		display: block !important;
		max-width: 100% !important;
		margin: 0 !important;
	}

	.site-header form.woocommerce-product-search {
		width: 100%;
		margin: 0 !important;
		padding: 0 !important;
	}

	.site-header .search-field {
		width: 100%;
	}
}

/* Storefront core adds top padding to .site-main on its own "homepage"
   template — leftover from before front-page.php existed. Neutralize it
   so the hero section sits directly under the header. */
.page-template-template-homepage:not(.has-post-thumbnail) .site-main {
	padding-top: 0;
}