/*
Theme Name: ZPHC Store
Theme URI: https://officialzphcstore.com/
Author: Axidion
Author URI: https://axidion.org/
Description: Classic hand-coded WooCommerce theme for officialzphcstore.com. Built from a measured capture of the source storefront; no page builder, no third-party seals, no analytics.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zphcstore
Tags: woocommerce, e-commerce, custom-menu, featured-images
*/

/* =============================================================================
 * BASE / RESET
 * Tokens live in assets/css/zphc-tokens.css and are enqueued BEFORE this file.
 * ========================================================================== */

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

html {
	background: var(--zphc-darker);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--zphc-header-h) + 10px);
}

body {
	margin: 0;
	background: var(--zphc-white);
	color: var(--zphc-ink);
	font-family: var(--zphc-font-body);
	font-size: var(--zphc-fs-base);
	line-height: var(--zphc-lh-base);
	-webkit-font-smoothing: antialiased;
}

body.zphc-locked { overflow: hidden; }

img { max-width: 100%; height: auto; border: 0; }
svg { vertical-align: middle; }

a {
	color: var(--zphc-link);
	text-decoration: none;
	transition: color .2s var(--zphc-ease);
}

a:hover { color: var(--zphc-link-hover); }

h1, h2, h3, h4, h5, h6,
.zphc-h1, .zphc-h2, .zphc-h3,
.page-title, .entry-title, .product-title, .shop-page-title {
	font-family: var(--zphc-font-head);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 .5em;
	color: inherit;
}

h1 { font-size: 40px; }
h2 { font-size: var(--zphc-fs-h2); line-height: 1.3; }
h3 { font-size: var(--zphc-fs-h3); line-height: 1.6; }
h4 { font-size: 20px; }

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

/* Form controls — measured: 99px radius, hairline border, 3% tint */
input, select, textarea, button {
	font-family: var(--zphc-font-body);
	font-size: 1rem;
	color: inherit;
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea {
	width: 100%;
	background: rgba(0, 0, 0, .03);
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: var(--zphc-r-round);
	padding: 0 14px;
	height: 38px;
	line-height: 38px;
	outline: none;
}

textarea { height: auto; line-height: 1.5; padding: 10px 14px; border-radius: var(--zphc-r); }

input:focus, textarea:focus, select:focus {
	border-color: var(--zphc-primary);
	box-shadow: 0 0 0 2px rgba(0, 114, 188, .15);
}

.zphc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--zphc-primary);
	color: #fff;
	padding: 10px 18px;
}

.zphc-skip-link:focus { left: 0; color: #fff; }

/* =============================================================================
 * HEADER
 * Source: #top-bar (blue, hidden <=849) + #masthead (102px) + #wide-nav
 * (mobile search bar, shown <=849). Sticky collapses the main bar to 86px.
 * ========================================================================== */

.zphc-header {
	position: relative;
	z-index: 500;
	background: var(--zphc-white);
}

.zphc-header__inner { position: relative; }

/* --- Top bar -------------------------------------------------------------- */
.zphc-topbar {
	background: var(--zphc-primary);
	color: #fff;
	min-height: var(--zphc-topbar-h);
	font-size: 13px;
	display: none;
}

@media (min-width: 850px) {
	.zphc-topbar { display: block; }
}

.zphc-topbar .zphc-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--zphc-sp-4);
	min-height: var(--zphc-topbar-h);
}

.zphc-topbar a { color: #fff; }
.zphc-topbar a:hover { color: rgba(255, 255, 255, .75); }

.zphc-topbar__list {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zphc-topbar__list > li { display: flex; align-items: center; }

.zphc-topbar__list > li + li {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, .25);
}

.zphc-topbar__mail { font-weight: 600; font-size: 13px; }

.zphc-topbar__tg {
	font-size: 12px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.zphc-topbar__tg svg { width: 16px; height: 16px; fill: currentColor; }

.zphc-topbar__right a { font-size: 13px; }

/* --- Main bar ------------------------------------------------------------- */
.zphc-masthead {
	height: var(--zphc-header-h);
	background: rgba(255, 255, 255, .95);
	border-bottom: 1px solid rgba(0, 0, 0, .05);
	transition: height .2s var(--zphc-ease);
}

.zphc-masthead > .zphc-container {
	height: 100%;
	display: flex;
	align-items: center;
	gap: var(--zphc-sp-4);
}

/* <=849px the source uses `logo-left medium-logo-center`: burger left, logo
   centred, cart right. >=850px the logo returns to the left rail. */
.zphc-logo {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

@media (min-width: 850px) {
	.zphc-logo {
		flex: 0 0 auto;
		width: var(--zphc-logo-w);
		max-width: 50%;
		justify-content: flex-start;
	}
}

/* Source: #logo { width: 200px } — the 250x42 mark is constrained to the box. */
.zphc-logo img {
	max-width: var(--zphc-logo-w);
	max-height: calc(var(--zphc-header-h) - 20px);
	width: auto;
	height: auto;
	display: block;
}

.zphc-logo__text {
	font-family: var(--zphc-font-head);
	font-weight: 800;
	font-size: 26px;
	letter-spacing: .5px;
	color: var(--zphc-primary);
}

.zphc-header__nav { flex: 1 1 auto; min-width: 0; display: none; }
.zphc-header__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.zphc-header__burger { flex: 0 0 auto; display: flex; align-items: center; }

@media (min-width: 850px) {
	.zphc-header__tools { margin-left: auto; }
}

@media (min-width: 850px) {
	.zphc-header__nav { display: block; }
	.zphc-header__burger { display: none; }
}

@media (max-width: 549px) {
	.zphc-masthead { height: var(--zphc-header-h-sm); }
	.zphc-logo img { max-height: calc(var(--zphc-header-h-sm) - 16px); }
}

/* Sticky */
.zphc-header.is-stuck .zphc-masthead {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	height: var(--zphc-header-h-stuck);
	z-index: 600;
	box-shadow: 0 1px 10px rgba(0, 0, 0, .12);
	background: #fff;
}

.zphc-header.is-stuck .zphc-logo img { max-height: calc(var(--zphc-header-h-stuck) - 20px); }

/* --- Primary nav (DOM shape kept for the mobile-drawer derivation) -------- */
.main-nav1 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}

.main-nav1 > li { position: relative; }

.main-nav1 > li > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	position: relative;
	padding: 10px 11px;
	font-size: 14px;
	line-height: 16px;
	color: var(--zphc-ink-strong);
	white-space: nowrap;
}

.main-nav1 > li > a::before {
	content: "";
	position: absolute;
	left: 11px;
	right: 11px;
	bottom: 4px;
	height: 2px;
	background: var(--zphc-primary-hover);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .2s var(--zphc-ease);
}

.main-nav1 > li > a:hover,
.main-nav1 > li.is-current > a { color: var(--zphc-primary-hover); }

.main-nav1 > li > a:hover::before,
.main-nav1 > li.is-current > a::before { transform: scaleX(1); }

.main-nav1 .zphc-nav__flag {
	position: absolute;
	top: -2px;
	right: -2px;
	color: #ff0000;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.main-nav1 .zphc-nav__caret { width: 9px; height: 9px; fill: currentColor; }

/* Dropdown — measured: 260px wide, #fff, 2px solid #ddd, 20px padding */
.main-nav1 li.group > ul.sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 260px;
	margin: 0;
	padding: 20px;
	list-style: none;
	background: var(--zphc-white);
	border: 2px solid #ddd;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s var(--zphc-ease), transform .18s var(--zphc-ease), visibility .18s;
	z-index: 700;
}

.main-nav1 li.group:hover > ul.sub-menu,
.main-nav1 li.group:focus-within > ul.sub-menu,
.main-nav1 li.group.is-open > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.main-nav1 li.group > ul.sub-menu > li + li { margin-top: 2px; }

.main-nav1 li.group > ul.sub-menu a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 0;
	font-size: 14px;
	color: #777;
}

.main-nav1 li.group > ul.sub-menu a:hover { color: var(--zphc-primary); }

/* --- Header search -------------------------------------------------------- */
/* Source shape: one flat rounded pill with the magnifier INSIDE at the right
   (`ux-search-box form-flat`), not a separate submit button. */
.zphc-search { position: relative; width: 100%; }

.zphc-search__form { position: relative; display: block; }

.zphc-search input[type="search"] {
	height: 38px;
	line-height: 38px;
	font-size: 14px;
	padding: 0 44px 0 16px;
}

.zphc-search__submit {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	background: none;
	color: #5b6670;
	cursor: pointer;
}

.zphc-search__submit:hover { color: var(--zphc-primary); }
.zphc-search__submit svg { width: 18px; height: 18px; fill: currentColor; }

/* The search is the last <li> of .main-nav1 (source shape), so it wraps onto
   its own line under the menu at desktop width — reproduced, not styled around. */
.main-nav1 > li.zphc-nav__search {
	flex: 0 0 auto;
	margin-left: 20px;
	min-width: 220px;
	max-width: 260px;
}

.main-nav1 > li.zphc-nav__search .zphc-search { width: 100%; }

/* The <=849 search bar (source: #wide-nav .header-bottom) */
.zphc-widenav {
	background: #fff;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	padding: 8px 0;
}

@media (min-width: 850px) { .zphc-widenav { display: none; } }

/* --- Icon buttons / cart pill --------------------------------------------- */
.zphc-iconbtn {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: none;
	color: var(--zphc-ink-strong);
	cursor: pointer;
	padding: 0;
}

.zphc-iconbtn svg { width: 22px; height: 22px; fill: currentColor; }

.zphc-cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--zphc-ink-strong);
}

.zphc-cart__total {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

/* The cart TOTAL is desktop-only: <=849px the source renders the circular
   icon + count on its own (mobile-nav right element). */
.zphc-cart__total { display: none; }

@media (min-width: 850px) {
	.zphc-cart__total { display: inline; }
}

.zphc-cart__icon {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--zphc-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.zphc-cart__icon svg { width: 18px; height: 18px; fill: currentColor; }

.zphc-cart__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--zphc-secondary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* =============================================================================
 * OFF-CANVAS PANELS — mobile menu (left, 300px) + cart drawer (right, 360px)
 * Explicit self-contained CSS (STANDARDS: never rely on utility classes here).
 * ========================================================================== */

.zphc-scrim {
	position: fixed;
	inset: 0;
	background: rgba(1, 25, 53, .55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s var(--zphc-ease), visibility .25s;
	z-index: 900;
}

.zphc-scrim.is-open { opacity: 1; visibility: visible; }

.zphc-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--zphc-drawer-w);
	max-width: 92vw;
	background: #fff;
	box-shadow: var(--zphc-sh-drawer);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	transition: transform .28s var(--zphc-ease);
}

.zphc-panel--left {
	left: 0;
	width: var(--zphc-drawer-w-nav);
	background: var(--zphc-dark);
	color: #fff;
	transform: translateX(-100%);
}

.zphc-panel--right { right: 0; transform: translateX(100%); }

.zphc-panel.is-open { transform: translateX(0); }

.zphc-panel__head {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.zphc-panel--left .zphc-panel__head { border-bottom-color: rgba(255, 255, 255, .12); }

.zphc-panel__title {
	font-family: var(--zphc-font-head);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	letter-spacing: .5px;
}

.zphc-panel__close {
	width: 34px; height: 34px;
	border: 0; background: none; cursor: pointer;
	color: inherit;
	display: inline-flex; align-items: center; justify-content: center;
}

.zphc-panel__close svg { width: 18px; height: 18px; fill: currentColor; }

.zphc-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 14px 18px; }
.zphc-panel__foot { flex: 0 0 auto; padding: 14px 18px; border-top: 1px solid rgba(0, 0, 0, .08); }

/* --- Mobile menu list (derived from .main-nav1 by zphc-app.js) ------------ */
.zphc-mobilenav { list-style: none; margin: 0; padding: 0; }
.zphc-mobilenav li { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.zphc-mobilenav a {
	display: block;
	padding: 12px 0;
	color: #fff;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.zphc-mobilenav a:hover { color: #9fd1f3; }

.zphc-mobilenav__row { display: flex; align-items: center; justify-content: space-between; }

.zphc-mobilenav__toggle {
	border: 0; background: none; color: #fff; cursor: pointer;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
}

.zphc-mobilenav__toggle svg { width: 12px; height: 12px; fill: currentColor; transition: transform .2s var(--zphc-ease); }
.zphc-mobilenav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.zphc-mobilenav .sub-menu {
	list-style: none;
	margin: 0 0 8px;
	padding: 0 0 0 14px;
	display: none;
}

.zphc-mobilenav .sub-menu.is-open { display: block; }
.zphc-mobilenav .sub-menu li { border-bottom: 0; }
.zphc-mobilenav .sub-menu a { padding: 8px 0; text-transform: none; font-size: 13px; color: rgba(255, 255, 255, .8); }

/* --- Cart drawer ----------------------------------------------------------
 * .zphc-minicart-body is the WooCommerce FRAGMENT root (it gets replaced
 * wholesale on add-to-cart), so it has to carry the flex column itself or the
 * head/body/foot layout collapses after the first AJAX refresh.
 * -------------------------------------------------------------------------- */
.zphc-minicart-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.zphc-minicart { list-style: none; margin: 0; padding: 0; }

.zphc-minicart li {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 10px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.zphc-minicart img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--zphc-r); }
.zphc-minicart .zphc-minicart__name { font-size: 13px; line-height: 1.35; color: var(--zphc-ink); display: block; }
.zphc-minicart .zphc-minicart__meta { font-size: 13px; color: var(--zphc-primary); font-weight: 600; margin-top: 4px; display: block; }
.zphc-minicart .zphc-minicart__remove { color: #999; font-size: 18px; line-height: 1; text-decoration: none; }
.zphc-minicart .zphc-minicart__remove:hover { color: var(--zphc-alert); }

.zphc-minicart__empty { padding: 24px 0; text-align: center; color: #888; font-size: 14px; }

.zphc-minicart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 15px;
	margin: 0 0 12px;
}

.zphc-minicart__total strong { font-family: var(--zphc-font-head); }
.zphc-minicart__buttons { display: grid; gap: 8px; }
.zphc-minicart__buttons .zphc-btn { line-height: 38px; font-size: 12px; }

/* =============================================================================
 * PAGE SHELL (page.php / single.php / search / 404)
 * ========================================================================== */

.zphc-page { padding: 32px 0 56px; }

.zphc-page__title {
	font-size: 32px;
	color: var(--zphc-primary);
	text-align: center;
	margin-bottom: var(--zphc-sp-5);
}

.zphc-prose { font-size: 15px; line-height: 1.75; color: #333; }
.zphc-prose h2 { font-size: 24px; margin: 32px 0 14px; color: #111; }
.zphc-prose h3 { font-size: 17px; font-weight: 600; margin: 24px 0 10px; color: #111; }
.zphc-prose p { margin: 0 0 16px; }
.zphc-prose a { text-decoration: underline; text-underline-offset: 2px; }
.zphc-prose ul { padding-left: 22px; margin: 0 0 20px; }
.zphc-prose li { margin-bottom: 8px; }

.zphc-prose table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.zphc-prose th, .zphc-prose td { padding: 11px 13px; border: 1px solid var(--zphc-border-strong); text-align: left; vertical-align: top; }
.zphc-prose th { font-family: var(--zphc-font-head); font-weight: 600; background: #f6f6f6; color: #111; }

@media (max-width: 768px) {
	.zphc-prose { font-size: 14px; line-height: 1.7; }
	.zphc-prose h2 { font-size: 20px; margin-top: 26px; }
	.zphc-prose h3 { font-size: 16px; }
}

/* =============================================================================
 * FOOTER
 * Band A: .section.dark  (#011935, 56px padding-y)
 * Band B: .absolute-footer (#001228, 10px/15px padding)
 * ========================================================================== */

.zphc-footer { background: var(--zphc-darker); }

.zphc-footer__band {
	background: var(--zphc-dark);
	color: #fff;
	padding: var(--zphc-sp-8) 0;
}

.zphc-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--zphc-sp-5);
	text-align: center;
}

@media (min-width: 850px) {
	.zphc-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
}

.zphc-footer__col h3 {
	color: var(--zphc-dark-head);
	font-size: var(--zphc-fs-h3);
	margin: 0 0 11px;
}

.zphc-footer__col p { color: #fff; margin: 0 0 4px; font-size: 15px; }
.zphc-footer__col a { color: #fff; }
.zphc-footer__col a:hover { color: #9fd1f3; }

.zphc-footer__links { list-style: none; margin: 0; padding: 0; }
.zphc-footer__links li { margin: 0; }
.zphc-footer__links a { display: inline-block; padding: 1px 0; font-size: 15px; }

.zphc-absfooter {
	background: var(--zphc-darker);
	color: var(--zphc-dark-body);
	font-size: var(--zphc-fs-sm);
	line-height: 1.6;
	padding: 10px 0 15px;
	text-align: center;
}

.zphc-absfooter__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

@media (min-width: 850px) {
	.zphc-absfooter__row { flex-direction: row; align-items: flex-start; justify-content: space-between; }
	.zphc-absfooter { text-align: left; }
}

.zphc-absfooter__nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 6px;
	padding: 0;
	text-transform: uppercase;
	font-size: 13px;
}

@media (max-width: 849px) { .zphc-absfooter__nav { justify-content: center; } }

.zphc-absfooter a { color: var(--zphc-dark-body); }
.zphc-absfooter a:hover { color: #fff; }

.zphc-absfooter__disclaimer {
	color: var(--zphc-ink-muted);
	line-height: 18px;
	text-align: justify;
	margin: 0 0 8px;
	max-width: 100%;
}

.zphc-absfooter__copy strong { color: rgba(255, 255, 255, .8); }

.zphc-paymenticons { display: inline-flex; align-items: center; gap: 8px; }
.zphc-paymenticons svg { width: 44px; height: 24px; fill: rgba(255, 255, 255, .55); }

/* --- Back to top ---------------------------------------------------------- */
.zphc-totop {
	position: fixed;
	right: 16px;
	bottom: 16px;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 2px solid rgba(255, 255, 255, .5);
	background: rgba(1, 25, 53, .6);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 400;
}

.zphc-totop svg { width: 14px; height: 14px; fill: currentColor; }
.zphc-totop.is-visible { display: inline-flex; }

@media (max-width: 849px) { .zphc-totop { display: none !important; } }