/*
Theme Name: hello-commerce-child
Template: hello-commerce
Text Domain: hello-commerce-child
Description: A clean WooCommerce demonstration child theme with PHP-hook enhancements for Cart and Checkout.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

:root {
	--dthc-ink: #17202b;
	--dthc-slate: #536170;
	--dthc-paper: #f6f4ef;
	--dthc-white: #ffffff;
	--dthc-accent: #cb5837;
	--dthc-accent-dark: #a84328;
	--dthc-mint: #dceae4;
	--dthc-line: #d9d7d0;
}

#site-header { display: none; }

body {
	background: var(--dthc-paper);
	color: var(--dthc-ink);
	font-family: Georgia, "Times New Roman", serif;
}

.dthc-home, .dthc-site-nav {
	max-width: 1240px;
	margin: 0 auto;
	padding-left: 28px;
	padding-right: 28px;
}

.dthc-home {
	background: var(--dthc-paper);
	padding-top: 24px;
	min-height: 100vh;
}

.dthc-home-nav, .dthc-site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding-top: 20px;
	padding-bottom: 20px;
	font-family: "Trebuchet MS", Verdana, sans-serif;
}

.dthc-site-nav {
	background: var(--dthc-paper);
	max-width: none;
	border-bottom: 1px solid var(--dthc-line);
}

.dthc-site-brand {
	color: var(--dthc-ink);
	font-size: 1.2rem;
	font-weight: 900;
	letter-spacing: -.04em;
	text-decoration: none;
}

.dthc-site-links {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.dthc-site-links a, .dthc-footer a {
	color: var(--dthc-slate);
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
}

.dthc-site-links a:hover, .dthc-footer a:hover, .dthc-text-link:hover {
	color: var(--dthc-accent);
}

.dthc-hero {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	align-items: stretch;
	margin: 22px 0 78px;
	border: 1px solid var(--dthc-line);
	background: var(--dthc-white);
}

.dthc-hero-copy {
	padding: clamp(44px, 7vw, 98px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dthc-eyebrow {
	margin: 0 0 15px;
	color: var(--dthc-accent);
	font: 800 .72rem/1 "Trebuchet MS", Verdana, sans-serif;
	letter-spacing: .16em;
}

.dthc-hero h1, .dthc-section-heading h2, .dthc-flow h2 {
	margin: 0;
	color: var(--dthc-ink);
	font-size: clamp(3rem, 6vw, 6.5rem);
	font-weight: 400;
	letter-spacing: -.065em;
	line-height: .91;
}

.dthc-hero-copy > p:not(.dthc-eyebrow), .dthc-flow > p:last-child {
	max-width: 530px;
	margin: 28px 0 0;
	color: var(--dthc-slate);
	font: 400 1.06rem/1.65 "Trebuchet MS", Verdana, sans-serif;
}

.dthc-hero-image {
	min-height: 560px;
	background: var(--dthc-mint);
	overflow: hidden;
}

.dthc-hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(.8);
}

.dthc-actions {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 34px;
}

.dthc-button {
	display: inline-block;
	padding: 14px 22px;
	background: var(--dthc-accent);
	border: 1px solid var(--dthc-accent);
	color: var(--dthc-white) !important;
	font: 800 .82rem/1 "Trebuchet MS", Verdana, sans-serif;
	letter-spacing: .02em;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.dthc-button:hover {
	background: var(--dthc-accent-dark);
	border-color: var(--dthc-accent-dark);
	transform: translateY(-2px);
}

.dthc-text-link {
	color: var(--dthc-ink);
	font: 800 .82rem/1 "Trebuchet MS", Verdana, sans-serif;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.dthc-benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-bottom: 96px;
	background: var(--dthc-line);
	border: 1px solid var(--dthc-line);
}

.dthc-benefits div {
	padding: 28px;
	background: var(--dthc-paper);
}

.dthc-benefits strong {
	display: block;
	margin-bottom: 7px;
	font-size: 1.05rem;
}

.dthc-benefits span {
	color: var(--dthc-slate);
	font: 400 .9rem/1.5 "Trebuchet MS", Verdana, sans-serif;
}

.dthc-featured {
	margin-bottom: 96px;
}

.dthc-section-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 32px;
}

.dthc-section-heading h2 {
	font-size: clamp(2.6rem, 4.5vw, 4.7rem);
}

.dthc-product-card {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	background: var(--dthc-white);
	border: 1px solid var(--dthc-line);
}

.dthc-product-card-image {
	min-height: 520px;
	background: var(--dthc-mint);
}

.dthc-product-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dthc-product-card-copy {
	padding: clamp(36px, 6vw, 75px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dthc-product-card-copy h3 {
	margin: 0;
	font-size: clamp(2.3rem, 4vw, 4.5rem);
	font-weight: 400;
	line-height: .94;
	letter-spacing: -.06em;
}

.dthc-product-card-copy > p:not(.dthc-eyebrow) {
	color: var(--dthc-slate);
	font: 400 1rem/1.65 "Trebuchet MS", Verdana, sans-serif;
}

.dthc-price {
	margin: 14px 0 26px;
	font: 900 1.25rem/1 "Trebuchet MS", Verdana, sans-serif;
}

.dthc-flow {
	margin: 0 0 80px;
	padding: clamp(38px, 6vw, 78px);
	background: var(--dthc-ink);
}

.dthc-flow h2 { color: var(--dthc-white); font-size: clamp(2.4rem, 4vw, 4.3rem); }
.dthc-flow .dthc-eyebrow { color: #eeb28b; }
.dthc-flow > p:last-child { color: #c7d0d3; }

.dthc-footer {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 25px 0 40px;
	border-top: 1px solid var(--dthc-line);
	color: var(--dthc-slate);
	font: 400 .78rem/1.4 "Trebuchet MS", Verdana, sans-serif;
}

.dthc-footer div { display: flex; gap: 16px; }

/* Cart and Checkout hook demonstrations */
.woocommerce .dthc-banner,
.woocommerce .dthc-checkout-intro,
.woocommerce .dthc-trust-row,
.woocommerce .dthc-info-panel,
.woocommerce .dthc-support-strip,
.woocommerce .dthc-security-note,
.woocommerce .dthc-delivery-note,
.woocommerce .dthc-checkout-support {
	box-sizing: border-box;
	font-family: "Trebuchet MS", Verdana, sans-serif;
}

.woocommerce .dthc-banner {
	margin: 0 0 26px;
	padding: 17px 20px;
	background: var(--dthc-ink);
	color: var(--dthc-white);
	border-left: 5px solid var(--dthc-accent);
}

.woocommerce .dthc-banner span, .woocommerce .dthc-trust-row span,
.woocommerce .dthc-info-panel span, .woocommerce .dthc-security-note span,
.woocommerce .dthc-delivery-note span {
	margin-left: 8px;
	color: inherit;
	opacity: .86;
}

.woocommerce .dthc-trust-row,
.woocommerce .dthc-security-note,
.woocommerce .dthc-delivery-note {
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid var(--dthc-line);
	background: var(--dthc-white);
	color: var(--dthc-ink);
}

.woocommerce .dthc-info-panel {
	margin: 24px 0;
	padding: 19px 20px;
	background: var(--dthc-mint);
	color: var(--dthc-ink);
}

.woocommerce .dthc-support-strip {
	display: flex;
	justify-content: space-around;
	gap: 12px;
	margin: 28px 0;
	padding: 17px 20px;
	border-top: 1px solid var(--dthc-line);
	border-bottom: 1px solid var(--dthc-line);
	color: var(--dthc-slate);
	font-weight: 700;
}

.woocommerce .dthc-checkout-intro {
	margin: 0 0 30px;
	padding: 35px;
	background: var(--dthc-ink);
	color: var(--dthc-white);
}

.woocommerce .dthc-checkout-intro h1 {
	margin: 0;
	color: var(--dthc-white);
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2.1rem, 4vw, 3.8rem);
	font-weight: 400;
}

.woocommerce .dthc-checkout-intro p:last-child {
	margin-bottom: 0;
	color: #cad5d7;
}

.woocommerce .dthc-checkout-intro .dthc-eyebrow { color: #eeb28b; }

.woocommerce .dthc-delivery-note {
	background: #fff6ea;
	border-color: #eab987;
}

.woocommerce .dthc-checkout-support {
	margin: 18px 0 0;
	color: var(--dthc-slate);
	font-size: .9rem;
	line-height: 1.5;
}

.woocommerce form .form-row textarea {
	min-height: 110px;
}

.woocommerce-page .site-main, .woocommerce .site-main {
	max-width: 1184px;
	margin: 50px auto;
	padding: 0 28px;
}

.dthc-catalog {
	max-width: 1184px;
	margin: 50px auto 80px;
	padding: 0 28px;
}

.dthc-catalog-intro {
	max-width: 760px;
	margin-bottom: 38px;
}

.dthc-catalog-intro h1 {
	margin: 0;
	font-size: clamp(3rem, 6vw, 6rem);
	font-weight: 400;
	letter-spacing: -.065em;
	line-height: .9;
}

.dthc-catalog-intro > p:last-child {
	max-width: 520px;
	color: var(--dthc-slate);
	font: 400 1rem/1.6 "Trebuchet MS", Verdana, sans-serif;
}

.dthc-shop-card {
	display: grid;
	grid-template-columns: minmax(260px, .8fr) 1.2fr;
	max-width: 920px;
	background: var(--dthc-white);
	border: 1px solid var(--dthc-line);
}

.dthc-shop-image {
	display: block;
	min-height: 440px;
	background: var(--dthc-mint);
}

.dthc-shop-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dthc-shop-copy {
	padding: clamp(34px, 6vw, 70px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dthc-shop-copy h2 {
	margin: 0;
	font-size: clamp(2.3rem, 4.5vw, 4.5rem);
	font-weight: 400;
	letter-spacing: -.06em;
	line-height: .93;
}

.dthc-shop-copy h2 a { color: var(--dthc-ink); text-decoration: none; }
.dthc-shop-copy > p:not(.dthc-eyebrow) { color: var(--dthc-slate); font: 400 1rem/1.6 "Trebuchet MS", Verdana, sans-serif; }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--dthc-accent);
	color: var(--dthc-white);
	border-radius: 0;
	font-family: "Trebuchet MS", Verdana, sans-serif;
	font-weight: 800;
}

.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
	background: var(--dthc-accent-dark);
	color: var(--dthc-white);
}

@media (max-width: 760px) {
	.dthc-home, .dthc-site-nav { padding-left: 16px; padding-right: 16px; }
	.dthc-home-nav, .dthc-site-nav { align-items: flex-start; flex-direction: column; gap: 14px; }
	.dthc-site-links { gap: 13px; }
	.dthc-hero, .dthc-product-card { grid-template-columns: 1fr; }
	.dthc-hero { margin-bottom: 54px; }
	.dthc-hero-image { min-height: 400px; }
	.dthc-benefits { grid-template-columns: 1fr; margin-bottom: 64px; }
	.dthc-featured { margin-bottom: 64px; }
	.dthc-product-card-image { min-height: 390px; }
	.dthc-shop-card { grid-template-columns: 1fr; }
	.dthc-shop-image { min-height: 370px; }
	.dthc-catalog { margin: 28px auto 55px; padding: 0 16px; }
	.dthc-footer { flex-direction: column; }
	.woocommerce .dthc-support-strip { align-items: flex-start; flex-direction: column; }
	.woocommerce-page .site-main, .woocommerce .site-main { margin: 28px auto; padding: 0 16px; }
}