/*
 * Storefront styles for [cs_shop].
 *
 * Deliberately quiet: this drops into whatever theme the site runs, so it
 * inherits the page's typeface and leans on neutral greys rather than
 * importing a second visual identity that would fight the surrounding design.
 * The only strong colour is the buy button.
 *
 * Everything is sized in relative units and the grid is auto-fill, so it works
 * from a 320px phone up without a single media query for layout.
 */

.cs-shop {
	--cs-ink: #16181a;
	--cs-ink-2: #63666a;
	--cs-line: rgba(0, 0, 0, 0.12);
	--cs-surface: #ffffff;
	--cs-raised: #f6f6f7;
	--cs-brand: #16181a;
	--cs-on-brand: #ffffff;
	--cs-good: #1c7a35;
	--cs-bad: #b3231b;
	--cs-radius: 12px;

	position: relative;
	color: var(--cs-ink);
	padding-bottom: 72px;
}

/*
 * Dark mode is decided by the PAGE, not by the operating system.
 *
 * This drops into somebody else's theme. A prefers-color-scheme rule here put
 * a dark card on a white page the moment the visitor's laptop was set to dark
 * while the theme stayed light — which is exactly what happened on the first
 * render. shop.js measures the real background behind the component and stamps
 * data-scheme, so the storefront matches whatever it has been placed inside.
 */
.cs-shop[data-scheme="dark"] {
	--cs-ink: #f2f2f3;
	--cs-ink-2: #a1a4a8;
	--cs-line: rgba(255, 255, 255, 0.16);
	--cs-surface: #1b1c1e;
	--cs-raised: #232426;
	--cs-brand: #f2f2f3;
	--cs-on-brand: #16181a;
	--cs-good: #4ee06b;
	--cs-bad: #ff6961;
}

.cs-shop *,
.cs-shop *::before,
.cs-shop *::after { box-sizing: border-box; }

.cs-shop-boot,
.cs-shop-empty {
	padding: 48px 16px;
	text-align: center;
	color: var(--cs-ink-2);
}

.cs-shop-head { margin: 0 0 18px; }
.cs-shop-head h2 { margin: 0 0 4px; }
.cs-shop-head p { margin: 0; color: var(--cs-ink-2); }

/* ------------------------------------------------------------- categories */

.cs-shop-cats {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.cs-shop-cats button {
	padding: 7px 14px;
	border-radius: 999px;
	border: 1px solid var(--cs-line);
	background: none;
	color: var(--cs-ink);
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.cs-shop-cats button.is-on {
	background: var(--cs-brand);
	color: var(--cs-on-brand);
	border-color: var(--cs-brand);
}

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

.cs-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 18px;
}

.cs-shop-card {
	display: block;
	text-align: left;
	padding: 0;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	background: var(--cs-surface);
	color: inherit;
	font: inherit;
	cursor: pointer;
	overflow: hidden;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.cs-shop-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.45);
}

.cs-shop-card-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--cs-raised);
}

.cs-shop-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cs-shop-card-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-size: 40px;
}

.cs-shop-soldout {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cs-shop-card-body { display: block; padding: 12px 14px 14px; }
.cs-shop-card-name { display: block; font-weight: 600; }

.cs-shop-card-sub {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--cs-ink-2);
}

.cs-shop-card-price { display: block; margin-top: 8px; font-weight: 600; }
.cs-shop-card-price s { color: var(--cs-ink-2); font-weight: 400; }

/* ----------------------------------------------------------------- detail */

.cs-shop-back {
	display: inline-block;
	margin-bottom: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cs-ink-2);
	font: inherit;
	cursor: pointer;
}

.cs-shop-detail {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 28px;
	align-items: start;
}

.cs-shop-detail-media {
	border-radius: var(--cs-radius);
	overflow: hidden;
	background: var(--cs-raised);
	aspect-ratio: 1 / 1;
}

.cs-shop-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-shop-detail-body h2 { margin: 0 0 6px; }
.cs-shop-detail-sub { margin: 0 0 10px; color: var(--cs-ink-2); }
.cs-shop-detail-price { margin: 0 0 18px; font-size: 22px; font-weight: 600; }

.cs-shop-sizes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.cs-shop-sizes button {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 92px;
	padding: 10px 14px;
	border: 1px solid var(--cs-line);
	border-radius: 10px;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
}

.cs-shop-sizes button span { font-size: 13px; font-weight: 400; color: var(--cs-ink-2); }

.cs-shop-sizes button.is-on {
	border-color: var(--cs-brand);
	box-shadow: inset 0 0 0 1px var(--cs-brand);
}

/* A sold-out size stays visible and readable rather than vanishing: a
   customer who came for the 1kg needs to see that it exists and is out,
   not silently find it missing and assume they misremembered. */
.cs-shop-sizes button.is-out {
	opacity: 0.55;
	cursor: not-allowed;
	text-decoration: line-through;
}

.cs-shop-size-out { text-decoration: none; color: var(--cs-bad) !important; }

.cs-shop-hint { color: var(--cs-ink-2); font-size: 14px; }
.cs-shop-low { color: var(--cs-bad); font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------- buttons */

.cs-shop-btn {
	display: block;
	width: 100%;
	margin: 16px 0 0;
	padding: 14px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--cs-brand);
	color: var(--cs-on-brand);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}

.cs-shop-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ----------------------------------------------------------------- basket */

.cs-shop-lines {
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	overflow: hidden;
}

.cs-shop-line {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--cs-line);
	flex-wrap: wrap;
}

.cs-shop-line:last-child { border-bottom: 0; }
.cs-shop-line-main { flex: 1 1 40%; min-width: 0; }
.cs-shop-line-size { display: block; font-size: 13px; color: var(--cs-ink-2); }

.cs-shop-qty {
	display: flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--cs-line);
	border-radius: 8px;
	overflow: hidden;
}

.cs-shop-qty button {
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 18px;
	cursor: pointer;
}

.cs-shop-qty span { min-width: 28px; text-align: center; }

.cs-shop-line-total { min-width: 76px; text-align: right; font-weight: 600; }

.cs-shop-drop {
	border: 0;
	background: none;
	color: var(--cs-ink-2);
	font: inherit;
	cursor: pointer;
	padding: 6px;
}

/* ----------------------------------------------------------------- totals */

.cs-shop-totals {
	margin-top: 18px;
	padding: 16px;
	border-radius: var(--cs-radius);
	background: var(--cs-raised);
}

.cs-shop-totals > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 4px 0;
}

.cs-shop-total {
	margin-top: 8px;
	padding-top: 10px !important;
	border-top: 1px solid var(--cs-line);
	font-size: 17px;
	font-weight: 700;
}

.cs-shop-free { color: var(--cs-good); font-weight: 600; }

.cs-shop-note {
	display: block !important;
	margin-top: 10px;
	font-size: 13px;
	color: var(--cs-ink-2);
}

.cs-shop-pay-with {
	display: block !important;
	margin: 10px 0;
	padding: 10px 0;
	border-top: 1px solid var(--cs-line);
	border-bottom: 1px solid var(--cs-line);
}

.cs-shop-pay-with label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	font-size: 14px;
	cursor: pointer;
}

/* ------------------------------------------------------------------- form */

.cs-shop-form { margin-bottom: 8px; }

.cs-shop-field { display: block; margin-bottom: 12px; }

.cs-shop-field > span {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	color: var(--cs-ink-2);
}

.cs-shop-field input,
.cs-shop-field select,
.cs-shop-field textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--cs-line);
	border-radius: 9px;
	background: var(--cs-surface);
	color: var(--cs-ink);
	/* 16px keeps iOS Safari from zooming the page when a field is focused,
	   which then leaves the layout scrolled sideways. */
	font: inherit;
	font-size: 16px;
}

.cs-shop-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cs-shop-row .cs-shop-field { flex: 1 1 140px; }

/* ------------------------------------------------------------------ alert */

.cs-shop-alert {
	margin-bottom: 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(179, 35, 27, 0.1);
	color: var(--cs-bad);
	font-weight: 500;
}

/* -------------------------------------------------------------- basket bar */

.cs-shop-bar {
	position: sticky;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 24px;
	padding: 14px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--cs-brand);
	color: var(--cs-on-brand);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6);
}

.cs-shop-bar-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--cs-on-brand);
	color: var(--cs-brand);
	font-size: 13px;
}

/* ------------------------------------------------------------------- done */

.cs-shop-done { padding: 40px 16px; text-align: center; }

.cs-shop-done-mark {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--cs-good);
	color: #fff;
	font-size: 30px;
	line-height: 56px;
}

.cs-shop-done .cs-shop-btn { max-width: 260px; margin: 22px auto 0; }

/* ------------------------------------------------------------------ toast */

.cs-shop-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 9999;
	max-width: min(92vw, 420px);
	padding: 12px 18px;
	border-radius: 999px;
	background: rgba(20, 20, 22, 0.94);
	color: #fff;
	font-size: 14px;
	text-align: center;
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.7);
}

/* --------------------------------------------------------- paying */

.cs-shop-pay-title {
	margin-bottom: 6px;
	font-weight: 600;
}

.cs-shop-pay-with label { align-items: flex-start; }
.cs-shop-pay-with label > span { display: block; }

.cs-shop-pay-sub {
	color: var(--cs-ink-2);
	font-size: 13px;
}

/* The discount is the reason to pick the wallet, so it sits with the option
   rather than appearing as a surprise line in the totals afterwards. */
.cs-shop-pay-deal {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--cs-good);
}

.cs-shop-pay-card {
	margin-top: 8px;
	font-size: 13px;
	color: var(--cs-ink-2);
}

.cs-shop-deal {
	color: var(--cs-good);
	font-weight: 600;
}

.cs-shop-teaser { color: var(--cs-good); font-weight: 600; }