/* Shop page — the reference-matched subscription grid.
 *
 * Namespaced `pp-sh-*` and enqueued after responsive-fixes.css. The shared shop
 * sheets (shop.css, shop-desktop-reference.css) pin `ul.products` / `li.product`
 * with !important and app.css styles the `pp-product-card` names globally, so
 * this component shares none of them and nothing legacy can leak in.
 *
 * The page keeps WooCommerce's content wrapper, so the theme header and the
 * breadcrumb slot it provides stay exactly where they were.
 */

body.pp-shop-page {
	background: var(--shop-page-bg-l, #ffffff);
}

body.pp-shop-page main#main.site-main,
body.pp-shop-page .woocommerce main#main.site-main {
	width: min(1360px, calc(100% - 48px));
	max-width: none;
	margin-inline: auto;
	padding: 22px 0 52px;
	background: transparent;
}

.pp-sh {
	--shop-ink: var(--shop-ink-l, #0d1b45);
	--shop-muted: var(--shop-muted-l, #6b7688);
	--shop-accent: var(--shop-accent-l, #1568d4);
	--shop-accent-text: var(--shop-accent-text-l, #ffffff);
	--shop-tint: var(--shop-tint-l, #e6f2fe);
	--shop-card-bg: var(--shop-card-bg-l, #ffffff);
	--shop-card-border: var(--shop-card-border-l, #eceff4);
	direction: rtl;
}

.pp-sh svg { display: block; }

/* --------------------------------------------------------------------- hero */

.pp-sh-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 40px 46px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--shop-tint);
}

.pp-sh-hero-copy { flex: 1 1 auto; min-width: 0; }

.pp-sh-hero-title {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var(--shop-ink);
	font-size: 40px;
	font-weight: 900;
	line-height: 1.45;
}

/* The reference underlines the closing line with a hand-drawn blue stroke. */
.pp-sh-hero-line.is-last {
	position: relative;
	align-self: flex-start;
}

.pp-sh-hero-line.is-last::after {
	position: absolute;
	right: 0;
	bottom: -6px;
	width: 100%;
	height: 9px;
	border-radius: 999px;
	background: var(--shop-accent);
	content: "";
	opacity: .85;
}

.pp-sh-hero-text {
	max-width: 620px;
	margin: 22px 0 0;
	color: var(--shop-muted);
	font-size: 16px;
	font-weight: 500;
	line-height: 2;
}

/* Loose cluster of brand tiles, drawn from the catalogue. */
.pp-sh-collage {
	display: grid;
	flex: 0 0 auto;
	grid-template-columns: repeat(3, 76px);
	gap: 12px;
	transform: rotate(-2deg);
}

.pp-sh-tile {
	display: grid;
	width: 76px;
	height: 76px;
	overflow: hidden;
	border-radius: 22px;
	background: var(--card-tint, #eef2f7);
	box-shadow: 0 8px 20px rgba(13, 27, 69, .07);
	place-items: center;
}

.pp-sh-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pp-sh-tile:nth-child(1) { transform: translateY(-10px) rotate(-6deg); }
.pp-sh-tile:nth-child(2) { transform: translateY(6px) rotate(4deg); }
.pp-sh-tile:nth-child(3) { transform: translateY(-4px) rotate(-3deg); }
.pp-sh-tile:nth-child(4) { transform: translateY(8px) rotate(6deg); }
.pp-sh-tile:nth-child(5) { transform: translateY(-8px) rotate(-4deg); }
.pp-sh-tile:nth-child(6) { transform: translateY(2px) rotate(3deg); }

/* ------------------------------------------------------- heading / search / chips */

.pp-sh-heading {
	margin: 34px 0 0;
	color: var(--shop-ink);
	font-size: 30px;
	font-weight: 900;
	line-height: 1.5;
	text-align: center;
}

.pp-sh-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(620px, 100%);
	margin: 16px auto 0;
	padding: 0 18px;
	border: 1px solid var(--shop-card-border);
	border-radius: 999px;
	background: #fff;
}

.pp-sh-search-ic { display: grid; flex: 0 0 auto; color: var(--shop-muted); place-items: center; }

.pp-sh-search-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 14px 0;
	border: 0;
	background: none;
	color: var(--shop-ink);
	font-family: inherit;
	font-size: 15px;
	outline: none;
}

.pp-sh-search-input::placeholder { color: #9aa3b2; }

.pp-sh-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin-top: 20px;
}

.pp-sh-chip {
	padding: 9px 20px;
	border: 1px solid var(--shop-card-border);
	border-radius: 999px;
	background: #fff;
	color: var(--shop-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.pp-sh-chip:hover { border-color: #cfd8e6; }

.pp-sh-chip.is-active {
	border-color: var(--shop-accent);
	background: var(--shop-accent);
	color: var(--shop-accent-text);
}

/* --------------------------------------------------------------------- grid */

.pp-sh-grid {
	display: grid;
	grid-template-columns: repeat(var(--shop-cols-d, 3), minmax(0, 1fr));
	gap: 18px;
	margin-top: 26px;
}

.pp-sh-empty {
	margin: 40px 0;
	color: var(--shop-muted);
	font-size: 16px;
	text-align: center;
}

/* --------------------------------------------------------------------- card */

.pp-sh-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 9px 9px 0;
	border: 1px solid var(--shop-card-border);
	border-radius: 20px;
	background: var(--shop-card-bg);
	color: var(--shop-ink);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pp-sh-card:hover {
	transform: translateY(-3px);
	border-color: #dfe6f0;
	box-shadow: 0 14px 30px rgba(13, 27, 69, .09);
}

/* `hidden` alone loses to the display:flex above, so the filter needs this. */
.pp-sh-card[hidden] { display: none; }

/* Band, laid out in reverse so the brand mark leads from the LEFT, as in the
   reference, while the whole group stays centred. */
.pp-sh-band {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 118px;
	padding: 16px;
	border-radius: 15px;
	background: var(--card-tint, #eef2f7);
}

.pp-sh-logo {
	display: block;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	object-fit: cover;
}

.pp-sh-brand {
	min-width: 0;
	color: var(--card-ink, var(--shop-ink));
	font-size: 23px;
	font-weight: 900;
	line-height: 1.3;
}

.pp-sh-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	padding: 16px 10px 18px;
	text-align: center;
}

.pp-sh-title {
	color: var(--shop-ink);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.6;
}

.pp-sh-desc {
	margin-top: 8px;
	color: var(--shop-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.95;
}

.pp-sh-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	color: var(--shop-ink);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
}

.pp-sh-cta-ic { display: grid; place-items: center; transition: transform .18s ease; }
.pp-sh-card:hover .pp-sh-cta-ic { transform: translateX(-4px); }

/* Listed but not for sale: the card stays readable and still links to the
   product, only the buy affordance is replaced by the unavailable label. */
.pp-sh-card.is-unavailable .pp-sh-band { filter: grayscale(.55); opacity: .8; }
.pp-sh-card.is-unavailable .pp-sh-out {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 3px 16px;
	border-radius: 999px;
	background: #f1f3f6;
	color: #78828f;
	font-size: 14px;
	font-weight: 700;
}
.pp-sh-card.is-unavailable:hover { transform: none; box-shadow: none; border-color: var(--shop-card-border); }

html[data-theme="dark"] .pp-sh-card.is-unavailable .pp-sh-out { background: #232625; color: #9aa3ae; }

/* -------------------------------------------------------------- closing cta */

.pp-sh-bottom {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 30px;
	padding: 20px 26px;
	border-radius: 20px;
	background: var(--shop-tint);
}

.pp-sh-bottom-ic {
	display: grid;
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #fff;
	color: var(--shop-accent);
	place-items: center;
}

.pp-sh-bottom-copy { flex: 1 1 auto; min-width: 0; }

.pp-sh-bottom-title {
	margin: 0;
	color: var(--shop-ink);
	font-size: 19px;
	font-weight: 900;
	line-height: 1.6;
}

.pp-sh-bottom-text {
	margin: 2px 0 0;
	color: var(--shop-muted);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
}

.pp-sh-bottom-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 999px;
	background: var(--shop-accent);
	color: var(--shop-accent-text);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	transition: filter .16s ease;
}

.pp-sh-bottom-btn:hover { filter: brightness(1.08); color: var(--shop-accent-text); }

/* -------------------------------------------------------------------- tablet */

@media (max-width: 1180px) {
	.pp-sh-grid { grid-template-columns: repeat(var(--shop-cols-t, 2), minmax(0, 1fr)); gap: 14px; }

	.pp-sh-hero { padding: 30px 28px; }
	.pp-sh-hero-title { font-size: 30px; }
	.pp-sh-hero-text { font-size: 15px; margin-top: 16px; }
	.pp-sh-collage { grid-template-columns: repeat(3, 62px); gap: 10px; }
	.pp-sh-tile { width: 62px; height: 62px; border-radius: 18px; }

	.pp-sh-heading { margin-top: 26px; font-size: 24px; }
	.pp-sh-band { min-height: 96px; }
	.pp-sh-logo { width: 46px; height: 46px; border-radius: 13px; }
	.pp-sh-brand { font-size: 19px; }
}

/* -------------------------------------------------------------------- mobile */

@media (max-width: 650px) {
	body.pp-shop-page main#main.site-main,
	body.pp-shop-page .woocommerce main#main.site-main {
		width: calc(100% - 24px);
		padding-bottom: 96px; /* clears the fixed .pp-mobile-nav */
	}

	.pp-sh-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 22px 18px;
		border-radius: 18px;
	}

	.pp-sh-hero-title { font-size: 24px; }
	.pp-sh-hero-line.is-last::after { height: 6px; bottom: -3px; }
	.pp-sh-hero-text { font-size: 13.5px; margin-top: 14px; line-height: 1.95; }
	.pp-sh-collage { grid-template-columns: repeat(3, 58px); gap: 8px; justify-content: center; }
	.pp-sh-tile { width: 58px; height: 58px; border-radius: 16px; }

	.pp-sh-heading { margin-top: 22px; font-size: 20px; }
	.pp-sh-search { padding: 0 14px; }
	.pp-sh-search-input { padding: 12px 0; font-size: 14px; }

	.pp-sh-chips { gap: 7px; margin-top: 14px; }
	.pp-sh-chip { padding: 7px 14px; font-size: 12.5px; }

	.pp-sh-grid { grid-template-columns: repeat(var(--shop-cols-m, 2), minmax(0, 1fr)); gap: 10px; margin-top: 16px; }

	.pp-sh-card { padding: 6px 6px 0; border-radius: 16px; }
	.pp-sh-band { min-height: 74px; gap: 8px; padding: 10px 8px; border-radius: 12px; }
	.pp-sh-logo { width: 36px; height: 36px; border-radius: 11px; }
	.pp-sh-brand { font-size: 14px; }
	.pp-sh-body { padding: 10px 6px 12px; }
	.pp-sh-title { font-size: 13px; }
	.pp-sh-desc { margin-top: 5px; font-size: 11px; line-height: 1.85; }
	.pp-sh-cta { gap: 5px; padding-top: 9px; font-size: 12.5px; }
	.pp-sh-cta svg { width: 15px; height: 15px; }

	.pp-sh-bottom {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin-top: 20px;
		padding: 18px 16px;
		border-radius: 18px;
		text-align: center;
	}
	.pp-sh-bottom-ic { width: 46px; height: 46px; }
	.pp-sh-bottom-title { font-size: 16px; }
	.pp-sh-bottom-text { font-size: 12.5px; }
	.pp-sh-bottom-btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------- dark */

html[data-theme="dark"] body.pp-shop-page { background: #101211; }

html[data-theme="dark"] .pp-sh {
	--shop-ink: #eef2fb;
	--shop-muted: #98a2b5;
	--shop-accent: #4d94f0;
	--shop-accent-text: #0b1220;
	--shop-tint: #17243c;
	--shop-card-bg: #1b1d1c;
	--shop-card-border: #2c2f2e;
}

html[data-theme="dark"] .pp-sh-search { background: #1b1d1c; }
html[data-theme="dark"] .pp-sh-search-input { color: var(--shop-ink); }
html[data-theme="dark"] .pp-sh-chip { background: #1b1d1c; border-color: #2c2f2e; }
html[data-theme="dark"] .pp-sh-chip.is-active { background: var(--shop-accent); border-color: var(--shop-accent); }
html[data-theme="dark"] .pp-sh-bottom-ic { background: #1b1d1c; }
html[data-theme="dark"] .pp-sh-tile { box-shadow: none; }