/* Ruby Lane home page (www.tcl).  The seasonal decoration images behind
   the feature blocks are set inline by the page, per theme */

/* ── Feature blocks: the big promo and four small ones ────────────────── */
.grid-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-areas:
		"big big item1 item2"
		"big big item3 item4";
}

/* large-block is image, background color masks that image */
.large-block { grid-area: big; color: var(--ada-heading, var(--seasonal-border-text)) !important; border-radius: 0; }
.small-block1 { grid-area: item1; color: var(--ada-heading, var(--seasonal-color-1-text)) !important; }
.small-block2 { grid-area: item2; color: var(--seasonal-color-2-text) !important; }
.small-block3 { grid-area: item3; color: var(--seasonal-color-3-text) !important; }
.small-block4 { grid-area: item4; color: var(--seasonal-color-4-text) !important; }

.product-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px 0;
	border-radius: 0;
	text-align: center;
	position: relative;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	> div {
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
}
.product-box:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	text-decoration: none;
}
.product-box:focus {
	outline: 2px solid #CD7F32;
	outline-offset: 2px;
}
.product-box:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.product-box .pb-title {
	margin: 0 0 auto 0;
	font-weight: bold;
	color: var(--ada-heading, inherit);
	font-size: clamp(1rem, 3cqw, 2.5rem);
	font-family: var(--font-serif);
	pointer-events: none; /* prevents text selection issues */
	line-height: 1.15;
	text-wrap: balance;
}
/* The big block's title can be a Red Tag event's: let it wrap, smaller */
.large-block .pb-title { padding: 0 12px; }
.product-box .pb-title--long {
	font-size: clamp(1.125rem, 2.2cqw, 2rem);
}
.product-box .image-container {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none; /* prevents image drag issues */
	object-fit: contain;
	object-position: bottom;
}
.product-box img {
	object-fit: contain;
	object-position: bottom;
	pointer-events: none;
}

.large-feature {
	position: relative;
}
.large-feature:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 0;
	pointer-events: none;
}
[class^="small-block"] {
	overflow: hidden;
}
[class^="small-block"]:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: .75;
}
[class^="small-block"] * {
	min-width: 0;
}
[class^="small-block"] img {
	max-width: 100%;
	height: auto;
	display: block;
}
.small-block2:before, .small-block4:before {
	transform: scaleX(-1);
}
.theme-christmas .small-block1:before, .theme-christmas .small-block4:before {
	opacity: 1;
	background-size: cover;
}
.theme-halloween .small-block3:before {
	transform: scaleY(-1);
}
.theme-halloween [class^="small-block"]:before {
	opacity: 1;
}

@media (max-width: 768px) {
	.product-box .pb-title {
		font-size: 1.5rem;
	}
	.large-block .product-box .pb-title {
		font-size: 2.5rem;
	}
	.large-block .product-box .pb-title--long {
		font-size: 1.625rem;
	}
	.grid-container {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas:
			"big big"
			"item1 item2"
			"item3 item4";
	}
}

/* ── Shop By Category ──────────────────────────────────────────────────── */
/* The labels name the era and category ("Vintage Brooches & Pins"), so let
   them wrap rather than cut them off (rl_legacy.css has them nowrap, and
   loads after this).  Every caption is two lines tall, the label centred in
   it, so one that wraps doesn't push its slide's second category down below
   the others */
.lanetop-small .sbc-caption {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(2.4em + 0.8rem);
	white-space: normal;
	text-wrap: balance;
	line-height: 1.2;
}

/* ── Item pictures: a soft shadow under every picture on the page ──────── */
.page_content img {
	filter: drop-shadow(0 5px 7px rgba(0,0,0,.26));
}
/* But not the small pictures in Your account (themed account_activity) */
.page_content .rl-activity__pic img { filter: none; }

/* ── Lanes on phones: a row of chips to swipe through ──────────────────── */
.rl-home-lanes ul {
	display: flex;
	gap: 8px;
	margin: 8px 0 12px;
	padding: 2px 16px 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.rl-home-lanes ul::-webkit-scrollbar { display: none; }
.rl-home-lanes li { flex: none; scroll-snap-align: start; }
.rl-home-lanes .rl-home-lanes__chip {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--rl-border-hover, #ccc);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font-size: 0.9375rem;
	white-space: nowrap;
	text-decoration: none;
}
.rl-home-lanes .rl-home-lanes__chip--sale { color: var(--rl-primary); border-color: currentColor; }

/* ── Welcome back: says it's the home page, above Your account ─────────── */
.rl-home-welcome .rl-heading {
	margin: 0.5rem 0 0.75rem;
	font-size: clamp(30px, 9vw, 44px);
	line-height: 1.15;
}

/* ── Your account, Jump back in, Your saved items ──────────────────────── */
/* Stacked on phones; side by side from tablets, where with all three Your
   account takes the first row until there's room for three across */
.rl-home-personal {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-bottom: 1rem;
}
.rl-home-personal > .rl-box { margin: 0; }
@media (min-width: 767px) {
	.rl-home-personal--2, .rl-home-personal--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rl-home-personal--3 > .rl-home-account { grid-column: 1 / -1; }
}
@media (min-width: 991px) {
	.rl-home-personal--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rl-home-personal--3 > .rl-home-account { grid-column: auto; }
}

/* Soft tints of the season's colours (a quarter colour, the rest white), so
   the pictures and text stand out; the season shows in the tint and the
   border.  Your account is colour 3, or 4 where 3 is nearly white (and
   candlelight parchment for Halloween, whose 4 is charcoal); Jump back in is
   colour 1, Your saved items colour 2.  Hex, not color-mix(): ada_colors.mjs
   only reads rgb() backgrounds when it picks the text colour */
.rl-home-personal {
	--home-soft-account: #F4E8E8;
	--home-soft-1: #F9F5F0;
	--home-soft-2: #E6EBE1;
}
.theme-spring .rl-home-personal { --home-soft-account: #F4F0F5; --home-soft-1: #FDF4F4; --home-soft-2: #E8EDE7; }
.theme-summer .rl-home-personal { --home-soft-account: #F9F0E9; --home-soft-1: #FCF9F3; --home-soft-2: #D2E3E8; }
.theme-winter .rl-home-personal { --home-soft-account: #F1F4F6; --home-soft-1: #F9FCFC; --home-soft-2: #EDF4F7; }
.theme-easter .rl-home-personal { --home-soft-account: #F4F9F4; --home-soft-1: #F1F8F9; --home-soft-2: #F5F1F7; }
.theme-valentines .rl-home-personal { --home-soft-account: #E6D4D8; --home-soft-1: #F1DBE2; --home-soft-2: #DAC6CB; }
.theme-christmas .rl-home-personal { --home-soft-account: #FCF9F4; --home-soft-1: #E6C9D1; --home-soft-2: #CBD4CC; }
.theme-halloween .rl-home-personal { --home-soft-account: #FAF6EF; --home-soft-1: #F4DECE; --home-soft-2: #DAD0DD; }

/* Every tint is light: dark text until ada_colors.mjs sets --ada-text */
.rl-home-personal > .rl-home-account,
.rl-home-personal > .rl-box--seasonal-1,
.rl-home-personal > .rl-box--seasonal-2 {
	border-color: var(--seasonal-border);
	color: var(--ada-text, #1A1A1A);
}
.rl-home-personal > .rl-home-account { background: var(--home-soft-account); }
.rl-home-personal > .rl-box--seasonal-1 { background: var(--home-soft-1); }
.rl-home-personal > .rl-box--seasonal-2 { background: var(--home-soft-2); }
/* The tiles carry the box's bg-seasonal-N, the full colour: pictures on
   white cards instead */
.rl-home-personal .rl-home-tile { background-color: #fff; }

/* Not img-responsive: rl_legacy.css loads after this, and its display: block
   would leave the price at the left */
.rl-home-tile {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding-bottom: 8px;
	border-radius: 15px;
	color: inherit;
	text-decoration: none;
}
/* The % off badge goes under the price when both don't fit, never split
   across lines */
.rl-home-tile__price {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2px 6px;
	font-weight: 700;
}
.rl-home-tile__off {
	white-space: nowrap;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--rl-primary, #b22);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}
.rl-home-nudge p { margin: 0.5em 0 0; }
/* On phones the blocks stack: 2 pictures each, so the rest of the page
   isn't pushed a long way down */
@media (max-width: 480px) {
	.rl-home-personal .rl-home-tile:nth-child(n+3) { display: none; }
	/* A box's title on one line beside See All, also when Safari's text zoom
	   or Display Zoom makes the page narrower: 30px from about 400px wide */
	.rl-home-personal .rl-heading { font-size: clamp(22px, 7.5vw, 30px); }
}
/* See All (or the links in its place) beside a box's title: a quieter link,
   so the title leads */
.rl-home-personal > .rl-box > .rl-flex:first-child a {
	font-size: 0.875rem;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Because You Viewed, Just Sold: a row of four ──────────────────────── */
.rl-home-row { margin: 1em 0 2em; }
.rl-home-row .search_results { margin-bottom: 1em; }
.rl-home-row__source {
	max-width: 40em;
	margin: -0.5em auto 1em;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.rl-home-row__more { margin-bottom: 1em; }

/* ── Recently viewed: whole rows only ──────────────────────────────────── */
/* 12 items fill every row at 2, 3 and 4 across.  With fewer, hide the last
   row when it isn't full, unless it's the only row: the first item of an
   incomplete last row, and everything after it */
@media (max-width: 766.98px) {
	.rl-home-recent > :nth-child(2n+3):nth-last-child(1) { display: none; }
}
@media (min-width: 767px) and (max-width: 990.98px) {
	.rl-home-recent > :nth-child(3n+4):nth-last-child(-n+2),
	.rl-home-recent > :nth-child(3n+4):nth-last-child(-n+2) ~ * { display: none; }
}
@media (min-width: 991px) {
	.rl-home-recent > :nth-child(4n+5):nth-last-child(-n+3),
	.rl-home-recent > :nth-child(4n+5):nth-last-child(-n+3) ~ * { display: none; }
}