/*
 * Sweet City Candy — Design System & Stylesheet
 *
 * Every colour is sampled from the logo rather than chosen alongside it, so
 * the page and the badge cannot drift apart:
 *
 *   #F090B0  the "Sweet" script pink        -> --brand
 *   #D02060  the ribbon magenta             -> --brand-deep  (actions, prices)
 *   #90D0F0  the "City" script blue         -> --accent
 *   #000020  the badge outline and skyline  -> --ink
 *
 * The pink is too light to carry white text — 1.9:1 against white — so the
 * ribbon magenta does the work on buttons and the pink is reserved for washes
 * and borders. That split is deliberate: the brightest brand colour is rarely
 * the usable one.
 *
 * Typography: 'Plus Jakarta Sans', system-ui
 */

:root {
	--brand: #F090B0;
	--brand-deep: #D02060;
	--brand-dark: #A5164C;
	--brand-wash: #FEF0F5;
	--brand-light: #FFF7FA;
	--accent: #57B6E8;
	--accent-hover: #3B9BD0;
	--accent-soft: #EAF6FD;

	--ink: #0E1330;
	--ink-soft: #55597A;
	--ink-light: #8C90AA;
	--line: #E7E3EC;
	--line-light: #F2EFF5;
	--bg: #ffffff;
	--bg-soft: #F8F6FA;
	--bg-subtle: #FCFAFD;

	--good: #0D6E3F;
	--good-bg: #ECFDF3;
	--warn: #B54708;
	--warn-bg: #FFFAEB;

	--radius-sm: 6px;
	--radius: 12px;
	--radius-lg: 18px;
	--radius-pill: 9999px;

	--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
	--shadow-md: 0 4px 14px -2px rgba(30, 10, 40, 0.08), 0 2px 5px -1px rgba(0, 0, 0, 0.03);
	--shadow-lg: 0 12px 28px -4px rgba(30, 10, 40, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.04);
	--shadow-brand: 0 8px 24px -4px rgba(208, 32, 96, 0.28);

	--font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wrap: 1240px;
}

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

body {
	margin: 0;
	background: var(--bg-subtle);
	color: var(--ink);
	font: 16px/1.6 var(--font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; }

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 24px;
}

/* ----------------------------------------------------------- top announcement */

.top-bar {
	background: #111827;
	color: #F3F4F6;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 0;
	text-align: center;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.top-bar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.top-bar-message { display: flex; align-items: center; gap: 8px; margin: 0 auto; }
.top-bar-badge {
	background: var(--brand);
	color: #000;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: var(--radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.top-bar-link { color: var(--brand); font-weight: 600; }
.top-bar-link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header */

.site-header {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}
.brand img {
	/* A square badge, not a wordmark strip: it needs height to stay legible,
	   and the header grows to suit rather than the logo shrinking to fit. */
	height: 56px;
	width: auto;
	transition: transform 0.15s ease;
}
.brand:hover img { transform: scale(1.02); }

.search {
	display: flex;
	flex: 1 1 320px;
	max-width: 480px;
	position: relative;
}
.search input {
	width: 100%;
	padding: 11px 48px 11px 18px;
	font-size: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--bg-soft);
	color: var(--ink);
	transition: all 0.2s ease;
}
.search input:focus {
	outline: none;
	border-color: var(--brand);
	background: #ffffff;
	box-shadow: 0 0 0 4px var(--brand-wash);
}
.search button {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: none;
	background: var(--brand);
	color: #044b4c;
	border-radius: var(--radius-pill);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}
.search button:hover {
	background: var(--brand-deep);
	color: #fff;
	transform: translateY(-50%) scale(1.05);
}
.search button svg { width: 16px; height: 16px; fill: currentColor; }

.site-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 14px;
	font-weight: 600;
	flex-shrink: 0;
}
.site-nav a {
	color: var(--ink-soft);
	padding: 8px 12px;
	border-radius: var(--radius-pill);
	transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover {
	color: var(--brand-dark);
	background: var(--brand-wash);
}
.site-nav a.active {
	color: var(--brand-dark);
	background: var(--brand-wash);
}

.cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	padding: 8px 16px !important;
	border-radius: var(--radius-pill) !important;
	color: var(--ink) !important;
}
.cart-link:hover {
	border-color: var(--brand);
	background: var(--brand-wash) !important;
}
.cart-badge {
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--accent);
	color: #fff;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	display: inline-grid;
	place-items: center;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 2px 6px rgba(255, 28, 28, 0.4);
}

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

.hero {
	padding: 56px 0 44px;
	position: relative;
}
.hero-inner {
	background: linear-gradient(135deg, #FFFFFF 0%, #EBFBFB 60%, #E3F8F8 100%);
	border: 1px solid rgba(0, 202, 203, 0.25);
	border-radius: var(--radius-lg);
	padding: 48px 44px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-md);
}
.hero-inner::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(0, 202, 203, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
	border-radius: 50%;
	pointer-events: none;
}
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	border: 1px solid var(--line);
	color: var(--brand-dark);
	font-size: 13px;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: 18px;
	box-shadow: var(--shadow-sm);
}
.hero-eyebrow-dot {
	width: 8px;
	height: 8px;
	background: var(--brand);
	border-radius: 50%;
	display: inline-block;
	box-shadow: 0 0 0 3px rgba(0, 202, 203, 0.3);
}
.hero h1 {
	margin: 0 0 16px;
	font-size: clamp(32px, 4.5vw, 52px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--ink);
	max-width: 22ch;
}
.hero-sub {
	margin: 0 0 28px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-soft);
	max-width: 62ch;
}
.hero-sub strong { color: var(--ink); font-weight: 700; }
.hero-actions {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 32px;
}

.hero-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	padding-top: 28px;
	border-top: 1px solid rgba(0, 202, 203, 0.2);
}
.feature-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}
.feature-icon {
	width: 36px;
	height: 36px;
	background: #ffffff;
	border: 1px solid rgba(0, 202, 203, 0.3);
	border-radius: var(--radius);
	display: grid;
	place-items: center;
	font-size: 18px;
	flex-shrink: 0;
	box-shadow: var(--shadow-sm);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	background: var(--brand);
	color: #034849;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 15px;
	border: 0;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 202, 203, 0.3);
	text-decoration: none;
}
.button:hover {
	background: var(--brand-deep);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: var(--shadow-brand);
}
.button:active { transform: translateY(0); }

.button-quiet {
	background: #ffffff;
	color: var(--ink);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
}
.button-quiet:hover {
	border-color: var(--brand);
	background: var(--brand-wash);
	color: var(--brand-dark);
	box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------- sections */

.section {
	padding: 48px 0;
}
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 24px;
	gap: 16px;
	flex-wrap: wrap;
}
.section-title-wrap { max-width: 60ch; }
.section-title {
	margin: 0 0 6px;
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ink);
}
.section-subtitle {
	margin: 0;
	font-size: 15px;
	color: var(--ink-soft);
}
.section-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--brand-dark);
	font-weight: 700;
	font-size: 14px;
	padding: 6px 14px;
	background: var(--brand-wash);
	border-radius: var(--radius-pill);
	transition: all 0.15s ease;
}
.section-link:hover {
	background: var(--brand);
	color: #034849;
	transform: translateX(3px);
}

.notice {
	background: var(--brand-wash);
	border: 1px solid var(--brand);
	border-radius: var(--radius);
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--ink);
}
.notice-error { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); font-weight: 600; }

.note {
	background: var(--brand-wash);
	border: 1px solid rgba(0, 202, 203, 0.3);
	border-radius: var(--radius);
	padding: 14px 18px;
	color: var(--ink);
	font-size: 14px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ------------------------------------------------------------ quad cards */

.quad-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 22px;
}

.quad-card {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: var(--shadow-sm);
	position: relative;
}

.quad-card:hover {
	border-color: var(--brand);
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.quad-card-images {
	width: 100%;
	aspect-ratio: 1;
}

.quad-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	width: 100%;
	height: 100%;
	padding: 8px;
	background: var(--bg-soft);
	border-radius: 10px;
}

.quad-image {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #ffffff;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(0, 0, 0, 0.04);
	transition: transform 0.2s ease;
}
.quad-card:hover .quad-image {
	transform: scale(1.02);
}

.quad-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.quad-image.placeholder {
	background: var(--brand-wash);
	color: var(--brand-dark);
}

.placeholder-content {
	font-size: 26px;
	font-weight: 800;
	color: var(--brand-deep);
	opacity: 0.6;
}

.quad-card-info {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-grow: 1;
}

.quad-card-title {
	font-size: 17px;
	font-weight: 700;
	margin: 0;
	color: var(--ink);
	letter-spacing: -0.015em;
}
.quad-card:hover .quad-card-title {
	color: var(--brand-dark);
}

.quad-card-desc {
	font-size: 13px;
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.quad-card-count {
	font-size: 12px;
	font-weight: 700;
	color: var(--brand-dark);
	background: var(--brand-wash);
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	margin-top: 6px;
}

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

.grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.card {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px;
	display: flex;
	flex-direction: column;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: var(--shadow-sm);
	position: relative;
}
.card:hover {
	border-color: var(--brand);
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.card-link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
}

.card-image-wrap {
	position: relative;
	aspect-ratio: 1;
	background: var(--bg-soft);
	border-radius: 8px;
	overflow: hidden;
	display: grid;
	place-items: center;
	border: 1px solid rgba(0, 0, 0, 0.03);
}
.card-image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 0.25s ease;
}
.card:hover .card-image {
	transform: scale(1.05);
}
.card-image-empty { color: var(--line); font-size: 40px; }

.card-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: var(--radius-pill);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	z-index: 2;
}
.card-badge-low { background: var(--warn-bg); color: var(--warn); border: 1px solid rgba(180, 56, 13, 0.2); }
.card-badge-instock { background: var(--good-bg); color: var(--good); border: 1px solid rgba(13, 110, 63, 0.2); }

.card-title {
	margin: 12px 0 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 40px;
}
.card:hover .card-title { color: var(--brand-dark); }

.card-foot {
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--line-light);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}
.card-price {
	font-weight: 800;
	font-size: 18px;
	color: var(--ink);
	letter-spacing: -0.02em;
}
.stock-text { font-size: 12px; font-weight: 600; color: var(--good); }
.stock-text-low { color: var(--warn); }

/* --------------------------------------------------------------- listing */

.listing-head {
	padding: 36px 0 16px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 28px;
}
.listing-head h1 {
	margin: 0 0 6px;
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--ink);
}
.listing-count {
	margin: 0;
	color: var(--ink-soft);
	font-size: 15px;
	font-weight: 500;
}

.empty, .empty-page {
	padding: 60px 0;
	color: var(--ink-soft);
	max-width: 60ch;
	text-align: center;
	margin: 0 auto;
}
.empty-page h1 { color: var(--ink); }

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 44px 0 16px;
	font-size: 15px;
}
.pagination a {
	color: var(--brand-dark);
	text-decoration: none;
	font-weight: 700;
	padding: 8px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: #ffffff;
	transition: all 0.15s ease;
}
.pagination a:hover {
	border-color: var(--brand);
	background: var(--brand-wash);
}
.pagination-position {
	color: var(--ink-soft);
	font-weight: 600;
	font-size: 14px;
}

/* --------------------------------------------------------------- product */

.breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 24px 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
}
.breadcrumbs a { color: var(--ink-soft); }
.breadcrumbs a:hover { color: var(--brand-dark); text-decoration: underline; }

.product {
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	padding: 12px 0 40px;
	align-items: start;
}
@media (max-width: 820px) { .product { grid-template-columns: 1fr; gap: 32px; } }

.product-media {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 90px;
}

.product-image {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--bg-soft);
	border-radius: var(--radius);
	mix-blend-mode: multiply;
}
.product-image-empty { display: grid; place-items: center; color: var(--line); font-size: 64px; }

.thumbs {
	display: flex;
	gap: 10px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.thumbs img {
	width: 76px;
	height: 76px;
	object-fit: contain;
	background: var(--bg-soft);
	border: 2px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	padding: 4px;
	transition: all 0.15s ease;
}
.thumbs img:hover, .thumbs img.active {
	border-color: var(--brand);
	background: #ffffff;
	box-shadow: var(--shadow-sm);
}

.product-detail {
	display: flex;
	flex-direction: column;
}
.product-detail h1 {
	margin: 0 0 16px;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.25;
	color: var(--ink);
}
.product-price {
	margin: 0 0 16px;
	font-size: 32px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.03em;
}

.product-meta-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
}
.badge-pill-good { background: var(--good-bg); color: var(--good); }
.badge-pill-warn { background: var(--warn-bg); color: var(--warn); }
.badge-pill-sku { background: var(--bg-soft); color: var(--ink-soft); }

.buy-card {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 28px;
	box-shadow: var(--shadow-sm);
}
.buy {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.buy input[type="number"] {
	width: 80px;
	padding: 12px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--bg-soft);
}
.buy .button {
	flex: 1;
	font-size: 16px;
	padding: 14px 28px;
}

.warehouse-facts {
	background: var(--brand-wash);
	border: 1px solid rgba(0, 202, 203, 0.3);
	border-radius: var(--radius);
	padding: 18px;
	margin-bottom: 28px;
}
.warehouse-facts-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--brand-dark);
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}
.warehouse-facts-list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--ink);
	display: grid;
	gap: 6px;
}
.warehouse-facts-list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.product-copy {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ink);
	margin-top: 12px;
	border-top: 1px solid var(--line);
	padding-top: 24px;
}
.product-copy p { margin: 0 0 14px; }

.product-cats {
	margin-top: 24px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}
.product-cats-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-soft);
	margin-right: 4px;
}
.tag {
	font-size: 13px;
	font-weight: 600;
	padding: 5px 14px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	text-decoration: none;
	color: var(--ink-soft);
	transition: all 0.15s ease;
}
.tag:hover {
	border-color: var(--brand);
	background: var(--brand-wash);
	color: var(--brand-dark);
}

/* ---------------------------------------------------------------- warehouse banner */

.warehouse-banner {
	background: linear-gradient(135deg, #111827 0%, #1F2937 100%);
	color: #ffffff;
	border-radius: var(--radius-lg);
	padding: 40px 44px;
	margin: 48px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	box-shadow: var(--shadow-md);
}
.warehouse-banner-content h2 {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #ffffff;
}
.warehouse-banner-content p {
	margin: 0;
	color: #9CA3AF;
	font-size: 15px;
	max-width: 54ch;
}
.warehouse-banner-action .button {
	background: var(--brand);
	color: #034849;
	white-space: nowrap;
}
.warehouse-banner-action .button:hover {
	background: #ffffff;
	color: #111827;
}

/* ------------------------------------------------------------------ cart */

.cart-layout {
	display: grid;
	gap: 36px;
	grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
	padding: 12px 0 40px;
}
@media (max-width: 860px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: start;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.cart-line img {
	width: 88px;
	height: 88px;
	object-fit: contain;
	background: var(--bg-soft);
	border-radius: 10px;
	mix-blend-mode: multiply;
	border: 1px solid var(--line);
}
.cart-line-name {
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
	color: var(--ink);
}
.cart-line-name:hover { color: var(--brand-dark); }
.cart-line-meta { font-size: 13px; color: var(--ink-soft); }
.cart-line-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.cart-line-actions input {
	width: 68px;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font-weight: 600;
	text-align: center;
}
.cart-line-actions button {
	background: none;
	border: 0;
	padding: 4px 8px;
	cursor: pointer;
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 600;
	border-radius: 4px;
	transition: all 0.15s ease;
}
.cart-line-actions button:hover { color: var(--accent); background: var(--accent-soft); }
.cart-line-total { font-weight: 800; font-size: 17px; white-space: nowrap; }

.cart-summary-card {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 90px;
}
.cart-summary-card h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 800;
}
.cart-summary-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 15px;
	color: var(--ink-soft);
}
.cart-summary-row strong { color: var(--ink); }
.cart-summary-total {
	border-top: 1px solid var(--line);
	padding-top: 16px;
	margin-top: 16px;
	font-size: 18px;
	font-weight: 800;
	color: var(--ink);
}

/* -------------------------------------------------------------- checkout */

.checkout {
	display: grid;
	gap: 36px;
	grid-template-columns: minmax(0, 1.8fr) minmax(320px, 1.2fr);
	padding: 16px 0 40px;
	align-items: start;
}
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }

.fieldset {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	margin: 0 0 24px;
	box-shadow: var(--shadow-sm);
}
.fieldset legend {
	padding: 0 8px;
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.015em;
}

.field { margin: 0 0 16px; }
.field:last-child { margin-bottom: 0; }
.field label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 6px;
	color: var(--ink);
}
.field input, .field select {
	width: 100%;
	padding: 11px 14px;
	font-size: 15px;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--bg-soft);
	color: var(--ink);
	transition: all 0.15s ease;
}
.field input:focus, .field select:focus {
	outline: none;
	border-color: var(--brand);
	background: #ffffff;
	box-shadow: 0 0 0 3px var(--brand-wash);
}
.field-row { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.field-row-3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 560px) { .field-row, .field-row-3 { grid-template-columns: 1fr; } }

.ship-option {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
	margin-bottom: 10px;
	cursor: pointer;
	background: var(--bg-soft);
	transition: all 0.15s ease;
}
.ship-option:hover {
	border-color: var(--brand);
	background: var(--brand-light);
}
.ship-option:has(input:checked) {
	border-color: var(--brand-deep);
	background: var(--brand-wash);
	box-shadow: 0 0 0 1px var(--brand-deep);
}
.ship-option input {
	margin-top: 4px;
	accent-color: var(--brand-deep);
	cursor: pointer;
}
.ship-option-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.ship-option-note { font-size: 13px; color: var(--ink-soft); }
.ship-option-price {
	margin-left: auto;
	font-weight: 800;
	font-size: 15px;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

#card-container {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 12px 14px;
	background: #ffffff;
	margin-bottom: 16px;
	min-height: 90px;
}

.pay-button {
	width: 100%;
	padding: 15px 24px;
	font-size: 17px;
	font-weight: 800;
	margin-top: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.pay-button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------------------------------------------------------------- summary */

.summary {
	background: #ffffff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 90px;
}
.summary h2 {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 800;
	color: var(--ink);
	letter-spacing: -0.015em;
}
.summary-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	font-size: 14px;
	color: var(--ink-soft);
}
.summary-row span:last-child {
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	font-weight: 600;
}
.summary-total {
	border-top: 1px solid var(--line);
	margin-top: 12px;
	padding-top: 14px;
	font-size: 18px;
	font-weight: 800;
	color: var(--ink);
}
.summary-total span:last-child {
	color: var(--ink);
	font-size: 20px;
	font-weight: 800;
}
.summary-note {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--ink-soft);
	line-height: 1.5;
}

/* ----------------------------------------------------------- order confirmation */

.order-head { padding: 36px 0 12px; }
.order-head h1 { margin: 0 0 8px; font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; }
.order-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background: var(--brand-wash);
	color: var(--brand-dark);
	font-size: 13px;
	font-weight: 700;
}
.order-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.order-table th {
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink-soft);
	border-bottom: 1px solid var(--line);
	padding: 0 0 10px;
}
.order-table td { padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.order-table td:last-child, .order-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

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

/* ---------------------------------------------------------------- footer */

.site-footer {
	margin-top: 80px;
	background: #ffffff;
	border-top: 1px solid var(--line);
	padding: 56px 0 40px;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr repeat(auto-fit, minmax(180px, 1fr));
	gap: 40px;
	margin-bottom: 48px;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

.footer-brand h3 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 800;
	color: var(--ink);
}
.footer-brand p {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--ink-soft);
	line-height: 1.6;
	max-width: 38ch;
}
.footer-col h4 {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink);
}
.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	font-size: 14px;
}
.footer-links a { color: var(--ink-soft); transition: color 0.15s ease; }
.footer-links a:hover { color: var(--brand-dark); }

.footer-bottom {
	border-top: 1px solid var(--line-light);
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--ink-light);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 640px) {
	.wrap { padding: 0 16px; }
	.header-inner { min-height: 60px; }
	.hero-inner { padding: 32px 20px; }
	.hero-actions { flex-direction: column; align-items: stretch; }
	.button { width: 100%; }
	.quad-cards-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.card { padding: 10px; }
	.quad-card { padding: 10px; }
	.warehouse-banner { padding: 28px 20px; }
}

@media (max-width: 420px) {
	.quad-cards-grid { grid-template-columns: 1fr; }
	.grid { grid-template-columns: 1fr; }
}

/* Arrival date, shown only on /new — everywhere else the date is noise. */
.card-arrived {
	margin: 0 0 6px;
	font-size: 12px;
	color: var(--brand-deep);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- checkout order summary items */

.summary-items {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.summary-item {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--line-light);
}
.summary-item:last-child { border-bottom: 0; }

.summary-item-media { position: relative; display: block; width: 52px; height: 52px; }
.summary-item-media img {
	width: 52px; height: 52px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	/* No multiply blend here. The summary sits on a tinted panel and these
	   photos are shot on white; multiplying would stain every product with the
	   panel colour on the one screen where the goods must look right. */
}

/* Overlapping the corner rather than sitting in the text: the quantity has to
   be attached to the picture it counts, or a two-line summary reads as two
   separate claims. */
.summary-item-qty {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--brand-deep);
	color: #fff;
	border: 2px solid var(--bg-soft);
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.summary-item-name {
	font-size: 13px;
	line-height: 1.35;
	color: var(--ink);
	/* Two lines: enough for a bulk product name to be recognisable, short
	   enough that a five-line cart does not push the pay button off-screen. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.summary-item-price {
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}