/**
 * Wallstrdev Design System — Shop Page
 * Child theme: hello-biz-child  |  Version 1.0.0
 *
 * ALL rules scoped to body.wds-shop-page — zero bleed to other pages.
 */

/* ── 1. Tokens ────────────────────────────────────────────────── */
body.wds-shop-page {
	--paper:       #FFFFFF;
	--paper-warm:  #F6F5F0;
	--paper-cool:  #F2F3F5;
	--ink:         #0E0E10;
	--ink-soft:    #1A1A1F;
	--muted:       #6B6B72;
	--muted-2:     #9A9AA1;
	--rule:        #E6E6E2;
	--chartreuse:  #DCEE2A;
	--chartreuse-2:#C8D820;
	--pink:        #F0BFE8;
	--pink-2:      #E89FDD;
	--navy:        #1B2A4E;
	--gold:        #B8945C;
	--font-display:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
	--font-body:   "Manrope", ui-sans-serif, system-ui, sans-serif;
	--font-mono:   "JetBrains Mono", ui-monospace, Menlo, monospace;
	--r-sm:  6px;
	--r-md:  14px;
	--r-lg:  18px;
	--r-xl:  32px;
}

/* ── 2. Wrap ──────────────────────────────────────────────────── */
body.wds-shop-page .wds-shop-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ── 3. Buttons ───────────────────────────────────────────────── */
body.wds-shop-page .wds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 22px;
	border-radius: var(--r-sm);
	border: 1.5px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
	line-height: 1;
	white-space: nowrap;
}
body.wds-shop-page .wds-btn:active { transform: translateY(1px); }

body.wds-shop-page .wds-btn--primary {
	background: var(--chartreuse);
	color: var(--ink);
	border-color: var(--ink);
}
body.wds-shop-page .wds-btn--primary:hover { background: var(--chartreuse-2); }

body.wds-shop-page .wds-btn--secondary {
	background: transparent;
	color: var(--ink);
	border-color: var(--ink);
}
body.wds-shop-page .wds-btn--secondary:hover {
	background: var(--ink);
	color: var(--paper);
}

body.wds-shop-page .wds-btn--ghost {
	background: transparent;
	color: var(--paper);
	border-color: rgba(255,255,255,0.3);
}
body.wds-shop-page .wds-btn--ghost:hover { border-color: rgba(255,255,255,0.7); }

body.wds-shop-page .wds-btn--lg  { padding: 18px 28px; font-size: 16px; }
body.wds-shop-page .wds-btn--sm  { padding: 10px 16px; font-size: 13px; }

body.wds-shop-page .wds-arrow { transition: transform .15s ease; }
body.wds-shop-page .wds-btn:hover .wds-arrow { transform: translateX(3px); }

/* ── 4. Shop Head ─────────────────────────────────────────────── */
body.wds-shop-page .wds-shophead {
	padding: 30px 0 0;
	background: var(--paper);
}

/* Breadcrumb */
body.wds-shop-page .wds-crumb {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 0;
}
body.wds-shop-page .wds-crumb a {
	color: var(--muted);
	text-decoration: none;
}
body.wds-shop-page .wds-crumb a:hover { color: var(--ink); }
body.wds-shop-page .wds-crumb-here { color: var(--ink); }

/* Shop hero */
body.wds-shop-page .wds-shop-hero {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: end;
	padding: 30px 0 40px;
	border-bottom: 1.5px solid var(--ink);
}

body.wds-shop-page .wds-shop-kicker {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 20px;
	display: inline-flex;
	gap: 10px;
	align-items: center;
}
body.wds-shop-page .wds-shop-kicker-lbl {
	background: var(--chartreuse);
	border: 1.5px solid var(--ink);
	padding: 4px 8px;
	border-radius: 4px;
	font-weight: 600;
}

body.wds-shop-page .wds-shop-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(44px, 5.6vw, 80px);
	line-height: 1.0;
	letter-spacing: -0.028em;
	margin: 0;
	color: var(--ink);
}

body.wds-shop-page .wds-shop-lede {
	font-size: 19px;
	max-width: 48ch;
	color: var(--muted);
	line-height: 1.55;
	margin: 18px 0 0;
}

body.wds-shop-page .wds-shop-promise {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
body.wds-shop-page .wds-promise-row {
	display: flex;
	gap: 12px;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ink);
}
body.wds-shop-page .wds-pdot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink);
	flex-shrink: 0;
}
body.wds-shop-page .wds-pdot--chart {
	background: var(--chartreuse);
	border: 1px solid var(--ink);
}

/* ── 5. Shop Layout ───────────────────────────────────────────── */
body.wds-shop-page .wds-shop {
	padding: 36px 0 24px;
}
body.wds-shop-page .wds-shop-layout {
	display: grid;
	grid-template-columns: 248px 1fr;
	gap: 48px;
	align-items: start;
}

/* ── 6. Sidebar ───────────────────────────────────────────────── */
body.wds-shop-page .wds-side {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

body.wds-shop-page .wds-filt h5 {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
	font-weight: 500;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--rule);
}

body.wds-shop-page .wds-filt ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* Category links */
body.wds-shop-page .wds-filt-link,
body.wds-shop-page .wds-filt-tag {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	padding: 7px 8px;
	border-radius: 8px;
	transition: background .12s ease;
	text-decoration: none;
	color: var(--ink);
	cursor: default;
}
body.wds-shop-page .wds-filt-link:hover { background: var(--paper-warm); }
body.wds-shop-page .wds-filt-link.is-active { background: var(--paper-warm); font-weight: 600; }

/* Checkbox box visual */
body.wds-shop-page .wds-fbox {
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--ink);
	border-radius: 4px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink);
	transition: background .12s ease;
}
body.wds-shop-page .wds-fbox.is-checked {
	background: var(--chartreuse);
}
body.wds-shop-page .wds-fbox.is-checked::after {
	content: "✓";
}

body.wds-shop-page .wds-fn {
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted-2);
}

/* Price filter */
body.wds-shop-page .wds-price-form { margin: 0; }
body.wds-shop-page .wds-pricebox {
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	padding: 18px;
}
body.wds-shop-page .wds-price-vals {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink);
	margin-bottom: 12px;
}
body.wds-shop-page .wds-pricebox input[type="range"] {
	width: 100%;
	accent-color: var(--ink);
}

/* Sidebar note */
body.wds-shop-page .wds-side-note {
	border: 1.5px solid var(--ink);
	border-radius: var(--r-md);
	padding: 18px;
}
body.wds-shop-page .wds-side-note-t {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	margin-bottom: 6px;
}
body.wds-shop-page .wds-side-note p {
	font-size: 13px;
	color: var(--muted);
	margin: 0;
	line-height: 1.5;
}

/* ── 7. Ordering bar ──────────────────────────────────────────── */
body.wds-shop-page .wds-orderbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 32px;
}

body.wds-shop-page .wds-ob-count {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--muted);
}
body.wds-shop-page .wds-ob-count b { color: var(--ink); }

body.wds-shop-page .wds-ob-sort {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--muted);
	text-transform: uppercase;
	margin: 0;
}
body.wds-shop-page .wds-ob-sort select {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ink);
	padding: 9px 34px 9px 14px;
	border: 1px solid var(--rule);
	border-radius: 8px;
	background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230E0E10' fill='none' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	letter-spacing: 0.02em;
}
body.wds-shop-page .wds-ob-sort select:hover { border-color: var(--ink); }

/* ── 8. Product grid ──────────────────────────────────────────── */
body.wds-shop-page .wds-shop-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
}

/* ── 9. Product card ──────────────────────────────────────────── */
body.wds-shop-page .wds-product {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color .15s ease, transform .15s ease;
}
body.wds-shop-page .wds-product:hover {
	border-color: var(--ink);
	transform: translateY(-3px);
}

/* Product thumbnail */
body.wds-shop-page .wds-product-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--rule);
	text-decoration: none;
	transition: border-bottom-color .15s ease;
}
body.wds-shop-page .wds-product:hover .wds-product-thumb {
	border-bottom-color: var(--ink);
}

body.wds-shop-page .wds-product.wds-t-chart .wds-product-thumb { background: var(--chartreuse); color: var(--ink); }
body.wds-shop-page .wds-product.wds-t-pink  .wds-product-thumb { background: var(--pink);       color: var(--ink); }

body.wds-shop-page .wds-product-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
body.wds-shop-page .wds-product-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

body.wds-shop-page .wds-corner {
	position: absolute;
	top: 14px;
	left: 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	color: var(--ink);
	padding: 5px 9px;
	background: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 4px;
	font-weight: 600;
	z-index: 1;
}

body.wds-shop-page .wds-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--paper);
	padding: 5px 9px;
	background: var(--ink);
	border-radius: 4px;
	font-weight: 600;
	z-index: 1;
}
body.wds-shop-page .wds-badge .woocommerce-Price-amount { color: inherit; }
body.wds-shop-page .wds-badge .woocommerce-Price-currencySymbol { color: inherit; }

/* Product body */
body.wds-shop-page .wds-product-body {
	padding: 24px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

body.wds-shop-page .wds-product-meta {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--muted);
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}

body.wds-shop-page .wds-stars { color: var(--ink); letter-spacing: 1px; }
body.wds-shop-page .wds-stars-n { color: var(--muted); letter-spacing: 0.04em; margin-left: 4px; }

body.wds-shop-page .wds-product-title {
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}
body.wds-shop-page .wds-product-title a {
	text-decoration: none;
	color: var(--ink);
}
body.wds-shop-page .wds-product-title a:hover { color: var(--muted); }

body.wds-shop-page .wds-product-desc {
	font-size: 14px;
	color: var(--muted);
	margin: 0;
	line-height: 1.55;
}

body.wds-shop-page .wds-product-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
body.wds-shop-page .wds-product-tags span {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	color: var(--ink);
	padding: 4px 8px;
	border: 1px solid var(--rule);
	border-radius: 999px;
}

/* Product footer (price + CTA) */
body.wds-shop-page .wds-product-foot {
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

body.wds-shop-page .wds-product-price {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 26px;
	letter-spacing: -0.02em;
	line-height: 1;
}
body.wds-shop-page .wds-product-price .woocommerce-Price-amount { color: var(--ink); }
body.wds-shop-page .wds-product-price small {
	display: block;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 400;
	color: var(--muted);
	letter-spacing: 0.04em;
	margin-top: 5px;
}

/* WooCommerce add to cart inside our card */
body.wds-shop-page .wds-product-foot .add_to_cart_button.loading { opacity: 0.6; }
body.wds-shop-page .wds-product-foot .add_to_cart_button.added  { background: var(--chartreuse-2); }

/* ── 10. Empty state ──────────────────────────────────────────── */
body.wds-shop-page .wds-no-products {
	grid-column: 1 / -1;
	text-align: center;
	padding: 64px 0;
}

/* ── 11. Pagination ───────────────────────────────────────────── */
body.wds-shop-page .wds-shop-pagination {
	margin-top: 40px;
}
body.wds-shop-page .wds-shop-pagination .woocommerce-pagination {
	display: flex;
	justify-content: center;
}
body.wds-shop-page .wds-shop-pagination .page-numbers {
	display: inline-flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
body.wds-shop-page .wds-shop-pagination .page-numbers li a,
body.wds-shop-page .wds-shop-pagination .page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--rule);
	border-radius: 8px;
	font-family: var(--font-mono);
	font-size: 13px;
	text-decoration: none;
	color: var(--ink);
	transition: border-color .12s ease, background .12s ease;
}
body.wds-shop-page .wds-shop-pagination .page-numbers li a:hover { border-color: var(--ink); }
body.wds-shop-page .wds-shop-pagination .page-numbers li span.current {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}

/* ── 12. Trust strip ──────────────────────────────────────────── */
body.wds-shop-page .wds-trust {
	margin-top: 36px;
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	padding: 28px 32px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}
body.wds-shop-page .wds-trust-v {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 24px;
	letter-spacing: -0.02em;
}
body.wds-shop-page .wds-trust-l {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--muted);
	letter-spacing: 0.04em;
	margin-top: 6px;
}

/* ── 13. CTA Section ──────────────────────────────────────────── */
body.wds-shop-page .wds-shop-cta {
	padding: 56px 0 80px;
}
body.wds-shop-page .wds-cta-panel {
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--r-xl);
	padding: 64px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
	position: relative;
	overflow: hidden;
}
body.wds-shop-page .wds-cta-deco {
	position: absolute;
	right: -60px;
	top: -60px;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: var(--chartreuse);
	opacity: 0.16;
	pointer-events: none;
}
body.wds-shop-page .wds-cta-eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-2);
	margin: 0 0 14px;
	display: flex;
	gap: 8px;
	align-items: center;
}
body.wds-shop-page .wds-cta-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--chartreuse);
	display: inline-block;
	flex-shrink: 0;
}
body.wds-shop-page .wds-cta-panel h2 {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.4vw, 44px);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.06;
	max-width: 16ch;
	margin: 0;
	color: var(--paper);
}
body.wds-shop-page .wds-cta-acts {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

/* ── 14. Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
	body.wds-shop-page .wds-shop-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	body.wds-shop-page .wds-side {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px;
	}
	body.wds-shop-page .wds-trust {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}
}

@media (max-width: 760px) {
	body.wds-shop-page .wds-shop-hero {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: start;
	}
	body.wds-shop-page .wds-cta-panel { padding: 44px 28px; }
}

@media (max-width: 560px) {
	body.wds-shop-page .wds-shop-grid { grid-template-columns: 1fr; }
	body.wds-shop-page .wds-shop-wrap { padding: 0 20px; }
}