/* =========================================================
   Sensual Moments — Homepage & Landing Page Template CSS
   Targets the real sm-* classes already saved in the live
   Homepage and the 9 "[Category] Australia" landing pages'
   Gutenberg content. Loaded after sm-theme.css.
   ========================================================= */

/* ---------------------------------------------------------
   Shared section/utility classes (Homepage Utilities, 01.)
   --------------------------------------------------------- */

.sm-home-section,
.sm-section {
	padding: clamp(64px, 8vw, 112px) 24px;
}
.sm-home-section > *,
.sm-section > * {
	max-width: var(--sm-max-width);
	margin-left: auto;
	margin-right: auto;
}
.sm-section-cream { background: var(--sm-cream); }
.sm-section-white { background: var(--sm-white) !important; }
.sm-section-blush { background: var(--sm-blush); }
.sm-section-champagne { background: var(--sm-champagne); }
.sm-section-dark {
	background: var(--sm-champagne);
	color: var(--sm-text);
}
.sm-section-dark h1, .sm-section-dark h2, .sm-section-dark h3, .sm-section-dark h4 {
	color: var(--sm-deep);
}

.sm-kicker, .sm-eyebrow {
	color: var(--sm-primary);
	display: block;
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3px;
	line-height: 1.2;
	margin-bottom: 16px !important;
	text-transform: uppercase;
	/* Real bug: the base .entry-content p { max-width:760px } reading-
	   width rule was also catching these short one-line kicker labels
	   (they're real <p> tags), capping them to 760px with no matching
	   margin:auto - so a centered kicker's text centered fine within
	   its own box, but the box itself sat flush left instead of on the
	   true page/section center. Kickers are never meant to wrap at a
	   reading width, so just exempt them from the cap entirely. */
	max-width: none !important;
}

.sm-section-title {
	max-width: 820px;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-bottom: 18px !important;
	text-align: center;
}
.sm-section-lead {
	max-width: 760px;
	margin: 0 auto 42px !important;
	color: var(--sm-text);
	font-family: 'Jost', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.75;
	text-align: center;
}
.sm-card {
	background: var(--sm-white);
	border: 1px solid var(--sm-border);
	border-radius: 0;
	box-shadow: none;
	overflow: hidden;
	transition: opacity 0.2s ease;
}
.sm-card:hover { opacity: 0.9; }

/* ---------------------------------------------------------
   Homepage Hero (09.) — real Cover block; CSS restyles the
   overlay/type treatment only, not the assigned image itself.
   --------------------------------------------------------- */

.sm-home-hero {
	position: relative !important;
	min-height: 640px !important;
	padding: 100px 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	overflow: hidden !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-position: center center !important;
	background-size: cover !important;
}
.sm-home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(33,16,22,0.72) 0%, rgba(33,16,22,0.42) 50%, rgba(33,16,22,0.08) 100%);
	z-index: 1;
	pointer-events: none;
}
.sm-home-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100% !important;
	max-width: 1400px !important;
	margin: 0 auto !important;
	padding: 0 64px !important;
	text-align: left;
	color: #ffffff;
}
.sm-hero-kicker {
	display: inline-flex !important;
	margin: 0 0 18px !important;
	padding: 0 !important;
	border: 0;
	background: transparent;
	color: rgba(255,255,255,0.9) !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 3px !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
}
.sm-hero-title, .sm-home-hero h1 {
	max-width: 620px;
	margin: 0 0 20px !important;
	color: #ffffff !important;
	font-family: 'Playfair Display', Georgia, serif !important;
	font-size: clamp(40px, 5vw, 60px) !important;
	font-weight: 500 !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	text-shadow: none;
}
.sm-hero-subtitle {
	max-width: 480px;
	margin: 0 0 32px !important;
	color: rgba(255,255,255,0.85) !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	text-shadow: none;
}
.sm-hero-actions {
	display: flex !important;
	justify-content: flex-start;
	gap: 16px !important;
}
.sm-hero-actions .wp-block-button__link {
	border-radius: 999px !important;
	padding: 15px 34px !important;
	background: var(--sm-primary) !important;
	color: #ffffff !important;
	font-family: 'Jost', sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	box-shadow: none !important;
}
.sm-hero-actions .wp-block-button__link:hover { background: var(--sm-deep) !important; }
.sm-hero-actions .sm-button-soft .wp-block-button__link {
	background: transparent !important;
	border: 1px solid #ffffff !important;
	color: #ffffff !important;
}

/* ---------------------------------------------------------
   Trust Strip / Benefit strip (10.)
   --------------------------------------------------------- */

.sm-trust-strip { max-width: var(--sm-max-width) !important; margin: 0 auto; padding: 0 64px !important; }
.sm-trust-grid {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	border-top: 1px solid var(--sm-border);
	border-bottom: 1px solid var(--sm-border);
	gap: 0 !important;
}
.sm-trust-grid .wp-block-column {
	padding: 24px;
	border-right: 1px solid var(--sm-border);
}
.sm-trust-grid .wp-block-column:last-child { border-right: 0; }
.sm-trust-grid p { margin: 0; color: var(--sm-text); font-family: 'Jost', sans-serif; font-size: 13px; text-align: center; }
.sm-trust-grid strong { color: var(--sm-deep); font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 15px; }

/* ---------------------------------------------------------
   Featured Collections (11.)
   --------------------------------------------------------- */

.sm-featured-section { background: var(--sm-cream) !important; }
.sm-featured-section::before { display: none; }
/* Real bug: this section's H2 ("Featured collections") is centered,
   but the "Explore the mood" kicker above it was never marked
   centered in the content, so it sat flush left across the full
   section width instead of matching the heading below it. */
.sm-featured-section .sm-kicker,
.sm-featured-section .sm-eyebrow { text-align: center; }
.sm-collection-grid, .sm-featured-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px !important;
	max-width: var(--sm-max-width);
}
/* Real bugs found live: this rule assumed the title/description sit in
   a dark gradient overlay ON TOP of the photo (bottom:Xpx, white text)
   - but the real markup is plain block flow (photo, then h3/p/button
   below it, all position:static), so those bottom:Xpx rules never
   applied and the white h3/p text was invisible against the white
   card background. Also had zero card padding (text touched the
   border) and no way to keep buttons aligned across a row when one
   description wraps to an extra line. Rebuilt as a real flex column
   with the button pinned to the bottom via margin-top:auto, so every
   button in the row sits at the same height regardless of how many
   lines the description above it takes. */
.sm-collection-card {
	display: flex !important;
	flex-direction: column;
	min-height: 320px !important;
	background: var(--sm-white);
	border: 1px solid var(--sm-border);
	border-radius: 0;
	box-shadow: none;
}
.sm-collection-card figure { margin: 0 !important; height: 320px !important; background: var(--sm-blush); }
.sm-collection-card img { height: 320px !important; object-fit: cover !important; border-radius: 0 !important; box-shadow: none !important; }
.sm-collection-card h3 {
	margin: 20px 20px 8px !important;
	color: var(--sm-deep) !important;
	font-size: 18px !important;
	text-shadow: none;
}
.sm-collection-card > p {
	margin: 0 20px 16px !important;
	color: var(--sm-muted) !important;
	font-family: 'Jost', sans-serif;
	font-size: 13px !important;
}
.sm-collection-card .wp-block-buttons {
	margin: 0 20px 20px !important;
	margin-top: auto !important;
}
.sm-collection-card .wp-block-button__link {
	background: var(--sm-white) !important;
	border: 1px solid var(--sm-text) !important;
	color: var(--sm-text) !important;
	box-shadow: none !important;
	border-radius: 999px !important;
	font-size: 11px !important;
}

/* ---------------------------------------------------------
   Shop By Feeling / mood section (12.)
   --------------------------------------------------------- */

.sm-mood-section { background: var(--sm-champagne) !important; }
.sm-mood-section .sm-kicker { color: var(--sm-primary) !important; text-align: center; }
.sm-mood-section .sm-section-title, .sm-mood-section h2, .sm-mood-section h3 { color: var(--sm-deep) !important; }
.sm-mood-grid { max-width: 1040px; margin-left: auto !important; margin-right: auto !important; gap: 20px !important; }
.sm-mood-card {
	background: var(--sm-white);
	border: 1px solid var(--sm-border);
	border-radius: 0;
	padding: 30px;
	box-shadow: none;
}
.sm-mood-card h3 { color: var(--sm-deep) !important; font-family: 'Playfair Display', Georgia, serif; }
.sm-mood-card p { color: var(--sm-text); font-family: 'Jost', sans-serif; }
.sm-mood-card a { color: var(--sm-primary); font-family: 'Jost', sans-serif; font-weight: 600; text-decoration: none; }

/* ---------------------------------------------------------
   Plus Size Feature (13.)
   --------------------------------------------------------- */

.sm-plus-section { background: var(--sm-champagne) !important; }
.sm-plus-feature { max-width: 1120px; gap: 44px !important; }
.sm-plus-feature img { border-radius: 0 !important; box-shadow: none !important; }
.sm-plus-copy { background: var(--sm-white); border: 1px solid var(--sm-border); border-radius: 0; box-shadow: none; padding: clamp(30px, 4vw, 52px); }
.sm-plus-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px !important; max-width: 1040px; }
.sm-small-card {
	background: var(--sm-white);
	border: 1px solid var(--sm-border);
	border-radius: 0;
	box-shadow: none;
	padding: 16px 16px 20px;
	text-align: center !important;
}
.sm-small-card img { border-radius: 0 !important; box-shadow: none !important; }
.sm-small-card a { color: var(--sm-primary); font-family: 'Jost', sans-serif; font-weight: 600; text-decoration: none; }
.sm-small-card .wp-block-button__link { border-radius: 999px !important; }

/* ---------------------------------------------------------
   New Arrivals — real WC Product Collection block (14.)
   --------------------------------------------------------- */

.sm-new-arrivals-section { background: var(--sm-champagne) !important; color: var(--sm-text) !important; }
.sm-new-arrivals-section .sm-kicker { color: var(--sm-primary) !important; }
.sm-new-arrivals-section .sm-section-title, .sm-new-arrivals-section h2 { color: var(--sm-deep) !important; }
.sm-new-arrivals-section .sm-section-lead { color: var(--sm-muted) !important; }
.sm-new-arrivals-section .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 24px !important;
	max-width: var(--sm-max-width) !important;
}
.sm-new-arrivals-section .wc-block-product-template li,
.sm-new-arrivals-section .wc-block-product {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	text-align: left !important;
	/* Real product titles vary in length - some wrap to 2 lines, some
	   fit on 1 - so the "Select Options" button below them landed at a
	   different height per card. Flex column + margin-top:auto on the
	   button pins it to the same bottom position across the row,
	   regardless of how many lines the title above it takes. */
	display: flex !important;
	flex-direction: column !important;
}
.sm-new-arrivals-section .wc-block-components-product-button {
	margin-top: auto !important;
}
.sm-new-arrivals-section .wc-block-components-product-image,
.sm-new-arrivals-section .wc-block-product-image {
	height: auto !important;
	aspect-ratio: 2/3;
	background: var(--sm-white) !important;
	border-radius: 0 !important;
	position: relative !important;
	overflow: hidden;
}
/* Real bug: WooCommerce's Product Image block bakes its own
   "aspect-ratio:4/3" directly onto the <img> as an inline style, and
   percentage heights on a box whose own height comes from
   aspect-ratio (not a literal px value) don't resolve reliably -
   an earlier attempt at height:100% blew the image up to several
   times the card's size instead of fixing the gap. Absolutely
   positioning the image to fill its (relatively positioned, sized-by-
   aspect-ratio) container sidesteps that percentage-height ambiguity
   entirely - the standard robust pattern for an aspect-ratio box with
   a cover image. */
.sm-new-arrivals-section .wc-block-components-product-image img,
.sm-new-arrivals-section .wc-block-product-image img {
	position: absolute !important;
	inset: 0 !important;
	height: 100% !important;
	width: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}
.sm-new-arrivals-section .wc-block-components-product-name,
.sm-new-arrivals-section .wc-block-components-product-name a {
	color: var(--sm-deep) !important;
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 500 !important;
	text-align: left !important;
}
.sm-new-arrivals-section .wc-block-components-product-price,
.sm-new-arrivals-section .wc-block-components-product-price .woocommerce-Price-amount {
	color: var(--sm-primary) !important;
	font-family: 'Jost', sans-serif !important;
}
.sm-new-arrivals-section .wp-block-button__link,
.sm-new-arrivals-section .wc-block-components-product-button__button {
	background: var(--sm-primary) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

/* ---------------------------------------------------------
   Story Section — brand editorial block (15.)
   --------------------------------------------------------- */

.sm-story-section { background: var(--sm-cream) !important; }
.sm-story-grid { max-width: 1120px; gap: 44px !important; }
.sm-story-grid img { border-radius: 0 !important; box-shadow: none !important; }
.sm-story-copy { background: var(--sm-white); border: 1px solid var(--sm-border); border-radius: 0; box-shadow: none; padding: clamp(30px, 4vw, 52px); }

/* ---------------------------------------------------------
   SEO Closing Section (16.)
   --------------------------------------------------------- */

.sm-seo-section { background: var(--sm-champagne) !important; color: var(--sm-text); text-align: center; }
.sm-seo-section h2 { color: var(--sm-deep) !important; }
.sm-seo-section p { color: var(--sm-muted); font-family: 'Jost', sans-serif; }
.sm-seo-section .wp-block-button__link { border-radius: 999px !important; background: var(--sm-primary) !important; }

/* =========================================================
   Landing page template shared base (17.) — the 9 real
   "[Category] Australia" pages.
   ========================================================= */

.sm-shop-hero {
	padding: clamp(60px, 6vw, 88px) 0 !important;
	background: var(--sm-champagne) !important;
	color: var(--sm-text);
}

/* Real bug, confirmed live: every .alignfull section on the Shop page
   (hero, category section, category grid) stopped ~87px short of the
   true right edge while overflowing the same amount on the left -
   core's .alignfull calc(50% - 50vw) trick breaks once it's nested
   inside the archive .site-content max-width wrapper (section 06),
   which isn't symmetrically centered relative to the true viewport in
   this context. Viewport-relative centering sidesteps the parent
   entirely instead of depending on its box being centered correctly. */
body.post-type-archive-product .alignfull,
body.tax-product_cat .alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: 50% !important;
	margin-right: 0 !important;
	transform: translateX(-50%) !important;
}
.sm-shop-hero-grid { width: 100%; max-width: 1400px; margin: 0 auto !important; padding: 0 64px; }
.sm-shop-hero-columns { gap: clamp(34px, 5vw, 68px) !important; }
.sm-shop-hero .sm-kicker { color: var(--sm-primary) !important; text-align: left !important; }
.sm-shop-hero .sm-section-title {
	max-width: 700px;
	color: var(--sm-deep) !important;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(36px, 4vw, 52px) !important;
	line-height: 1.1 !important;
	text-align: left !important;
}
.sm-shop-hero .sm-section-lead { color: var(--sm-muted) !important; text-align: left !important; }
.sm-shop-hero .sm-hero-actions { justify-content: flex-start !important; }
/* .sm-button-soft is a white-outline treatment meant for the dark
   photo hero (.sm-home-hero) - the Shop hero reuses .sm-hero-actions
   but is now a light champagne section, so its buttons need dark
   outline/text instead of white-on-white. */
.sm-shop-hero .sm-button-soft .wp-block-button__link {
	border-color: var(--sm-text) !important;
	color: var(--sm-text) !important;
}
.sm-shop-hero .sm-button-soft .wp-block-button__link:hover {
	background: var(--sm-text) !important;
	color: var(--sm-white) !important;
}
/* Same white-outline-on-dark-photo leftover as .sm-shop-hero above -
   this SEO section (bottom of the Shop page) is also a light cream
   section (.sm-seo-section), not the dark hero .sm-button-soft was
   designed for, so its "Shop lingerie"/"Shop plus size" buttons were
   rendering white-on-cream, effectively invisible. */
.sm-shop-seo-section .sm-button-soft .wp-block-button__link {
	border-color: var(--sm-text) !important;
	color: var(--sm-text) !important;
}
.sm-shop-seo-section .sm-button-soft .wp-block-button__link:hover {
	background: var(--sm-text) !important;
	color: var(--sm-white) !important;
}
.sm-shop-hero-panel {
	max-width: 430px;
	margin-left: auto;
	padding: clamp(24px, 3.4vw, 34px);
	border: 1px solid var(--sm-border);
	border-radius: 0;
	background: var(--sm-white);
	box-shadow: none;
	backdrop-filter: none;
}
.sm-shop-hero-panel h2 { color: var(--sm-deep) !important; font-family: 'Playfair Display', Georgia, serif; }
.sm-shop-hero-panel p { color: var(--sm-text) !important; font-family: 'Jost', sans-serif; }
.sm-shop-hero-panel img { border-radius: 0 !important; box-shadow: none !important; }

.sm-shop-category-section { padding: clamp(70px, 7vw, 104px) 0 !important; }
.sm-shop-category-inner { width: 100%; max-width: 1400px; margin: 0 auto !important; padding: 0 64px; }
.sm-shop-category-grid {
	width: 100%; max-width: 1180px;
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
}
/* Redesigned as a vertical image-top card, matching the already-
   proven .sm-collection-card pattern used elsewhere on the site. The
   original design was a horizontal row (image, heading, paragraph,
   button side by side) that kept breaking in new ways as the row ran
   out of space - button text collapsing into single-letter columns,
   badges shrinking to slivers, and finally the paragraph itself
   wrapping one letter per line once the card got narrow. A horizontal
   row with several fixed-width children has nowhere for the one
   flexible piece (the paragraph) to go once space runs out; a
   vertical stack has no such failure mode at any width. */
.sm-shop-category-card {
	display: flex !important;
	flex-direction: column !important;
	padding: 0;
	border: 1px solid var(--sm-border);
	border-radius: 0;
	background: var(--sm-white);
	box-shadow: none;
}
.sm-shop-category-card figure {
	margin: 0 !important;
	height: 320px !important;
	border-radius: 0;
	background: var(--sm-blush);
}
.sm-shop-category-card img {
	width: 100% !important;
	height: 320px !important;
	object-fit: cover !important;
	object-position: center top !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.sm-shop-category-card h3 {
	margin: 20px 20px 8px !important;
	padding: 0 !important;
}
.sm-shop-category-card h3 a { color: var(--sm-deep); font-family: 'Playfair Display', Georgia, serif; text-decoration: none; }
.sm-shop-category-card p {
	margin: 0 20px 16px !important;
	padding: 0 !important;
	color: var(--sm-text);
	font-family: 'Jost', sans-serif;
}
.sm-shop-category-card .wp-block-buttons {
	margin: 0 20px 20px !important;
	margin-top: auto !important;
	padding: 0 !important;
}
.sm-shop-category-card .wp-block-button.sm-button-soft .wp-block-button__link { border-radius: 999px !important; background: var(--sm-primary) !important; color: var(--sm-white) !important; border-color: var(--sm-primary) !important; box-shadow: none !important; white-space: nowrap; }

.sm-shop-confidence-section { padding: clamp(58px, 6vw, 88px) 0 !important; border-top: 1px solid var(--sm-border); }
.sm-shop-confidence-inner { width: 100%; max-width: 1400px; margin: 0 auto !important; padding: 0 64px; }
.sm-shop-confidence-grid { width: 100%; max-width: 1180px; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; }
.sm-shop-confidence-card {
	padding: 28px 24px 30px;
	border: 1px solid var(--sm-border);
	border-radius: 0;
	background: var(--sm-white);
	box-shadow: none;
	text-align: left;
}
.sm-shop-confidence-card::before { background: var(--sm-primary); height: 2px; width: 32px; margin: 0 0 18px; }
.sm-shop-confidence-card h3 { text-align: left; font-family: 'Playfair Display', Georgia, serif; }
.sm-shop-confidence-card p { text-align: left; color: var(--sm-text); font-family: 'Jost', sans-serif; }

@media (max-width: 1024px) {
	.sm-collection-grid, .sm-featured-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
	.sm-plus-grid, .sm-new-arrivals-section .wc-block-product-template { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
	.sm-shop-category-grid, .sm-shop-confidence-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 600px) {
	.sm-collection-grid, .sm-featured-grid, .sm-plus-grid,
	.sm-new-arrivals-section .wc-block-product-template,
	.sm-shop-category-grid, .sm-shop-confidence-grid {
		grid-template-columns: 1fr !important;
	}
	.sm-home-hero .wp-block-cover__inner-container,
	.sm-shop-hero-grid, .sm-shop-category-inner, .sm-shop-confidence-inner {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}