/**
 * Homepage rails and brand grid.
 *
 * Mobile-first, matching the project's standing priority order. The rail is a
 * native scroll container with snap points rather than a JS carousel: it
 * costs no JavaScript, gets momentum scrolling and accessibility for free on
 * touch devices, and cannot desynchronise from the DOM.
 */

/* ---------------------------------------------------------------- rails */

.home-rail {
	padding: 34px 0;
}

.home-rail__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}

.home-rail__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.home-rail__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.home-rail__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	text-decoration: none;
	color: inherit;
	opacity: .75;
	white-space: nowrap;
}

.home-rail__all:hover { opacity: 1; }
.home-rail__all svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Arrow buttons are a desktop affordance; on touch the rail is swiped. */
.home-rail__navs { display: none; gap: 7px; }

.home-rail__vp {
	/* Bleed to the viewport edge on mobile so the last card is visibly
	   clipped — the strongest signal that a row scrolls. */
	margin: 0 -16px;
	padding: 0 16px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.home-rail__vp::-webkit-scrollbar { display: none; }

.home-rail__track {
	display: flex;
	gap: 14px;
	padding-bottom: 4px;
}

.home-rail__item {
	flex: 0 0 auto;
	width: 62vw;
	max-width: 250px;
	scroll-snap-align: start;
}

/* --------------------------------------------------------------- brands */

.home-brands { padding: 34px 0; }

.home-brands__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
}

.home-brands__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 16px;
}

.home-brands__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	text-decoration: none;
	color: inherit;
	opacity: .75;
	white-space: nowrap;
}

.home-brands__all:hover { opacity: 1; }
.home-brands__all svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.home-brands__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.home-brands__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Fixed height so a logo and a wordmark tile are the same size and the
	   grid never reflows as images decode. */
	min-height: 96px;
	padding: 16px 12px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color .16s ease, transform .16s ease;
}

.home-brands__tile:hover {
	border-color: rgba(201, 162, 39, .55);
	transform: translateY(-2px);
}

.home-brands__tile img {
	max-width: 110px;
	max-height: 34px;
    width: auto;
	height: auto;
	object-fit: contain;
}

.home-brands__wordmark {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: center;
}

.home-brands__count {
	font-size: 11.5px;
	opacity: .55;
	font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- rewards */

.home-rewards {
	padding: 34px 0;
	background: linear-gradient(180deg, rgba(201, 162, 39, .09), rgba(201, 162, 39, .03));
	border-block: 1px solid rgba(201, 162, 39, .2);
}

.home-rewards__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 16px;
	display: grid;
	gap: 24px;
}

.home-rewards__badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: 99px;
	background: #14100c;
	color: #e3c765;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.home-rewards__title {
	margin: 0 0 8px;
	font-size: clamp(22px, 4vw, 30px);
	line-height: 1.15;
	text-wrap: balance;
}

.home-rewards__lede {
	margin: 0 0 14px;
	max-width: 56ch;
	font-size: 15px;
	opacity: .8;
}

.home-rewards__example {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	padding: 10px 14px;
	border: 1px solid rgba(201, 162, 39, .34);
	border-radius: 10px;
	background: rgba(255, 255, 255, .55);
	font-size: 14px;
}

.home-rewards__example svg {
	width: 17px;
	height: 17px;
	flex: none;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
	color: #8a6d1f;
}

.home-rewards__cta {
	display: inline-flex;
	padding: 13px 24px;
	border-radius: 9px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
}

.home-rewards__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.home-rewards__steps li {
	display: grid;
	grid-template-columns: 38px 1fr;
	grid-template-rows: auto auto;
	column-gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(0, 0, 0, .07);
}

.home-rewards__ic {
	grid-row: 1 / 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(201, 162, 39, .17);
	color: #8a6d1f;
}

.home-rewards__ic svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.home-rewards__steps strong { font-size: 14.5px; }
.home-rewards__steps span:last-child { font-size: 12.5px; opacity: .7; }

/* --------------------------------------------------------------- larger */

@media (min-width: 600px) {
	.home-brands__grid { grid-template-columns: repeat(3, 1fr); }
	.home-rail__item { width: 40vw; }
}

@media (min-width: 900px) {
	.home-rail { padding: 46px 0; }
	.home-brands { padding: 46px 0; }
	.home-rewards { padding: 46px 0; }
	.home-rail__navs { display: flex; }
	.home-brands__grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
	.home-rail__item { width: 240px; }
	.home-rail__vp { margin: 0; padding: 0; }

	.home-rewards__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
		gap: 40px;
		align-items: center;
	}
}


@media (prefers-reduced-motion: reduce) {
	.home-brands__tile { transition: none; }
	.home-rail__vp { scroll-behavior: auto; }
}

/* ===========================================================================
 * Homepage rail cards — approved `le__card` presentation.
 *
 * The card itself stays `content-product.php`: it owns the real add-to-cart,
 * wishlist, price and stock behaviour, and the reference's own card is a
 * mock-up whose cart button just says "Added" for 1.5 seconds. So the markup is
 * left alone and only its presentation is brought onto the approved design.
 *
 * Every selector below is scoped to a homepage rail track. Collection grids,
 * the PDP and Quick View render the same component and must not be touched.
 * ======================================================================== */

.le__track {
	list-style: none;
	margin: 0;
	padding: 6px 2px;
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.le__track::-webkit-scrollbar {
	display: none;
}

.le__item {
	flex: 0 0 clamp(230px, 24vw, 272px);
	scroll-snap-align: start;
	display: flex;
}

/* The whole card carries the frame, not the image. */
.le__track .product-card {
	width: 100%;
	/* White behind the photograph, warm tint under the words — the same way
	   round as every other card surface. The tint is painted by
	   .product-card__body, so this only has to supply the white frame. */
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}

.le__track .product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 50px -22px rgba(28, 26, 23, .3);
	border-color: var(--gold-soft);
}

/*
 * The media panel loses its own frame — it is now inside one — and keeps the
 * pure white ground every card surface uses behind product photography.
 */
.le__track .product-card__media {
	border: 0;
	border-radius: 0;
	background: #fff;
}

.le__track .product-card:hover .product-card__media {
	box-shadow: none;
	border-color: transparent;
}

.le__track .product-card__media img {
	object-fit: contain;
	object-position: center;
}

/* Badge: ink ground with the gold wordmark tone, not the sale red. */
.le__track .product-card__badge {
	top: 12px;
	left: 12px;
	background: var(--ink);
	color: var(--gold-soft);
	font-size: .58rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 3px;
	padding: 4px 9px;
}

.le__track .product-card__wish {
	width: 40px;
	height: 40px;
	top: 11px;
	right: 11px;
	box-shadow: 0 6px 16px -8px rgba(28, 26, 23, .28);
}

.le__track .product-card__wish svg {
	width: 19px;
	height: 19px;
}

/* Body sits inside the card frame, so it needs its own gutters. */
.le__track .product-card__body {
	padding: 16px 16px 18px;
	flex: 1;
}

/*
 * Equal heights across the rail: the card fills its item, and the body grows,
 * so the add-to-cart control lines up across cards whose names wrap differently.
 */
.le__track .product-card,
.le__track .product-card__body {
	display: flex;
	flex-direction: column;
}

.le__track .product-card__price {
	margin-top: auto;
	padding-top: 6px;
}

@media (max-width: 640px) {
	/* One card and a peek of the next, at every phone width the design covers. */
	.le__item {
		flex-basis: 74vw;
	}
}

/* ---------------------------------------------------------------------------
 * Reviews: the empty state.
 *
 * The section keeps its position and its black ground whether or not a review
 * source is connected; only the contents change.
 * ------------------------------------------------------------------------ */

.reviews__pending {
	margin: 18px auto 0;
	max-width: 62ch;
	text-align: center;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(250, 247, 241, .68);
}

.reviews--empty .reviews__head {
	justify-content: center;
	text-align: center;
}

.reviews--empty .reviews__titles {
	text-align: center;
}

/*
 * Add to Cart is always visible in a homepage rail.
 *
 * The card hides it until hover elsewhere on the site, which works on a
 * collection grid the shopper is scanning. The approved homepage card shows it
 * permanently — and a hover-only control is unreachable on touch anyway, which
 * is most of this traffic. Revealing it here also restores the card height the
 * design expects, since the button is part of the body rather than an overlay.
 */
.le__track .product-card__add {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/*
 * The in-body Add to Cart.
 *
 * `product-card__add2` is the card's real add-to-cart control — same
 * `data-stonex-add` wiring as everywhere else — but it is hidden outside the
 * collection list view. The approved homepage card shows it permanently under
 * the price, so it is switched on here and nowhere else.
 */
.le__track .product-card__add2 {
	display: inline-flex;
	align-self: stretch;
	justify-content: center;
	height: 40px;
	margin-top: 0;
}

/* The hover overlay would then duplicate the same action on the same card. */
.le__track .product-card__add {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Homepage rail cards: body typography.
 *
 * The approved design sets a larger price and title inside the rail card than
 * the catalogue card carries — the rail is a showcase, the collection grid is a
 * dense list. Matching it here keeps both surfaces correct without forking the
 * component: `content-product.php` still renders every card on the site, and
 * these values apply only inside `.le__track`.
 *
 * Sizes are the reference's own scale (0.9rem / 1.4rem / 0.82rem), and the
 * vertical rhythm comes from margins rather than a flex `gap` so the spacing
 * between brand, name and price is the design's, not an even distribution.
 * ------------------------------------------------------------------------- */

.le__track .product-card__body {
	/* Margins carry the rhythm here, so the inherited flex gap is cleared. */
	row-gap: 0;
}

.le__track .product-card__brand {
	margin: 0 0 6px;
}

.le__track .product-card__title {
	font-size: 0.9rem;
	line-height: 1.35;
	margin: 0 0 12px;
}

.le__track .product-card__price {
	/* The catalogue card spaces the price with padding; the rail uses margins. */
	padding-top: 0;
	margin-bottom: 14px;
}

.le__track .product-card__now {
	font-size: 1.4rem;
	line-height: 1.6;
}

.le__track .product-card__was {
	font-size: 0.82rem;
	line-height: 1.6;
}

/*
 * The rail CTA is the design's filled gold button, not the catalogue card's
 * outline. Hover is already ink-on-ivory in the base component, which is what
 * the reference does too, so only the resting state is restated here.
 */
.le__track .product-card__add2 {
	font-size: 0.7rem;
	gap: 9px;
	letter-spacing: 0.13em;
	background: var(--gold-cta);
	color: var(--ink);
	border: 0;
	border-radius: 6px;
}

/* Restated at the same weight as the rule above, which would otherwise win. */
.le__track .product-card__add2:hover,
.le__track .product-card__add2:focus-visible {
	background: var(--ink);
	color: var(--ivory);
}


/* ---------------------------------------------------------------------
   Touch floor for the rail's own controls.

   The rail restates the card's wishlist button and its add-to-cart at 40px,
   which is under the 44px minimum a finger needs. The shared rule in
   stonex.css cannot reach them: this file loads after it and its selectors
   are more specific, so the sizes have to be raised where they are set.

   Same media scope as the shared block, so a desktop above 900px with a mouse
   keeps the 40px design exactly as approved.
   --------------------------------------------------------------------- */

@media (max-width: 900px), (hover: none) {
	.le__track .product-card__wish {
		width: 44px;
		height: 44px;
	}

	.le__track .product-card__add2 {
		height: 44px;
	}
}


/* ---------------------------------------------------------------------
   One card, and a glimpse of the next.

   Asked for: the Limited Edition rail should use the 21st Keys rail's
   structure. Measured at 390px, those two rails already shared every
   typographic value — body padding, title, brand, price, the CTA and the
   wishlist button were identical to the pixel. One thing differed:

     Limited Edition   146px per card, two in view
     21st Keys         260px per card, one in view and a peek of the next

   Limited Edition was two-up because of the rule this block replaces; the
   Keys rail never followed it, because `.keys2__viewport .le__item` in
   stonex.css is the more specific selector and wins on specificity no matter
   which file loads last. So the two rails are brought onto one number here,
   stated at both specificities so neither file has to be edited twice.

   76% of the track leaves roughly a fifth of the next card showing, which is
   the affordance that tells a thumb the row scrolls. The swipe cue underneath
   says the same thing in words.
   --------------------------------------------------------------------- */

@media (max-width: 640px) {
	.le__track {
		gap: 18px;
	}

	.le__item,
	.keys2__viewport .le__item {
		flex: 0 0 76%;
	}
}

/*
 * The compact circular Add to Cart that used to appear below 360px is gone
 * with the two-up layout that needed it.
 *
 * A flex item will not shrink past its min-content width, and on this card
 * that width is set by the "ADD TO CART" label — 141px. Two of those plus the
 * gap and the peek did not fit inside a 276px track, so the labelled button
 * had to be swapped for an icon. At one-up the card is 207px even on a 320px
 * screen, so the label fits and the word comes back.
 */

/* ---------------------------------------------------------------------
   Rail card, phone scale
   ---------------------------------------------------------------------
   The rail card is drawn for 272px on a desktop and gets 207–290px on a
   phone, so the desktop proportions very nearly hold. What does not hold is
   the vertical rhythm: the desktop card spaces brand, title and price with
   stacked margins that left 41px of dead air between the title and the price
   at this scale, and the type is a size larger than a phone needs.

   So the block below restates the rhythm and the type only — gutters, the
   title's two-line box, the price margins and the CTA's own padding. The
   media panel, the frame and the layout are the approved card's.

   These values were arrived at while the rail was two-up and 146px wide, and
   they are kept because that is the treatment shown on the 21st Keys rail,
   which is the one this design follows. The icon buttons keep their 44px
   TOUCH area and lose only visual size: the `::after` extension from the
   shared touch block does the work, which is what that technique is for.
   --------------------------------------------------------------------- */

@media (max-width: 640px) {

	/* 10px, not 16 — that is 12px of content width returned to the words. */
	.le__track .product-card__body {
		padding: 12px 10px 12px;
		gap: 4px;
	}

	/*
	 * 34px drawn, 44px tappable. Tucked closer to the corner as well, because
	 * at this scale 12px of inset is a visible share of the photograph.
	 */
	/*
	 * 44px drawn, and no extension.
	 *
	 * The transparent `::after` trick does not work on this card, and three
	 * rounds of adjusting it (-4px, -5px, -6px, then a z-index) only ever
	 * changed the number in the comment. Measured: the pseudo-element is laid
	 * out at the right size, the button sits above `.product-card__imglink` by
	 * z-index — and a hit test at the eight points around a 44px square still
	 * returns the image link for seven of them. The extension was decorative.
	 *
	 * So the button is simply the size it needs to be. At two-up on a 146px
	 * card that would have been 60% of the photograph, which is why the trick
	 * was reached for; the rail is one-up at 207-290px now, and 44px is the
	 * same share of it that the approved desktop card gives at 40px. There is
	 * no trade left to make.
	 */
	.le__track .product-card__wish,
	.le__track .product-card__qv {
		width: 44px;
		height: 44px;
		top: 8px;
	}

	.le__track .product-card__wish {
		right: 8px;
	}

	.le__track .product-card__qv {
		right: 58px;
	}

	/*
	 * 34px drawn, 44px tappable.
	 *
	 * This was 42px for a while: at two-up the card was 146px wide and carried
	 * two circles 6px apart, so a full 44px hit area on each made the two
	 * overlap and a tap aimed at one landed on the other. Both reasons are
	 * gone — Quick View is off on touch, and the card is 207px at its
	 * narrowest — so the extension is no longer squeezed.
	 *
	 * Six pixels, not five. Five makes the area exactly 44 and the audit aims
	 * at points 44px apart, which lands on the boundary where a rounded
	 * coordinate can fall either side — the heart was reported as a 34px
	 * target for six widths running while measuring 44. A finger is no more
	 * precise than that test is, so the area is 46 and the question does not
	 * arise. The button still draws at 34 and the extension is transparent.
	 */
	/*
	 * The extension is gone with the reason for it. What follows is the note
	 * that explains why it is not coming back.
	 *
	 * It has to be ON TOP, and it was not.
	 *
	 * `.product-card__imglink` is absolutely positioned across the whole media
	 * panel — it is what makes the photograph a link to the product — and it
	 * was painting over the transparent extension. The heart itself was
	 * clickable, because the button's own 34px box sits above; everything the
	 * extension added was landing on the image link instead. A hit test at the
	 * eight points around a 44px square returned 1/8, all of the misses being
	 * `product-card__imglink`.
	 *
	 * So the extension was never doing anything, at any of the sizes it has
	 * been through, and the audit that reported "34px" was right while the
	 * comment claiming 44 was wrong. Raising the z-index did not help either,
	 * which is what settled it: the control is drawn at its real size above.
	 */
	.le__track .product-card__wish,
	.le__track .product-card__qv {
		z-index: 4;
	}

	.le__track .product-card__wish svg,
	.le__track .product-card__qv svg {
		width: 18px;
		height: 18px;
	}

	/* Two lines, sized so a real product name gets close to filling them. */
	.le__track .product-card__title {
		font-size: 0.8rem;
		line-height: 1.3;
		margin: 0;
		min-height: 2.6em;
	}

	.le__track .product-card__brand {
		font-size: 0.58rem;
		letter-spacing: 0.12em;
	}

	/* The 41px gap was margin stacked on margin. The body's own `gap` is the
	   only spacing now, so the block reads as one column. */
	.le__track .product-card__price {
		margin: 2px 0 0;
		padding-top: 0;
		font-size: 0.95rem;
		gap: 6px;
	}

	.le__track .product-card__now {
		font-size: 0.95rem;
	}

	.le__track .product-card__was {
		font-size: 0.76rem;
	}

	/*
	 * One line. The label is the widest thing in the card and 22px of side
	 * padding is what pushed it onto two; the height stays at the 44px touch
	 * floor either way.
	 */
	.le__track .product-card__add2 {
		padding: 0 8px;
		font-size: 0.62rem;
		letter-spacing: 0.04em;
		gap: 6px;
		white-space: nowrap;
	}

	.le__track .product-card__add2 svg {
		width: 13px;
		height: 13px;
	}

	.le__track .product-card__badge {
		font-size: 0.54rem;
		padding: 3px 7px;
		top: 8px;
		left: 8px;
	}
}


/* ---------------------------------------------------------------------
   A lighter Add to Cart on the rail.

   44px of solid gold across a 146px card was the heaviest thing on it. The
   button is drawn at 38 and keeps a 44px touch area through a transparent
   extension, so the card lightens without the control getting harder to hit.

   Stated here because this file loads after stonex.css and its own touch block
   sets the 44px height a few rules above.
   --------------------------------------------------------------------- */

@media (max-width: 640px) {
	.le__track .product-card__add2 {
		height: 38px;
		position: relative;
	}

	/*
	 * 46px, not exactly 44.
	 *
	 * At 38 + 3 + 3 the touch area is 44 to the pixel, and the audit's
	 * hit test aims at points 21px from the centre — which lands on the
	 * boundary, where a rounded coordinate can fall either side. A finger is
	 * no more precise than that test is. Four pixels each way puts the whole
	 * of a 44px aim inside the target with room to spare, and costs nothing:
	 * the extension is transparent and the button still draws at 38.
	 */
	.le__track .product-card__add2::after {
		content: "";
		position: absolute;
		inset: -4px 0;
	}
}