/* ==========================================================================
   LAYER 6 — WOOCOMMERCE
   Everything that touches store markup. Isolated in its own file so the
   storefront can be restyled without opening the marketing layers, and so
   marketing layers never accidentally target .woocommerce-* selectors.

   Phase 1 note: the store endpoints are stubs. These rules are written now so
   that when the backend phase wires up real products, nothing has to be
   re-skinned.
   ========================================================================== */

/* ---- price masking --------------------------------------------------- */
/* The core B2B rule: an unapproved visitor never sees a number. wholesale.php
   adds .vp-price-locked to the body; the real price stays in the DOM for
   crawlers and for the moment the visitor signs in. */
body.vp-price-locked .woocommerce-Price-amount,
body.vp-price-locked .price ins,
body.vp-price-locked .price del { display: none; }

body.vp-price-locked .price { display: none; }

/* ---- store loop ------------------------------------------------------ */
.vp-shop { padding: 28px 0 64px; }
.vp-shop__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.vp-shop__head h1 { font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.025em; }
.vp-shop__head .woocommerce-result-count { font-size: var(--vp-f-base); color: var(--vp-muted); }

.woocommerce-ordering select { min-height: 38px; padding: 6px 10px; border: 1px solid var(--vp-line); border-radius: 8px; background: #fff; }

/* ---- product detail ------------------------------------------------- */
.vp-pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 24px 0 8px; }

.vp-gallery__main {
	position: relative;
	display: grid;
	place-items: center;
	height: 380px;
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r);
	background: var(--vp-bg-2);
	overflow: hidden;
}

.vp-gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }

.vp-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }

.vp-gallery__thumbs button {
	height: 64px;
	border: 1px solid var(--vp-line);
	border-radius: 8px;
	background: var(--vp-bg-2);
	overflow: hidden;
}

.vp-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.vp-gallery__thumbs [aria-current="true"] { border-color: var(--vp-ink); box-shadow: 0 0 0 1px var(--vp-ink); }

.vp-pd { display: flex; flex-direction: column; }

.vp-pd__brand {
	margin-bottom: 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vp-muted-2);
}

.vp-pd h1 { font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }

/* Price block on the PDP — replaced by the lock until approved. */
.vp-pd__price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 18px 0;
	padding: 14px 16px;
	border: 1px solid var(--vp-warn-line);
	border-radius: 10px;
	background: var(--vp-warn-bg);
	flex-wrap: wrap;
}

.vp-pd__price .vp-lock { border: 0; background: none; padding: 0; justify-content: flex-start; font-size: 14px; }
.vp-pd__price a { font-size: var(--vp-f-base); font-weight: 700; color: var(--vp-ink); text-decoration: underline; }

.vp-metarows { margin-top: 6px; border-top: 1px solid var(--vp-line); }

.vp-metarows > div {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--vp-line-2);
	font-size: var(--vp-f-base);
}

.vp-metarows dt { color: var(--vp-muted); }
.vp-metarows dd { margin: 0; font-weight: 500; color: var(--vp-text); }

/* ---- flavour / variant table ---------------------------------------- */
/* The single most useful page for a wholesale buyer: one row per flavour with
   live stock and its own add-to-cart. */
.vp-vtable { margin-top: 8px; border: 1px solid var(--vp-line); border-radius: var(--vp-r); overflow: hidden; }

.vp-vtable__head {
	display: grid;
	grid-template-columns: 1fr 90px 110px 96px 140px;
	gap: 14px;
	padding: 13px 20px;
	border-bottom: 1px solid var(--vp-line);
	background: var(--vp-bg-2);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--vp-muted);
}

.vp-vrow {
	display: grid;
	grid-template-columns: 1fr 90px 110px 96px 140px;
	gap: 14px;
	align-items: center;
	padding: 13px 20px;
	border-bottom: 1px solid var(--vp-line-2);
	background: #fff;
}

.vp-vrow:last-child { border-bottom: 0; }
.vp-vrow:hover { background: #FCFDFE; }
.vp-vrow__fl { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.vp-vrow__sw { flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid rgba(0,0,0,.08); border-radius: 5px; }
.vp-vrow__pr { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }

.vp-qty { display: flex; align-items: center; width: 96px; height: 36px; border: 1px solid var(--vp-line); border-radius: 8px; overflow: hidden; background: #fff; }
.vp-qty button { width: 30px; height: 100%; color: var(--vp-muted); font-size: 15px; }
.vp-qty button:hover { background: var(--vp-bg-2); color: var(--vp-text); }
.vp-qty input { width: 36px; height: 100%; border: 0; text-align: center; font-size: var(--vp-f-base); font-weight: 600; background: #fff; color: var(--vp-text); }
.vp-qty.is-disabled { opacity: .45; pointer-events: none; }

.vp-vrow__add {
	height: 36px;
	border-radius: 8px;
	background: var(--vp-ink);
	color: #fff;
	font-size: var(--vp-f-base);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vp-vrow__add:hover { background: var(--vp-accent); color: var(--vp-accent-ink); }
.vp-vrow.is-out .vp-vrow__fl { color: var(--vp-muted-2); }
.vp-vrow.is-out .vp-vrow__pr { color: var(--vp-muted-2); font-weight: 500; }
.vp-vrow__oos { grid-column: 5; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--vp-muted-2); }

.vp-vtable__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-top: 1px solid var(--vp-line);
	background: var(--vp-bg-2);
	font-size: 12.5px;
	color: var(--vp-muted);
	flex-wrap: wrap;
}

.vp-vtable__foot .vp-bulk { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--vp-ok); }

/* ---- tabs ------------------------------------------------------------ */
.vp-tabs { display: flex; gap: 26px; margin-top: 44px; border-bottom: 1px solid var(--vp-line); }
.vp-tabs a { padding: 13px 0; border-bottom: 2px solid transparent; font-size: 14px; font-weight: 600; color: var(--vp-muted); }
.vp-tabs a[aria-current="true"], .vp-tabs a:hover { color: var(--vp-text); border-bottom-color: var(--vp-ink); }

/* ---- notices / pagination ------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	margin: 20px 0;
	padding: 14px 18px;
	border: 1px solid var(--vp-line);
	border-left: 3px solid var(--vp-accent);
	border-radius: 8px;
	background: #fff;
	font-size: var(--vp-f-base);
}

.woocommerce-error { border-left-color: var(--vp-danger); }

.woocommerce-pagination ul { display: flex; gap: 6px; justify-content: center; margin: 32px 0 0; }

.woocommerce-pagination a,
.woocommerce-pagination span {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--vp-line);
	border-radius: 8px;
	font-size: var(--vp-f-base);
}

.woocommerce-pagination .current { border-color: var(--vp-ink); background: var(--vp-ink); color: #fff; }

/* ---- account / auth (login + register) ------------------------------ */
/* The reference site renders the login card beside a "New Customer?" card,
 * and the wholesale register form full-width. `.vp-auth` is the theme's shell;
 * `.mwg-*` class hooks are kept so the replica reads the same to any tooling
 * that targets the reference markup. */

.vp-auth {
	width: 100%;
	max-width: 760px;
	margin: 32px auto 56px;
}

.vp-auth--register { max-width: 860px; }

.vp-auth__title {
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 700;
	letter-spacing: -.025em;
	margin: 0 0 8px;
}

.vp-auth__lead { color: var(--vp-muted); font-size: var(--vp-f-md); margin: 0 0 28px; }

/* Login card + new-customer card sit side by side. */
.vp-auth .vp-auth__login {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
}

.vp-auth .vp-auth__login .woocommerce-form-login {
	grid-column: 1;
	padding: 24px;
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-lg);
	background: #fff;
}

.vp-auth .vp-auth__login > .vp-auth__title { grid-column: 1 / -1; }

.mwg-new-customer-card {
	grid-column: 2;
	padding: 24px;
	border: 1px solid var(--vp-line);
	border-radius: var(--vp-r-lg);
	background: var(--vp-bg-2);
}

.mwg-new-customer-card h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.mwg-new-customer-card p { color: var(--vp-muted); margin: 0 0 12px; }
.mwg-new-customer-card ul { list-style: none; margin: 0 0 20px; padding: 0; }
.mwg-new-customer-card li { position: relative; padding: 4px 0 4px 20px; font-size: var(--vp-f-base); color: var(--vp-text); }
.mwg-new-customer-card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--vp-accent);
}

/* Form rows: labels above inputs, full-width controls. */
.vp-auth .form-row { margin: 0 0 16px; }
.vp-auth .form-row label { display: block; font-size: 13px; font-weight: 600; color: var(--vp-text); margin-bottom: 6px; }
.vp-auth .form-row label .required { color: var(--vp-danger); }

.vp-auth .form-row .input-text,
.vp-auth .form-row input[type="text"],
.vp-auth .form-row input[type="email"],
.vp-auth .form-row input[type="password"],
.vp-auth .form-row input[type="tel"],
.vp-auth .form-row select {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--vp-line);
	border-radius: 8px;
	background: #fff;
	font-size: var(--vp-f-base);
	color: var(--vp-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vp-auth .form-row .input-text:focus,
.vp-auth .form-row input:focus,
.vp-auth .form-row select:focus {
	outline: none;
	border-color: var(--vp-accent);
	box-shadow: 0 0 0 3px rgba(0, 214, 143, .15);
}

/* Two-up rows (first/last name, phone/whatsapp). */
.vp-auth__split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Date-of-birth triple select. */
.mwg-dob-field .mwg-dob-selects { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; }
.mwg-dob-field .mwg-dob-selects select { height: 44px; }

/* Login actions: button + forgot-password link on one line. */
.mwg-login-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.mwg-login-actions a { font-size: var(--vp-f-sm); color: var(--vp-muted); text-decoration: underline; }
.mwg-login-actions a:hover { color: var(--vp-text); }

/* Register submit + "already have an account" switch. */
.vp-auth__submit { margin-top: 24px; }
.vp-auth__submit .woocommerce-form-register__submit { width: 100%; }
.vp-auth__alt { margin: 16px 0 0; text-align: center; font-size: var(--vp-f-base); color: var(--vp-muted); }
.vp-auth__alt a { color: var(--vp-ink); font-weight: 600; text-decoration: underline; }

/* ---- responsive ----------------------------------------------------- */
@media (max-width: 1020px) {
	.vp-pdp { grid-template-columns: 1fr; gap: 30px; }
	.vp-vtable__head { display: none; }

	.vp-vrow { grid-template-columns: 1fr auto; gap: 10px 14px; padding: 14px 16px; }
	.vp-vrow__fl { grid-column: 1 / -1; }
	.vp-vrow__st { grid-column: 1; grid-row: 2; }
	.vp-vrow__pr { grid-column: 1; grid-row: 3; }
	.vp-qty { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
	.vp-vrow__add { grid-column: 1 / -1; }
	.vp-vrow__oos { grid-column: 2; grid-row: 2 / span 2; }

	.vp-auth .vp-auth__login { grid-template-columns: 1fr; }
	.vp-auth .vp-auth__login .woocommerce-form-login,
	.mwg-new-customer-card { grid-column: 1; }
	.vp-auth__split { grid-template-columns: 1fr; }
	.mwg-dob-field .mwg-dob-selects { grid-template-columns: 1fr; }
}