/*
Theme Name: Tiny Wonders
Theme URI: https://trytinywonders.com
Description: A warm, gender-neutral child theme for the Tiny Wonders baby store, built on Storefront. Soft pastels, rounded shapes and friendly typography.
Author: Tiny Wonders
Version: 0.2.1
Template: storefront
Text Domain: tiny-wonders
*/

/* ============================================================
   Brand tokens
   ============================================================ */
:root {
	--tw-cream:      #FBF7F0;
	--tw-surface:    #FFFFFF;
	--tw-sage:       #7CA894;
	--tw-sage-dark:  #5E8B77;
	--tw-blush:      #F4C9C2;
	--tw-blush-soft: #FBEAE7;
	--tw-mustard:    #E6B45A;
	--tw-ink:        #3B3A36;
	--tw-muted:      #7A776F;
	--tw-line:       #ECE6DC;
	--tw-radius:     16px;
	--tw-radius-sm:  10px;
	--tw-shadow:     0 8px 24px rgba(59, 58, 54, 0.08);
	--tw-shadow-sm:  0 2px 8px rgba(59, 58, 54, 0.06);
}

/* ============================================================
   Base
   ============================================================ */
body {
	background-color: var(--tw-cream);
	color: var(--tw-ink);
	font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 1.02em;
	line-height: 1.7;
}

h1, h2, h3, h4, .site-title, .page-title, .entry-title {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	color: var(--tw-ink);
	letter-spacing: -0.01em;
}

a {
	color: var(--tw-sage-dark);
}
a:hover { color: var(--tw-ink); }

/* ============================================================
   Announcement bar
   ============================================================ */
.tw-announcement {
	background: var(--tw-sage);
	color: #fff;
	text-align: center;
	font-size: 0.86em;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.55em 1em;
	display: flex;
	gap: 0.75em;
	justify-content: center;
	flex-wrap: wrap;
}
.tw-announcement .tw-sep { opacity: 0.55; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
	background-color: var(--tw-surface) !important;
	border-bottom: 1px solid var(--tw-line);
	box-shadow: var(--tw-shadow-sm);
	padding-top: 1.4em;
	padding-bottom: 1.4em;
}
.site-branding .site-title a,
.site-title a {
	color: var(--tw-ink) !important;
	font-weight: 600;
	font-size: 1.15em;
}
.storefront-primary-navigation {
	background-color: var(--tw-surface) !important;
	border-bottom: 1px solid var(--tw-line);
}
.main-navigation ul li a {
	color: var(--tw-ink) !important;
	font-weight: 600;
}
.main-navigation ul li a:hover { color: var(--tw-sage-dark) !important; }

/* ============================================================
   Buttons
   ============================================================ */
button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt {
	background-color: var(--tw-sage) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.01em;
	padding: 0.7em 1.6em !important;
	box-shadow: var(--tw-shadow-sm);
	transition: transform 0.12s ease, background-color 0.2s ease;
}
button:hover, .button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
	background-color: var(--tw-sage-dark) !important;
	transform: translateY(-1px);
	color: #fff !important;
}

/* Secondary / outline buttons */
.woocommerce a.added_to_cart {
	color: var(--tw-sage-dark) !important;
	font-weight: 700;
}

/* ============================================================
   Product cards
   ============================================================ */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--tw-surface);
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	padding: 1em 1em 1.4em !important;
	box-shadow: var(--tw-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.2s ease;
	text-align: center;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: var(--tw-shadow);
}
.woocommerce ul.products li.product img {
	border-radius: var(--tw-radius-sm);
	margin-bottom: 0.9em;
}
.woocommerce ul.products li.product .price {
	color: var(--tw-ink);
	font-weight: 700;
}
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--tw-mustard) !important;
	color: var(--tw-ink) !important;
	border-radius: 999px;
	font-weight: 700;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 0.4em 0.75em;
}

/* ============================================================
   Single product
   ============================================================ */
.single-product div.product .product_title {
	font-size: 2.1em;
}
.single-product div.product .price {
	color: var(--tw-sage-dark);
	font-weight: 700;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
	border-radius: var(--tw-radius);
	border-color: var(--tw-line);
}

/* ============================================================
   Cards, notices, forms
   ============================================================ */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--tw-sage) !important;
	border-radius: var(--tw-radius-sm);
	background: var(--tw-blush-soft);
}
.woocommerce-message::before { color: var(--tw-sage) !important; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], textarea, select {
	border-radius: var(--tw-radius-sm) !important;
	border: 1px solid var(--tw-line) !important;
	background: var(--tw-surface);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background-color: var(--tw-ink) !important;
	color: #EFEBE3;
}
.site-footer a { color: var(--tw-blush) !important; }
.site-footer .site-info {
	background-color: var(--tw-ink) !important;
	color: #C9C4BA;
	text-align: center;
}
/* ============================================================
   Header: logo + sticky
   ============================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
}
.tw-branding { margin: 0 !important; }
.tw-logo-link { display: inline-block; line-height: 0; }
.tw-logo {
	height: 64px;
	width: auto;
	max-width: 100%;
	display: block;
	mix-blend-mode: multiply; /* blends the logo's near-white background into the header */
}
@media (max-width: 768px) {
	.tw-logo { height: 50px; }
}

/* ============================================================
   Footer: four-column professional layout
   ============================================================ */
.tw-footer {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 2.4em;
	max-width: 1100px;
	margin: 0 auto 2.4em;
	padding: 1em 0 0;
	text-align: left;
}
.tw-footer-col h4 {
	font-family: 'Fraunces', Georgia, serif;
	color: #fff;
	font-size: 1.1em;
	margin: 0 0 0.9em;
}
.tw-footer-col ul { list-style: none; margin: 0; padding: 0; }
.tw-footer-col li { margin-bottom: 0.55em; }
.tw-footer-col a {
	color: #D7D2C8 !important;
	font-weight: 600;
	font-size: 0.92em;
	text-decoration: none;
	transition: color 0.15s ease;
}
.tw-footer-col a:hover { color: var(--tw-blush) !important; }
.tw-footer-brand p {
	color: #C9C4BA;
	font-size: 0.92em;
	line-height: 1.6;
	margin: 0 0 1em;
	max-width: 30em;
}
.tw-footer-logo {
	height: 74px;
	width: auto;
	margin-bottom: 0.6em;
	border-radius: 12px;
	background: #fff;
	padding: 4px 8px;
}
.tw-social { display: flex; gap: 1em; flex-wrap: wrap; }
.tw-social a { font-size: 0.88em; }
.tw-footer-note { color: #A7A399 !important; font-size: 0.85em; margin-top: 0.8em; }
@media (max-width: 900px) {
	.tw-footer { grid-template-columns: 1fr 1fr; gap: 1.8em; }
}
@media (max-width: 520px) {
	.tw-footer { grid-template-columns: 1fr; text-align: center; }
	.tw-social { justify-content: center; }
}

/* ============================================================
   Homepage hero (used by the front page content)
   ============================================================ */
.tw-hero {
	background: linear-gradient(135deg, var(--tw-blush-soft) 0%, var(--tw-cream) 55%, #EAF1EC 100%);
	border-radius: 24px;
	padding: 3.5em 2em;
	text-align: center;
	margin-bottom: 2.5em;
	border: 1px solid var(--tw-line);
}
.tw-hero h2 {
	font-size: 2.6em;
	margin-bottom: 0.3em;
	line-height: 1.1;
}
.tw-hero p {
	font-size: 1.15em;
	color: var(--tw-muted);
	max-width: 34em;
	margin: 0 auto 1.5em;
}
.tw-hero .button { font-size: 1.05em; }

.tw-badges {
	display: flex;
	gap: 1.2em;
	justify-content: center;
	flex-wrap: wrap;
	margin: 2.5em 0;
}
.tw-badge {
	background: var(--tw-surface);
	border: 1px solid var(--tw-line);
	border-radius: var(--tw-radius);
	padding: 1.2em 1.4em;
	box-shadow: var(--tw-shadow-sm);
	flex: 1 1 200px;
	max-width: 240px;
	text-align: center;
}
.tw-badge .tw-emoji { font-size: 1.8em; display: block; margin-bottom: 0.3em; }
.tw-badge strong { display: block; margin-bottom: 0.2em; }
.tw-badge span { color: var(--tw-muted); font-size: 0.92em; }