/*
Theme Name: Doss Plus
Theme URI: https://dossplus.com
Description: Custom child theme for Doss Plus - offset and digital printing, stationery, packaging and signage. Built on Storefront.
Author: Doss Plus
Template: storefront
Version: 1.0
Text Domain: doss-plus
*/

/* =========================================================
   1. BRAND VARIABLES
   ========================================================= */
:root {
	--dp-charcoal: #58595C;
	--dp-charcoal-dark: #2A2825;
	--dp-charcoal-darker: #221F1B;
	--dp-charcoal-darkest: #1B1916;
	--dp-orange: #F5A623;
	--dp-cream: #FDFCFA;
	--dp-cream-alt: #F1EFE8;
	--dp-border: #E4E0D6;
	--dp-text-muted: #807F79;
	--dp-white-text: #F2F0EA;
	--dp-light-text: #C9C6BD;
}

body {
	color: var(--dp-charcoal);
	font-family: 'Work Sans', sans-serif;
	background: var(--dp-cream);
}

h1, h2, h3, h4, h5,
.site-title {
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	color: var(--dp-charcoal);
}

a {
	color: var(--dp-orange);
}

/* =========================================================
   2. SITE HEADER / NAV
   ========================================================= */
.site-header {
	background: #ffffff;
	border-bottom: 1px solid var(--dp-border);
}

.site-title a {
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	color: var(--dp-charcoal) !important;
	letter-spacing: -0.3px;
}

.main-navigation ul li a {
	color: var(--dp-charcoal);
	font-weight: 500;
	font-size: 14px;
}

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

/* =========================================================
   3. BUTTONS (site-wide, including WooCommerce)
   ========================================================= */
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button,
a.dp-btn-primary {
	background-color: var(--dp-orange) !important;
	color: var(--dp-charcoal-dark) !important;
	border: none !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-family: 'Work Sans', sans-serif !important;
}

.button.dp-btn-outline,
a.dp-btn-outline {
	background: transparent !important;
	color: var(--dp-white-text) !important;
	border: 1.5px solid #6B6862 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce span.price {
	color: var(--dp-charcoal) !important;
	font-weight: 600;
}

/* =========================================================
   4. HOMEPAGE - UTILITY BAR
   ========================================================= */
.dp-utility-bar {
	background: var(--dp-cream-alt);
	color: var(--dp-text-muted);
	font-size: 12px;
	padding: 8px 24px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
}

/* =========================================================
   5. HOMEPAGE - HERO
   ========================================================= */
.dp-hero {
	background: var(--dp-charcoal-dark);
	padding: 60px 6% 50px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 30px;
	align-items: center;
}

.dp-hero-eyebrow {
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--dp-orange);
	font-weight: 600;
	margin-bottom: 16px;
	text-transform: uppercase;
}

.dp-hero h1 {
	color: var(--dp-white-text);
	font-size: 40px;
	line-height: 1.2;
	margin-bottom: 16px;
}

.dp-hero p {
	color: var(--dp-light-text);
	font-size: 15px;
	max-width: 420px;
	margin-bottom: 26px;
}

.dp-hero-actions {
	display: flex;
	gap: 14px;
}

.dp-hero-actions a {
	display: inline-block;
	padding: 12px 22px;
	font-size: 14px;
}

.dp-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.dp-hero-card {
	background: #38352F;
	border: 1px solid #55524A;
	border-radius: 8px;
	padding: 26px 12px;
	text-align: center;
	color: var(--dp-white-text);
	text-decoration: none;
	display: block;
}

.dp-hero-card i {
	font-size: 24px;
	color: var(--dp-orange);
	display: block;
	margin-bottom: 10px;
}

/* =========================================================
   6. TRUST BAR
   ========================================================= */
.dp-trustbar {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	padding: 26px 6%;
	border-bottom: 1px solid var(--dp-border);
	text-align: center;
}

.dp-trustbar i {
	font-size: 22px;
	color: var(--dp-charcoal);
	display: block;
	margin-bottom: 8px;
}

.dp-trustbar span {
	font-size: 12px;
	color: var(--dp-text-muted);
}

/* =========================================================
   7. SECTION HEADINGS
   ========================================================= */
.dp-section {
	padding: 50px 6%;
}

.dp-section-eyebrow {
	font-size: 12px;
	letter-spacing: 2px;
	color: var(--dp-orange);
	font-weight: 600;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.dp-section h2 {
	font-size: 26px;
	margin-bottom: 8px;
}

.dp-section-sub {
	color: var(--dp-text-muted);
	font-size: 14px;
	margin-bottom: 28px;
}

/* =========================================================
   8. CATEGORY CARDS
   ========================================================= */
.dp-category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.dp-category-card {
	background: #ffffff;
	border: 1px solid var(--dp-border);
	border-radius: 10px;
	padding: 22px;
	text-decoration: none;
	display: block;
	color: var(--dp-charcoal);
	transition: border-color 0.15s ease;
}

.dp-category-card:hover {
	border-color: var(--dp-orange);
}

.dp-category-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dp-cream-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.dp-category-icon i {
	font-size: 18px;
	color: var(--dp-orange);
}

.dp-category-card h3 {
	font-family: 'Work Sans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	margin: 0 0 6px;
	color: var(--dp-charcoal);
}

.dp-category-card p {
	font-size: 13px;
	color: var(--dp-text-muted);
	margin-bottom: 10px;
}

.dp-category-link {
	font-size: 13px;
	color: var(--dp-orange);
	font-weight: 600;
}

/* =========================================================
   9. BESTSELLERS (WooCommerce product grid override)
   ========================================================= */
.dp-bestsellers .woocommerce ul.products,
.dp-bestsellers ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.dp-bestsellers ul.products li.product {
	border: 1px solid var(--dp-border);
	border-radius: 10px;
	padding: 14px;
	text-align: left;
}

.dp-bestsellers ul.products li.product img {
	border-radius: 6px;
	margin-bottom: 10px;
}

/* =========================================================
   10. PROCESS STEPS
   ========================================================= */
.dp-process-section {
	background: var(--dp-cream-alt);
}

.dp-process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.dp-process-step .dp-step-num {
	font-size: 13px;
	color: var(--dp-orange);
	font-weight: 700;
	margin-bottom: 8px;
}

.dp-process-step h4 {
	font-family: 'Work Sans', sans-serif;
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--dp-charcoal);
}

.dp-process-step p {
	font-size: 13px;
	color: var(--dp-text-muted);
}

/* =========================================================
   11. CTA BAND
   ========================================================= */
.dp-cta-band {
	background: var(--dp-charcoal-dark);
	padding: 60px 6%;
	text-align: center;
}

.dp-cta-band h2 {
	color: var(--dp-white-text);
	font-size: 26px;
	margin-bottom: 10px;
}

.dp-cta-band p {
	color: var(--dp-light-text);
	font-size: 14px;
	margin-bottom: 24px;
}

.dp-cta-band .dp-hero-actions {
	justify-content: center;
}

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer,
.storefront-footer-widgets {
	background: var(--dp-charcoal-darker) !important;
	color: var(--dp-light-text);
}

.site-footer h2,
.site-footer h3,
.site-footer .widget-title {
	color: var(--dp-orange);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-family: 'Work Sans', sans-serif;
}

.site-footer a {
	color: var(--dp-light-text);
	font-size: 13px;
}

.site-footer a:hover {
	color: var(--dp-orange);
}

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
	.dp-hero {
		grid-template-columns: 1fr;
	}
	.dp-category-grid,
	.dp-process-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.dp-bestsellers ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.dp-trustbar {
		grid-template-columns: repeat(2, 1fr);
	}
}