/* Nakama luxury refinement — cards, tiles, badges (homepage only).
   Pairs with luxury-foundation.css. Assumes the Best Sellers shortcode has
   been switched to type="row" style="normal": these rules style text that
   sits BELOW the image. The overlay fallbacks at the end keep the block
   legible even if the shortcode edit is ever reverted. */

/* ---- product card ----------------------------------------------------- */
/* Product photography on this store has wildly mixed backgrounds (white
   studio, pink plush, dark lifestyle). A single bone tile behind every
   image is what makes a mixed catalogue look like one collection. */
.home .product-small .box-image {
	background-color: var(--nk-bone);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	/* Hairline keeps the tile legible when the section behind it is also a
	   pale neutral — without it the bone tile dissolves into the section. */
	box-shadow: inset 0 0 0 1px rgba(20, 23, 42, 0.07);
}

.home .product-small .box-image img {
	transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.home .product-small:hover .box-image img {
	transform: scale(1.045);
}

.home .product-small .box-text {
	padding-top: 18px;
	padding-bottom: 22px;
	text-align: center;
}

/* Category eyebrow: small, tracked, quiet. */
.home .product-small .box-text .category {
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--nk-ink-soft);
	margin-bottom: 6px;
}

.home .product-small .box-text .name.product-title,
.home .product-small .box-text .product-title a {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--nk-ink);
	text-transform: none;
}

.home .product-small .price {
	font-size: 14px;
	letter-spacing: 0.04em;
	margin-top: 8px;
}

.home .product-small .price del {
	color: var(--nk-ink-soft);
	opacity: 1;
	margin-right: 8px;
	font-weight: 400;
}

.home .product-small .price ins {
	color: var(--nk-ink);
	font-weight: 600;
	text-decoration: none;
}

/* ---- sale badge ------------------------------------------------------- */
/* A red circle stamped on the photo is the single loudest "discount store"
   signal on the page. Replaced with a flat tracked caps tag. */
.home .badge-container .callout.badge.badge-circle,
.home .badge-container .badge {
	height: auto;
	width: auto;
	margin: 12px 0 0 12px;
}

.home .badge-container .badge .badge-inner {
	background-color: #fff;
	color: var(--nk-ink);
	border: 1px solid var(--nk-line);
	border-radius: 0;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1;
	padding: 7px 10px;
	height: auto;
	width: auto;
	min-width: 0;
}

/* ---- quick view ------------------------------------------------------- */
.home .product-small a.quick-view {
	background: rgba(255, 255, 255, 0.94);
	color: var(--nk-ink);
	border-radius: 0;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	min-height: 44px;
	line-height: 44px;
}

/* ---- category tiles --------------------------------------------------- */
/* Measured contrast before: Cosplay title 1.00:1 (white on white fabric),
   Accessories 1.22:1 — the labels were invisible, not merely low contrast.
   A bottom-up scrim fixes it without flattening the whole photograph.
   Scoped to .col.large-3: the hero and the Shop The Look lookbook are both
   .large-12 .banner and must NOT get a scrim (the hero already carries its
   own .overlay, and the lookbook is meant to read as a clean photograph). */
/* Target .banner-bg, not .bg: .bg is nested inside it and an ::after there
   resolves to an auto-sized (empty) box — measured as no scrim at all.
   .banner-bg is followed in DOM order by .banner-layers, which carries the
   text, so the scrim lands above the photograph and below the label.
   Stops are tuned to the label band: it sits 29-41% up from the tile floor
   (measured 59-71% from the top of a 280px tile), which needs ~0.7 alpha to
   clear 4.5:1 for white type over pure-white cosplay fabric. */
.home .col.large-3 .banner .banner-bg::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background: linear-gradient(
		to top,
		rgba(12, 14, 24, 0.88) 0%,
		rgba(12, 14, 24, 0.78) 26%,
		rgba(12, 14, 24, 0.6) 47%,
		rgba(12, 14, 24, 0.18) 68%,
		rgba(12, 14, 24, 0) 84%
	);
}

.home .col.large-3 .banner .text-box-content h3 {
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
	margin-bottom: 12px;
}

/* Ghost CTA reads as an invitation; the solid red pill read as an ad unit.
   Keeps a faint dark fill so the outline survives on pale photography. */
.home .col.large-3 .banner a.nakama-tile-cta,
.home .nakama-tile-cta {
	background-color: rgba(12, 14, 24, 0.34);
	border: 1px solid rgba(255, 255, 255, 0.9);
	border-radius: 0;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2em;
	padding: 13px 20px;
	transition: background-color 0.4s ease, color 0.4s ease;
}

.home .col.large-3 .banner a.nakama-tile-cta:hover,
.home .nakama-tile-cta:hover {
	background-color: #fff;
	color: var(--nk-ink);
}

/* Reviews are styled in luxury-sections.css — the rule that used to sit here
   was dead weight: it matched the cards but lost to the plugin's inline
   style attributes, so it changed nothing. */

/* ---- mobile tap targets ----------------------------------------------- */
/* Measured before: product title link 17.7px tall, quick view 19.1px,
   tile CTA 29.6px — all under the 44px minimum. */
@media (max-width: 549px) {
	.home .product-small .box-text .name.product-title a {
		display: block;
		padding: 8px 0;
		min-height: 44px;
	}

	.home .col .banner .text-box-content a.button,
	.home .nakama-tile-cta {
		min-height: 46px;
		line-height: 44px;
	}

	.home .product-small .box-text {
		padding-bottom: 16px;
	}
}

/* ---- overlay fallback ------------------------------------------------- */
/* Only reached if a Best Sellers block is left on type="grid": Flatsome
   core forces style=overlay there, so the text lands on the photograph
   with a 1px shadow and measured 1.13-1.38:1 contrast. Scrim restores it. */
.home .row-grid .product-small.box-overlay .box-text {
	background: linear-gradient(
		to top,
		rgba(12, 14, 24, 0.88) 0%,
		rgba(12, 14, 24, 0.55) 60%,
		rgba(12, 14, 24, 0) 100%
	);
	padding-top: 42px;
}

.home .row-grid .product-small.box-overlay .box-text .name.product-title,
.home .row-grid .product-small.box-overlay .box-text .price ins {
	color: #fff;
}

.home .row-grid .product-small.box-overlay .box-text .category,
.home .row-grid .product-small.box-overlay .box-text .price del {
	color: rgba(255, 255, 255, 0.72);
}