/* ──────────────────────────────────────────────────────────────────────────
   LELAM custom front-end tweaks (child theme).
   Loaded via functions.php after the parent stylesheet.
   ────────────────────────────────────────────────────────────────────────── */

/* Shop / Collection product loop — product names.
   TKT-003 row 1: the site's former Inter face is replaced by Montserrat. These
   small uppercase product labels read as body/UI text, not display headlines, so
   they take the body face; true page/section headings take URW Classico. */
.wp-block-query .wp-block-post-title,
.wp-block-query .wp-block-post-title a {
	font-family: var(--lelam-font-body);
	font-weight: 400;
	text-transform: uppercase;
}

/* "Contact to Order" link under each product (core/read-more).
   Underline is a hover highlight only — never a fixed/clicked state. */
.wp-block-query .wp-block-read-more {
	display: inline-block;
	font-family: var(--lelam-font-body);
	text-decoration: none;
}
.wp-block-query .wp-block-read-more:hover {
	text-decoration: none;
	opacity: 1;
}

/* ── Gallery index (archive /gallery/) — collection / documentary cards ──── */
.lelam-gallery-index .lelam-gallery-card__text {
	align-items: center;
	text-align: center;
}

/* Gallery images: square corners (no rounding). */
.lelam-gallery-index .wp-block-post-featured-image,
.lelam-gallery-index .wp-block-post-featured-image img,
.lelam-gallery__media,
.lelam-gallery__media img,
.lelam-gallery__img {
	border-radius: 0;
}

/* Card title = collection / document name: UPPERCASE 14 body face.
   Underline appears on hover as the highlight. */
.lelam-gallery-card__title,
.lelam-gallery-card__title a {
	font-family: var(--lelam-font-body);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.35;
	text-decoration: none;
}
.lelam-gallery-card__title a:hover {
	text-decoration: none;
	opacity: 1;
}

/* "See more" link, 14px, understated. Underline highlight on hover. */
.lelam-gallery-card__more {
	font-family: var(--lelam-font-body);
	text-decoration: none;
	opacity: 0.7;
}
.lelam-gallery-card__more:hover {
	opacity: 1;
	text-decoration: none;
}

/* Pagination numbers: small, no underline, current = black, others = grey. */
.wp-block-query-pagination-numbers .page-numbers {
	color: #9a9a9a;
	text-decoration: none;
}
.wp-block-query-pagination-numbers .page-numbers:hover {
	color: #111;
	text-decoration: none;
}
.wp-block-query-pagination-numbers .page-numbers.current {
	color: #111;
}

/* ── Internal info pages (About / Privacy / FAQ / Our Store / Appointments /
   Contact us — template "lelam-internal-page") ──────────────────────────────── */
/* Body content text = 18px (per Figma). */
.page-template-lelam-internal-page .entry-content,
.page-template-lelam-internal-page .entry-content p {
	font-size: 18px;
	line-height: 1.7;
}

/* CTA button (core "Outline" style — e.g. "Contact Us"): thinner border,
   square corners, subtle lift + light grey on hover (no heavy "clicked" look). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-width: 1px;
	border-radius: 0;
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(0, 0, 0, 0.04);
	color: inherit;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Our Store: the "our store" cover heading → 24px (was xx-large). */
.page-id-257 .wp-block-cover .wp-block-heading {
	font-size: 24px;
}

/* Appointments: drop the text overlay on the cover banner (image only). */
.page-id-258 .wp-block-cover__inner-container {
	display: none;
}

/* ── Product search results ─────────────────────────────────────────────────
   Sorting dropdown: no border/box. */
.wp-block-woocommerce-catalog-sorting select,
select.orderby {
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}
/* Product names uppercase (match the shop loop). */
.wp-block-woocommerce-product-collection .wp-block-post-title,
.wp-block-woocommerce-product-collection .wp-block-post-title a,
.wc-block-grid__product-title {
	text-transform: uppercase;
}

/* Header cart visibility is controlled in PHP by the "Shop mode" toggle
   (Order Inquiries → Settings). In "Contact to Order" mode the lelam/cart block
   is not rendered at all; in "Shopping Cart" mode it shows normally. */

/* ── Kill the parent theme's default focus outline ───────────────────────────
   twentytwentyfour/theme.json injects:
     :where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}
   That `:where()` rule has zero specificity, so customers see a 2px box when
   they click / hover-activate links & buttons. We override it here.
   Keep the outline for keyboard users (:focus-visible) so accessibility and
   tab navigation are unaffected — only mouse/touch focus loses the box. */
.wp-site-blocks *:focus:not(:focus-visible) {
	outline: none !important;
}

/* The block theme also INVERTS button colours on :focus (theme.json
   elements.button:focus → contrast-2 background), so a button stays looking
   "clicked"/filled after a mouse tap. Neutralise that for mouse focus only;
   keyboard users (:focus-visible) keep the visible focus state. */
.wp-element-button:focus:not(:focus-visible),
.wp-block-button__link:focus:not(:focus-visible) {
	background-color: transparent;
	border-color: currentColor;
	color: inherit;
	outline: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   LELAM ADDITIONAL CLIENT FEEDBACK OVERRIDES
   ────────────────────────────────────────────────────────────────────────── */

/* Item 1: All pages font size 12px (headings preserved) */
body, p, li, dd, dt, label, input, textarea, select, td, th,
.wp-block-paragraph, .wp-block-list-item, .wp-block-post-excerpt,
.wp-block-post-excerpt__excerpt, .lelam-footer__contact-line,
.lelam-footer__label, .lelam-footer__muted, .lelam-footer__newsletter-title,
.lelam-footer__email-placeholder, .lelam-footer__send, .lelam-footer__privacy {
	font-size: 12px !important;
}
/* NOTE (Item 25): headings must NOT be forced to `font-size: inherit` — that made
   every heading inherit the 12px body size and look shrunken on every page.
   Headings now keep their theme.json / per-block design sizes. Only the body-copy
   selectors above are pinned to 12px. Page-specific heading sizes (e.g. the Shop
   Collection product titles, Item 26 below) are set with their own rules. */

/* Item 2: Homepage cover overlay & Menu Character Spacing */
.home .wp-block-cover__background,
.home .wp-block-cover__gradient-background,
.home .has-background-dim::before {
	display: none !important;
}
.wp-block-navigation-item,
.wp-block-navigation-item a,
.lelam-mega__trigger-text,
.lelam-mega-tab__label,
.lelam-mega-tab__link {
	letter-spacing: -0.015em !important;
}

/* Item 3, 7, 11: Underline Removal */
.page-id-290 a,
.page-id-290 .lelam-gallery__title,
.page-id-290 .lelam-gallery__request,
.post-type-archive-product a,
.tax-product_cat a,
.post-type-archive-product .wp-block-post-title a,
.tax-product_cat .wp-block-post-title a,
.single-gallery a,
.single-gallery .lelam-gallery__title,
.single-gallery .lelam-gallery__request {
	text-decoration: none !important;
}
.page-id-290 a:hover,
.page-id-290 .lelam-gallery__title:hover,
.page-id-290 .lelam-gallery__request:hover,
.post-type-archive-product a:hover,
.tax-product_cat a:hover,
.post-type-archive-product .wp-block-post-title a:hover,
.tax-product_cat .wp-block-post-title a:hover,
.single-gallery a:hover,
.single-gallery .lelam-gallery__title:hover,
.single-gallery .lelam-gallery__request:hover {
	text-decoration: none !important;
}

/* Item 4: LELAM ETERNITY image sizes (3 columns lookbook).
   REVISION 1 — scoped away from the mosaic layout, which lays the wall out with
   CSS columns rather than a grid; forcing grid-template-columns there would
   flatten it back into an even grid. */
.page-id-290 .lelam-gallery:not(.is-layout-mosaic) .lelam-gallery__grid {
	grid-template-columns: repeat(3, 1fr) !important;
}

/* Item 5: Product detail adjustments */
.single-product .product_title,
.single-product .woocommerce-loop-product__title,
.single-product .woocommerce-tabs,
.single-product .woocommerce-tabs h2,
.single-product .woocommerce-tabs th,
.single-product .woocommerce-tabs td,
.single-product .related.products .product_title,
.single-product .related.products h2 {
	font-family: var(--lelam-font-body) !important;
}
.single-product p,
.single-product li,
.single-product a,
.single-product span,
.single-product td,
.single-product th,
.single-product .price {
	font-size: 13px !important;
}
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__wrapper img {
	aspect-ratio: 3 / 4 !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}
.single-product .related.products .button,
.single-product .related.products .wp-block-button,
.single-product .related.products .wp-block-read-more {
	display: none !important;
}

/* Item 6: Side Menu Width (Desktop).
   REVISION 1 / TKT-003 row 3 — the client's note on the SHOP panel was "hai cột
   bị sát nhau quá, làm cảm giác không thoáng". The rail (tab labels) was pinned
   to 110px, which left the category list starting almost against the labels.
   Widen the rail and the panel so the two columns read as two columns. */
@media screen and (min-width: 782px) {
	.lelam-mega__panel {
		width: 620px !important;
	}
	.lelam-mega__tabs {
		--lelam-rail: 200px;
		--lelam-pad-x: 2.25rem;
		--lelam-pad-y: 2rem;
	}
	.lelam-mega-tab__content {
		left: calc(var(--lelam-pad-x) + var(--lelam-rail));
		max-height: 80vh;
	}
	.lelam-mega__panel-head {
		padding: 1.25rem 1.5rem !important;
	}
	.lelam-mega__panel-nav {
		gap: 1.2rem !important;
		flex-wrap: nowrap !important;
	}
	.lelam-mega__panel-nav-item {
		font-size: 13px !important;
	}
}

/* Item 8 & 9: Shop page spacing & hide cover banner on page 2+ */
.post-type-archive-product .wp-block-query .wp-block-post,
.tax-product_cat .wp-block-query .wp-block-post {
	gap: 4px !important;
}
.post-type-archive-product .wp-block-post-featured-image,
.tax-product_cat .wp-block-post-featured-image {
	margin-bottom: 8px !important;
}
.post-type-archive-product .wp-block-post-title,
.tax-product_cat .wp-block-post-title {
	margin-top: 2px !important;
	margin-bottom: 2px !important;
}
.post-type-archive-product .wp-block-read-more,
.tax-product_cat .wp-block-read-more {
	margin-top: 2px !important;
}
/* Collection / Shop archive: hide the whole hero "banner" zone on page 2+
   (paged archives get the `paged` body class). The banner zone is the
   "NEW COLLECTION" cover plus the gallery-card row directly above it; the
   filter bar and the product grid stay visible. */
.archive.paged .wp-block-cover {
	display: none !important;
}
/* The gallery-card row is the group that sits immediately before the cover. */
.archive.paged main > .wp-block-group:has(+ .wp-block-cover) {
	display: none !important;
}

/* Item 13 / Task 37: About Page "Contact us" button — no rounded corners,
   12px text, slightly darker grey on hover (client: "bỏ bo viền, xám đậm hơn"). */
.page-id-239 .wp-block-button.is-style-outline > .wp-block-button__link {
	border-radius: 0 !important;
	font-size: 12px !important;
}
.page-id-239 .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: #dcdcdc !important;
	color: #000000 !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Item 19: Our Store Button Size */
.page-id-257 .wp-block-button.is-style-outline > .wp-block-button__link {
	font-size: 11px !important;
	padding: 6px 16px !important;
}

/* Ensure global links never get underlines on hover */
a:hover, a:focus, a:active {
	text-decoration: none !important;
}

/* Bridge the hover gap between the trigger and the dropdown menu */
.lelam-dropdown__menu::before {
	content: '';
	position: absolute;
	top: -0.75rem;
	left: 0;
	right: 0;
	height: 0.75rem;
	background: transparent;
}

/* ── Internal pages (Wholesale / FAQ / Policy / Contact / Bespoke …) ─────────
   The "lelam-internal-page" template puts a left nav column + content column.
   The nav column was 1/3 wide but its links are tiny, leaving a big empty gap
   before the content. Let the nav column hug its links and pull content left. */
@media (min-width: 782px) {
	/* The columns block is `alignwide` (~1280px). Its two columns only total
	   ~1040px, so by default they pack to the left and dump all the empty space
	   on the right. Center the nav+content group as one content-width block so
	   the whitespace is balanced on both sides. */
	.wp-block-columns:has(.content-internal-page) {
		gap: clamp(2rem, 4vw, 4rem) !important;
		align-items: flex-start;
		flex-wrap: nowrap;
		justify-content: center !important;
		max-width: 1040px;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.wp-block-columns:has(.content-internal-page) > .wp-block-column:first-child {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: 220px !important;
	}
	.wp-block-columns:has(.content-internal-page) > .wp-block-column:last-child {
		flex: 0 1 760px !important;
		max-width: 760px !important;
	}
}

/* ── Mobile header: centre the logo (default mobile rule pins it left) ───────
   Absolutely centre the logo over the bar so the right-hand actions keep their
   natural width and don't get clipped by an equal-width grid column. */
@media (max-width: 781px) {
	.wp-block-lelam-header.lelam-header {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	.wp-block-lelam-header.lelam-header .lelam-header__logo {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}
	.wp-block-lelam-header.lelam-header .lelam-header__logo a,
	.wp-block-lelam-header.lelam-header .lelam-header__logo img {
		pointer-events: auto;
	}
	.wp-block-lelam-header.lelam-header .lelam-header__logo img {
		width: 96px !important;
	}
	.wp-block-lelam-header.lelam-header .lelam-header__actions {
		gap: 0.7rem;
		font-size: 12px;
	}
}

/* ── Header "ACCOUNT" link — match the SEARCH/BAG triggers ─────────────────── */
.lelam-header__actions .lelam-header__account {
	margin: 0;
	font-size: 14px;
	line-height: 1;
}
.lelam-header__actions .lelam-header__account a {
	color: inherit;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0;
	white-space: nowrap;
}
.lelam-header__actions .lelam-header__account a:hover {
	text-decoration: none;
}


/* ──────────────────────────────────────────────────────────────────────────
   CLIENT FEEDBACK ROUND 2 (items 20–27)
   ────────────────────────────────────────────────────────────────────────── */

/* Item 26: Shop Collection archive (/collection/<slug>/, body.tax-collection).
   Product name + "Contact to Order" → 12px (was 18/14). Product images cropped
   to the gallery's 4/5 ratio so they're not over-tall / endless on mobile. */
.tax-collection .wp-block-post-title,
.tax-collection .wp-block-post-title a,
.tax-collection .wp-block-read-more,
.tax-collection .lelam-order-trigger {
	font-size: 12px !important;
	line-height: 1.4;
}
.tax-collection .wp-block-post-featured-image {
	margin-bottom: 8px;
}
.tax-collection .wp-block-post-featured-image img {
	aspect-ratio: 4 / 5 !important;
	object-fit: cover !important;
	width: 100%;
	height: auto;
	border-radius: 0 !important;
}

/* Item 22: Wholesale page (page-id-313) has little content; keep enough vertical
   space so the footer stays at the bottom instead of riding up under the header. */
.page-id-313 main,
.page-id-313 .content-internal-page {
	min-height: 60vh;
}

/* Item 23: My Account (body.woocommerce-account) — square corners on every box,
   field and button (client wants no rounded borders anywhere on this page). */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce form,
.woocommerce-account fieldset,
.woocommerce-account .col-1,
.woocommerce-account .col-2,
.woocommerce-account .woocommerce-Address-fields,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-navigation li,
.woocommerce-account input,
.woocommerce-account select,
.woocommerce-account textarea,
.woocommerce-account .button,
.woocommerce-account .wp-block-button__link,
.woocommerce-account .wp-element-button,
.woocommerce-account button {
	border-radius: 0 !important;
}

/* Item 21: Info pages (Shipping / FAQ / Policy / Wholesale / Bespoke — template
   "lelam-internal-page") — add breathing room between each heading and the
   paragraphs/lists that follow so the long-form copy reads as distinct sections. */
.page-template-lelam-internal-page .content-internal-page h2,
.page-template-lelam-internal-page .content-internal-page h3,
.page-template-lelam-internal-page .content-internal-page h4,
.page-template-lelam-internal-page .content-internal-page .wp-block-heading {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}
.page-template-lelam-internal-page .content-internal-page > *:first-child {
	margin-top: 0;
}
.page-template-lelam-internal-page .content-internal-page p,
.page-template-lelam-internal-page .content-internal-page ul,
.page-template-lelam-internal-page .content-internal-page ol {
	margin-bottom: 1.1em;
}


/* ──────────────────────────────────────────────────────────────────────────
   CLIENT FEEDBACK ROUND 3 (Feedback sheet tasks 29–40)
   ────────────────────────────────────────────────────────────────────────── */

/* Task 31: Remove the dim overlay on ALL banner / cover images site-wide.
   Item 2 already did this for the homepage; the client now wants no dark
   overlay on any banner image (e.g. the Collection hero "NEW COLLECTION"). */
.wp-block-cover__background,
.wp-block-cover__gradient-background {
	display: none !important;
}

/* Task 37: About page banner image — reduce ~40% and keep it a centred
   horizontal banner (not full width). */
.page-id-239 .wp-block-image.alignwide {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}
.page-id-239 .wp-block-image.alignwide img {
	width: 100%;
	height: auto;
}

/* Task 38: Header menu — unify EVERY top-bar item to a single 12px.
   The lelam-header block ships its own CSS forcing nav links to 14px !important
   at a higher specificity (.wp-block-lelam-header.lelam-header .wp-block-navigation
   .wp-block-navigation-item__content) and the search input to 14px !important,
   which beat the first attempt and left the SHOP trigger (12px) looking smaller
   than the rest. These selectors are prefixed with `body` so they outrank the
   block CSS (equal class-count + one element → wins) regardless of load order. */
body .wp-block-lelam-header.lelam-header .wp-block-navigation .wp-block-navigation-item__content,
body .wp-block-lelam-header.lelam-header .wp-block-navigation .lelam-mega__trigger,
body .wp-block-lelam-header.lelam-header .wp-block-navigation .lelam-mega__trigger-text,
body .wp-block-lelam-header.lelam-header .lelam-header__actions,
body .wp-block-lelam-header.lelam-header .lelam-header__actions a,
body .wp-block-lelam-header.lelam-header .lelam-header__account a,
body .wp-block-lelam-header.lelam-header .wp-block-search.is-style-lelam-minimal .wp-block-search__input {
	font-size: 12px !important;
}
/* Keep the SHOP trigger text on the exact same baseline as the links. */
body .wp-block-lelam-header.lelam-header .wp-block-navigation .lelam-mega__trigger-text {
	line-height: inherit !important;
	letter-spacing: 0.08em !important;
}

/* Task 39: Info / policy pages (Shipping & Payment, FAQ, Privacy Policy,
   Wholesale, Bespoke, Contact — template "lelam-internal-page"). Uniform 18px
   headings, a little extra character spacing, and generous line / section
   spacing modelled on the LinhDoan retail-policy reference. Applies across the
   whole info-page cluster. */
.page-template-lelam-internal-page .content-internal-page h1,
.page-template-lelam-internal-page .content-internal-page h2,
.page-template-lelam-internal-page .content-internal-page h3,
.page-template-lelam-internal-page .content-internal-page h4,
.page-template-lelam-internal-page .content-internal-page .wp-block-heading {
	font-size: 18px !important;
	line-height: 1.5;
	letter-spacing: 0.03em;
	margin-top: 2em;
	margin-bottom: 0.75em;
}
.page-template-lelam-internal-page .content-internal-page > *:first-child {
	margin-top: 0;
}
.page-template-lelam-internal-page .content-internal-page p,
.page-template-lelam-internal-page .content-internal-page li {
	line-height: 1.9;
	letter-spacing: 0.01em;
}
.page-template-lelam-internal-page .content-internal-page p,
.page-template-lelam-internal-page .content-internal-page ul,
.page-template-lelam-internal-page .content-internal-page ol {
	margin-bottom: 1.3em;
}

/* Internal / policy pages — match the reference policy-hub look (LinhDoan
   layout the client shared): BOLD UPPERCASE headings instead of the theme's
   serif/small-caps, and a bold uppercase left-nav column. The 2-column structure
   itself is already provided by the lelam-internal-page template + the columns
   rule above.
   TKT-003 row 1: these are headings, so they now take the URW Classico headline
   face (they were pinned to Inter before the font change). */
.page-template-lelam-internal-page .content-internal-page h1,
.page-template-lelam-internal-page .content-internal-page h2,
.page-template-lelam-internal-page .content-internal-page h3,
.page-template-lelam-internal-page .content-internal-page h4,
.page-template-lelam-internal-page .content-internal-page .wp-block-heading {
	font-family: var(--lelam-font-heading) !important;
	font-weight: 600 !important;
	font-variant: normal !important;
	font-style: normal !important;
	text-transform: uppercase !important;
}
/* Left-nav column: uppercase body face, matching the reference's policy list. */
.wp-block-columns:has(.content-internal-page) > .wp-block-column:first-child .wp-block-navigation-item__content {
	font-family: var(--lelam-font-body) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	line-height: 1.4;
}
.wp-block-columns:has(.content-internal-page) > .wp-block-column:first-child .wp-block-navigation {
	gap: 0.65rem 0 !important;
}
/* Page post-title → same clean sans style (was serif), kept a touch larger than
   the section headings so it still reads as the page title. */
.page-template-lelam-internal-page .wp-block-post-title {
	font-family: var(--lelam-font-heading) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	text-transform: uppercase !important;
	font-size: 20px !important;
	letter-spacing: 0.03em;
	margin-bottom: 1em;
}


/* ──────────────────────────────────────────────────────────────────────────
   CLIENT FEEDBACK 2026-07-15 — info-page cluster still felt "díu" (cramped),
   About had too much spacing (About spacers were trimmed in the DB separately).
   Goal here: make the info pages read crisp ("nét") — readable body + a clear
   question/answer hierarchy on the FAQ so pairs stop blurring together.
   ────────────────────────────────────────────────────────────────────────── */

/* Info-page body copy was pinned to 12px by "Item 1" (global `p !important`),
   which is too small for long-form policy / FAQ text and reads as a cramped
   grey wall. Nudge to 14px for readability while keeping the minimal look.
   (Revert to 12px here if the client prefers the smaller size.) */
.page-template-lelam-internal-page .content-internal-page p,
.page-template-lelam-internal-page .content-internal-page li {
	font-size: 14px !important;
	line-height: 1.85;
}

/* FAQ (page-id-256): every Q&A is a single <p><strong>Q?</strong><br>A.</p>.
   With the large line-height the Q↔A line gap rivalled the gap BETWEEN pairs,
   so questions and answers blurred into one dense block. Promote the question
   to its own block sitting tight above its answer, drop the now-redundant <br>,
   and open the space between pairs so each Q&A reads as a distinct unit. */
.page-id-256 .content-internal-page p strong {
	display: block;
	margin-bottom: 0.2em;
}
.page-id-256 .content-internal-page p strong + br {
	display: none;
}
.page-id-256 .content-internal-page p {
	margin-bottom: 1.9em;
}


/* ──────────────────────────────────────────────────────────────────────────
   REVISION 1 — NGHIỆM THU LẦN 1 (TKT-001 / TKT-002 / TKT-003)
   ────────────────────────────────────────────────────────────────────────── */

/* TKT-002 + TKT-003 row 3 — main menu.
   "Khoảng cách nên tách ra thêm một chút nữa" — the top-level items sat tight
   against each other. Open the gap so SHOP · ABOUT · BRANDS · GALLERY breathe,
   and keep the SHOP trigger (a <button>, not a nav link) on the same rhythm. */
@media screen and (min-width: 782px) {
	body .wp-block-lelam-header.lelam-header .lelam-header__nav .wp-block-navigation__container {
		gap: 2.25rem !important;
	}
	body .wp-block-lelam-header.lelam-header .lelam-header__nav .wp-block-navigation-item {
		margin: 0 !important;
	}
}

/* BRANDS dropdown — core/navigation submenu, restyled to match the flat,
   borderless language of the rest of the header (the default submenu ships a
   1px box + rounded corners). */
/* Padding is set on the container only, and the items carry none, so the gap is
   identical on all four sides. The first pass padded the items instead, which
   left the labels hugging the left edge with dead space to the right and a
   heavier gap at the bottom than the top. `min-width` is dropped so the panel
   hugs its longest label rather than being padded out to an arbitrary width. */
.lelam-nav-brands .wp-block-navigation__submenu-container {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
	background-color: #fff;
	padding: 1.15rem 1.5rem !important;
	/* Core ships `min-width: 200px` on this container with `box-sizing:
	   content-box`, so the panel was 200px of content + 48px padding = 248px
	   wide while the longest label ("LE LAM ETERNITY") is only ~128px — hence
	   the dead space on the right. Force it to hug the content instead. */
	min-width: 0 !important;
	width: max-content !important;
	box-sizing: border-box !important;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.lelam-nav-brands .wp-block-navigation__submenu-container .wp-block-navigation-item {
	margin: 0 !important;
}
.lelam-nav-brands .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	line-height: 1.2;
	opacity: 0.75;
	transition: opacity 0.18s ease;
}
.lelam-nav-brands .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	opacity: 1;
}
/* Bridge the gap between the BRANDS trigger and its panel so the pointer can
   travel down without the menu closing. */
.lelam-nav-brands .wp-block-navigation__submenu-container::before {
	content: '';
	position: absolute;
	top: -0.7rem;
	left: 0;
	right: 0;
	height: 0.7rem;
	background: transparent;
}

/* TKT-003 row 3 — the SHOP panel's category list. Give each link a little more
   vertical rhythm now that the column is wider, and keep the labels from
   wrapping mid-phrase ("Knitwear & Sweatshirts"). */
@media screen and (min-width: 782px) {
	.lelam-mega-tab__content .lelam-mega-tab__link {
		white-space: nowrap;
	}
}


/* ── TKT-003 row 7 — SHOP: interleaved product rows ─────────────────────────
   Client: "Dạng đan xen layout hiển thị như ref … zara.com … 1 ảnh 1 hàng /
   2-3-4 ảnh 1 hàng."

   The loop runs on a 12-column grid and each product spans a width decided by
   its position in a repeating 10-item cycle: 1 + 2 + 3 + 4 = 10, which is
   exactly the query's perPage, so every page starts the rhythm cleanly.

   Row 1  →  1 product   (span 12)
   Row 2  →  2 products  (span 6)
   Row 3  →  3 products  (span 4)
   Row 4  →  4 products  (span 3)

   The crop opens up as the cell gets wider so the full-width hero doesn't
   become a very tall 3:4 portrait. */
.lelam-shop-loop {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr) !important;
	column-gap: clamp(8px, 1.2vw, 20px);
	row-gap: clamp(28px, 4vw, 64px);
	align-items: start;
}

@media (min-width: 782px) {
	/* 1 per row */
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 1) {
		grid-column: span 12;
	}
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 1) .wp-block-post-featured-image img {
		aspect-ratio: 16 / 7 !important;
	}

	/* 2 per row */
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 2),
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 3) {
		grid-column: span 6;
	}
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 2) .wp-block-post-featured-image img,
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 3) .wp-block-post-featured-image img {
		aspect-ratio: 4 / 5 !important;
	}

	/* 3 per row */
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 4),
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 5),
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 6) {
		grid-column: span 4;
	}

	/* 4 per row */
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 7),
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 8),
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 9),
	.lelam-shop-loop > .wp-block-post:nth-child(10n) {
		grid-column: span 3;
	}
}

/* Tablet: collapse to a steady 2-up, keeping the wide hero full width. */
@media (min-width: 600px) and (max-width: 781px) {
	.lelam-shop-loop > .wp-block-post {
		grid-column: span 6;
	}
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 1) {
		grid-column: span 12;
	}
	.lelam-shop-loop > .wp-block-post:nth-child(10n + 1) .wp-block-post-featured-image img {
		aspect-ratio: 3 / 2 !important;
	}
}

/* Mobile: single column, uniform portrait crop. */
@media (max-width: 599px) {
	.lelam-shop-loop > .wp-block-post {
		grid-column: span 12;
	}
}

/* The product image should fill whatever cell it lands in. */
.lelam-shop-loop .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 0;
}

/* TKT-003 row 7 — price display is switched off for launch
   (Settings → LELAM Price Display). The WooCommerce filters already blank the
   markup; this catches any block that formats its own amount. */
body.lelam-prices-off .price,
body.lelam-prices-off .woocommerce-Price-amount,
body.lelam-prices-off .wp-block-woocommerce-product-price,
body.lelam-prices-off .wc-block-components-product-price {
	display: none !important;
}


/* ── TKT-003 row 5 — LE LAM ETERNITY header ─────────────────────────────────
   Client: "Nhưng vẫn có dòng LE LAM ETERNITY ở đầu trang + thêm đoạn giới
   thiệu." The page template already prints the post title, so that is promoted
   into the page's display heading rather than adding a second one. */
.page-id-290 .wp-block-post-title {
	text-align: center;
	font-size: 26px !important;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-bottom: 0.9rem;
}

.lelam-eternity__lede {
	max-width: 620px;
	margin-inline: auto;
	text-align: center;
	line-height: 1.95;
	opacity: 0.8;
	margin-bottom: clamp(2rem, 5vw, 3.5rem) !important;
}


/* ── TKT-003 row 4 — ABOUT page editorial timeline ──────────────────────────
   Client: "Làm theo layout em khoanh trong ảnh, bao gồm cả các line như vậy."
   The reference is an editorial timeline: a hairline spine running down the
   page with alternating image / text entries hanging off it. */

.lelam-about__statement {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

/* The closing line — client: "Câu cuối Rooted in Vietnam.... Nên tách riêng ra".
   Lifted out of the body copy into its own spaced, ruled statement. */
.lelam-about__coda {
	max-width: 640px;
	margin: 0 auto;
	padding: 2.6rem 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.14);
	text-align: center;
	font-style: italic;
	letter-spacing: 0.02em;
}

.lelam-about-timeline {
	position: relative;
	max-width: 1100px;
	margin-inline: auto;
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

/* The spine. Sits behind the entries, stops short at both ends so it reads as
   a drawn line rather than a border. */
@media (min-width: 900px) {
	.lelam-about-timeline::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
		background: rgba(0, 0, 0, 0.16);
		transform: translateX(-50%);
		pointer-events: none;
	}
}

.lelam-tl__row {
	position: relative;
	align-items: center !important;
	gap: clamp(2rem, 5vw, 4.5rem) !important;
	margin-bottom: clamp(3rem, 7vw, 6rem);
}
.lelam-tl__row:last-child {
	margin-bottom: 0;
}

/* Alternate which side the image falls on, so the eye zig-zags down the spine. */
@media (min-width: 900px) {
	.lelam-tl__row:nth-child(even) {
		flex-direction: row-reverse;
	}
	/* Node marker on the spine, level with each entry. */
	.lelam-tl__row::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 7px;
		height: 7px;
		margin: -3.5px 0 0 -3.5px;
		border-radius: 50%;
		background: #111;
		z-index: 1;
	}
}

/* Cap the media so a 50% column doesn't produce a ~700px-tall row — the
   reference keeps each entry compact enough to read as one unit. */
.lelam-tl__media {
	aspect-ratio: 4 / 5;
	border-radius: 0;
	width: 100%;
	max-width: 400px;
}
@media (min-width: 900px) {
	.lelam-tl__row:nth-child(odd) .lelam-tl__media {
		margin-left: auto;
		margin-right: 0;
	}
	.lelam-tl__row:nth-child(even) .lelam-tl__media {
		margin-right: auto;
		margin-left: 0;
	}
}
@media (max-width: 899px) {
	.lelam-tl__media {
		margin-inline: auto;
	}
}

.lelam-tl__eyebrow {
	font-size: 10px !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.5;
	margin: 0 0 0.9rem !important;
}

.lelam-tl__title {
	font-size: 15px !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 0.9rem !important;
}

.lelam-tl__body {
	max-width: 38ch;
	line-height: 1.95;
}

/* On the reversed rows the text should still hug the spine, so flip its
   alignment to the right. */
@media (min-width: 900px) {
	.lelam-tl__row:nth-child(odd) .lelam-tl__text {
		text-align: left;
	}
	.lelam-tl__row:nth-child(even) .lelam-tl__text {
		text-align: right;
	}
	.lelam-tl__row:nth-child(even) .lelam-tl__body {
		margin-left: auto;
	}
}

@media (max-width: 899px) {
	.lelam-tl__row {
		margin-bottom: 3rem;
	}
	.lelam-tl__text {
		text-align: center;
	}
	.lelam-tl__body {
		margin-inline: auto;
	}
}