.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.routine-index-page {
	--bg: #f5f1e9;
	--surface: #fffdf8;
	--ink: #29312b;
	--muted: #5f6961;
	--line: #d4cec1;
	--accent: #a53d62;
}

.routine-index-page ::selection {
	background: color-mix(in srgb, var(--accent) 22%, var(--surface));
	color: var(--ink);
}

/* The logo already links home, so on narrow phones the text link gives way to the brand name. */
@media (max-width: 479px) {
	.routine-index-page .routine-nav-actions .back-link { display: none; }
}

/* Hero */

.routine-index-hero {
	padding: clamp(56px, 9vw, 120px) 0 clamp(44px, 7vw, 88px);
}

.routine-index-hero__inner {
	display: grid;
	gap: 28px;
}

.routine-index-hero h1 {
	max-width: 14ch;
	min-width: 0;
	margin: 0;
	overflow-wrap: break-word;
	font-size: clamp(2.3rem, 10vw, 6rem);
	line-height: .95;
	letter-spacing: -.018em;
	text-wrap: balance;
	hyphens: auto;
}

.routine-index-hero__intro {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(14px, 2vw, 24px);
	align-items: start;
	max-width: 44ch;
	margin: 0;
}

.routine-index-hero__intro-mark {
	width: clamp(30px, 3.4vw, 44px);
	height: auto;
	margin-top: 4px;
	color: var(--accent);
}

.routine-index-hero__intro-copy p {
	margin: 0;
	text-wrap: pretty;
}

.routine-index-hero__intro-copy .routine-index-hero__intro-lead {
	color: var(--ink);
	font-family: "Ibarra Real Nova", Georgia, serif;
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.routine-index-hero__intro-copy p:last-child {
	max-width: 40ch;
	margin-top: 14px;
	color: var(--muted);
	font-size: clamp(.95rem, 1.4vw, 1.05rem);
	line-height: 1.65;
}

/* Routine cards */

.routine-index-grid-section {
	padding: 0 0 clamp(84px, 12vw, 150px);
}

.routine-index-grid {
	display: grid;
	gap: clamp(18px, 2vw, 26px);
}

.routine-thumb {
	--thumb-accent: #b58a3c;
	--thumb-soft: #e7e1d5;
	/* Accent darkened toward ink so small text on the card stays above 4.5:1. */
	--thumb-text: color-mix(in srgb, var(--thumb-accent) 58%, var(--ink));
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 28px;
	background: var(--surface);
	box-shadow: 0 1px 2px rgba(52, 61, 53, .05), 0 18px 46px -18px rgba(52, 61, 53, .16);
	color: var(--ink);
	text-decoration: none;
	transition: transform 420ms cubic-bezier(.16, 1, .3, 1), box-shadow 420ms cubic-bezier(.16, 1, .3, 1), border-color 420ms cubic-bezier(.16, 1, .3, 1);
}

.routine-thumb--pomegranate { --thumb-accent: #a53d62; --thumb-soft: #f2dce1; }
.routine-thumb--acne { --thumb-accent: #c79616; --thumb-soft: #e8e2c9; }
.routine-thumb--mom { --thumb-accent: #c66f4c; --thumb-soft: #ecd8cc; }

.routine-thumb:focus-visible {
	outline: 3px solid var(--thumb-text);
	outline-offset: 4px;
}

.routine-thumb__hero {
	position: relative;
	min-height: 260px;
	overflow: hidden;
	background: var(--thumb-soft);
}

.routine-thumb__hero img {
	width: 100%;
	height: 100%;
	min-height: 260px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}

.routine-thumb__copy {
	container-type: inline-size;
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: 26px 24px 24px;
}

:where(.routine-thumb__copy) p { margin: 0; }

.routine-thumb__name {
	max-width: none;
	margin: 0;
	color: var(--ink);
	font-family: "Ibarra Real Nova", Georgia, serif;
	font-size: clamp(2rem, 6.4vw, 2.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
}

.routine-thumb__need {
	margin-top: 10px;
	color: var(--thumb-text);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: balance;
}

.routine-thumb__description {
	max-width: 46ch;
	margin-top: 12px;
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.routine-thumb__products {
	margin-top: 26px;
}

.routine-thumb__products-label {
	margin-bottom: 12px;
	color: var(--muted);
	font-size: .8rem;
	font-weight: 600;
}

.routine-thumb__product-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.routine-thumb__product {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 7px;
}

.routine-thumb__product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border: 1px solid color-mix(in srgb, var(--thumb-accent) 18%, var(--line));
	border-radius: 14px;
	background: var(--thumb-soft);
	object-fit: cover;
}

.routine-thumb__product span {
	display: block;
	min-width: 0;
	overflow-wrap: break-word;
	color: var(--muted);
	font-size: .72rem;
	line-height: 1.3;
}

/* In narrow cards a four-across strip truncates the longer Greek names, so it becomes a two-column list. */
@container (max-width: 440px) {
	.routine-thumb__product-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
	.routine-thumb__product { flex-direction: row; align-items: center; gap: 10px; }
	.routine-thumb__product img { flex: 0 0 56px; width: 56px; border-radius: 12px; }
	.routine-thumb__product span { font-size: .76rem; }
}

/* Leave enough label width for Greek words and product names on the smallest phones. */
@container (max-width: 320px) {
	.routine-thumb__product-row { column-gap: 10px; }
	.routine-thumb__product { gap: 8px; }
	.routine-thumb__product img { flex-basis: 48px; width: 48px; }
}

.routine-thumb__footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 20px;
	margin-top: auto;
	padding-top: 22px;
}

.routine-thumb__products + .routine-thumb__footer {
	margin-top: 26px;
	border-top: 1px solid var(--line);
}

.routine-thumb__prices {
	color: var(--muted);
	font-size: .86rem;
	font-variant-numeric: tabular-nums;
}

.routine-thumb__prices .woocommerce-Price-amount { color: var(--ink); font-weight: 600; }

.routine-thumb__offers { display: grid; gap: 4px; line-height: 1.5; }
.routine-thumb__tier { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.routine-thumb__availability.is-available { color: var(--ink); font-weight: 600; }

.routine-thumb__action {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	padding: 11px 16px 11px 18px;
	border: 1px solid color-mix(in srgb, var(--thumb-accent) 30%, var(--line));
	border-radius: 999px;
	color: var(--ink);
	font-size: .86rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color 320ms cubic-bezier(.16, 1, .3, 1), border-color 320ms cubic-bezier(.16, 1, .3, 1), color 320ms cubic-bezier(.16, 1, .3, 1);
}

.routine-thumb__action svg {
	width: 18px;
	height: 18px;
	color: var(--thumb-text);
	transition: transform 320ms cubic-bezier(.16, 1, .3, 1), color 320ms cubic-bezier(.16, 1, .3, 1);
}

@media (hover: hover) {
	.routine-thumb:hover {
		transform: translateY(-4px);
		border-color: color-mix(in srgb, var(--thumb-accent) 26%, var(--line));
		box-shadow: 0 1px 2px rgba(52, 61, 53, .05), 0 30px 64px -22px rgba(52, 61, 53, .26);
	}

	.routine-thumb:hover .routine-thumb__hero img { transform: scale(1.03); }

	.routine-thumb:hover .routine-thumb__action {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--surface);
	}

	.routine-thumb:hover .routine-thumb__action svg {
		color: var(--surface);
		transform: translateX(3px);
	}
}

@media (min-width: 760px) {
	.routine-index-hero__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 28px); row-gap: 0; align-items: start; }
	.routine-index-hero h1 { grid-column: 1 / -1; }
	.routine-index-hero__intro { grid-column: 6 / -1; justify-self: end; margin-top: clamp(28px, 4vw, 48px); }

	.routine-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.routine-thumb__copy { padding: 32px; }

	/* The first and last routines run full width; the last mirrors the first so the page alternates. */
	.routine-thumb:nth-child(1),
	.routine-thumb:nth-child(4) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr); grid-template-rows: 1fr; }
	.routine-thumb:nth-child(4) { grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr); }
	.routine-thumb:nth-child(4) .routine-thumb__hero { order: 2; }
	.routine-thumb:nth-child(1) .routine-thumb__hero,
	.routine-thumb:nth-child(4) .routine-thumb__hero,
	.routine-thumb:nth-child(1) .routine-thumb__hero img,
	.routine-thumb:nth-child(4) .routine-thumb__hero img { min-height: 460px; aspect-ratio: auto; }
	.routine-thumb:nth-child(1) .routine-thumb__copy,
	.routine-thumb:nth-child(4) .routine-thumb__copy { padding: clamp(32px, 3.4vw, 44px); }

	.routine-thumb:nth-child(2) .routine-thumb__hero img,
	.routine-thumb:nth-child(3) .routine-thumb__hero img { min-height: 300px; aspect-ratio: 4 / 3; }

	/* A two-routine launch uses two complete rows, with the second image on the right. */
	.routine-thumb:nth-child(2):last-child { grid-column: 1 / -1; grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr); grid-template-rows: 1fr; }
	.routine-thumb:nth-child(2):last-child .routine-thumb__hero { order: 2; }
	.routine-thumb:nth-child(2):last-child .routine-thumb__hero,
	.routine-thumb:nth-child(2):last-child .routine-thumb__hero img { min-height: 460px; aspect-ratio: auto; }
	.routine-thumb:nth-child(2):last-child .routine-thumb__copy { padding: clamp(32px, 3.4vw, 44px); }
}

@media (min-width: 1100px) {
	/* The deck sits beside the headline's last line instead of floating under it. */
	.routine-index-hero__inner { align-items: end; }
	/* Sized so the longest Greek word, "καθημερινότητα.", still fits eight columns without breaking. */
	.routine-index-hero h1 { grid-column: 1 / 9; font-size: clamp(4.2rem, 6.1vw, 5.5rem); }
	.routine-index-hero__intro { grid-column: 9 / -1; justify-self: stretch; margin: 0 0 .6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.routine-thumb,
	.routine-thumb__hero img,
	.routine-thumb__action,
	.routine-thumb__action svg { transition: none; }
	.routine-thumb:hover { transform: none; }
	.routine-thumb:hover .routine-thumb__hero img,
	.routine-thumb:hover .routine-thumb__action svg { transform: none; }
}