/* =========================================================
   Sensual Moments — Landing page template detail
   Completes the real .sm-landing-page / .sm-lp-* system used
   by all 9 "[Category] Australia" pages: comparison cards,
   how-to/mood cards, two-column intro. The shared hero/proof-
   row/FAQ/final-section classes are already covered in
   sm-info-pages.css and apply here without page-specific
   scoping, since every page reuses the same real classes.
   ========================================================= */

.sm-landing-page {
	background: var(--sm-cream);
	color: var(--sm-text);
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	line-height: 1.75;
}
.sm-landing-page a { color: var(--sm-primary); font-weight: 500; }

.sm-landing-page h1, .sm-landing-page h2, .sm-landing-page h3 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--sm-deep);
	letter-spacing: 0;
	line-height: 1.15;
}
.sm-landing-page h2 { font-size: clamp(28px, 3.5vw, 40px); }
.sm-landing-page h3 { font-size: clamp(19px, 2vw, 24px); }

.sm-lp-section, .sm-lp-proof-row { padding-left: 64px !important; padding-right: 64px !important; }

.sm-lp-btn-primary .wp-block-button__link {
	background: var(--sm-primary) !important;
	color: #fff !important;
	box-shadow: none !important;
	border-radius: 999px !important;
}
.sm-lp-btn-secondary .wp-block-button__link {
	background: transparent !important;
	color: var(--sm-text) !important;
	border: 1px solid var(--sm-text) !important;
	border-radius: 999px !important;
}

.sm-lp-two-col p { color: var(--sm-text); font-family: 'Jost', sans-serif; font-size: 16px; line-height: 1.78; }

/* Comparison cards, mood/how-to cards, generic callouts — all
   share the same real base class list. */
.sm-lp-callout, .sm-lp-card, .sm-lp-mood-card, .sm-lp-compare-card {
	border: 1px solid var(--sm-border);
	border-radius: 0;
	background: var(--sm-white);
	box-shadow: none;
	/* Real bug: this shared card rule never had padding at all - content
	   sat flush against the border with only its own text margins for
	   breathing room, reading as cramped next to every other card
	   pattern on the site (which all use 26-38px card padding). */
	padding: clamp(24px, 3vw, 32px);
}
.sm-lp-card h3, .sm-lp-mood-card h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
.sm-lp-card p, .sm-lp-mood-card p { color: var(--sm-text); font-family: 'Jost', sans-serif; }

/* Comparison cards sit on .sm-lp-dark-section, now a light champagne
   section - the shared base rule above (white card, dark text) already
   covers this correctly, no override needed. */
.sm-lp-compare-card li { color: var(--sm-text); font-family: 'Jost', sans-serif; }

.sm-lp-compare-grid, .sm-lp-card-grid { gap: 20px !important; }
.sm-lp-four-cards .wp-block-column { min-width: 0; }

/* =========================================================
   Section imagery + product row
   Added 2026-08-29 for the "images + product cards on the
   [Category] Australia pages" pass. .sm-lp-products styles the
   real WooCommerce Product Collection block (hand-picked, 4
   items) directly, so it no longer has to borrow the
   homepage's .sm-new-arrivals-section. .sm-lp-band-image and
   the intro image-card rule cover the standalone section
   photos added to the intro and mood sections.
   ========================================================= */

/* Feature image inside the intro two-column block: centre it
   in its own column instead of hugging the left edge. */
.sm-lp-intro .sm-lp-image-card { margin-left: auto !important; margin-right: auto !important; }

/* Standalone centred section image (mood-section band). Also
   keeps the Smush lazy-load placeholder from briefly blowing
   up to full width before the real image swaps in, since the
   placeholder inherits this constrained width too. */
.sm-lp-band-image {
	max-width: 360px !important;
	margin: clamp(20px, 3vw, 36px) auto 4px !important;
}
.sm-lp-band-image img { width: 100% !important; height: auto !important; }

/* Product row — real WooCommerce Product Collection block,
   hand-picked to 4 visually-vetted products. Mirrors the
   homepage New Arrivals treatment but goes 4 -> 2 -> 2 across
   (stays two-wide on phones, never one). */
.sm-lp-products { margin: clamp(28px, 4vw, 44px) auto 0; max-width: var(--sm-max-width); }
.sm-lp-products .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.sm-lp-products .wc-block-product-template li,
.sm-lp-products .wc-block-product {
	background: var(--sm-white) !important;
	border: 1px solid var(--sm-border) !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 0 24px !important;
	display: flex !important;
	flex-direction: column !important;
	text-align: center !important;
}
.sm-lp-products .wc-block-components-product-image,
.sm-lp-products .wc-block-product-image {
	margin: 0 0 16px !important;
	aspect-ratio: 2 / 3;
	background: var(--sm-white) !important;
	border-radius: 0 !important;
	position: relative !important;
	overflow: hidden;
}
.sm-lp-products .wc-block-components-product-image img,
.sm-lp-products .wc-block-product-image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}
.sm-lp-products .wp-block-post-title,
.sm-lp-products .wc-block-components-product-name {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	color: var(--sm-deep) !important;
	margin: 0 0 8px !important;
	padding: 0 18px !important;
}
.sm-lp-products .wp-block-post-title a,
.sm-lp-products .wc-block-components-product-name a { color: inherit !important; text-decoration: none !important; }
.sm-lp-products .wc-block-components-product-price,
.sm-lp-products .wc-block-components-product-price .woocommerce-Price-amount {
	font-family: 'Jost', sans-serif !important;
	font-size: 14px !important;
	color: var(--sm-primary) !important;
}
.sm-lp-products .wc-block-components-product-price { padding: 0 18px !important; }
.sm-lp-products .wp-block-woocommerce-product-button,
.sm-lp-products .wc-block-components-product-button { margin-top: auto !important; padding: 14px 18px 0 !important; }
.sm-lp-products .wp-block-button__link,
.sm-lp-products .wc-block-components-product-button__button {
	background: var(--sm-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}
.sm-lp-products .wc-block-query-pagination { display: none !important; }

@media (max-width: 1024px) {
	.sm-lp-products .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
	.sm-lp-products .wc-block-product-template { gap: 14px !important; }
	.sm-lp-products .wp-block-post-title,
	.sm-lp-products .wc-block-components-product-name,
	.sm-lp-products .wc-block-components-product-price { padding: 0 12px !important; }
	.sm-lp-products .wp-block-woocommerce-product-button,
	.sm-lp-products .wc-block-components-product-button { padding: 12px 12px 0 !important; }
	.sm-lp-band-image { max-width: 280px !important; }
}

/* =========================================================
   Section rhythm — tighten the vertical spacing
   Added 2026-08-29. The shared .sm-lp-section padding (from
   sm-info-pages.css, clamp(64px,7vw,100px)) left large cream
   voids between sections once section images and the product
   row were added. Scoped to .sm-landing-page so the info
   pages that also use .sm-lp-section (Discreet Packaging,
   Gift Options) keep their existing spacing.
   ========================================================= */
.sm-landing-page .sm-lp-section {
	padding-top: clamp(44px, 5vw, 68px) !important;
	padding-bottom: clamp(44px, 5vw, 68px) !important;
}
/* Same Gutenberg default-padding bug already fixed for .sm-lp-proof-row
   in sm-info-pages.css: the auto-generated .wp-block-group__inner-container
   carries a 40px top+bottom pad that stacked ~80px of dead space onto
   every section boundary on top of the section's own padding. */
.sm-landing-page .sm-lp-section > .wp-block-group__inner-container,
.sm-landing-page .sm-lp-section > .is-layout-constrained {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.sm-landing-page .sm-lp-hero {
	padding-top: clamp(52px, 5vw, 78px) !important;
	padding-bottom: clamp(52px, 5vw, 78px) !important;
}
.sm-landing-page .sm-lp-faq-section {
	padding-top: clamp(46px, 5vw, 70px) !important;
	padding-bottom: clamp(46px, 5vw, 70px) !important;
}
.sm-landing-page .sm-lp-final-section {
	padding-top: clamp(52px, 5vw, 78px) !important;
	padding-bottom: clamp(52px, 5vw, 78px) !important;
}

@media (max-width: 900px) {
	.sm-lp-section, .sm-lp-proof-row { padding-left: 24px !important; padding-right: 24px !important; }
}