/*
Theme Name: DTrueKraft (Astra Child)
Description: Premium navy and terracotta storefront child theme for Astra and WooCommerce. Homepage, shop, product, cart, checkout, account and footer styling using standard WordPress and WooCommerce hooks. No paid plugins required.
Author: DTrueKraft
Template: astra
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dtruekraft
Tags: e-commerce, woocommerce, custom-colors, accessibility-ready
*/

/* ==========================================================================
   1. Tokens
   Terracotta #C76B4A is used for accents, rules, badges and large button text.
   Text-size links and buttons on ivory use the deeper terracotta (5.3:1).
   ========================================================================== */
:root {
	--dtk-navy: #172B4D;
	--dtk-navy-deep: #0F1E38;
	--dtk-terra: #C76B4A;
	--dtk-terra-deep: #A34D2D;
	--dtk-ivory: #F8F5F0;
	--dtk-sand: #EAE1D3;
	--dtk-paper: #FFFFFF;
	--dtk-ink: #26344D;
	--dtk-muted: #566178;
	--dtk-line: #DDD3C3;
	--dtk-field: #8B93A5;
	--dtk-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--dtk-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--dtk-radius: 4px;
	--dtk-wrap: 1200px;

	/* Astra global colour slots */
	--ast-global-color-0: var(--dtk-terra-deep);
	--ast-global-color-1: var(--dtk-navy);
	--ast-global-color-2: var(--dtk-navy);
	--ast-global-color-3: var(--dtk-ink);
	--ast-global-color-4: var(--dtk-ivory);
	--ast-global-color-5: var(--dtk-paper);
	--ast-global-color-6: var(--dtk-sand);
	--ast-global-color-7: var(--dtk-navy);
	--ast-global-color-8: var(--dtk-navy-deep);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
body,
.ast-separate-container {
	background-color: var(--dtk-ivory);
	color: var(--dtk-ink);
	font-family: var(--dtk-sans);
}

.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container .comment-respond {
	background-color: var(--dtk-paper);
}

h1, h2, h3,
.entry-title {
	font-family: var(--dtk-serif);
	font-weight: 400;
	color: var(--dtk-navy);
	line-height: 1.15;
}

h4, h5, h6 {
	color: var(--dtk-navy);
}

a {
	color: var(--dtk-terra-deep);
}

a:hover {
	color: var(--dtk-navy);
}

img {
	height: auto;
	max-width: 100%;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--dtk-navy);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px var(--dtk-ivory);
}

.dtk-hero :focus-visible,
.dtk-footer :focus-visible,
.dtk-announce :focus-visible {
	outline-color: var(--dtk-ivory);
	box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
	a, button, .dtk-tile__name {
		transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
	}
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */
body .dtk-btn,
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce #respond input#submit,
body .woocommerce a.button.alt,
body .woocommerce button.button.alt,
body .woocommerce input.button.alt,
body .wp-element-button,
body .wc-block-components-button:not(.is-link),
body .woocommerce-page .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0.8em 1.5em;
	border: 2px solid var(--dtk-terra-deep);
	border-radius: var(--dtk-radius);
	background-color: var(--dtk-terra-deep);
	color: var(--dtk-ivory);
	font-family: var(--dtk-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

body .dtk-btn:hover,
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .woocommerce a.button.alt:hover,
body .woocommerce button.button.alt:hover,
body .wp-element-button:hover,
body .wc-block-components-button:not(.is-link):hover {
	background-color: var(--dtk-navy);
	border-color: var(--dtk-navy);
	color: var(--dtk-ivory);
}

body .dtk-btn--ghost {
	background-color: transparent;
	color: var(--dtk-navy);
	border-color: var(--dtk-navy);
}

body .dtk-btn--ghost:hover {
	background-color: var(--dtk-navy);
	color: var(--dtk-ivory);
}

/* Hero button: brand terracotta with navy text; 18.7px bold counts as large text (3.8:1). */
body .dtk-btn--hero {
	background-color: var(--dtk-terra);
	border-color: var(--dtk-terra);
	color: var(--dtk-navy);
	font-size: 1.2rem;
	font-weight: 700;
	padding: 0.85em 2.2em;
}

body .dtk-btn--hero:hover {
	background-color: var(--dtk-ivory);
	border-color: var(--dtk-ivory);
	color: var(--dtk-navy);
}

.dtk-link {
	color: var(--dtk-navy);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ==========================================================================
   4. Announcement bar and header
   ========================================================================== */
.dtk-announce {
	background: var(--dtk-navy);
	color: var(--dtk-ivory);
	text-align: center;
	padding: 0.55rem 1rem;
	font-size: 0.9rem;
}

.dtk-announce p {
	margin: 0;
}

.site-header,
.main-header-bar,
.ast-primary-header-bar,
.ast-header-break-point .main-header-bar-navigation {
	background-color: var(--dtk-ivory);
}

.main-header-bar {
	border-bottom: 1px solid var(--dtk-line);
}

.main-header-menu .menu-link,
.ast-builder-menu .menu-item > .menu-link {
	color: var(--dtk-navy);
	font-weight: 600;
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.ast-builder-menu .menu-item:hover > .menu-link {
	color: var(--dtk-terra-deep);
}

/* Wordmark: a D monogram generated in CSS next to the site title (placeholder until your logo files are uploaded). */
.site-title a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--dtk-sans);
	font-size: 1.35rem;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--dtk-navy);
	text-decoration: none;
}

.site-title a::before {
	content: "D";
	content: "D" / "";
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--dtk-radius);
	background: var(--dtk-navy);
	box-shadow: inset 0 -4px 0 var(--dtk-terra);
	color: var(--dtk-ivory);
	font-family: var(--dtk-serif);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
}

.ast-site-identity .site-description {
	display: none;
}

/* ==========================================================================
   5. Homepage
   ========================================================================== */
.dtk-front .ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

.dtk-wrap {
	max-width: var(--dtk-wrap);
	margin: 0 auto;
	padding: 0 1.25rem;
}

.dtk-section {
	padding: 3.5rem 0;
}

.dtk-section--paper {
	background: var(--dtk-paper);
}

.dtk-section--sand {
	background: var(--dtk-sand);
}

.dtk-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.5rem;
}

.dtk-section__head h2 {
	margin: 0;
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
}

.dtk-placeholder {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 2px dashed var(--dtk-terra-deep);
	border-radius: var(--dtk-radius);
	background: var(--dtk-paper);
	color: var(--dtk-ink);
	font-size: 0.95rem;
}

/* Hero */
.dtk-hero {
	background: var(--dtk-navy);
	color: var(--dtk-ivory);
}

.dtk-hero__inner {
	display: grid;
	gap: 2.5rem;
	align-items: center;
	max-width: var(--dtk-wrap);
	margin: 0 auto;
	padding: 3rem 1.25rem 3.5rem;
}

.dtk-hero h1 {
	margin: 0 0 1rem;
	max-width: 14ch;
	color: var(--dtk-ivory);
	font-size: clamp(2.4rem, 7vw, 4.25rem);
	line-height: 1.05;
}

.dtk-hero p {
	margin: 0 0 2rem;
	max-width: 40ch;
	font-size: 1.15rem;
	line-height: 1.6;
	color: #E9E6E0;
}

.dtk-hero__media {
	position: relative;
	aspect-ratio: 4 / 3;
	margin: 0 10px 10px 0;
	background: var(--dtk-sand);
	border-radius: var(--dtk-radius);
	box-shadow: 10px 10px 0 var(--dtk-terra);
}

.dtk-hero__media img,
.dtk-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--dtk-radius);
}

.dtk-hero__ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	border-radius: var(--dtk-radius);
	background: linear-gradient(135deg, #EAE1D3, #D8C8AE);
	color: var(--dtk-navy);
	text-align: center;
	font-size: 0.95rem;
}

@media (min-width: 900px) {
	.dtk-hero__inner {
		grid-template-columns: 1.05fr 1fr;
		gap: 4rem;
		padding: 5rem 1.5rem 5.5rem;
	}
	.dtk-hero__media {
		aspect-ratio: 4 / 5;
		max-height: 560px;
		margin: 0 16px 16px 0;
		box-shadow: 16px 16px 0 var(--dtk-terra);
	}
}

/* Category tiles */
.dtk-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.dtk-tiles {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5rem;
	}
}

.dtk-tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--dtk-radius);
	background: var(--dtk-sand);
	text-decoration: none;
}

.dtk-tile__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dtk-tile__name {
	position: absolute;
	inset: auto 0 0 0;
	padding: 0.9rem 1rem;
	border-top: 3px solid var(--dtk-terra);
	background: var(--dtk-navy);
	color: var(--dtk-ivory);
	font-weight: 600;
}

.dtk-tile:hover .dtk-tile__name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Story */
.dtk-story {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 900px) {
	.dtk-story {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

.dtk-story__media img {
	display: block;
	width: 100%;
	border-radius: var(--dtk-radius);
}

.dtk-story__copy {
	max-width: 60ch;
}

.dtk-story__copy h2 {
	margin-top: 0;
	font-size: clamp(1.7rem, 4vw, 2.4rem);
}

.dtk-story__copy p {
	line-height: 1.7;
}

/* Why */
.dtk-why {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.dtk-why {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

.dtk-why li {
	padding-top: 1rem;
	border-top: 3px solid var(--dtk-terra);
}

.dtk-why h3 {
	margin: 0 0 0.4rem;
	font-size: 1.25rem;
}

.dtk-why p {
	margin: 0;
	color: var(--dtk-muted);
	line-height: 1.6;
}

/* ==========================================================================
   6. Shop and product grids
   ========================================================================== */
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--dtk-radius);
	background: var(--dtk-sand);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 0.7rem 0 0.2rem;
	color: var(--dtk-navy);
	font-family: var(--dtk-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--dtk-ink);
	font-weight: 600;
}

.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins {
	background: none;
	color: var(--dtk-terra-deep);
	text-decoration: none;
}

.woocommerce ul.products li.product .price del {
	color: var(--dtk-muted);
	opacity: 1;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.ast-onsale-card {
	min-width: 0;
	min-height: 0;
	padding: 0.35em 0.75em;
	border-radius: 2px;
	background-color: var(--dtk-terra-deep);
	color: var(--dtk-ivory);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
	color: var(--dtk-ink);
}

.woocommerce .woocommerce-ordering select {
	min-height: 44px;
	border: 1px solid var(--dtk-field);
	border-radius: var(--dtk-radius);
	background: var(--dtk-paper);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	min-width: 44px;
	padding: 0.7em;
	color: var(--dtk-navy);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--dtk-navy);
	color: var(--dtk-ivory);
}

.woocommerce-products-header .term-description {
	max-width: 70ch;
	color: var(--dtk-muted);
}

/* ==========================================================================
   7. Single product
   ========================================================================== */
.woocommerce div.product .product_title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.5rem;
}

.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty {
	min-height: 46px;
	border: 1px solid var(--dtk-field);
	border-radius: var(--dtk-radius);
	background: var(--dtk-paper);
	color: var(--dtk-ink);
}

.woocommerce div.product form.cart .variations label {
	color: var(--dtk-navy);
	font-weight: 600;
}

.woocommerce div.product form.cart .button {
	min-width: 12rem;
}

.dtk-trust {
	display: grid;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--dtk-line);
	list-style: none;
}

.dtk-trust li {
	position: relative;
	padding-left: 1.25rem;
	color: var(--dtk-ink);
}

.dtk-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.55rem;
	height: 0.55rem;
	background: var(--dtk-terra);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: var(--dtk-navy);
	font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--dtk-ivory);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	border-bottom: 3px solid var(--dtk-terra);
}

.woocommerce div.product .related.products > h2,
.woocommerce div.product .upsells.products > h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.dtk-sticky-atc {
	display: none;
}

@media (max-width: 768px) {
	body.single-product {
		padding-bottom: 5rem;
	}

	.dtk-sticky-atc:not([hidden]) {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--dtk-line);
		background: var(--dtk-paper);
		box-shadow: 0 -4px 14px rgba(23, 43, 77, 0.12);
	}

	.dtk-sticky-atc__price {
		color: var(--dtk-navy);
		font-weight: 700;
	}

	.dtk-sticky-atc__btn {
		min-height: 46px;
		padding: 0.7em 1.4em;
		border: 0;
		border-radius: var(--dtk-radius);
		background: var(--dtk-terra-deep);
		color: var(--dtk-ivory);
		font-size: 1rem;
		font-weight: 600;
	}

	.dtk-sticky-atc__btn:hover {
		background: var(--dtk-navy);
	}
}

/* ==========================================================================
   8. Cart and checkout (classic and block versions)
   ========================================================================== */
.woocommerce table.shop_table {
	border: 1px solid var(--dtk-line);
	border-radius: var(--dtk-radius);
	border-collapse: separate;
	background: var(--dtk-paper);
}

.woocommerce table.shop_table th {
	color: var(--dtk-navy);
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review,
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	padding: 1.25rem;
	border: 1px solid var(--dtk-line);
	border-radius: var(--dtk-radius);
	background: var(--dtk-paper);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single,
.wc-block-components-text-input input,
.wc-block-components-select-input select {
	min-height: 46px;
	border: 1px solid var(--dtk-field);
	border-radius: var(--dtk-radius);
	background: var(--dtk-paper);
	color: var(--dtk-ink);
}

.woocommerce form .form-row label {
	color: var(--dtk-navy);
	font-weight: 600;
}

.woocommerce-checkout #payment {
	border-radius: var(--dtk-radius);
	background: var(--dtk-sand);
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--dtk-paper);
	color: var(--dtk-ink);
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--dtk-paper);
}

.woocommerce-checkout #place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 52px;
	font-size: 1.05rem;
}

.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
	border-top-color: var(--dtk-terra);
	background: var(--dtk-paper);
	color: var(--dtk-ink);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--dtk-terra-deep);
}

.woocommerce-error {
	border-top-color: #B3261E;
	background: var(--dtk-paper);
	color: var(--dtk-ink);
}

/* ==========================================================================
   9. My Account
   ========================================================================== */
.woocommerce-MyAccount-navigation ul {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 1px solid var(--dtk-line);
	border-radius: var(--dtk-radius);
	background: var(--dtk-paper);
	list-style: none;
	overflow: hidden;
}

.woocommerce-MyAccount-navigation li + li {
	border-top: 1px solid var(--dtk-line);
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.85rem 1rem;
	color: var(--dtk-navy);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--dtk-sand);
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--dtk-navy);
	color: var(--dtk-ivory);
}

@media (min-width: 768px) {
	.woocommerce-account.logged-in .woocommerce {
		display: grid;
		grid-template-columns: 230px 1fr;
		gap: 2rem;
		align-items: start;
	}

	.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
	.woocommerce-account.logged-in .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.dtk-custom-footer .site-footer {
	display: none;
}

.dtk-footer {
	border-top: 4px solid var(--dtk-terra);
	background: var(--dtk-navy);
	color: #E9E6E0;
}

.dtk-footer a {
	color: var(--dtk-ivory);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dtk-footer a:hover {
	color: var(--dtk-sand);
}

.dtk-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem 1.5rem;
	max-width: var(--dtk-wrap);
	margin: 0 auto;
	padding: 3rem 1.25rem;
}

.dtk-footer__brand {
	grid-column: 1 / -1;
}

@media (min-width: 900px) {
	.dtk-footer__grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr 1.4fr;
		gap: 2.5rem;
	}

	.dtk-footer__brand {
		grid-column: auto;
	}
}

.dtk-footer h2 {
	margin: 0 0 0.8rem;
	color: var(--dtk-ivory);
	font-family: var(--dtk-sans);
	font-size: 1rem;
	font-weight: 700;
}

.dtk-footer__name {
	margin: 0 0 0.6rem;
	color: var(--dtk-ivory);
	font-size: 1.4rem;
	font-weight: 800;
}

.dtk-footer p {
	margin: 0 0 0.8rem;
	max-width: 36ch;
	line-height: 1.6;
}

.dtk-footer__list {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dtk-footer__list a {
	display: inline-block;
	padding: 0.15rem 0;
}

.dtk-footer__bottom {
	border-top: 1px solid rgba(248, 245, 240, 0.22);
}

.dtk-footer__bottom p {
	max-width: var(--dtk-wrap);
	margin: 0 auto;
	padding: 1rem 1.25rem;
	font-size: 0.9rem;
}

.dtk-footer__sep::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.9em;
	margin: 0 0.75rem;
	background: currentColor;
	vertical-align: -0.1em;
	opacity: 0.5;
}

.dtk-footer .dtk-placeholder {
	background: var(--dtk-paper);
	color: var(--dtk-ink);
}

/* ==========================================================================
   11. Small screens
   ========================================================================== */
@media (max-width: 544px) {
	.dtk-section {
		padding: 2.5rem 0;
	}

	.dtk-hero .dtk-btn {
		width: 100%;
	}
}

@media print {
	.dtk-announce,
	.dtk-sticky-atc,
	.dtk-footer {
		display: none;
	}
}