/* =============================================================================
 * zphcstore-v1 — DESIGN TOKENS
 * Every value here was measured off the source (source-cdp/design-tokens.json,
 * source-cdp/home-sections.txt, the #custom-css block in source-cdp/home.html).
 * Nothing here is invented. Later phases consume these tokens — do not fork them.
 * ========================================================================== */

/* --- Self-hosted fonts. No Google Fonts anywhere on this build. ------------ */
@font-face {
	font-family: "Manrope";
	src: url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"),
	     url("../fonts/Manrope-VariableFont_wght.ttf") format("truetype");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Montserrat";
	src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
	     url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* -- Palette (measured) ------------------------------------------------ */
	--zphc-primary: #0072bc;          /* brand blue  --fs-color-primary      */
	--zphc-primary-hover: #0a7ce0;    /* nav hover / active                  */
	--zphc-secondary: #014673;        /* --fs-color-secondary                */
	--zphc-success: #7a9c59;
	--zphc-alert: #b20000;
	--zphc-sale: red;                 /* .badge-inner.on-sale { color: red } */

	--zphc-ink: #383838;              /* body color rgb(56,56,56)            */
	--zphc-ink-strong: #1c1c1c;       /* header nav link                     */
	--zphc-ink-soft: #2b2b2b;         /* .faq-row p                          */
	--zphc-ink-muted: #808994;        /* footer disclaimer paragraph         */
	--zphc-heading-deep: #00314c;     /* .faq-row h3 / .faq h4               */
	--zphc-testimonial-name: #25363f;

	--zphc-white: #fff;
	--zphc-tint: #f7fafc;             /* .testimonials / .text-section bg    */
	--zphc-faq-card: #fdfeff;
	--zphc-hairline: #f7f7f7;
	--zphc-border: #f1f1f1;
	--zphc-border-strong: #e1e1e1;

	--zphc-dark: #011935;             /* .section.dark  rgb(1,25,53)         */
	--zphc-darker: #001228;           /* .absolute-footer + html bg          */
	--zphc-dark-head: #f1f1f1;        /* footer h3 colour                    */
	--zphc-dark-body: rgba(255, 255, 255, .5);

	--zphc-link: #0072bc;
	--zphc-link-hover: #111;

	/* -- Type -------------------------------------------------------------- */
	--zphc-font-body: "Manrope", Arial, sans-serif;
	--zphc-font-head: "Montserrat", Arial, sans-serif;

	--zphc-fs-base: 16px;             /* body 16px / 25.6px                  */
	--zphc-lh-base: 1.6;
	--zphc-fs-h1: 56px;               /* .container-alt h1 @ >=900           */
	--zphc-fs-h1-sm: 32px;            /* .container-alt h1 mobile            */
	--zphc-fs-h2: 38.4px;             /* global h2                           */
	--zphc-fs-h2-section: 32px;       /* .custom-section h2                  */
	--zphc-fs-h3: 22px;
	--zphc-fs-sm: 14.4px;             /* .price / .product-title             */
	--zphc-fs-xs: 12.8px;             /* breadcrumbs                         */
	--zphc-fs-btn: 11.52px;           /* .add_to_cart_button                 */
	--zphc-ls-btn: .3456px;

	/* -- Layout ------------------------------------------------------------ */
	--zphc-container: 1120px;         /* .container max-width                */
	--zphc-container-pad: 15px;
	--zphc-container-alt: 1200px;     /* .container-alt                      */
	--zphc-row-small: 1112.5px;       /* custom-css .row-small max-width     */
	--zphc-gutter: 9.8px;             /* .row-small > .col padding-x         */
	--zphc-gutter-b: 19.6px;          /* .row-small > .col padding-bottom    */

	--zphc-header-h: 102px;           /* .header-main height                 */
	--zphc-header-h-sm: 70px;         /* <=549px                             */
	--zphc-header-h-stuck: 86px;      /* .stuck .header-main                 */
	--zphc-topbar-h: 30px;            /* .header-top min-height (measured 31)*/
	--zphc-logo-w: 200px;
	--zphc-drawer-w: 360px;           /* off-canvas-cart --drawer-width      */
	--zphc-drawer-w-nav: 300px;       /* off-canvas left                     */

	/* -- Spacing scale (derived from the source's 4/8px rhythm) ------------ */
	--zphc-sp-1: 4px;
	--zphc-sp-2: 8px;
	--zphc-sp-3: 12px;
	--zphc-sp-4: 16px;
	--zphc-sp-5: 24px;
	--zphc-sp-6: 32px;
	--zphc-sp-7: 48px;                /* .custom-section padding-y           */
	--zphc-sp-8: 56px;                /* .section.dark padding-y             */

	/* -- Radius ------------------------------------------------------------ */
	--zphc-r-sm: 3px;
	--zphc-r: 5px;                    /* buttons, cards, badges              */
	--zphc-r-img: 7px;                /* .box-image img                      */
	--zphc-r-gallery: 12.5px;
	--zphc-r-pill: 24px;              /* .hero__categories--el-btn           */
	--zphc-r-round: 99px;             /* inputs / circle buttons             */

	/* -- Elevation --------------------------------------------------------- */
	--zphc-sh-card: 0 2px 1px rgba(0, 0, 0, .1);
	--zphc-sh-btn: 0 3px 2px rgba(0, 0, 0, .1);
	--zphc-sh-btn-strong: 0 3px 1px rgba(0, 0, 0, .2);
	--zphc-sh-drawer: 0 0 30px rgba(0, 0, 0, .25);

	/* -- Motion ------------------------------------------------------------ */
	--zphc-ease: cubic-bezier(.4, 0, .2, 1);
}

/* =============================================================================
 * PRIMITIVES — buttons, badges, cards. Shared by every later phase.
 * ========================================================================== */

/* --- Buttons --------------------------------------------------------------
 * .zphc-btn           filled brand button
 * .zphc-btn--outline  the card / archive add-to-cart button (measured)
 * .zphc-btn--pill     the hero "BUY NOW" pill
 * .zphc-btn--light    white-on-blue (dark bands)
 * -------------------------------------------------------------------------- */
.zphc-btn {
	display: inline-block;
	box-sizing: border-box;
	font-family: var(--zphc-font-body);
	font-size: var(--zphc-fs-btn);
	font-weight: 700;
	letter-spacing: var(--zphc-ls-btn);
	line-height: 25.2288px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: 0 13.824px;
	border: 2px solid var(--zphc-primary);
	border-radius: var(--zphc-r);
	background: var(--zphc-primary);
	color: var(--zphc-white);
	cursor: pointer;
	transition: color .25s var(--zphc-ease), background-color .25s var(--zphc-ease), box-shadow .25s var(--zphc-ease);
}

.zphc-btn:hover,
.zphc-btn:focus-visible {
	background: var(--zphc-secondary);
	border-color: var(--zphc-secondary);
	color: var(--zphc-white);
}

.zphc-btn--outline {
	background: var(--zphc-white);
	color: var(--zphc-primary);
}

.zphc-btn--outline:hover,
.zphc-btn--outline:focus-visible {
	background: var(--zphc-primary);
	border-color: var(--zphc-primary);
	color: var(--zphc-white);
}

.zphc-btn--block { display: block; width: 100%; }

.zphc-btn--pill {
	border-radius: var(--zphc-r-pill);
	border-color: transparent;
	padding: 8px 24px;
	font-size: 12px;
	line-height: 1.2;
	box-shadow: var(--zphc-sh-btn);
}

.zphc-btn--light {
	background: var(--zphc-white);
	border-color: var(--zphc-white);
	color: var(--zphc-primary);
	border-radius: 30px;
	padding: 8px 24px;
	font-size: 12px;
	line-height: 1.2;
	box-shadow: var(--zphc-sh-btn-strong);
}

.zphc-btn--lg {
	font-size: 14px;
	line-height: 40px;
	padding: 0 28px;
}

.zphc-btn[disabled],
.zphc-btn.is-disabled {
	opacity: .45;
	pointer-events: none;
}

/* --- Badges ---------------------------------------------------------------
 * Flatsome badge-frame shape, measured:
 *   bg #fff · 2px solid currentColor · radius 5px 0 0 0
 *   on-sale => color: red ; new-bubble => brand blue + 🇺🇸 prefix
 * -------------------------------------------------------------------------- */
.zphc-badges {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	margin: 0 0 0 5px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	pointer-events: none;
}

.zphc-badge {
	display: inline-block;
	font-family: var(--zphc-font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	background: var(--zphc-white);
	border: 2px solid currentColor;
	border-radius: var(--zphc-r) 0 0 0;
	color: var(--zphc-primary);
	text-transform: uppercase;
}

.zphc-badge--sale {
	color: var(--zphc-sale);
	padding: 4px 5px;
}

.zphc-badge--usa {
	padding: 2px 6px 0 6px;
}

.zphc-badge--usa::before {
	content: "\1F1FA\1F1F8";
	margin-right: 4px;
}

/* --- Cards ----------------------------------------------------------------
 * .zphc-card      the generic white surface used by testimonials / faq rows
 * .zphc-card--faq the faq variant (hairline border)
 * -------------------------------------------------------------------------- */
.zphc-card {
	background: var(--zphc-white);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
	padding: 24px;
}

.zphc-card--faq {
	background: var(--zphc-faq-card);
	border: 1px solid var(--zphc-hairline);
}

/* --- Containers ----------------------------------------------------------- */
.zphc-container {
	max-width: var(--zphc-container);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--zphc-container-pad);
	box-sizing: border-box;
}

.zphc-container-alt {
	max-width: var(--zphc-container-alt);
	width: 100%;
	margin: 0 auto;
	padding: 8px;
	box-sizing: border-box;
}

/* --- Visibility helpers (Flatsome breakpoints: small <=549, medium <=849) -- */
.zphc-hide-medium { display: none; }
.zphc-show-medium { display: block; }

@media (min-width: 850px) {
	.zphc-hide-medium { display: block; }
	.zphc-show-medium { display: none; }
}

.zphc-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}