/*
Theme Name: Tiny Twin Studio
Theme URI: https://tinytwinstudio.co.uk
Description: Child theme of Storefront for Tiny Twin Studio - custom 3D printed pet figurines. Bold coral/navy palette with a custom rounded wordmark, modern DTC-brand feel.
Author: Tiny Twin Studio
Template: storefront
Version: 2.2.0
Text Domain: tinytwin-child
*/

/* ==========================================================================
   1. Google Fonts - Poppins (rounded geometric sans, closest web-safe match
   to the custom wordmark) for headings, Inter for body
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   2. Colour variables
   ========================================================================== */
:root {
	--tt-coral: #E74A35;
	--tt-coral-dark: #C63A28;
	--tt-navy: #24333F;
	--tt-navy-light: #4A5A68;
	--tt-cream: #FFFFFF;
	--tt-charcoal: #24333F;
}

/* ==========================================================================
   3. Base typography
   ========================================================================== */
body {
	background-color: var(--tt-cream);
	color: var(--tt-charcoal);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.storefront-product-section .section-title {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight: 600;
	color: var(--tt-charcoal);
	letter-spacing: -0.01em;
}

a {
	color: var(--tt-coral);
}

a:hover,
a:focus {
	color: var(--tt-coral-dark);
}

/* ==========================================================================
   4. Header / branding
   ========================================================================== */
#masthead,
.site-header {
	background-color: var(--tt-cream);
	border-bottom: 2px solid var(--tt-navy);
}

.site-branding .site-title a {
	font-family: 'Poppins', sans-serif;
	font-size: 1.6em;
	font-weight: 700;
	color: var(--tt-coral);
}

.site-branding .site-description {
	font-family: 'Inter', sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-size: 0.7em;
	color: var(--tt-navy);
	font-weight: 600;
}

.site-header .custom-logo-link img {
	max-height: 56px;
	width: auto;
}

/* Top bar / handheld nav */
.storefront-primary-navigation,
#masthead .site-header-cart {
	background-color: var(--tt-cream);
}

.main-navigation ul li a {
	color: var(--tt-navy);
	font-weight: 600;
	font-family: 'Inter', sans-serif;
}

.main-navigation ul li a:hover {
	color: var(--tt-coral);
}

/* ==========================================================================
   5. Buttons - bold, chunky, rounded (pill-ish), flat colour
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background-color: var(--tt-coral);
	color: #fff;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	letter-spacing: 0.01em;
	border: none;
	padding: 0.8em 1.6em;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--tt-coral-dark);
	color: #fff;
	transform: translateY(-1px);
}

/* Secondary / added-to-cart style buttons use navy */
.woocommerce a.added_to_cart,
.woocommerce span.onsale {
	background-color: var(--tt-navy);
	color: #fff;
	border-radius: 999px;
}

/* ==========================================================================
   6. Product elements
   ========================================================================== */
.woocommerce ul.products li.product .price {
	color: var(--tt-coral-dark);
	font-weight: 700;
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	color: var(--tt-charcoal);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--tt-coral-dark);
}

.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background-color: var(--tt-coral);
	color: #fff;
	border-radius: 999px;
}

/* Star ratings stay recognisable, tinted coral */
.woocommerce .star-rating span::before,
.woocommerce-page .star-rating span::before {
	color: var(--tt-coral);
}

/* ==========================================================================
   7. Sections / homepage widgets
   ========================================================================== */
.storefront-product-section {
	background-color: var(--tt-cream);
}

.widget-title,
.woocommerce-loop-product__title {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
}

hr,
.storefront-product-section + .storefront-product-section {
	border-color: var(--tt-navy-light);
}

/* ==========================================================================
   8. Footer - solid navy block, flat colour like the hero banners
   ========================================================================== */
#colophon,
.site-footer {
	background-color: var(--tt-navy);
	color: var(--tt-cream);
}

#colophon a,
.site-footer a {
	color: var(--tt-cream);
}

#colophon a:hover,
.site-footer a:hover {
	color: var(--tt-coral);
}

.site-footer .widget-title {
	color: #fff;
	font-family: 'Poppins', sans-serif;
}

/* ==========================================================================
   9. Forms / checkout fields
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
	border: 2px solid var(--tt-navy-light);
	border-radius: 8px;
	background-color: #fff;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	border-color: var(--tt-coral);
	outline: none;
}

/* ==========================================================================
   10. Homepage sections (front-page.php)
   ========================================================================== */

/* Hero */
.tt-hero {
	background-color: var(--tt-cream);
	background-size: cover;
	background-position: center;
	padding: 5rem 0 4rem;
	text-align: center;
	position: relative;
}

.tt-hero[style*="background-image"] {
	padding: 7rem 0 6rem;
}

.tt-hero[style*="background-image"]::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(36, 51, 63, 0.55);
}

.tt-hero[style*="background-image"] .tt-hero-inner {
	position: relative;
	z-index: 1;
}

.tt-hero[style*="background-image"] h1,
.tt-hero[style*="background-image"] p {
	color: #fff;
}

.tt-hero-inner {
	max-width: 640px;
}

.tt-hero h1 {
	font-size: 2.4em;
	margin-bottom: 0.5em;
}

.tt-hero p {
	font-size: 1.1em;
	color: var(--tt-navy-light);
	margin-bottom: 1.5em;
}

.tt-hero .button {
	font-size: 1.05em;
	padding: 0.9em 2em;
}

/* Trust bar */
.tt-trust-bar {
	background-color: var(--tt-navy);
}

.tt-trust-bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
	padding: 1rem 0;
}

.tt-trust-label {
	color: #fff;
	font-size: 0.9em;
	font-weight: 600;
	font-family: 'Inter', sans-serif;
}

/* Generic section spacing */
.tt-section {
	padding: 3.5rem 0;
}

.tt-section h2 {
	text-align: center;
	margin-bottom: 1.5rem;
	font-size: 1.8em;
}

.tt-section-cta {
	text-align: center;
	margin-top: 1.5rem;
	font-weight: 600;
}

/* Featured products - alternate background to separate sections */
.tt-featured-products {
	background-color: #FAFAFA;
}

/* How it works */
.tt-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.tt-step {
	text-align: center;
}

.tt-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--tt-coral);
	color: #fff;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
	margin-bottom: 0.75rem;
}

.tt-step h3 {
	font-size: 1.1em;
	margin-bottom: 0.4em;
}

.tt-step p {
	color: var(--tt-navy-light);
	font-size: 0.95em;
}

/* Batch availability banner */
.tt-batch-banner {
	background-color: var(--tt-coral);
}

.tt-batch-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.5rem 0;
}

.tt-batch-label {
	display: block;
	color: #fff;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}

.tt-batch-date {
	display: block;
	color: #fff;
	font-size: 1.4em;
	font-weight: 700;
	font-family: 'Poppins', sans-serif;
}

.tt-batch-cutoff {
	color: #fff;
	font-weight: 600;
}

/* Preview teaser */
.tt-preview-teaser {
	background-color: #FAFAFA;
	text-align: center;
}

.tt-preview-teaser p {
	max-width: 480px;
	margin: 0 auto 1.5rem;
	color: var(--tt-navy-light);
}

/* FAQ teaser */
.tt-faq-item {
	max-width: 640px;
	margin: 0 auto 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #eee;
}

.tt-faq-item h3 {
	font-size: 1.05em;
	margin-bottom: 0.3em;
}

.tt-faq-item p {
	color: var(--tt-navy-light);
	font-size: 0.95em;
	margin: 0;
}

@media (max-width: 768px) {
	.tt-steps {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
	.tt-hero {
		padding: 3rem 0 2.5rem;
	}
	.tt-hero h1 {
		font-size: 1.8em;
	}
}