/*
Theme Name: Lil Sweet Treat
Description: Small-batch village ice cream, monthly collection at Ruddington Village Market.
Version: 0.3.0
Text Domain: lil-sweet-treat
*/

:root {
	--lst-bg: #F5F9FA;
	--lst-header-band: #EAF1F3;
	--lst-navy: #1C2340;
	--lst-periwinkle: #A3B3DC;
	--lst-espresso: #4A2F1D;
	--lst-taupe: #8A7863;
	--lst-white: #FFFFFF;
	--lst-cherry: #C8102E;
	--lst-border: #D8CFC3;

	--lst-font-serif: 'Fraunces', Georgia, serif;
	--lst-font-script: 'Alex Brush', 'Brush Script MT', cursive;
	--lst-font-sans: 'Outfit', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
	background: var(--lst-bg);
	color: var(--lst-navy);
	font-family: var(--lst-font-sans);
	margin: 0;
	line-height: 1.6;
}

h1, h2, h3 {
	font-family: var(--lst-font-serif);
	color: var(--lst-navy);
	margin: 0 0 0.4em;
}

a {
	color: var(--lst-espresso);
	text-decoration: none;
}

.lst-script {
	font-family: var(--lst-font-script);
	color: var(--lst-periwinkle);
}

.lst-eyebrow {
	font-family: var(--lst-font-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lst-taupe);
}

.lst-container {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Buttons */
.lst-btn {
	display: inline-block;
	font-family: var(--lst-font-sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 13px 30px;
	border-radius: 24px;
	border: 1px solid transparent;
	cursor: pointer;
}
.lst-btn--primary {
	background: var(--lst-espresso);
	color: var(--lst-white);
}
.lst-btn--secondary {
	background: var(--lst-white);
	color: var(--lst-espresso);
	border-color: var(--lst-border);
}

/* Header */
.lst-header {
	background: var(--lst-header-band);
	padding: 16px 0;
}
.lst-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 24px;
	flex-wrap: wrap;
	gap: 12px;
}
.lst-nav {
	display: flex;
	gap: 16px;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lst-espresso);
	list-style: none;
	margin: 0;
	padding: 0;
}
.lst-nav a { color: var(--lst-espresso); }
.lst-logo {
	font-family: var(--lst-font-script);
	font-size: 34px;
	color: var(--lst-cherry);
	text-align: center;
	line-height: 1;
}
.lst-header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}
.lst-social {
	display: flex;
	gap: 9px;
	padding-left: 14px;
	border-left: 1px solid var(--lst-border);
}
.lst-social a { color: var(--lst-espresso); display: inline-flex; align-items: center; }
.lst-social a svg { display: block; }

/* Status badge */
.lst-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lst-taupe);
}
.lst-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--lst-border);
	display: inline-block;
}
.lst-status-badge.is-open .lst-status-dot { background: var(--lst-cherry); }
.lst-status-badge.is-open { color: var(--lst-cherry); }

/* Hero */
.lst-hero {
	padding: 44px 24px 32px;
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
}
.lst-hero h1 { font-size: 38px; line-height: 1.25; }
.lst-hero p.lst-hero-sub {
	color: var(--lst-taupe);
	font-size: 14px;
	max-width: 520px;
	margin: 0 auto 26px;
}
.lst-hero-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Batch log */
.lst-batch-log-section {
	background: var(--lst-white);
	padding: 28px 24px;
}
.lst-batch-log { display: flex; flex-direction: column; gap: 6px; max-width: 700px; margin: 0 auto; }
.lst-batch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-left: 2px solid var(--lst-border);
	background: var(--lst-bg);
	font-size: 13px;
}
.lst-batch-row.is-open { border-left-color: var(--lst-cherry); }
.lst-batch-status {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lst-taupe);
}
.lst-batch-row.is-open .lst-batch-status { color: var(--lst-cherry); }

/* Subscriber box */
.lst-sub-box {
	padding: 28px 24px;
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}
.lst-sub-box-eyebrow {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lst-taupe);
}

/* Collection footer strip */
.lst-collection-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	background: var(--lst-header-band);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--lst-espresso);
	max-width: 1040px;
	margin: 0 auto;
	flex-wrap: wrap;
	gap: 8px;
}

/* Closed-window notice */
.lst-window-closed {
	background: var(--lst-header-band);
	border-left: 3px solid var(--lst-cherry);
	padding: 12px 16px;
	font-size: 13px;
	color: var(--lst-espresso);
}

/* Waitlist */
.lst-waitlist-block { margin-top: 8px; }
.lst-waitlist-open,
.lst-waitlist-submit {
	background: var(--lst-espresso);
	color: var(--lst-white);
	border: none;
	font-family: var(--lst-font-sans);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 14px 20px 16px 18px;
	cursor: pointer;
}
.lst-waitlist-form { display: flex; gap: 6px; }
.lst-waitlist-email {
	flex: 1;
	font-size: 11px;
	padding: 8px 10px;
	border: 1px solid var(--lst-border);
	border-radius: 6px;
}
.lst-waitlist-done { font-size: 11px; color: var(--lst-taupe); }

/* Blog */
.lst-blog-list { max-width: 700px; margin: 0 auto; padding: 28px 24px; }
.lst-blog-entry { padding: 18px 0; border-bottom: 1px solid var(--lst-border); }
.lst-blog-entry h2 { font-size: 22px; }
.lst-blog-entry .lst-blog-meta { color: var(--lst-taupe); font-size: 12px; }

/* Product page */
.lst-product-breadcrumb { font-size: 11px; color: var(--lst-taupe); margin-bottom: 8px; }
.lst-product-breadcrumb a { color: var(--lst-taupe); }
.lst-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 24px; }
.lst-product-photo { position: relative; }
.lst-product-photo-frame { width: 100%; display: block; border-radius: 0 0 0 0; overflow: hidden; }
.lst-product-photo-frame img { width: 100%; height: auto; display: block; clip-path: polygon(0 0,100% 0,100% 92%,95% 100%,90% 92%,85% 100%,80% 92%,75% 100%,70% 92%,65% 100%,60% 92%,55% 100%,50% 92%,45% 100%,40% 92%,35% 100%,30% 92%,25% 100%,20% 92%,15% 100%,10% 92%,5% 100%,0 92%); }
.lst-stamp { position: absolute; bottom: -14px; left: -14px; }
.lst-product-title { font-size: 26px; margin: 0 0 4px; line-height: 1.25; }
.lst-product-underline { display: block; margin: -2px 0 12px; }
.lst-product-tags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.lst-tag {
	background: #F3D6D6; color: #7A1220; font-family: var(--lst-font-sans);
	font-size: 10px; padding: 4px 11px; border-radius: 14px 4px 14px 4px;
	display: inline-block; border: 1px solid #E0B8B8;
}
.lst-product-price { font-size: 18px; color: var(--lst-espresso); font-weight: 600; margin-bottom: 14px; }
.lst-product-price del { color: var(--lst-taupe); font-weight: 400; }
.lst-product-desc { font-size: 13px; color: var(--lst-taupe); line-height: 1.6; margin-bottom: 16px; }
.lst-allergens-box {
	background: var(--lst-white); border: 1.5px dashed rgba(74,47,29,0.4); border-radius: 2px;
	padding: 12px 14px; margin-bottom: 20px; font-size: 11.5px; color: var(--lst-espresso);
}
.lst-allergens-box strong { display: block; margin-bottom: 4px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lst-taupe); }
.lst-product-cart .quantity { display: inline-block; margin-right: 10px; }
.lst-product-cart input.qty {
	border: 1.5px solid var(--lst-espresso); border-radius: 18px 20px 16px 22px;
	padding: 9px 14px; width: 60px; font-family: var(--lst-font-sans);
}
.lst-product-cart button.single_add_to_cart_button {
	background: var(--lst-espresso) !important; color: var(--lst-white) !important; border: none !important;
	font-family: var(--lst-font-sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
	padding: 13px 30px !important; border-radius: 22px 26px 20px 24px !important;
}
.lst-stock-line { font-family: var(--lst-font-script); font-size: 15px; color: var(--lst-cherry); transform: rotate(-1deg); display: inline-block; margin-top: 8px; }
.lst-divider { display: block; padding: 0 24px; }

.lst-related-section { padding: 14px 24px 24px; background: var(--lst-white); }
.lst-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.lst-related-card { background: var(--lst-bg); border-radius: 6px; overflow: hidden; border: 1px solid var(--lst-border); }
.lst-related-photo { display: block; aspect-ratio: 1.5; background: #EFEADE; overflow: hidden; }
.lst-related-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lst-related-body { padding: 10px 12px; }
.lst-related-name { font-size: 12px; color: var(--lst-navy); margin-bottom: 8px; font-family: var(--lst-font-sans); }
.lst-related-body .button {
	width: 100%; background: var(--lst-espresso); color: var(--lst-white) !important; border: none;
	font-family: var(--lst-font-sans); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 8px; border-radius: 16px 18px 14px 20px; text-align: center; display: block;
}

/* About + timeline */
.lst-about-section { padding: 24px; background: var(--lst-header-band); }
.lst-about-copy { font-size: 12.5px; color: var(--lst-taupe); max-width: 480px; margin-bottom: 20px; line-height: 1.6; }
.lst-timeline { display: flex; gap: 16px; }
.lst-timeline-spine { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.lst-timeline-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lst-border); flex-shrink: 0; }
.lst-timeline-dot.is-active { background: var(--lst-cherry); }
.lst-timeline-line { width: 1.5px; flex: 1; background: var(--lst-border); margin: 2px 0; }
.lst-timeline-steps { font-family: var(--lst-font-sans); font-size: 12.5px; }
.lst-timeline-step { margin-bottom: 16px; }
.lst-timeline-step strong { color: var(--lst-navy); display: block; font-size: 12px; }
.lst-timeline-step span { color: var(--lst-taupe); }
.lst-timeline-step.is-muted strong,
.lst-timeline-step.is-muted span { color: #B8A98F; }

@media (max-width: 640px) {
	.lst-header-inner { flex-direction: column; }
	.lst-hero h1 { font-size: 28px; }
	.lst-collection-info { flex-direction: column; align-items: flex-start; }
}