/* ==========================================================================
   DeviceDeals — base styles, tokens and bundled fonts.
   Colour/font tokens are overridden inline from the Customizer (dd_css_vars).
   ========================================================================== */

@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/DM_Sans/DMSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/DM_Sans/DMSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/DM_Sans/DMSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Poppins/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Poppins/Poppins-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Poppins/Poppins-Bold.woff2") format("woff2"); }

:root {
	--dd-primary: #C31E07;
	--dd-primary-hover: #a61a06;
	--dd-light: #F9F9F9;
	--dd-dark: #262626;
	--dd-body: #FEFEFE;
	--dd-white: #fff;
	--dd-muted: #6b6b6b;
	--dd-border: #e7e7e7;
	--dd-font-heading: "Poppins", system-ui, sans-serif;
	--dd-font-body: "DM Sans", system-ui, sans-serif;
	--dd-radius: 6px;
	--dd-shadow: 0 12px 32px rgba(0, 0, 0, .12);
	--dd-ease: .2s ease;
	--dd-container: 1400px; /* content width; gutters are added outside it */
	--dd-gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--dd-body);
	color: var(--dd-dark);
	font: 400 16px/1.6 var(--dd-font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--dd-dark);
	font-family: var(--dd-font-heading);
	font-weight: 600;
	line-height: 1.25;
}

a { color: var(--dd-primary); }
img, svg, video { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0; }

.dd-container {
	width: 100%;
	max-width: calc(var(--dd-container) + var(--dd-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--dd-gutter);
}
.dd-content { padding-block: 40px 56px; }
.dd-page-title { margin-bottom: 24px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
.dd-eyebrow {
	display: inline-block;
	margin-bottom: 8px;
	color: var(--dd-primary);
	font: 600 13px/1.4 var(--dd-font-heading);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.dd-entry + .dd-entry { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--dd-border); }

.dd-icon {
	flex: none;
	width: 1em;
	height: 1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	border: 2px solid var(--dd-primary);
	border-radius: var(--dd-radius);
	background: var(--dd-primary);
	color: var(--dd-white);
	font: 500 15px/1.2 var(--dd-font-heading);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dd-ease), border-color var(--dd-ease), color var(--dd-ease);
}
.dd-btn:hover { border-color: var(--dd-primary-hover); background: var(--dd-primary-hover); color: var(--dd-white); }
.dd-btn--sm { padding: 9px 14px; font-size: 14px; }
.dd-btn--quote .dd-icon { font-size: 18px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.dd-skip-link:focus {
	z-index: 100001;
	top: 8px; left: 8px;
	width: auto; height: auto;
	margin: 0; padding: 12px 18px;
	clip: auto;
	background: var(--dd-white);
	color: var(--dd-dark);
	box-shadow: var(--dd-shadow);
}

/* Focus ring for keyboard users only — no border after a mouse click or tap. */
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: 0; }
:focus-visible { outline: 2px solid var(--dd-primary); outline-offset: 2px; }

/* ==========================================================================
   Forms — Contact Form 7 (contact page, product quote box, home "Get in touch").
   Field classes: dd-cf-grid, dd-cf-field (--full), dd-cf-label, dd-cf-input,
   dd-cf-textarea, dd-cf-actions, dd-cf-submit. Plain CF7 forms get the same look.
   ========================================================================== */
.wpcf7-form .dd-cf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.wpcf7-form .dd-cf-field { display: block; min-width: 0; margin: 0; }
.wpcf7-form .dd-cf-label { display: block; margin-bottom: 6px; color: var(--dd-dark); font-size: 14px; font-weight: 500; }
.wpcf7-form .dd-cf-label abbr { color: var(--dd-primary); text-decoration: none; }
.wpcf7-form-control-wrap { display: block; }

.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--dd-border);
	border-radius: var(--dd-radius);
	background: #ffffff;
	color: var(--dd-dark);
	font-size: 16px; /* 16px stops iOS zooming on focus */
	transition: border-color var(--dd-ease), box-shadow var(--dd-ease), background-color var(--dd-ease);
}
.wpcf7-form textarea { height: 140px; min-height: 100px; padding: 12px 14px; resize: vertical; }
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder { color: #8a8a8a; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	border-color: var(--dd-primary);
	background: var(--dd-white);
	box-shadow: 0 0 0 3px rgba(195, 30, 7, .12);
	outline: 0;
}
.wpcf7-form .dd-cf-sku { font-weight: 600; letter-spacing: .02em; }

.wpcf7-form .dd-cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.wpcf7-form input[type="submit"] {
	width: 100%;
	min-height: 50px;
	padding: 12px 32px;
	border: 0;
	border-radius: var(--dd-radius);
	background: var(--dd-primary);
	color: var(--dd-white);
	font: 500 16px/1 var(--dd-font-heading);
	cursor: pointer;
	transition: background-color var(--dd-ease);
}
.wpcf7-form input[type="submit"]:hover { background: var(--dd-primary-hover); }
.wpcf7-form input[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }
.wpcf7-form .wpcf7-spinner { margin: 0; }
.wpcf7-not-valid-tip { margin-top: 4px; color: var(--dd-primary); font-size: 13px; }
.wpcf7-form .wpcf7-not-valid { border-color: var(--dd-primary) !important; }
.wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--dd-radius); font-size: 14px; }

/* Plain forms without the grid markup (e.g. the product quote box): one field per row */
.wpcf7-form > .wpcf7-form-control-wrap,
.wpcf7-form > p { margin: 0 0 12px; }
.wpcf7-form > br { display: none; }

/* Request A Quote form — the form markup is wrapped in <div class="dd-rfq">: white card, brand top edge */
.wpcf7-form .dd-rfq {
	padding: 20px 18px;
	border: 1px solid var(--dd-border);
	border-top: 4px solid var(--dd-primary);
	border-radius: var(--dd-radius);
	background: var(--dd-white);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .06);
}
.wpcf7-form .dd-rfq .dd-cf-sku { text-transform: uppercase; }
.wpcf7-form .dd-rfq .dd-cf-sku::placeholder { text-transform: none; }
.wpcf7-form .dd-rfq textarea { height: 120px; }
.wpcf7-form .dd-rfq .dd-cf-actions input[type="submit"] { width: 100%; }

/* Cloudflare Turnstile widget (only printed when Turnstile keys are saved) — above the submit row */
.wpcf7-form .wpcf7-turnstile,
.dd-turnstile { margin-top: 18px; line-height: 0; }
.dd-turnstile { margin-bottom: 16px; }

@media (min-width: 576px) {
	.wpcf7-form .dd-cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
	.wpcf7-form .dd-cf-field--full { grid-column: 1 / -1; }
	.wpcf7-form .dd-cf-grid--stack { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.wpcf7-form .dd-cf-actions input[type="submit"] { width: auto; min-width: 180px; }
	.wpcf7-form .dd-cf-grid--stack + .dd-cf-actions input[type="submit"] { width: 100%; }
	.wpcf7-form .dd-rfq { padding: 32px; }
	.wpcf7-form .dd-rfq .dd-cf-actions input[type="submit"] { width: auto; min-width: 220px; }
}

@media (min-width: 768px) {
	:root { --dd-gutter: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}