/*
Theme Name: PMBoxes (Storefront Child)
Template: storefront
Description: PMBoxes brand theme built on Storefront/WooCommerce. Slate & Kraft-Orange design system for a premium packaging supplier.
Version: 1.0.0
Text Domain: storefront-pmboxes
*/

/* ==========================================================================
   PMBoxes Design Tokens
   ========================================================================== */
:root {
	--pmb-primary: #1E293B;
	--pmb-primary-dark: #0F172A;
	--pmb-secondary: #475569;
	--pmb-accent: #EA580C;
	--pmb-accent-hover: #C2410C;
	--pmb-accent-light: #FFEDD5;
	--pmb-bg: #F8FAFC;
	--pmb-surface: #FFFFFF;
	--pmb-foreground: #0F172A;
	--pmb-muted: #F1F5F9;
	--pmb-muted-foreground: #64748B;
	--pmb-border: #E2E8F0;
	--pmb-success: #059669;
	--pmb-destructive: #DC2626;
	--pmb-ring: #EA580C;

	--pmb-font-heading: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--pmb-font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--pmb-radius-sm: 6px;
	--pmb-radius-md: 10px;
	--pmb-radius-lg: 16px;

	--pmb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--pmb-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--pmb-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

	--pmb-space-1: 8px;
	--pmb-space-2: 16px;
	--pmb-space-3: 24px;
	--pmb-space-4: 32px;
	--pmb-space-5: 48px;
	--pmb-space-6: 64px;
	--pmb-space-7: 96px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--pmb-bg: #0B1220;
		--pmb-surface: #111827;
		--pmb-foreground: #F1F5F9;
		--pmb-muted: #1E293B;
		--pmb-muted-foreground: #94A3B8;
		--pmb-border: #24304A;
	}
}

/* ==========================================================================
   Base overrides
   ========================================================================== */
body {
	font-family: var(--pmb-font-body);
	color: var(--pmb-foreground);
	background-color: var(--pmb-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.storefront-primary-navigation,
.woocommerce-loop-product__title,
.product_title {
	font-family: var(--pmb-font-heading);
	color: var(--pmb-primary-dark);
	letter-spacing: -0.01em;
}

a {
	color: var(--pmb-primary);
	transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
a:hover { color: var(--pmb-accent); }

*:focus-visible {
	outline: 2px solid var(--pmb-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   Header / Branding
   ========================================================================== */
.site-header {
	background-color: var(--pmb-surface);
	border-bottom: 1px solid var(--pmb-border);
	box-shadow: var(--pmb-shadow-sm);
}

.site-branding .site-title a,
.site-branding .site-title a:hover {
	font-family: var(--pmb-font-heading);
	font-weight: 700;
	font-size: 1.65rem;
	color: var(--pmb-primary-dark);
	letter-spacing: -0.02em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.site-branding .site-title a::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background: linear-gradient(135deg, var(--pmb-accent), #FB923C);
	border-radius: 8px;
	box-shadow: var(--pmb-shadow-sm);
}
.site-branding .site-description {
	color: var(--pmb-muted-foreground);
	font-size: 0.85rem;
}

.storefront-primary-navigation {
	background-color: var(--pmb-surface);
}
.main-navigation ul li a {
	font-family: var(--pmb-font-body);
	font-weight: 600;
	color: var(--pmb-secondary);
	font-size: 0.95rem;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
	color: var(--pmb-accent);
}

.main-navigation ul li.pmb-nav-cta > a {
	background-color: var(--pmb-accent);
	color: #fff !important;
	padding: 0.55em 1.1em;
	border-radius: var(--pmb-radius-md);
	font-weight: 700;
	transition: background-color 150ms ease, transform 150ms ease;
}
.main-navigation ul li.pmb-nav-cta > a:hover {
	background-color: var(--pmb-accent-hover);
	transform: translateY(-1px);
}

/* Cart icon / handheld bar */
.site-header-cart .cart-contents,
.woocommerce-active .site-header-cart a.cart-contents {
	color: var(--pmb-primary-dark);
	font-weight: 600;
}
.site-header-cart .cart-contents .count,
.storefront-handheld-footer-bar .site-header-cart .count {
	background-color: var(--pmb-accent);
	color: #fff;
	border-radius: 999px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button,
button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: var(--pmb-font-body);
	font-weight: 700;
	background-color: var(--pmb-primary);
	color: #fff;
	border-radius: var(--pmb-radius-md);
	border: none;
	padding: 0.75em 1.4em;
	letter-spacing: 0.01em;
	transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
	cursor: pointer;
}
.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 {
	background-color: var(--pmb-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--pmb-shadow-md);
	color: #fff;
}

.button.pmb-cta,
.woocommerce a.button.pmb-cta,
a.pmb-btn-accent {
	background-color: var(--pmb-accent);
}
.button.pmb-cta:hover,
.woocommerce a.button.pmb-cta:hover,
a.pmb-btn-accent:hover {
	background-color: var(--pmb-accent-hover);
}

.woocommerce a.added_to_cart,
.woocommerce span.onsale {
	background-color: var(--pmb-accent);
	color: #fff;
	font-family: var(--pmb-font-body);
	font-weight: 700;
	border-radius: var(--pmb-radius-sm);
}

/* ==========================================================================
   Product cards
   ========================================================================== */
ul.products li.product {
	background: var(--pmb-surface);
	border: 1px solid var(--pmb-border);
	border-radius: var(--pmb-radius-lg);
	padding: var(--pmb-space-2) !important;
	box-shadow: var(--pmb-shadow-sm);
	transition: box-shadow 200ms ease, transform 200ms ease;
}
ul.products li.product:hover {
	box-shadow: var(--pmb-shadow-lg);
	transform: translateY(-3px);
}
ul.products li.product img {
	border-radius: var(--pmb-radius-md);
}
ul.products li.product .woocommerce-loop-product__title {
	font-size: 1rem;
	font-weight: 700;
	margin-top: var(--pmb-space-1);
}
ul.products li.product .price {
	color: var(--pmb-accent);
	font-weight: 700;
	font-family: var(--pmb-font-heading);
}

/* ==========================================================================
   Footer
   ========================================================================== */
#colophon,
.site-footer {
	background-color: var(--pmb-primary-dark);
	color: #CBD5E1;
}
.site-footer a { color: #E2E8F0; }
.site-footer a:hover { color: var(--pmb-accent); }
.site-footer .widget-title { color: #fff; font-family: var(--pmb-font-heading); }

/* ==========================================================================
   Utility
   ========================================================================== */
.pmb-container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 var(--pmb-space-3);
}

/* ==========================================================================
   Wide-screen optimization
   Storefront caps .col-full at ~1064px, leaving big gutters on wide screens.
   Widen the global content container so large displays are used well.
   ========================================================================== */
@media (min-width: 1100px) {
	.col-full {
		max-width: 1400px !important;
		padding-left: var(--pmb-space-3);
		padding-right: var(--pmb-space-3);
		box-sizing: border-box;
	}
}
@media (min-width: 1600px) {
	.col-full {
		max-width: 1520px !important;
	}
}