/* =========================================================================
   Lupino — "Warm Linen" visual layer on top of Storefront.
   Palette: cream #FAF6F0 · terracotta #B9743F · charcoal #2B2724
   Type:    Cormorant (display) · Inter (text)
   ========================================================================= */

:root {
	--lp-cream:      #FAF6F0;
	--lp-cream-2:    #F1E9DE;  /* slightly deeper panels */
	--lp-clay:       #B9743F;  /* accent */
	--lp-clay-dark:  #9C5C2C;  /* accent hover */
	--lp-charcoal:   #2B2724;  /* text + dark sections */
	--lp-charcoal-2: #413B35;
	--lp-muted:      #8A7E72;  /* secondary text */
	--lp-line:       #E4D9CB;  /* hairlines */
	--lp-radius:     10px;
	--lp-maxw:       1200px;
}

/* ---------- Base typography ---------- */
body,
button,
input,
select,
textarea,
.woocommerce-page {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--lp-charcoal);
	font-weight: 400;
	letter-spacing: .01em;
}

body {
	background-color: var(--lp-cream);
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.woocommerce-loop-product__title,
.entry-title,
.product_title {
	font-family: 'Cormorant', Georgia, 'Times New Roman', serif;
	color: var(--lp-charcoal);
	font-weight: 500;
	letter-spacing: .005em;
	line-height: 1.18;
}

h1, .entry-title, .product_title { font-size: 2.6rem; }
h2 { font-size: 2.1rem; }
h3 { font-size: 1.6rem; }

a { color: var(--lp-clay); }
a:hover { color: var(--lp-clay-dark); }

.col-full { max-width: var(--lp-maxw); }

/* ---------- Header: branding · search · cart (single row) ---------- */
.site-header {
	background-color: var(--lp-cream) !important;
	border-bottom: 1px solid var(--lp-line);
	padding-top: .9em;
	padding-bottom: .9em;
}

.site-header .col-full {
	display: flex !important;
	align-items: center;
	gap: 1.25em;
	flex-wrap: nowrap;
}

.site-branding {
	margin: 0 !important;
	padding: 0;
	width: auto !important;
	/* Fixed to its natural (logo) width — never grows or shrinks, so the
	   wordmark is never clipped. The search takes the flexible middle space. */
	flex: 0 0 auto;
	min-width: 0;
	float: none;
}

.site-branding .site-title,
.site-header .site-title a {
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: lowercase;
	color: var(--lp-charcoal) !important;
}

.site-header .site-description {
	margin: 0;
	font-style: italic;
	color: var(--lp-muted);
	letter-spacing: .04em;
	font-size: .85rem;
}

/* Image brand logo (replaces the text wordmark when a custom_logo is set). */
.site-branding .lupino-logo-link {
	display: inline-block;
	line-height: 0;
}
.site-branding .lupino-logo-img {
	display: block;
	height: 48px;
	width: auto;
	max-width: 100%;
}
@media (max-width: 768px) {
	.site-branding .lupino-logo-img { height: 38px; }
}

/* Search — flexible: grows to fill the middle space and auto-scales down on
   narrower viewports (capped at 620px), centered via auto side-margins. The
   logo (left) and cart (right) keep their natural width, so the search is what
   shrinks; below 900px it wraps onto its own full-width row (see media query). */
.site-header .site-search {
	flex: 1 1 0;
	width: 100% !important;
	max-width: 620px;
	min-width: 0;
	margin: 0 auto !important;
	padding: 0;
	float: none !important;
}
.site-header .site-search .widget {
	margin: 0;
	padding: 0;
}
.site-header .woocommerce-product-search {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}
.site-header .woocommerce-product-search .search-field {
	width: 100%;
	border: 1px solid var(--lp-line);
	border-radius: 999px;
	background: #fff;
	padding: .75em 3.2em .75em 1.2em;
	font-size: .95rem;
	box-shadow: none;
}
.site-header .woocommerce-product-search .search-field:focus {
	border-color: var(--lp-clay);
	outline: none;
}
.site-header .woocommerce-product-search button[type="submit"] {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	padding: .5em 1.1em;
	font-size: .72rem;
}

/* Cart + account icon — grouped on the right. The cart grows (flex:1) to
   mirror the branding on the left and keep the search centered; its content
   is pushed to the right edge, next to the account icon. */
.site-header-cart {
	margin: 0 !important;
	padding: 0;
	width: auto !important;
	flex: 0 0 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	float: none !important;
}
.site-header-cart .cart-contents {
	color: var(--lp-charcoal);
	padding: .4em 0;
	white-space: nowrap;
}
/* Space the basket icon (Storefront's Font Awesome ::after glyph) and the count
   off the price, which otherwise sit flush against each other. !important beats
   Storefront's more specific defaults. */
.site-header-cart .cart-contents::after {
	margin-left: .5em !important;
}
.site-header-cart .cart-contents .count {
	margin-left: .15em;
}
.lupino-account {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.lupino-account a {
	display: inline-flex;
	align-items: center;
	color: var(--lp-charcoal);
	line-height: 1;
}
.lupino-account a:hover { color: var(--lp-clay); }

/* Override Storefront's float-based header (higher-specificity defaults) so the
   flex row actually takes effect. */
.woocommerce-active .site-header .site-branding,
.woocommerce-active .site-header .site-search,
.woocommerce-active .site-header .site-header-cart,
.storefront-secondary-navigation .site-header .site-branding {
	width: auto !important;
	float: none !important;
	margin-right: 0 !important;
	margin-bottom: 0 !important;
	clear: none !important;
}
/* The col-full clearfix pseudo-elements would become stray flex items. */
.site-header .col-full::before,
.site-header .col-full::after { display: none !important; }

/* Primary navigation removed in functions.php — hide any residual element. */
.main-navigation,
.storefront-primary-navigation,
.secondary-navigation { display: none !important; }

/* Below 900px there isn't room for logo + a usable search + cart on one row,
   so the search wraps onto its own full-width second row (logo + cart stay on
   row 1). Prevents the wordmark/cart from being clipped on narrow windows. */
@media ( max-width: 900px ) {
	.site-header .col-full { flex-wrap: wrap; }
	.site-header .site-branding { flex: 1 1 auto; }
	.site-header .site-header-cart { flex: 1 1 auto; }
	.site-header .site-search { order: 3; flex: 1 1 100%; max-width: none; margin: .6em 0 0 !important; }
}

/* ---------- Tighten the space above the catalogue ---------- */
/* Storefront's woocommerce.css (loaded after lupino.css) sets a big
   `margin: 0 0 3.7em` + 1.4em padding on the breadcrumb, pushing the brand bar
   far down. Override with !important so the logos sit right under the breadcrumb. */
.storefront-breadcrumb {
	margin-bottom: .5em !important;
	padding-top: .8em !important;
	padding-bottom: .2em !important;
}
.woocommerce-products-header {
	margin: 0;
	padding: 0;
}
@media ( min-width: 768px ) {
	.site-content { padding-top: 1em; }
}

/* ---------- Buttons ---------- */
button,
.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit {
	background-color: var(--lp-clay);
	color: var(--lp-cream);
	border-radius: 999px;
	padding: .7em 1.6em;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .85rem;
	border: 1px solid var(--lp-clay);
	transition: background-color .2s ease, color .2s ease;
}

button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover {
	background-color: var(--lp-clay-dark);
	border-color: var(--lp-clay-dark);
	color: var(--lp-cream);
}

.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
	background-color: var(--lp-charcoal);
	border-color: var(--lp-charcoal);
	color: var(--lp-cream);
}
.button.alt:hover { background-color: var(--lp-charcoal-2); border-color: var(--lp-charcoal-2); }

/* ---------- Hero (homepage) ---------- */
.lupino-hero {
	background: linear-gradient(180deg, var(--lp-cream) 0%, var(--lp-cream-2) 100%);
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	text-align: center;
	padding: 5.5em 1.5em;
	margin-bottom: 3.5em;
}
.lupino-hero__eyebrow {
	display: inline-block;
	font-size: .8rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lp-clay);
	margin-bottom: 1.1em;
}
.lupino-hero__title {
	font-family: 'Cormorant', serif;
	font-weight: 500;
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	line-height: 1.08;
	margin: 0 0 .4em;
	color: var(--lp-charcoal);
}
.lupino-hero__text {
	max-width: 30em;
	margin: 0 auto 2em;
	color: var(--lp-muted);
	font-size: 1.08rem;
}

/* ---------- Section headers on the homepage ---------- */
.storefront-product-section .section-title,
section.storefront-product-section h2 {
	text-align: center;
	font-size: 2.2rem;
	margin-bottom: 1.2em;
	position: relative;
}

/* ---------- Product cards ---------- */
ul.products li.product {
	text-align: center;
}
ul.products li.product a img {
	/* Uncropped thumbnails keep their aspect ratio; show the WHOLE product
	   centered on white in a uniform square box (no crop/zoom, ragged-free grid). */
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: var(--lp-radius);
	background: #fff;
	margin-bottom: 1em;
	box-shadow: 0 1px 0 var(--lp-line);
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.35rem;
	font-weight: 500;
	padding-bottom: .2em;
	color: var(--lp-charcoal);
}
ul.products li.product .price {
	color: var(--lp-clay);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 1rem;
}
ul.products li.product .price del { color: var(--lp-muted); font-weight: 400; }
ul.products li.product .button { margin-top: .6em; }

/* Category tiles on the homepage */
.storefront-product-section .product-category .woocommerce-loop-category__title {
	font-family: 'Cormorant', serif;
	font-size: 1.5rem;
	color: var(--lp-charcoal);
}

/* ---------- Single product ---------- */
.single-product .product_title { margin-bottom: .2em; }
.single-product .summary .price { color: var(--lp-clay); font-weight: 600; }
.woocommerce-tabs .panel h2 { font-size: 1.8rem; }

/* ---------- Footer ---------- */
.site-footer {
	background-color: var(--lp-charcoal) !important;
	color: var(--lp-cream);
	font-size: .95rem;
}
.site-footer a { color: var(--lp-cream); }
.site-footer a:hover { color: var(--lp-clay); }
.site-footer h1, .site-footer h2, .site-footer h3 { color: var(--lp-cream); }

/* ---------- Misc polish ---------- */
.woocommerce-breadcrumb { color: var(--lp-muted); font-size: .85rem; }
.onsale {
	background-color: var(--lp-charcoal);
	color: var(--lp-cream);
	border-radius: 999px;
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.storefront-handheld-footer-bar { background-color: var(--lp-charcoal); }
hr, .widget { border-color: var(--lp-line); }

/* ---------- WooCommerce notices → warm theme (QA Z7/Z8/Z9) ---------- */
/* The bright green add-to-cart bar and blue "no reviews" / info bar clashed with
   the theme. Force classic Storefront notices AND the block notice banners onto
   the cream / charcoal / clay palette. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce-error,
.wc-block-components-notice-banner {
	background-color: var(--lp-cream-2) !important;
	color: var(--lp-charcoal) !important;
	/* Flat & soft: a thin hairline + a slim left accent (no thick 9px stripe, no
	   bevel/3D from Storefront's defaults), rounded corners, no shadow. */
	border: 1px solid var(--lp-line) !important;
	border-left: 4px solid var(--lp-clay) !important;
	border-radius: var(--lp-radius) !important;
	box-shadow: none !important;
}
.woocommerce-message,
.wc-block-components-notice-banner.is-success { border-left-color: var(--lp-clay) !important; }   /* add-to-cart (Z8) */
.woocommerce-info,
.woocommerce-noreviews,
.wc-block-components-notice-banner.is-info { border-left-color: var(--lp-muted) !important; }      /* info / no reviews (Z7) */
.woocommerce-error,
.wc-block-components-notice-banner.is-error { border-left-color: #B5532E !important; }             /* errors: muted terracotta-red */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-noreviews::before { color: var(--lp-clay) !important; }
.woocommerce-error::before { color: #B5532E !important; }
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.wc-block-components-notice-banner a { color: var(--lp-clay) !important; }
.wc-block-components-notice-banner__content { color: var(--lp-charcoal) !important; }
.wc-block-components-notice-banner svg { fill: var(--lp-clay) !important; }
/* "Zobraziť košík" button inside the add-to-cart message → theme button */
.woocommerce-message .button {
	background-color: var(--lp-charcoal) !important;
	color: var(--lp-cream) !important;
}

/* Out-of-stock note on the single product page (QA Z5) */
.lupino-oos-note {
	color: var(--lp-clay);
	font-weight: 600;
	margin: .5em 0 1em;
}

/* "Iné veľkosti" — same-scent size variants on the product page (QA N3) */
.lupino-sizes { margin: 1em 0 1.25em; }
.lupino-sizes__label {
	display: block;
	font-size: .8rem;
	color: var(--lp-muted);
	margin-bottom: .45em;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.lupino-sizes__list {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lupino-sizes__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 76px;
	text-align: center;
	border: 1px solid var(--lp-line);
	border-radius: var(--lp-radius);
	padding: 5px;
	background: #fff;
	text-decoration: none;
	color: var(--lp-charcoal);
}
.lupino-sizes__item a:hover { border-color: var(--lp-clay); }
.lupino-sizes__item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}
.lupino-sizes__size {
	font-size: .72rem;
	margin-top: 3px;
	line-height: 1.2;
}

/* ===================================================================
   Cart & Checkout polish (UI/UX wave, 2026-06-16)
   =================================================================== */

/* Košík: drop the page heading entirely so the cart content sits at the top. */
.woocommerce-cart .entry-header {
	display: none;
}

/* Mini-cart (header dropdown): Storefront's default ~149px wrapped product names
   mid-word ("Crushe d Candy"). Storefront's woocommerce.css loads AFTER lupino.css
   (same specificity), so override the width with !important. Storefront shows the
   dropdown with left:0 (opens rightward) → a wider box overflows the viewport, so
   right-align it in the SHOWN state (opens leftward). Hidden state (left:-999em)
   is untouched, so hide/show still works. */
.site-header-cart .widget_shopping_cart {
	width: 340px !important;
	max-width: 92vw !important;
}
.site-header-cart:hover .widget_shopping_cart,
.site-header-cart.focus .widget_shopping_cart,
.site-header-cart .widget_shopping_cart:focus-within {
	left: auto !important;
	right: 0;
}
.site-header-cart .widget_shopping_cart .product_list_widget li {
	overflow-wrap: anywhere;
}

/* Pokladňa: Storefront's page header carries ~96px padding-bottom — pull the
   checkout form up close to the "Pokladňa" heading. (Storefront's woocommerce.css
   loads after lupino.css, so !important.) */
.woocommerce-checkout .entry-header {
	padding-top: .4em !important;
	padding-bottom: 1em !important;
}
/* Smaller checkout title (global is 2.6rem) to reclaim vertical space on Pokladňa. */
.woocommerce-checkout .entry-title {
	font-size: 1.9rem !important;
	margin-bottom: .1em !important;
}

/* Compact the block checkout so more of the form fits the screen at once.
   Inputs carry a fixed 50px height + sections have 24px gaps — tighten both. */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input select,
.woocommerce-checkout .wc-block-components-combobox input,
.woocommerce-checkout .wc-blocks-components-select__container .components-form-token-field__input {
	height: 42px !important;
	min-height: 42px !important;
}
.woocommerce-checkout .wc-block-components-checkout-step {
	margin-bottom: 12px !important;
}
.woocommerce-checkout .wc-block-components-checkout-step__heading {
	margin: 0 0 6px !important;
}
.woocommerce-checkout .wc-block-components-checkout-step__description {
	margin: 0 0 6px !important;
}

/* Stripe placeholder — admin-only preview (body.lupino-pay-preview, added in
   functions.php only for managers on checkout). A disabled "card payment" row
   after the real options so the 2-option layout is reviewable before Stripe is
   live. Customers never see it. Remove this + the body_class filter when Stripe lands. */
.lupino-pay-preview .wc-block-checkout__payment-method .wc-block-components-checkout-step__content::after {
	content: "💳  Platba kartou (VISA · Mastercard) — pripravujeme";
	display: block;
	padding: 16px 16px 16px 48px;
	margin-top: 4px;
	border-top: 1px solid #E4D9CB;
	color: #8A7E72;
	font-size: .92em;
	font-style: italic;
}

/* ===================================================================
   N4 — default-heading cleanup (UI/UX wave, 2026-06-17)
   =================================================================== */

/* My Account: the WC page was renamed "My account" -> "Môj účet". Soften the
   heading so it no longer dominates the login / register forms beneath it. */
.woocommerce-account .entry-title {
	font-size: 1.9rem;
	color: var(--lp-charcoal-2);
	margin-bottom: .5em;
}

/* Category archives: keep the category name (orientation + SEO) but calm it
   down from the global 2.6rem h1. The main shop + brand archives already
   suppress this title (woocommerce_show_page_title), so this only affects the
   product_cat archives where the name is genuinely useful. */
.woocommerce-products-header__title {
	font-size: 2rem;
}

/* ===================================================================
   Homepage redesign (N6) + site-wide sticky header (2026-06-17)
   =================================================================== */

/* --- Sticky header (whole shop). Inner pages: sticky cream. Front page: the
   header is fixed + transparent over the hero, turning solid once scrolled. --- */
/* Fixed (not sticky): Storefront sets overflow-x:hidden on body + #page, which
   breaks position:sticky relative to the viewport. Fixed sidesteps that. The
   hero on the front page sits flush under the header; every other page is padded
   back by the header height (--lupino-hh, set by JS; 108px fallback). */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: var(--lp-cream);
	box-shadow: 0 2px 16px rgba(43, 39, 36, .08);
	transition: background .35s ease, box-shadow .35s ease, color .35s ease;
}
body:not(.home) {
	padding-top: var(--lupino-hh, 108px);
}
/* Keep clear of the WP admin bar when present. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
}
/* Front page, over the hero (not yet scrolled past it): transparent + light. */
body.home:not(.lupino-past-hero) .site-header {
	background: transparent;
	box-shadow: none;
}
body.home:not(.lupino-past-hero) .site-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: -46px;
	background: linear-gradient(180deg, rgba(20, 16, 12, .5), rgba(20, 16, 12, 0));
	pointer-events: none;
	z-index: -1;
}
body.home:not(.lupino-past-hero) .site-header,
body.home:not(.lupino-past-hero) .site-header a,
body.home:not(.lupino-past-hero) .site-header .site-header-cart,
body.home:not(.lupino-past-hero) .lupino-account__icon {
	color: #fff;
}
body.home:not(.lupino-past-hero) .lupino-logo-img {
	filter: brightness(0) invert(1);
}
body.home:not(.lupino-past-hero) .site-header input.search-field,
body.home:not(.lupino-past-hero) .site-header input[type="search"] {
	background: rgba(255, 255, 255, .15);
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}
body.home:not(.lupino-past-hero) .site-header input.search-field::placeholder,
body.home:not(.lupino-past-hero) .site-header input[type="search"]::placeholder {
	color: rgba(255, 255, 255, .8);
}

/* Front page: let the hero sit flush at the very top, full-width. */
body.home .site-content .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
body.home #content,
body.home #primary,
body.home #main {
	padding-top: 0;
	margin-top: 0;
}
body.home .site-content {
	padding-top: 0;
}

/* --- Shared homepage section scaffolding --- */
.lupino-home-sec {
	width: 100%;
}
.lupino-home-inner {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	text-align: center;
}
.lupino-home-kicker {
	display: block;
	font: 500 .8rem/1 'Inter', sans-serif;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--lp-clay);
	margin-bottom: .8em;
}
.lupino-home-title {
	font-family: 'Cormorant', serif;
	font-weight: 500;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.06;
	margin: 0 0 1.1em;
	color: var(--lp-charcoal);
}

/* --- Section 1: hero --- */
.lupino-hhero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.lupino-hhero__bg {
	position: absolute;
	inset: 0;
	display: block;
}
.lupino-hhero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	animation: lupino-kb 20s ease-in-out infinite alternate;
}
@keyframes lupino-kb {
	from { transform: scale(1) translate(0, 0); }
	to   { transform: scale(1.12) translate(-2%, -2%); }
}
.lupino-hhero__scrim {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 95% at 50% 52%, rgba(20, 16, 12, .10), rgba(20, 16, 12, .55));
}
.lupino-hhero__tx {
	position: relative;
	z-index: 3;
	max-width: 46rem;
	padding: 0 5vw;
}
.lupino-hhero__eyebrow {
	display: block;
	font: 500 .82rem/1 'Inter', sans-serif;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #f3d8c6;
	margin-bottom: 1.1em;
}
.lupino-hhero__title {
	font-family: 'Cormorant', serif;
	font-weight: 500;
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	line-height: 1.04;
	color: #fff;
	margin: 0 0 .45em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.lupino-hhero__sub {
	font: 300 1.1rem/1.55 'Inter', sans-serif;
	color: #efe3d8;
	max-width: 30em;
	margin: 0 auto 2em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.lupino-hhero__cta.button {
	font-size: .9rem;
}
.lupino-hhero__cue {
	position: absolute;
	left: 50%;
	bottom: 26px;
	z-index: 3;
	transform: translateX(-50%);
	color: #fff;
	font: 400 .7rem/1 'Inter', sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
	opacity: .85;
	animation: lupino-bob 1.9s ease-in-out infinite;
}
@keyframes lupino-bob {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 7px); }
}

/* --- Section 2: collections --- */
.lupino-hcoll {
	background: var(--lp-cream);
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8vh 5vw;
}
.lupino-coll-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
@media (max-width: 768px) {
	.lupino-coll-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.lupino-coll {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--lp-radius);
	overflow: hidden;
	background-size: cover;
	background-position: center;
}
.lupino-coll__tg {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 16, 12, .05), rgba(20, 16, 12, .62));
	transition: background .3s ease, transform .4s ease;
}
.lupino-coll:hover .lupino-coll__tg {
	background: linear-gradient(180deg, rgba(20, 16, 12, .12), rgba(20, 16, 12, .72));
}
.lupino-coll__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 16px 18px;
	text-align: left;
	z-index: 2;
}
.lupino-coll__n {
	display: block;
	font-family: 'Cormorant', serif;
	font-weight: 600;
	font-size: 1.5rem;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.lupino-coll__c {
	display: block;
	font: 400 .8rem 'Inter', sans-serif;
	color: #f1e7da;
	margin-top: 2px;
}

/* --- Section 3: featured (dark) --- */
.lupino-hfeat {
	background: var(--lp-charcoal);
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8vh 5vw;
}
.lupino-hfeat .lupino-home-title { color: var(--lp-cream); }
.lupino-hfeat .lupino-home-kicker { color: #e0a982; }
.lupino-hfeat ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0 !important;
}
@media (max-width: 768px) {
	.lupino-hfeat ul.products { grid-template-columns: 1fr 1fr; }
}
.lupino-hfeat ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 14px !important;
	background: #fff;
	border-radius: var(--lp-radius);
	text-align: center;
}
.lupino-hfeat ul.products li.product::before { display: none; }
.lupino-hfeat ul.products li.product .woocommerce-loop-product__title { color: var(--lp-charcoal); }
.lupino-hfeat ul.products li.product .price { color: var(--lp-clay); }

/* --- Scroll-snap (front page only; off under reduced motion via JS class) --- */
html.lupino-snap { scroll-snap-type: y proximity; }
@media (min-width: 900px) {
	html.lupino-snap { scroll-snap-type: y mandatory; }
}
html.lupino-snap .lupino-home-sec,
html.lupino-snap .site-footer { scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
	.lupino-hhero__bg img { animation: none; }
	.lupino-hhero__cue { animation: none; }
}