/*
 Theme Name:   Progressive Diagnostics
 Theme URI:    https://www.progressivediagnostics.com.au/
 Description:  Progressive Diagnostics custom theme
 Author:       ùrlar
 Author URI:   https://urlar.co
 Template:     generatepress
 Version:      1.0.0
*/

/* =======================================================================
   Shopify collection block — Progressive Diagnostics brand overrides
   Restyles the "Shopify" plugin (shopify-plugin v1.0.0) product grid to
   the brand: flat cards, hairline borders, Newsreader/Inter type, blue
   accents. Scoped to the block wrapper so nothing else is affected.
   Plugin defaults overridden: drop-shadow, grey border, fixed 4-col grid,
   image hover-zoom, #405047 system-font titles, black pill Quick Shop.
   ======================================================================= */

/* Grid — fluid & responsive instead of fixed 288px x 4 */
.wp-block-shopify-collection-shopify-collection-block .collection-grid__grid {
	gap: 24px !important;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
	align-items: stretch;
}

/* Card shell — flat, hairline border; blue border + tint wash on hover
   (markup rebuilt in shopify/product-card.php — image well, type tag,
   title, foot row, stretched overlay link) */
.product-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line) !important;
	border-radius: var(--pd-radius);
	box-shadow: none !important;
	padding: 10px !important;
	transition: border-color var(--pd-transition), background-color var(--pd-transition);
}

.product-card:hover {
	background: var(--tint-wash);
	border-color: var(--blue) !important;
	box-shadow: none !important;
}

/* Whole card is the link — keyboard focus rings the card itself */
.product-card__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.product-card:has(.product-card__link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Image well — uniform square on paper, whole product visible, no zoom */
.product-card__image-container {
	aspect-ratio: 1 / 1 !important;
	background: var(--paper);
	border-radius: calc(var(--pd-radius) - 4px);
}

.product-card__image-container img {
	border-radius: 0;
	height: 100% !important;
	object-fit: contain;
	/* shopify-media defaults background:"auto" — a low-res blurred copy behind the image */
	background: none !important;
}

.product-card:hover .product-card__image-container img {
	opacity: 1;
	transform: none;
}

/* Details — stacked; foot pins to the bottom so grid cards stay equal */
.product-card .product-card__details {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	flex: 1;
	padding: 16px 8px 8px !important;
}

.product-card__type {
	color: var(--muted);
	font-family: var(--pd-font-text);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 7px;
}
.product-card__type:not(:has(shopify-data)) ,
.product-card__type:has(shopify-data:empty) { display: none; }

.product-card .product-card__details .product-card__title {
	color: var(--ink) !important;
	font-family: var(--pd-font-display) !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	margin: 0 0 16px !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-card__title:hover { text-decoration: none; }

.product-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--line);
	padding-top: 12px;
	margin-top: auto;
}

.product-card__price {
	color: var(--slate) !important;
	font-family: var(--pd-font-text) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}

/* Arrow chip — nudges right on hover, same motion as .pd-card__arrow */
.product-card__go {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	color: var(--blue);
	transition: border-color var(--pd-transition), transform var(--pd-transition);
}
.product-card__go svg { width: 15px; height: 15px; }
.product-card:hover .product-card__go { border-color: var(--blue); transform: translateX(3px); }

/* Quick shop — full-width blue bar sliding up inside the image well
   (replaces the plugin's expanding circular "+" pill) */
.product-card__hover-button {
	left: 18px;
	right: 18px;
	bottom: 18px;
	width: auto;
	background-color: var(--blue) !important;
	border: 0 !important;
	border-radius: var(--pd-radius-sm);
	box-shadow: none !important;
	padding: 11px 16px;
	transform: translateY(8px);
	z-index: 2;
}
.product-card__hover-button::before { display: none; }
.product-card__hover-button:hover { background-color: var(--blue-d) !important; }
.product-card__hover-button span,
.product-card__hover-button .product-card__hover-button__button__text {
	color: #fff;
	font-family: var(--pd-font-text) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	max-width: none !important;
	margin: 0 !important;
	overflow: visible;
}

/* Sold out — quiet pill badge over a light wash instead of centred bold text */
.product-card:is([disabled])::before { background: rgba(255, 255, 255, .55); border-radius: inherit; }
.product-card:is([disabled])::after {
	content: "Sold out";
	top: 20px;
	left: 20px;
	width: auto;
	height: auto;
	background: var(--paper);
	border: 1px solid var(--line-2);
	border-radius: var(--pd-radius-pill);
	color: var(--ink);
	font-family: var(--pd-font-text);
	font-size: 12px;
	font-weight: 600;
	padding: 7px 14px;
	text-align: left;
}

/* Pagination — brand blue on hover instead of black */
.wp-block-shopify-collection-shopify-collection-block .pagination-button-list button {
	border-color: #D4DEE2 !important;
}

.wp-block-shopify-collection-shopify-collection-block .pagination-button-list button:hover {
	background: #009CD8 !important;
	border-color: #009CD8 !important;
}

.wp-block-shopify-collection-shopify-collection-block .pagination-button-list button:hover svg polyline {
	stroke: #fff !important;
}

/* =======================================================================
   Shopify PDP / quick-view modal / cart — brand overrides
   Restyles the plugin's single-product page (shopify/pdp.php), product
   modal, variant selector, cart drawer + /cart page to the brand:
   Newsreader titles, Inter UI, blue primary + ghost secondary buttons,
   paper image wells, hairline borders, flat. Plugin defaults overridden:
   black pill buttons, uppercase labels, "Jost" font, hover-zoom, shadows.
   ======================================================================= */

/* Product pages sit on white — the page-level paper background stays for the
   rest of the site; PDP sections carry their own paper/hairline contrast */
body:has(.shopify-product-details) { background-color: var(--white); }

/* ── PDP: type ── */
.single-product__title {
	color: var(--ink);
	font-family: var(--pd-font-display);
	font-size: var(--pd-text-h2);
	font-weight: 500;
	line-height: var(--pd-leading-tight);
}
.single-product__price {
	color: var(--ink);
	font-family: var(--pd-font-text);
	font-size: 18px;
	font-weight: 600;
}
.single-product__compare-price { color: var(--muted); }
.single-product__description-text {
	color: var(--slate);
	font-family: var(--pd-font-text);
	font-size: 15.5px;
	letter-spacing: normal;
	line-height: var(--pd-leading);
}

/* Product description body copy (rendered in .pdp-detail below the buy box) */
.pdp-desc { color: var(--slate); font-family: var(--pd-font-text); font-size: 15.5px; line-height: var(--pd-leading); }
.pdp-desc p { margin: 0 0 1em; }
.pdp-desc p:last-child { margin-bottom: 0; }

/* Description + delivery block below the buy box (shopify/pdp.php .pdp-detail) —
   keeps price / variant / add-to-cart above the description on every product */
.pdp-detail {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
	margin-top: clamp(24px, 4vw, 40px);
	padding-top: clamp(24px, 4vw, 40px);
	border-top: 1px solid var(--line);
}
.pdp-detail__title { margin: 0 0 14px; font-size: var(--pd-text-h3); }
.pdp-detail .pdp-desc { font-size: 16px; max-width: 68ch; }
@media (max-width: 768px) {
	.pdp-detail { grid-template-columns: 1fr; }
}

/* ── PDP: image well — product on paper, whole item visible ── */
.single-product__main-image {
	background: var(--paper);
	border-radius: var(--pd-radius);
	overflow: hidden;
	width: 100%;
}
/* shopify-media defaults background:"auto" — a low-res blurred copy behind the image */
.single-product__main-image img { object-fit: contain; background: none !important; }

/* ── PDP: buttons — blue primary, ghost secondary (brand button pair) ── */
.single-product__add-button {
	background-color: var(--blue);
	border-radius: var(--pd-radius-sm);
	font-family: var(--pd-font-text);
	font-size: 15.5px;
	font-weight: 600;
	padding: 14px 24px;
	transition: background-color var(--pd-transition);
}
.single-product__add-button:hover { background-color: var(--blue-d); opacity: 1; }
.single-product__add-button[disabled]:hover { background-color: var(--blue); }
.single-product__buy-button {
	background-color: transparent;
	border: 1.5px solid var(--line-2) !important; /* plugin: 2px black !important */
	border-radius: var(--pd-radius-sm);
	color: var(--ink);
	font-family: var(--pd-font-text);
	font-size: 15.5px;
	font-weight: 600;
	padding: 14px 24px;
	transition: border-color var(--pd-transition), color var(--pd-transition);
}
.single-product__buy-button:hover { border-color: var(--blue) !important; color: var(--blue-d); opacity: 1; }

/* ── PDP: quantity stepper ── */
.single-product__incrementor { border-color: var(--line-2); border-radius: var(--pd-radius-sm); }
.single-product__incrementor button { color: var(--slate); }
.single-product__incrementor button:hover { background: var(--paper); }
/* The count is a real <input type=number> (theme pdp.php); the +/- buttons are the
   steppers, so hide the browser's own spinners. */
.single-product__count {
	font-family: var(--pd-font-text); color: var(--ink);
	width: 2.75em; text-align: center;
	border: 0; background: transparent; padding: 0; font-size: inherit;
	appearance: textfield; -moz-appearance: textfield;
}
.single-product__count::-webkit-outer-spin-button,
.single-product__count::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── PDP: description accordion ── */
.single-product__accordion__item { border-color: var(--line); border-radius: var(--pd-radius); }
.single-product__accordion__header {
	color: var(--ink);
	font-family: var(--pd-font-text);
	font-size: 16px;
	font-weight: 600;
}
.single-product__accordion__header:hover { opacity: 1; color: var(--blue-d); }
.single-product__accordion__header.active { border-bottom-color: var(--line); }

/* ── Variant selector (PDP + modal, styled via ::part) ── */
shopify-variant-selector::part(radio) {
	border-color: var(--line-2);
	border-radius: var(--pd-radius-sm);
	color: var(--slate);
	font-family: var(--pd-font-text);
}
shopify-variant-selector::part(radio):hover { background: var(--paper); color: var(--ink); }
shopify-variant-selector::part(radio-selected),
shopify-variant-selector::part(radio-selected):hover {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
shopify-variant-selector.has-variants::part(form) {
	border-top-color: var(--line);
	border-bottom-color: var(--line);
}
shopify-variant-selector::part(select) {
	font-family: var(--pd-font-text);
	border-radius: var(--pd-radius-sm);
	outline-color: var(--line-2);
}

/* ── PDP: "You may also like" slider ── */
.product-recommendations { background: transparent; }
.collection-title h2 {
	color: var(--ink);
	font-family: var(--pd-font-display);
	font-size: 28px;
	font-weight: 500;
}
.collection__slider-button {
	border-color: var(--line-2);
	color: var(--slate);
	transition: background-color var(--pd-transition), border-color var(--pd-transition), color var(--pd-transition);
}
.collection__slider-button:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
	opacity: 1;
}
.collection-grid__product .single-product__image-container {
	background: var(--paper);
	border-radius: var(--pd-radius);
}
.collection-grid__product .single-product__image-container img {
	object-fit: contain;
	padding: 16px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
}
/* no hover zoom — brand is flat and quiet */
.collection-grid__product .single-product__image-container img:hover { transform: none; opacity: 1; }
.collection-grid__product .single-product__info h3 {
	color: var(--ink);
	font-family: var(--pd-font-display);
	font-size: 17px;
	font-weight: 500;
}
.collection-grid__product .single-product__info .single-product__price {
	color: var(--slate);
	font-size: 15px;
	font-weight: 600;
}
.collection-grid__product .single-product__hover-button {
	background-color: var(--blue);
	box-shadow: none;
	font-weight: 600;
	text-transform: none;
}
.collection-grid__product .single-product__hover-button:hover { background-color: var(--blue-d); }
.collection-grid__product .single-product__hover-button span {
	font-family: var(--pd-font-text);
	font-size: 14px;
}

/* ── Quick-view modal ── */
.product-modal {
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 24px 60px -30px rgba(22, 36, 43, .5); /* matches drawer elevation */
}
.product-modal::backdrop { background-color: rgba(22, 36, 43, .46); }
#product-modal .product-modal__close {
	background-color: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink);
}
#product-modal .product-modal__close:hover { background-color: var(--paper); }
.product-modal__media { background: var(--paper); }
.product-modal__media img { object-fit: contain; }
.product-modal__title {
	color: var(--ink);
	font-family: var(--pd-font-display);
	font-size: 28px;
	font-weight: 500;
	line-height: var(--pd-leading-tight);
}
.product-modal__price-container { color: var(--ink); font-family: var(--pd-font-text); font-size: 18px; font-weight: 600; }
.product-modal__compare-price { color: var(--muted); }
.product-modal__description-text { color: var(--slate); font-family: var(--pd-font-text); font-size: 15px; line-height: var(--pd-leading); }
/* Long descriptions scroll inside the panel so Add to cart sits at the same
   height for every product instead of being pushed down the modal */
.product-modal__details { display: flex; flex-direction: column; }
.product-modal__description-text { max-height: 200px; overflow-y: auto; }
.product-modal__buttons { margin-top: auto; }
.product-modal__buttons button {
	border: 0;
	font-family: var(--pd-font-text);
	font-size: 15.5px !important; /* plugin sets two sizes; pin one */
	font-weight: 600 !important;
	text-transform: none;
}
.product-modal__add-button {
	background-color: var(--blue);
	border-radius: var(--pd-radius-sm);
	transition: background-color var(--pd-transition);
}
.product-modal__add-button:hover {
	background: var(--blue-d);
	border: 0;
	color: #fff;
}
.product-modal__buy-button {
	background-color: transparent;
	border: 1.5px solid var(--line-2) !important;
	border-radius: var(--pd-radius-sm);
	color: var(--ink);
	transition: border-color var(--pd-transition), color var(--pd-transition);
}
.product-modal__buy-button:hover { border-color: var(--blue) !important; color: var(--blue-d); opacity: 1; }
.product-modal__details-link { color: var(--blue-d); font-family: var(--pd-font-text); }

/* ── Cart drawer + /cart page (same <shopify-cart> component) ── */
/* Drawer — slide-in panel from the right (same feel as the mobile menu
   drawer) instead of the centred modal. :not() keeps the inline /cart page
   display untouched. */
shopify-cart:not(.cart-page-display)::part(dialog) {
	position: fixed;
	inset: 0 0 0 auto;
	margin: 0;
	/* 440px clipped the line-item price/remove column — Shopify's own row
	   template (fixed-width image + price column) needs ~460px to lay out
	   without overflow at this drawer's padding. Verified live: 480px clears
	   it with a comfortable margin at desktop/tablet widths, where this cap
	   is the binding constraint (narrower viewports are governed by the 92vw
	   term instead and are unaffected by this value either way). */
	width: min(92vw, 480px);
	height: 100dvh;
	max-height: none;
	max-width: none;
	border: 0;
	border-left: 1px solid var(--line);
	border-radius: 0;
	box-shadow: -24px 0 60px -30px rgba(22, 36, 43, .5);
	animation: pd-cart-slide .32s var(--pd-ease);
}
@keyframes pd-cart-slide { from { transform: translateX(100%); } }
shopify-cart:not(.cart-page-display)::part(dialog)::backdrop { background: rgba(22, 36, 43, .46); }
@media (prefers-reduced-motion: reduce) {
	shopify-cart:not(.cart-page-display)::part(dialog) { animation: none; }
}
shopify-cart::part(primary-button) {
	background-color: var(--blue);
	border-radius: var(--pd-radius-sm);
	font-family: var(--pd-font-text); /* plugin: "Jost" */
	font-size: 15.5px;
	font-weight: 600;
	transition: background-color var(--pd-transition);
}
shopify-cart::part(primary-button):hover { background-color: var(--blue-d); opacity: 1; }
shopify-cart::part(line-heading) { color: var(--ink); font-family: var(--pd-font-text); font-weight: 600; }
shopify-cart::part(line-price) { color: var(--slate); font-family: var(--pd-font-text); }
shopify-cart::part(line-options) { color: var(--muted); }

/* /cart page renders the component inline — flat card, no shadow */
.cart-page-display::part(dialog) {
	border: 1px solid var(--line) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
}

/* ── PDP: theme content — trust rows, perks band, about band (shopify/pdp.php) ── */
.pdp-trust {
	list-style: none;
	display: grid;
	gap: 10px;
	margin: 2px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--line);
}
.pdp-trust .pd-check { font-size: 15px; }
.pdp-note { color: var(--muted); font-family: var(--pd-font-text); font-size: 13.5px; line-height: 1.6; margin: 0; }
.pdp-note a { color: var(--blue-d); text-decoration: none; }
.pdp-note a:hover { text-decoration: underline; }

/* Bands align with the plugin's 1120px product / recommendations width */
.pdp-band { max-width: 1120px; margin: 0 auto; padding: clamp(28px, 4vw, 48px) 0; }
.pdp-band--rule { border-top: 1px solid var(--line); }
.pdp-band--paper {
	background: var(--paper);
	border-radius: var(--pd-radius-lg);
	padding: clamp(28px, 4.5vw, 56px);
}
.pdp-band__title { margin: 0 0 28px; }
.pdp-about { align-items: start; }
.pdp-about__body { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.pdp-about__body .pd-h2, .pdp-about__body .pd-prose { margin: 0; }
.pdp-services { list-style: none; display: grid; gap: 14px; margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--pd-radius); }

/* Training cross-sell — dark ink panel, on-ink ramp via .pd-section--ink */
.pdp-band--ink {
	background: var(--ink);
	border-radius: var(--pd-radius-lg);
	padding: clamp(28px, 4.5vw, 56px);
}
.pdp-training { align-items: start; }
.pdp-training__text { color: var(--on-ink-body); font-size: 16px; line-height: var(--pd-leading); margin: 0; max-width: 52ch; }
.pdp-services--ink { border-color: var(--on-ink-line); }

/* Customer quotes — approved verbatim testimonials, Newsreader set */
.pdp-quote { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--pd-radius); }
.pdp-quote blockquote {
	color: var(--ink);
	font-family: var(--pd-font-display);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.pdp-quote figcaption { color: var(--muted); font-family: var(--pd-font-text); font-size: 13.5px; }

/* =======================================================================
   Interaction polish — card hover + subtle scroll-reveal intro animations.
   Site-wide. Hooks onto shared classes added to the GenerateBlocks class
   lists (.pd-card / .pd-card__arrow) and the .pd-anim flag set on <html>
   in the document head (see functions.php). Flat and on-brand — a blue
   hairline, a faint blue wash and an arrow nudge; no shadows, no lift.
   ======================================================================= */

/* Card hover — any GB card link carrying .pd-card */
.pd-card {
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pd-card:hover {
	background-color: #EEF6FB;
	border-color: #009CD8;
}

.pd-card .pd-card__arrow {
	transition: transform 0.2s ease;
}

.pd-card:hover .pd-card__arrow {
	transform: translateX(4px);
}

/* Scroll-reveal — each full-width section's content fades up as it enters
   the viewport. The first section (the hero) is excluded via the sibling
   combinator: it is above the fold / the LCP element, so it stays instant.
   .pd-anim is set on <html> before first paint so there is no
   flash; .is-visible is added by the IntersectionObserver. The hidden state
   is gated on BOTH .pd-anim and reduced-motion, so content can never be left
   stuck invisible if scripting is off or motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
	html.pd-anim .gb-element.alignfull ~ .gb-element.alignfull > .gb-element:last-child {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.55s ease, transform 0.55s ease;
	}

	html.pd-anim .gb-element.alignfull ~ .gb-element.alignfull > .gb-element:last-child.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* =======================================================================
   Header — GeneratePress-native, augmented with hooks (same setup as the
   Allergy Buddy theme). Markup is injected from inc/header-footer.php:
   a dark utility topbar, centred primary menu, account/cart icons, and a native
   <dialog> mobile drawer. Desktop menu = GP primary menu; drawer items are
   in the PHP. No GenerateBlocks header element. No header CTA.
   ======================================================================= */

/* ── Utility topbar (above the sticky nav) ── */
/* Visible keyboard focus on every header/footer control (brand focus ring) */
.pd-topbar a:focus-visible, .site-header a:focus-visible, .pd-burger:focus-visible,
.pd-cart:focus-visible,
.pd-drawer a:focus-visible, .pd-drawer button:focus-visible,
.pd-footer a:focus-visible {
	outline: 2px solid #009CD8; outline-offset: 2px; border-radius: 3px;
}

.pd-topbar { background: #16242B; color: #F6F8F9; font-size: 12.5px; font-family: 'Inter', Arial, sans-serif; }
.pd-topbar-inner { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 9px 32px; flex-wrap: wrap; box-sizing: border-box; }
.pd-topbar .left { display: flex; gap: 22px; flex-wrap: wrap; }
.pd-topbar .left span { display: inline-flex; align-items: center; gap: 8px; color: #C9D2D7; }
.pd-topbar .left span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #009CD8; }
.pd-topbar .left span:nth-child(2)::before { background: #3CB4E4; }
.pd-topbar .right { display: flex; gap: 18px; align-items: center; }
.pd-topbar .right a { color: #C9D2D7; text-decoration: none; }
.pd-topbar .right a:hover { color: #fff; }
/* Phone matches its neighbours — a quiet contact option, never the lead action */
.pd-topbar-phone { font-weight: 400; font-variant-numeric: tabular-nums; }
/* Below 640px the drawer carries these links; drop the bar for content space */
@media (max-width: 640px) { .pd-topbar { display: none; } }

/* ── Sticky brand nav (GeneratePress header, nav-float-right) ── */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #E4EBEE; }
.site-header .inside-header,
.site-header .inside-header.grid-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: none;
	width: 100%;
	box-sizing: border-box;
	padding: 10px 32px;
}
/* Logo is the row's one elastic item: it grows into whatever space the
   fixed-size icons leave over, up to its design cap, and shrinks first
   when the row is tight. height:auto keeps the aspect ratio intact. */
.site-header .site-logo { flex: 1 1 auto; min-width: 0; max-width: 449px; }
.site-logo img, .site-header .header-image, .custom-logo { width: 100%; height: auto; display: block; }
/* logo carries the wordmark — hide the duplicate text title (kept for screen readers) */
.site-header .site-title, .site-header .main-title, .site-header .site-description { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.main-navigation, .main-navigation .inside-navigation { background: transparent; }
.main-navigation .main-nav > ul > li > a { position: relative; font-family: 'Inter', Arial, sans-serif; font-weight: 600; font-size: 15px; color: #16242B; padding: 9px 11px; }
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a { color: #0683B2; background: transparent; }
/* Current page gets a marker, not just a colour shift */
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
	content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--blue, #009CD8);
}
/* Dropdown submenus — flat panel, hairline border, roomy targets */
.main-navigation ul ul { background: #fff; border: 1px solid #E4EBEE; border-radius: 8px; padding: 6px; width: 230px; box-shadow: none; }
.main-navigation ul ul li a { font-family: 'Inter', Arial, sans-serif; font-size: 14px; font-weight: 500; color: #46555D; padding: 9px 11px; border-radius: 6px; line-height: 1.35; }
.main-navigation ul ul li a:hover,
.main-navigation ul ul li.current-menu-item > a { background: #F6F8F9; color: #0683B2; }

@media (min-width: 769px) {
	.site-header .inside-header,
	.site-header .inside-header.grid-container {
		position: relative;
		gap: 16px;
	}
	.site-header .site-logo { max-width: 378px; }
	.site-header .site-logo,
	.site-header .site-branding { position: relative; z-index: 2; margin-right: auto; }
	.main-navigation .inside-navigation { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; }
	.main-navigation .main-nav > ul { flex-wrap: nowrap; justify-content: center; }
	.main-navigation .main-nav > ul > li { white-space: nowrap; }
	.site-header shopify-account,
	.site-header .pd-cart { position: relative; z-index: 2; }
}
/* In-between widths (small laptop / half-screen): the nav flows in the row —
   logo shrinks first — instead of being absolutely centred over it, which
   overlapped the logo and icons at these sizes. */
@media (min-width: 769px) and (max-width: 1199px) {
	.site-header .site-logo { max-width: 260px; }
	.main-navigation .main-nav > ul > li > a { font-size: 14px; padding: 9px 8px; }
}
/* Wide screens only: logo left, utilities right, nav truly centred */
@media (min-width: 1200px) {
	.site-header .inside-header .main-navigation,
	.nav-float-right .site-header #site-navigation {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		flex: none;
		z-index: 1;
		margin-left: 0;
	}
}

/* ── Header account avatar (shopify-account web component) ── */
shopify-account {
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px;
	--shopify-account-signed-in-avatar-size: 30px;
	--shopify-account-signed-in-avatar-color-background: #B4E4F0;
	--shopify-account-signed-in-avatar-color-text: #0683B2;
}
/* Invisible (not display:none) until the web component registers, so its
   44px slot is reserved from first paint and the icons don't jump when it
   upgrades. min-width/height above keep the slot stable after upgrade too
   (the signed-in avatar is only 30px). */
shopify-account:not(:defined) { visibility: hidden; }
.pd-account__ico { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: #16242B; }
.pd-account__ico:hover { background: #F6F8F9; color: #0683B2; }
.pd-account__ico svg { width: 21px; height: 21px; }

/* ── Header cart button (inc/header-footer.php) — icon + live count badge ── */
.pd-cart { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #16242B; cursor: pointer; }
.pd-cart:hover { background: #F6F8F9; color: #0683B2; }
.pd-cart svg { width: 21px; height: 21px; }
.pd-cart__count {
	position: absolute; top: 3px; right: 1px;
	min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
	background: #009CD8; color: #fff; text-align: center;
	font-family: 'Inter', Arial, sans-serif; font-size: 10.5px; font-weight: 600; line-height: 17px;
	font-variant-numeric: tabular-nums;
}
.pd-cart__count:empty { display: none; }

/* Hamburger → morphs to ✕ via aria-expanded. Lives in .inside-header so it
   shows on mobile regardless of GeneratePress's nav/customizer config.
   NB: these base styles MUST come BEFORE the mobile @media block below —
   equal specificity, so source order wins; the override has to be last. */
.pd-burger { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #16242B; cursor: pointer; }
.pd-burger:hover { background: #F6F8F9; }
.pd-burger__lines { position: relative; width: 22px; height: 14px; }
.pd-burger__lines span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .18s; }
.pd-burger__lines span:nth-child(1) { top: 0; }
.pd-burger__lines span:nth-child(2) { top: 6px; }
.pd-burger__lines span:nth-child(3) { top: 12px; }
.pd-burger[aria-expanded="true"] .pd-burger__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pd-burger[aria-expanded="true"] .pd-burger__lines span:nth-child(2) { opacity: 0; }
.pd-burger[aria-expanded="true"] .pd-burger__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Mobile: hide GP menu; show the hamburger (which lives in
      the header row, not the collapsible nav) → tap opens the drawer ── */
@media (max-width: 768px) {
	.mobile-menu-control-wrapper,
	.main-navigation .menu-toggle { display: none !important; }   /* GP's own toggles */
	.main-navigation .main-nav { display: none; }                 /* GP desktop menu */
	/* Must repeat the .grid-container variant: the base rule's
	   .inside-header.grid-container selector out-specifies a bare
	   .inside-header override (media queries add no specificity) */
	.site-header .inside-header,
	.site-header .inside-header.grid-container { flex-wrap: nowrap; gap: 6px; padding: 10px 15px; }
	/* margin-right:auto — the logo's auto margin absorbs ALL free space in
	   one spot (auto margins beat justify-content), so the icons hug together
	   on the right separated only by the row gap: tight and evenly spaced,
	   whichever of account/cart happen to render */
	.site-header .site-logo { max-width: 319px; margin-right: auto; }
	.pd-burger { display: inline-grid !important; flex-shrink: 0; }
	/* Everything inside the nav is hidden on mobile; drop it from the flex
	   row entirely so the logo (the only grow item) takes the leftover space */
	.site-header .inside-header .main-navigation { display: none; }
}

/* ── The drawer — native <dialog> ── */
.pd-drawer { position: fixed; inset: 0 0 0 auto; left: auto; margin: 0; width: min(86vw, 400px); max-width: 400px; max-height: none; height: auto; padding: 0; border: 0; border-left: 1px solid #E4EBEE; background: #fff; color: #16242B; flex-direction: column; box-shadow: -24px 0 60px -30px rgba(22,36,43,.5); transform: translateX(100%); transition: transform .32s cubic-bezier(.22,.61,.36,1), overlay .32s allow-discrete, display .32s allow-discrete; }
.pd-drawer[open] { display: flex; transform: none; }
@starting-style { .pd-drawer[open] { transform: translateX(100%); } }
.pd-drawer::backdrop { background: rgba(22,36,43,.46); opacity: 0; transition: opacity .3s ease, overlay .3s allow-discrete, display .3s allow-discrete; }
.pd-drawer[open]::backdrop { opacity: 1; }
@starting-style { .pd-drawer[open]::backdrop { opacity: 0; } }
html.pd-menu-open { overflow: hidden; }

.pd-drawer__stripe { display: flex; height: 4px; flex: 0 0 4px; }
.pd-drawer__stripe i { flex: 1; }
.pd-drawer__stripe .c1 { background: #009CD8; }
.pd-drawer__stripe .c2 { background: #3CB4E4; }
.pd-drawer__stripe .c3 { background: #B4E4F0; }
.pd-drawer__stripe .c4 { background: #0683B2; }

.pd-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px 20px; }
.pd-drawer__logo { height: 32px; width: auto; }
.pd-drawer__close { position: relative; width: 40px; height: 40px; padding: 0; border: 1px solid #E4EBEE; border-radius: 999px; background: transparent; color: #16242B; cursor: pointer; }
/* absolute + inset + margin:auto centres in every browser — display:grid
   on <button> is unreliable on mobile Safari and UA padding skews it */
.pd-drawer__close svg { position: absolute; inset: 0; margin: auto; }
.pd-drawer__close:hover { background: #F6F8F9; }

.pd-drawer__scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Big stacked links, hairline-separated, mono index */
.pd-menu__nav { list-style: none; margin: 0; padding: 0 8px; }
.pd-menu__nav > li { border-top: 1px solid #E4EBEE; }
.pd-menu__nav > li:first-child { border-top: 0; }
.pd-menu__nav a, .pd-menu__nav .pd-menu__parent { display: flex; align-items: center; width: 100%; gap: 14px; padding: 16px 12px; border: 0; background: transparent; font-family: 'Inter', Arial, sans-serif; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: #16242B; text-decoration: none; text-align: left; cursor: pointer; }
.pd-menu__nav .idx { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 500; color: #73828A; width: 22px; }
.pd-menu__nav a:hover, .pd-menu__nav a.current, .pd-menu__parent:hover, .pd-menu__parent.current { color: #0683B2; }
.pd-menu__nav a.current .idx, .pd-menu__parent.current .idx { color: #009CD8; }
.pd-menu__nav a .go, .pd-menu__parent .go { margin-left: auto; color: #73828A; transition: transform .2s; }
.pd-menu__nav a:hover .go { transform: translateX(3px); color: #009CD8; }
.pd-menu__parent[aria-expanded="true"] .go { transform: rotate(90deg); color: #009CD8; }

/* Submenu — revealed by tapping a parent that has children; the parent's
   own page is appended as the last row since the button no longer navigates */
.pd-menu__sub { list-style: none; margin: 0; padding: 0 12px 8px 46px; }
.pd-menu__sub li { border-top: 1px solid #E4EBEE; }
.pd-menu__sub li:first-child { border-top: 0; }
.pd-menu__sub a { display: block; padding: 12px 0; font-family: 'Inter', Arial, sans-serif; font-size: 16px; font-weight: 500; color: #46555D; text-decoration: none; }
.pd-menu__sub a:hover { color: #0683B2; }
.pd-menu__sub-parent { color: #009CD8 !important; font-weight: 600 !important; }

/* Secondary links (topbar equivalents — the topbar is hidden on mobile) */
.pd-drawer__aux { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 18px 20px 8px; border-top: 1px solid #E4EBEE; margin-top: 4px; }
.pd-drawer__aux a { font-family: 'Inter', Arial, sans-serif; font-size: 14px; font-weight: 500; color: #46555D; text-decoration: none; }
.pd-drawer__aux a:hover { color: #0683B2; }

/* Pinned action footer */
.pd-drawer__foot { border-top: 1px solid #E4EBEE; padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 10px; background: #fff; }
.pd-act { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 52px; border-radius: 6px; font-family: 'Inter', Arial, sans-serif; font-size: 15.5px; font-weight: 600; text-decoration: none; }
.pd-act--cta { background: #009CD8; color: #fff; }
.pd-act--cta:hover { background: #0683B2; color: #fff; }
.pd-act--ghost { border: 1.5px solid #D4DEE2; color: #16242B; background: transparent; }
.pd-act--ghost:hover { border-color: #16242B; color: #16242B; }
.pd-drawer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 6px; font-size: 13px; color: #73828A; }
.pd-drawer__contact a { display: inline-flex; align-items: center; gap: 7px; color: #46555D; text-decoration: none; font-weight: 600; }
.pd-drawer__contact a:hover { color: #16242B; }
.pd-drawer__contact .dot { width: 6px; height: 6px; border-radius: 50%; background: #009CD8; }

@media (prefers-reduced-motion: reduce) {
	.pd-drawer, .pd-drawer::backdrop, .pd-burger__lines span, .pd-menu__nav a .go { transition: none; }
}

/* =======================================================================
   Footer — branded, native (inc/header-footer.php generate_before_footer).
   Dark footer-ink background; GeneratePress' own .site-info is hidden.
   ======================================================================= */
.site-footer, .site-info { display: none !important; } /* suppress GP default footer bar */

.pd-footer { background: #0F1B21; color: #C5D2D8; font-family: 'Inter', Arial, sans-serif; }
.pd-footer__stripe { display: flex; height: 4px; }
.pd-footer__stripe i { flex: 1; }
.pd-footer__stripe .c1 { background: #009CD8; } .pd-footer__stripe .c2 { background: #3CB4E4; }
.pd-footer__stripe .c3 { background: #B4E4F0; } .pd-footer__stripe .c4 { background: #0683B2; }

.pd-footer__inner { max-width: 1200px; margin: 0 auto; padding: 56px 32px 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .pd-footer__inner { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .pd-footer__inner { grid-template-columns: 1fr; } }

.pd-foot__brand { max-width: 340px; }
.pd-foot__logo { height: 36px; width: auto; margin-bottom: 16px; display: block; }
.pd-foot__brand p { font-size: 14px; line-height: 1.6; color: #8C9AA0; margin-bottom: 16px; }
.pd-foot__phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; }
.pd-foot__phone svg { color: #3CB4E4; }
.pd-foot__phone:hover { color: #3CB4E4; }
.pd-foot__rto { display: block; margin-top: 14px; font-size: 12.5px; color: #73828A; }

.pd-foot__col h4 { font-family: 'Inter', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.pd-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pd-foot__col a { color: #C5D2D8; text-decoration: none; font-size: 14.5px; }
.pd-foot__col a:hover { color: #3CB4E4; }

.pd-footer__bar { border-top: 1px solid rgba(255,255,255,.1); }
.pd-footer__bar { max-width: 1200px; margin: 0 auto; padding: 20px 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #73828A; }
.pd-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.pd-footer__legal a { color: #8C9AA0; text-decoration: none; }
.pd-footer__legal a:hover { color: #fff; }