/**
 * TCW Shop — Frontend Styles (The Creative Way Family brand)
 *
 * Palette:
 *   Forest green:     #3C533F  (headings, primary buttons)
 *   Green hover:      #2E4030
 *   Dark teal:        #244353  (header/nav on main site)
 *   Warm gold:        #D5A04B  (accent, highlights, badges)
 *   Gold hover:       #C08E3A
 *   Dark slate:       #3A4F66  (body text)
 *   Dark navy:        #192A3D  (strong text)
 *   Light bg:         #FAFBFC
 *   Warm white:       #F7F6F3
 *   Border:           #E8E6E1
 *
 * Typography:
 *   Headings: Overpass, system-ui, sans-serif
 *   Body:     Lato, system-ui, sans-serif
 */

/* ── Product Grid ──────────────────────────────────────────── */

.tcw-products {
	font-family: Lato, system-ui, -apple-system, sans-serif;
}

.tcw-grid {
	display: grid;
	gap: 28px;
	margin: 32px 0;
}

.tcw-grid--1 { grid-template-columns: 1fr; max-width: 400px; }
.tcw-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tcw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tcw-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
	.tcw-grid--3,
	.tcw-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.tcw-grid--2,
	.tcw-grid--3,
	.tcw-grid--4 { grid-template-columns: 1fr; }
}

/* ── Product Card ──────────────────────────────────────────── */

.tcw-product-card {
	background: #fff;
	border: 1px solid #E8E6E1;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s, transform 0.2s;
}

.tcw-product-card:hover {
	box-shadow: 0 6px 20px rgba(36, 67, 83, 0.1);
	transform: translateY(-2px);
}

.tcw-card-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #F7F6F3;
}

.tcw-card-thumb .tcw-card-img,
.tcw-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s;
}

.tcw-product-card:hover .tcw-card-img,
.tcw-product-card:hover .tcw-card-thumb img {
	transform: scale(1.04);
}

.tcw-card-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.tcw-card-category {
	font-family: Overpass, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #D5A04B;
	margin-bottom: 6px;
}

.tcw-card-title {
	font-family: Overpass, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
	color: #3C533F;
}

.tcw-card-title a {
	color: inherit;
	text-decoration: none;
}

.tcw-card-title a:hover {
	color: #2E4030;
}

.tcw-card-excerpt {
	font-size: 14px;
	line-height: 1.6;
	color: #3A4F66;
	margin: 0 0 16px;
	flex: 1;
}

.tcw-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #E8E6E1;
}

.tcw-card-price {
	font-family: Overpass, system-ui, sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: #192A3D;
}

.tcw-no-products {
	text-align: center;
	color: #3A4F66;
	padding: 40px 20px;
	font-size: 15px;
}

/* ── Buttons ───────────────────────────────────────────────── */

.tcw-btn {
	font-family: Overpass, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	padding: 10px 22px;
	border: 2px solid #3C533F;
	border-radius: 6px;
	background: transparent;
	color: #3C533F;
	cursor: pointer;
	transition: all 0.15s;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	line-height: 1.4;
}

.tcw-btn:hover {
	background: #3C533F;
	color: #fff;
}

.tcw-btn--primary {
	background: #3C533F;
	color: #fff;
	border-color: #3C533F;
}

.tcw-btn--primary:hover {
	background: #2E4030;
	border-color: #2E4030;
}

.tcw-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* ── Cart Page ─────────────────────────────────────────────── */

.tcw-cart {
	max-width: 560px;
	margin: 0 auto;
	padding: 32px 0;
	font-family: Lato, system-ui, sans-serif;
}

.tcw-cart label {
	display: block;
	font-family: Overpass, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #3A4F66;
	margin: 20px 0 6px;
}

.tcw-cart input[type="text"],
.tcw-cart input[type="email"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #E8E6E1;
	border-radius: 6px;
	font-size: 14px;
	font-family: Lato, system-ui, sans-serif;
	color: #192A3D;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.tcw-cart input:focus {
	border-color: #3C533F;
	outline: none;
	box-shadow: 0 0 0 2px rgba(60, 83, 63, 0.15);
}

/* Cart item list */
.tcw-cart-items {
	padding: 0;
	margin: 0;
}

.tcw-cart-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid #E8E6E1;
	color: #192A3D;
}

.tcw-cart-item-thumb {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
	background: #F7F6F3;
}

.tcw-cart-item-thumb--empty {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	background: #F7F6F3;
	flex-shrink: 0;
}

.tcw-cart-item-details {
	flex: 1;
	min-width: 0;
}

.tcw-cart-item-name {
	display: block;
	font-family: Overpass, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #192A3D;
	margin-bottom: 2px;
}

.tcw-cart-item-desc {
	display: block;
	font-size: 13px;
	color: #3A4F66;
	line-height: 1.4;
	margin-bottom: 4px;
}

.tcw-cart-item-price {
	display: block;
	font-family: Overpass, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #3C533F;
}

.tcw-cart-item-qty {
	color: #3A4F66;
	font-size: 14px;
	white-space: nowrap;
}

.tcw-cart-item-remove {
	background: none;
	border: none;
	color: #b32d2e;
	font-size: 18px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	line-height: 1;
	flex-shrink: 0;
}

.tcw-cart-item-remove:hover {
	background: rgba(179, 45, 46, 0.08);
}

.tcw-cart-total {
	text-align: right;
	font-family: Overpass, system-ui, sans-serif;
	font-size: 18px;
	color: #192A3D;
	padding: 16px 0 0;
	margin-top: 4px;
}

.tcw-cart-empty {
	text-align: center;
	color: #3A4F66;
	padding: 24px 0;
	font-size: 15px;
}

.tcw-cart .tcw-btn--primary {
	width: 100%;
	margin-top: 20px;
	padding: 14px;
	font-size: 16px;
}

/* ── Floating Cart Icon ───────────────────────────────────── */

.tcw-floating-cart {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 56px;
	height: 56px;
	background: #3C533F;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(36, 67, 83, 0.25);
	text-decoration: none;
	z-index: 9999;
	transition: background 0.15s, transform 0.15s;
}

.tcw-floating-cart:hover {
	background: #2E4030;
	transform: scale(1.08);
}

.tcw-floating-count {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #D5A04B;
	color: #fff;
	font-family: Overpass, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	min-width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	border-radius: 11px;
	padding: 0 6px;
}

@media (max-width: 480px) {
	.tcw-cart-item-thumb,
	.tcw-cart-item-thumb--empty { width: 48px; height: 48px; }
	.tcw-floating-cart { bottom: 16px; right: 16px; width: 48px; height: 48px; }
}

/* ── Quantity Controls ─────────────────────────────────────── */

.tcw-cart-item-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.tcw-qty-btn {
	width: 28px;
	height: 28px;
	border: 1px solid #E8E6E1;
	border-radius: 4px;
	background: #fff;
	color: #192A3D;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: background 0.15s, border-color 0.15s;
	padding: 0;
}

.tcw-qty-btn:hover {
	background: #F7F6F3;
	border-color: #3C533F;
}

.tcw-cart-item-qty {
	font-family: Overpass, system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #192A3D;
	min-width: 20px;
	text-align: center;
}

/* ── Toast Notification ───────────────────────────────────── */

.tcw-toast {
	position: fixed;
	bottom: 90px;
	right: 24px;
	background: #3C533F;
	color: #fff;
	font-family: Overpass, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(36, 67, 83, 0.25);
	z-index: 10000;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
}

.tcw-toast--visible {
	opacity: 1;
	transform: translateY(0);
}

/* ── Cart Icon Bounce ─────────────────────────────────────── */

@keyframes tcw-bounce {
	0%, 100% { transform: scale(1); }
	30% { transform: scale(1.25); }
	50% { transform: scale(0.95); }
	70% { transform: scale(1.1); }
}

.tcw-floating-cart.tcw-bounce {
	animation: tcw-bounce 0.5s ease;
}

@media (max-width: 480px) {
	.tcw-toast { bottom: 74px; right: 16px; font-size: 13px; }
}

/* ── Status Messages ───────────────────────────────────────── */

.tcw-msg {
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 14px;
	margin: 12px 0;
}

.tcw-msg--ok {
	background: rgba(60, 83, 63, 0.08);
	color: #3C533F;
	border: 1px solid rgba(60, 83, 63, 0.2);
}

.tcw-msg--error {
	background: rgba(179, 45, 46, 0.06);
	color: #b32d2e;
	border: 1px solid rgba(179, 45, 46, 0.15);
}

/* ── Order Complete ────────────────────────────────────────── */

.tcw-thanks {
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	padding: 48px 20px;
	font-family: Lato, system-ui, sans-serif;
}

.tcw-thanks h2 {
	font-family: Overpass, system-ui, sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: #3C533F;
	margin: 0 0 12px;
}

.tcw-thanks p {
	font-size: 16px;
	line-height: 1.7;
	color: #3A4F66;
}

/* ── Resend Page ───────────────────────────────────────────── */

.tcw-resend {
	max-width: 420px;
	margin: 0 auto;
	padding: 40px 0;
	font-family: Lato, system-ui, sans-serif;
	text-align: center;
}

.tcw-resend input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #E8E6E1;
	border-radius: 6px;
	font-size: 15px;
	font-family: Lato, system-ui, sans-serif;
	color: #192A3D;
	margin-bottom: 12px;
	box-sizing: border-box;
}

.tcw-resend input:focus {
	border-color: #3C533F;
	outline: none;
	box-shadow: 0 0 0 2px rgba(60, 83, 63, 0.15);
}

.tcw-resend .tcw-btn {
	width: 100%;
	padding: 12px;
}

/* ── Cart Count Badge ──────────────────────────────────────── */

[data-tcw-count] {
	font-family: Overpass, system-ui, sans-serif;
	font-weight: 700;
	font-size: 12px;
	background: #D5A04B;
	color: #fff;
	min-width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	border-radius: 10px;
	display: inline-block;
	padding: 0 5px;
}

[data-tcw-count]:empty,
[data-tcw-count][data-tcw-count="0"] {
	display: none;
}

/* ── Cart page ([tcw_cart]) ─────────────────────────────────── */

.tcw-cart-page {
	max-width: 640px;
	margin: 0 auto;
	padding: 20px 0;
}

.tcw-cart-list:empty::after {
	content: 'Your cart is empty.';
	display: block;
	text-align: center;
	color: #3A4F66;
	padding: 32px 0;
	font-size: 15px;
}

.tcw-cart-actions {
	display: flex;
	gap: 10px;
	margin-top: 16px;
}

.tcw-coupon-input {
	flex: 1;
	border: 1px solid #E8E6E1;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 14px;
}

.tcw-btn-checkout {
	background: #3C533F;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 28px;
	font-family: Overpass, system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s;
}

.tcw-btn-checkout:hover { background: #2E4030; }

.tcw-cart-divider {
	border: none;
	border-top: 1px solid #E8E6E1;
	margin: 32px 0;
}

.tcw-resend-section h3 {
	font-family: Overpass, system-ui, sans-serif;
	font-size: 16px;
	color: #192A3D;
	margin: 0 0 6px;
}

.tcw-resend-section p {
	color: #3A4F66;
	font-size: 14px;
	margin: 0 0 12px;
}

.tcw-resend-form {
	display: flex;
	gap: 10px;
}

.tcw-resend-input {
	flex: 1;
	border: 1px solid #E8E6E1;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 14px;
}

.tcw-btn-resend {
	background: #D5A04B;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-family: Overpass, system-ui, sans-serif;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.15s;
}

.tcw-btn-resend:hover { background: #C08E3A; }

/* ── Single product page ────────────────────────────────────── */

.tcw-single-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
	max-width: 1100px;
	margin: 32px auto 40px;
	padding: 0 24px 32px;
	border-bottom: 2px solid #E8E6E1;
}

.tcw-single-hero-img {
	border-radius: 12px;
	overflow: hidden;
	background: #F7F6F3;
	max-height: 360px;
	max-width: 400px;
}

.tcw-single-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	max-height: 360px;
}

.tcw-single-title {
	font-family: Overpass, system-ui, sans-serif;
	font-size: 28px;
	font-weight: 800;
	color: #192A3D;
	margin: 0 0 4px;
	line-height: 1.2;
}

.tcw-single-excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: #3A4F66;
	margin: 0;
}

.tcw-single-hero-details {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 8px;
}

.tcw-single-category {
	font-family: Overpass, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #D5A04B;
}

.tcw-single-price {
	font-family: Overpass, system-ui, sans-serif;
	font-size: 32px;
	font-weight: 800;
	color: #192A3D;
}

.tcw-single-buttons {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.tcw-single-buttons .tcw-btn--primary {
	padding: 14px 32px;
	font-size: 16px;
}

.tcw-single-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: #3A4F66;
	padding-top: 8px;
	border-top: 1px solid #E8E6E1;
}

.tcw-single-meta span::before {
	content: '✓ ';
	color: #3C533F;
	font-weight: 700;
}

@media (max-width: 768px) {
	.tcw-single-hero {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.tcw-single-hero-img {
		max-width: 400px;
	}
}