/* =============================================================================
 * Zoonum — WooCommerce stylesheet
 * Loaded only when WooCommerce is active. Uses the same CSS variables so all
 * WC pages instantly inherit Customizer-driven colors / fonts / radius.
 * ============================================================================= */

/* ----------------------------------------------------------------------------
 * WC WRAPPER (matches our container)
 * -------------------------------------------------------------------------- */
.zoonum-wc-wrapper { padding: 48px 0 64px; }
.woocommerce .zoonum-container { max-width: var(--z-container); }
.woocommerce-breadcrumb {
	font-size: .85rem;
	color: var(--z-muted);
	margin: 0 0 32px;
}
.woocommerce-breadcrumb a { color: var(--z-muted); }
.woocommerce-breadcrumb a:hover { color: var(--z-primary); }

/* ----------------------------------------------------------------------------
 * PRODUCT GRID (shop/archives)
 * -------------------------------------------------------------------------- */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	gap: 28px !important;
	grid-template-columns: repeat(4, 1fr) !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr) !important; }
/* WooCommerce adds ::before/::after clearfix pseudo-elements to ul.products.
   In a CSS grid they become grid items and steal the first/last cell, leaving
   an empty gap before the first product. Remove them so products fill from
   the very first cell. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	background: #fff;
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	padding: 0 !important;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	display: flex; flex-direction: column;
	position: relative;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -10px rgba(15,23,42,.1);
	border-color: rgba(var(--z-primary-rgb), .35);
}
.woocommerce ul.products li.product a img {
	width: 100% !important;
	aspect-ratio: 1/1;
	object-fit: cover;
	margin: 0 !important;
	display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	padding: 16px 20px 4px !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	color: var(--z-secondary) !important;
	margin: 0 !important;
	line-height: 1.35;
}
.woocommerce ul.products li.product .price {
	padding: 0 20px 12px !important;
	color: var(--z-primary) !important;
	font-weight: 700 !important;
	font-size: 1.1rem !important;
	margin: 0 !important;
}
.woocommerce ul.products li.product .price del { color: var(--z-muted) !important; opacity: .7; font-weight: 400; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { background: none !important; text-decoration: none; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	margin: auto 20px 20px !important;
	padding: 12px 20px !important;
	background: var(--z-primary) !important;
	color: #fff !important;
	border-radius: var(--z-radius) !important;
	border: 0 !important;
	font-weight: 600 !important;
	font-size: .9rem !important;
	text-align: center !important;
	display: inline-block !important;
	width: calc(100% - 40px) !important;
	box-sizing: border-box !important;
	transition: background .15s ease !important;
}
.woocommerce ul.products li.product .button:hover {
	background: var(--z-primary-hover) !important;
}

.woocommerce span.onsale {
	background: var(--z-success) !important;
	color: #fff !important;
	padding: 6px 12px !important;
	border-radius: 999px !important;
	font-size: .75rem !important;
	font-weight: 700 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	top: 12px !important; left: 12px !important;
	min-height: auto !important;
	line-height: 1 !important;
	min-width: 0 !important;
	margin: 0 !important;
	position: absolute !important;
}

.star-rating { color: #fbbf24 !important; }

/* ----------------------------------------------------------------------------
 * SHOP SIDEBAR & SORT
 * -------------------------------------------------------------------------- */
.woocommerce .woocommerce-result-count { color: var(--z-muted); font-size: .9rem; }
.woocommerce .woocommerce-ordering select {
	padding: 10px 14px;
	border: 2px solid var(--z-border);
	border-radius: var(--z-radius-sm);
	background: #fff;
	font-size: .9rem;
	color: var(--z-secondary);
}

/* ----------------------------------------------------------------------------
 * SINGLE PRODUCT
 * -------------------------------------------------------------------------- */
.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	margin-bottom: 64px;
}
.single-product .product .woocommerce-product-gallery {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}
.single-product .product .woocommerce-product-gallery__image img { border-radius: var(--z-radius-lg); }
.single-product .product .entry-summary {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}
.single-product .product .product_title {
	font-size: 2.25rem !important;
	margin: 0 0 12px !important;
}
.single-product .product .price {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var(--z-primary) !important;
	margin: 0 0 20px !important;
}
.single-product .product .woocommerce-product-details__short-description { color: var(--z-muted); line-height: 1.65; margin-bottom: 24px; }
.single-product .quantity input.qty {
	padding: 12px;
	border: 2px solid var(--z-border);
	border-radius: var(--z-radius-sm);
	width: 80px;
	font-size: 1rem;
	text-align: center;
}
.single-product .single_add_to_cart_button {
	background: var(--z-primary) !important;
	color: #fff !important;
	padding: 14px 32px !important;
	border-radius: var(--z-radius) !important;
	border: 0 !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	letter-spacing: .02em;
}
.single-product .single_add_to_cart_button:hover { background: var(--z-primary-hover) !important; }

.woocommerce-tabs { margin-top: 48px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 !important;
	margin: 0 0 24px !important;
	border-bottom: 2px solid var(--z-border) !important;
	display: flex;
	gap: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 14px 24px !important;
	color: var(--z-muted) !important;
	font-weight: 600;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--z-primary) !important;
	border-bottom-color: var(--z-primary);
}

/* Related products */
.related.products h2, .upsells.products h2 { font-size: 1.5rem; margin: 48px 0 24px; }

/* ----------------------------------------------------------------------------
 * NOTICES / ALERTS
 * Flex layout so WC's ::before icon sits inline (no overlap) and the action
 * button (View cart / etc.) aligns to the right.
 * -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	display: flex !important;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	background: var(--z-surface) !important;
	border: 1px solid var(--z-border) !important;
	border-left: 4px solid var(--z-primary) !important;
	color: var(--z-secondary) !important;
	border-radius: var(--z-radius-sm) !important;
	padding: 14px 18px !important;
	font-size: .95rem;
	margin: 0 0 24px !important;
	line-height: 1.4;
}
/* Neutralise WC's absolutely-positioned ::before icon so it flows inline. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before {
	position: static !important;
	top: auto !important;
	left: auto !important;
	margin: 0 !important;
	font-size: 1.15em;
	line-height: 1;
	flex-shrink: 0;
}
.woocommerce-error { border-left-color: #ef4444 !important; }
.woocommerce-error::before { color: #ef4444; }
.woocommerce-message { border-left-color: var(--z-success) !important; }
.woocommerce-message::before { color: var(--z-success); }
.woocommerce-info::before { color: var(--z-primary); }
.woocommerce-message a.button, .woocommerce-error a.button, .woocommerce-info a.button {
	background: var(--z-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--z-radius-sm) !important;
	padding: 8px 16px !important;
	font-size: .85rem !important;
	margin-left: auto !important;
	float: none !important;
	flex-shrink: 0;
}
.woocommerce-message a.button:hover, .woocommerce-info a.button:hover { background: var(--z-primary-hover) !important; }

/* ----------------------------------------------------------------------------
 * CART
 * -------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce { display: block; }
/* Items summary spans the full width on top; the totals box sits below it,
   right-aligned and comfortably wide so amounts never clip. */
.woocommerce-cart-form {
	width: 100%;
	margin: 0 0 28px;
	background: #fff;
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	padding: 24px;
}
.woocommerce-cart .cart-collaterals { width: 100% !important; float: none !important; margin: 0 !important; display: block; }
.woocommerce-cart .cart-collaterals .cross-sells { width: 100%; margin-top: 28px; }
.woocommerce table.shop_table {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	margin: 0 !important;
	border-collapse: collapse;
	width: 100% !important;
	table-layout: auto;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
	border: 0 !important;
	border-bottom: 1px solid var(--z-border) !important;
	padding: 16px 10px !important;
	vertical-align: middle;
}
.woocommerce table.shop_table thead th {
	background: transparent !important;
	color: var(--z-muted);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
/* Give the product name room so it doesn't wrap awkwardly ("smushed"). */
.woocommerce-cart table.cart td.product-name { width: 40%; font-weight: 500; }
.woocommerce-cart table.cart td.product-name a { color: var(--z-secondary); }
.woocommerce-cart table.cart td.product-name a:hover { color: var(--z-primary); }
.woocommerce-cart table.cart img { width: 56px; height: auto; border-radius: var(--z-radius-sm); margin-right: 10px; float: left; }
.woocommerce-cart table.cart td.product-quantity .quantity input.qty {
	width: 64px; padding: 8px; text-align: center;
	border: 2px solid var(--z-border); border-radius: var(--z-radius-sm);
}
.woocommerce-cart table.cart td.actions { padding-top: 20px !important; }

.woocommerce a.remove {
	color: var(--z-muted) !important;
	width: 22px; height: 22px; font-size: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--z-surface);
	text-decoration: none;
}
.woocommerce a.remove:hover { background: #ef4444 !important; color: #fff !important; }

/* Coupon + update row — coupon field takes the width, Apply button is compact
   and the same height as the field (aligned). */
.woocommerce-cart table.cart td.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
}
.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	align-items: stretch;
	gap: 10px;
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
}
.woocommerce-cart table.cart td.actions .coupon #coupon_code {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 16px;
	border: 2px solid var(--z-border);
	border-radius: var(--z-radius-sm);
	font-size: .95rem;
}
.woocommerce-cart table.cart td.actions .coupon button {
	flex: 0 0 auto;
	background: var(--z-secondary) !important;
	color: #fff !important;
	border-radius: var(--z-radius-sm) !important;
	padding: 0 16px !important;
	font-size: .85rem !important;
	border: 0 !important;
	white-space: nowrap;
}
.woocommerce-cart table.cart td.actions .coupon button:hover { background: var(--z-primary) !important; }
.woocommerce-cart table.cart td.actions > button[name="update_cart"] {
	flex: 0 0 auto;
	margin-left: auto;
	background: var(--z-surface) !important;
	color: var(--z-secondary) !important;
	border: 1px solid var(--z-border) !important;
	border-radius: var(--z-radius-sm) !important;
	padding: 11px 18px !important;
}
.woocommerce-cart table.cart td.actions > button[name="update_cart"]:disabled { opacity: .5; }

.cart_totals {
	background: var(--z-surface);
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	padding: 24px;
	width: 100%;
	max-width: 460px;
	margin-left: auto;   /* right-aligned beneath the items summary */
}
.cart_totals h2 { font-size: 1.25rem; margin: 0 0 16px; color: var(--z-secondary); }
.cart_totals table.shop_table { width: 100% !important; table-layout: auto; }
.cart_totals table.shop_table td, .cart_totals table.shop_table th { padding: 12px 0 !important; }
.cart_totals table.shop_table td { text-align: right; }
.cart_totals .amount, .cart_totals td[data-title] { white-space: nowrap; }  /* stop amounts clipping */

.checkout-button, .wc-proceed-to-checkout .button {
	background: var(--z-primary) !important;
	color: #fff !important;
	border-radius: var(--z-radius) !important;
	padding: 14px 24px !important;
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	border: 0 !important;
	margin-top: 16px !important;
}
.checkout-button:hover, .wc-proceed-to-checkout .button:hover { background: var(--z-primary-hover) !important; }

/* ----------------------------------------------------------------------------
 * CHECKOUT
 * Explicit grid: billing/customer details on the left (spanning two rows),
 * the order-review heading + box stacked on the right. Fixes the WC float
 * layout that left a gap on the left with billing pushed to the right.
 * -------------------------------------------------------------------------- */
.woocommerce-checkout form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
	grid-template-rows: auto 1fr;
	gap: 28px 32px;
	align-items: start;
}
.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
	background: #fff;
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	padding: 28px;
	min-width: 0;
}
.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; font-size: 1.2rem; }
.woocommerce-checkout #order_review        { grid-column: 2; grid-row: 2; margin: 0; }

/* Stack billing & shipping within the (narrower) left column. */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 8px; width: 100% !important; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100% !important; padding: 0 !important; max-width: none; float: none !important; }

.woocommerce form .form-row { display: flex; flex-direction: column; margin: 0 0 16px !important; padding: 0 !important; }
.woocommerce form .form-row label { font-size: .85rem; font-weight: 600; color: var(--z-secondary); margin-bottom: 6px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	padding: 12px 14px !important;
	border: 2px solid var(--z-border) !important;
	border-radius: var(--z-radius-sm) !important;
	background: #fff !important;
	font-size: 1rem !important;
	height: auto !important;
	line-height: 1.4 !important;
	width: 100% !important;
	box-sizing: border-box;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { outline: none; border-color: var(--z-primary) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.5 !important; padding: 12px 14px !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 100% !important; right: 8px !important; }
.select2-dropdown { border: 2px solid var(--z-primary) !important; border-radius: var(--z-radius-sm) !important; }

#order_review {
	background: var(--z-surface);
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	padding: 24px;
	position: sticky; top: 96px;
}
#order_review h3 { font-size: 1.1rem; }
.woocommerce-checkout #payment {
	background: transparent !important;
	border-radius: 0 !important;
	padding: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods {
	background: #fff !important;
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius);
	padding: 16px !important;
	list-style: none;
	margin: 0 0 16px !important;
}
.woocommerce-checkout #payment ul.payment_methods li { padding: 12px 0 !important; border-bottom: 1px solid var(--z-border); }
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: 0; }
.woocommerce-checkout #payment div.payment_box {
	background: var(--z-surface) !important;
	border-radius: var(--z-radius-sm);
	padding: 16px !important;
	margin: 10px 0 0 !important;
	color: var(--z-text);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
#place_order {
	background: var(--z-primary) !important;
	color: #fff !important;
	border-radius: var(--z-radius) !important;
	padding: 16px 24px !important;
	width: 100%;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	border: 0 !important;
	margin-top: 16px;
}
#place_order:hover { background: var(--z-primary-hover) !important; }

/* Login / coupon toggles span the full width above the grid columns. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.login,
.woocommerce-checkout form.checkout_coupon { grid-column: 1 / -1; }
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 16px !important; }
form.login, form.checkout_coupon { background: var(--z-surface); border: 1px solid var(--z-border); border-radius: var(--z-radius-lg); padding: 20px; margin-bottom: 24px; }

/* ----------------------------------------------------------------------------
 * MY ACCOUNT
 * -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation {
	width: 240px !important;
	margin: 0 !important;
	float: none !important;
}
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0; padding: 0;
	background: #fff;
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--z-border); }
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 20px;
	color: var(--z-secondary);
	font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--z-primary);
	color: #fff;
}
.woocommerce-account .woocommerce-MyAccount-content {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
	background: #fff;
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	padding: 28px;
}

.woocommerce-form-login, .woocommerce-form-register {
	max-width: 480px;
	margin: 32px auto;
	background: #fff;
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	padding: 32px;
}
.woocommerce-form-login button, .woocommerce-form-register button {
	background: var(--z-primary) !important;
	color: #fff !important;
	border-radius: var(--z-radius) !important;
	padding: 12px 24px !important;
	border: 0 !important;
	font-weight: 600 !important;
}

/* Tables on my-account (orders, downloads, addresses) */
.woocommerce-orders-table, .woocommerce-table {
	background: #fff !important;
	border-radius: var(--z-radius) !important;
}
.woocommerce-orders-table thead th, .woocommerce-table thead th { background: var(--z-surface) !important; }
.woocommerce-button {
	background: var(--z-primary) !important;
	color: #fff !important;
	border-radius: var(--z-radius-sm) !important;
	padding: 8px 16px !important;
	font-size: .85rem !important;
}

/* ----------------------------------------------------------------------------
 * GENERAL BUTTONS in WC (catch-all)
 * -------------------------------------------------------------------------- */
.woocommerce .button {
	background: var(--z-surface);
	color: var(--z-secondary);
	border-radius: var(--z-radius-sm);
	padding: 10px 18px;
	border: 1px solid var(--z-border);
	font-weight: 500;
	transition: all .15s ease;
}
.woocommerce .button:hover { background: var(--z-primary); color: #fff; border-color: var(--z-primary); }

/* ----------------------------------------------------------------------------
 * WIDGETS
 * -------------------------------------------------------------------------- */
.widget_price_filter .price_slider_amount .button { background: var(--z-primary) !important; color: #fff !important; }
.widget_price_filter .ui-slider .ui-slider-range { background: var(--z-primary) !important; }
.widget_price_filter .ui-slider .ui-slider-handle { background: var(--z-primary) !important; border-color: var(--z-primary) !important; }

/* ============================================================================
 * ZOONUM WC PAGE CUSTOMIZATIONS
 * Shop banner, trust badges, page headings, notices, checkout security,
 * thank-you next steps, account header. Driven by Customizer (Zoonum Shop).
 * ========================================================================== */

/* ---- Shared page heading & notice ---- */
.zoonum-wc-page-heading {
	font-family: var(--z-font-heading);
	font-weight: var(--z-heading-weight);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	color: var(--z-secondary);
	margin: 0 0 24px;
	line-height: 1.15;
}
.zoonum-wc-notice-bar {
	background: rgba(var(--z-primary-rgb), .08);
	border: 1px solid rgba(var(--z-primary-rgb), .25);
	border-left: 4px solid var(--z-primary);
	border-radius: var(--z-radius-sm);
	padding: 14px 18px;
	margin: 0 0 26px;
	color: var(--z-text);
	font-size: .95rem;
}
.zoonum-wc-notice-bar p:last-child { margin-bottom: 0; }

/* ---- Shop banner ---- */
.zoonum-shop-banner {
	width: 100%;
	padding: clamp(40px, 6vw, 72px) 0;
	margin: 0 0 40px;
}
.zoonum-shop-banner__inner { text-align: center; }
.zoonum-shop-banner__heading {
	font-family: var(--z-font-heading);
	font-weight: var(--z-heading-weight);
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1.1;
	margin: 0 0 14px;
	color: inherit;
}
.zoonum-shop-banner__sub {
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	opacity: .85;
	max-width: 640px;
	margin: 0 auto;
}
.zoonum-shop-banner__sub p:last-child { margin-bottom: 0; }

/* ---- Trust badge row ---- */
.zoonum-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	align-items: center;
	justify-content: center;
}
.zoonum-trust-row--banner { margin-top: 28px; }
.zoonum-trust-row--cart,
.zoonum-trust-row--checkout { margin: 22px 0 0; justify-content: flex-start; }
.zoonum-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01em;
}
.zoonum-trust-badge__icon {
	display: inline-flex;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(var(--z-primary-rgb), .12);
	color: var(--z-primary);
	flex-shrink: 0;
}
.zoonum-shop-banner .zoonum-trust-badge { color: inherit; }
.zoonum-shop-banner .zoonum-trust-badge__icon {
	background: rgba(255,255,255,.16);
	color: inherit;
}

/* ---- Checkout security block ---- */
.zoonum-checkout-security {
	margin: 0 0 18px;
	padding: 14px 16px;
	background: var(--z-surface);
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-sm);
}
.zoonum-checkout-security__text {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 10px;
	font-size: .85rem;
	color: var(--z-muted);
	line-height: 1.5;
}
.zoonum-checkout-security__text svg { color: var(--z-primary); flex-shrink: 0; margin-top: 2px; }
.zoonum-checkout-security .zoonum-trust-row { gap: 10px 18px; }
.zoonum-checkout-security .zoonum-trust-badge { font-size: .82rem; }
.zoonum-checkout-security .zoonum-trust-badge__icon { width: 28px; height: 28px; }

/* ---- Thank you / next steps ---- */
.zoonum-thankyou__heading {
	display: block;
	font-family: var(--z-font-heading);
	font-weight: var(--z-heading-weight);
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	color: var(--z-secondary);
	margin-bottom: 10px;
	line-height: 1.15;
}
.zoonum-thankyou__message { display: block; color: var(--z-text); font-size: 1.05rem; }

.zoonum-next-steps { margin: 36px 0; }
.zoonum-next-steps__title {
	font-family: var(--z-font-heading);
	font-weight: var(--z-heading-weight);
	font-size: 1.4rem;
	color: var(--z-secondary);
	margin: 0 0 20px;
}
.zoonum-next-steps__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}
.zoonum-next-step {
	background: var(--z-surface);
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius);
	padding: 24px 22px;
}
.zoonum-next-step__icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(var(--z-primary-rgb), .12);
	color: var(--z-primary);
	margin-bottom: 14px;
}
.zoonum-next-step__num { font-weight: 700; font-size: 1.1rem; }
.zoonum-next-step__title { font-size: 1.05rem; margin: 0 0 6px; color: var(--z-secondary); }
.zoonum-next-step__desc { font-size: .9rem; color: var(--z-muted); margin: 0; line-height: 1.5; }

/* ---- My account ---- */
.zoonum-account-welcome {
	background: var(--z-surface);
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-sm);
	padding: 16px 18px;
	margin: 0 0 24px;
	color: var(--z-text);
}
.zoonum-account-welcome p:last-child { margin-bottom: 0; }

/* ============================================================================
 * EXTRA PAGES (COA + Contact)
 * ========================================================================== */
.zoonum-extra-main { padding: clamp(32px, 5vw, 64px) 0; }

/* Full-bleed banner breakout.
   Extra-page content is injected via the_content, which sits inside the
   centered, max-width .zoonum-container. This pulls a "full" banner out to the
   viewport edges. It relies on the container being horizontally centered
   (margin: 0 auto), which it is, so the math is exact. "contained"/"custom"
   banners omit this class and simply stay within the container. */
.zoonum-extra-banner.is-fullwidth {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.zoonum-extra-intro { max-width: 760px; margin: 0 auto 32px; text-align: center; color: var(--z-text); font-size: 1.05rem; }
.zoonum-extra-editor { margin: 0 0 32px; }
.zoonum-extra-note {
	background: var(--z-surface);
	border: 1px dashed var(--z-border);
	border-radius: var(--z-radius-sm);
	padding: 16px 18px;
	color: var(--z-muted);
}

/* COA library wrapper — let the plugin's own markup breathe. */
.zoonum-coa-library { margin-top: 8px; }

/* ---- Contact layout ---- */
.zoonum-contact-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 32px;
	align-items: start;
}
.zoonum-contact-left { display: flex; flex-direction: column; gap: 24px; }
.zoonum-contact-info-box,
.zoonum-contact-faq-box {
	background: var(--z-surface);
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	padding: 24px;
}
.zoonum-contact-faq-box .zoonum-faq { margin: 0; }
.zoonum-contact-faq-box .zoonum-faq__title { text-align: left; font-size: 1.35rem; margin-bottom: 16px; }
.zoonum-contact-faq-box .zoonum-faq__list { max-width: none; }
.zoonum-contact-faq-box .zoonum-faq__item { background: #fff; }
.zoonum-contact-block-title {
	font-family: var(--z-font-heading);
	font-weight: var(--z-heading-weight);
	font-size: 1.35rem;
	color: var(--z-secondary);
	margin: 0 0 18px;
}
.zoonum-contact-form-col {
	background: #fff;
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-lg);
	padding: 28px;
}
/* Style WPForms to match theme inputs without fighting the plugin too hard. */
.zoonum-contact-form-col .wpforms-field-label { color: var(--z-secondary) !important; font-weight: 600 !important; }
.zoonum-contact-form-col input[type="text"],
.zoonum-contact-form-col input[type="email"],
.zoonum-contact-form-col input[type="tel"],
.zoonum-contact-form-col input[type="url"],
.zoonum-contact-form-col input[type="number"],
.zoonum-contact-form-col textarea,
.zoonum-contact-form-col select {
	border: 2px solid var(--z-border) !important;
	border-radius: var(--z-radius-sm) !important;
	padding: 12px 14px !important;
	background: #fff !important;
	font-size: 1rem !important;
	width: 100% !important;
	box-sizing: border-box;
}
.zoonum-contact-form-col input:focus,
.zoonum-contact-form-col textarea:focus,
.zoonum-contact-form-col select:focus { outline: none; border-color: var(--z-primary) !important; }
.zoonum-contact-form-col .wpforms-submit {
	background: var(--z-primary) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: var(--z-radius) !important;
	padding: 14px 28px !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	cursor: pointer;
	transition: background .15s ease;
}
.zoonum-contact-form-col .wpforms-submit:hover { background: var(--z-primary-hover) !important; }

.zoonum-contact-info { list-style: none; margin: 0; padding: 0; }
.zoonum-contact-info__item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--z-border); }
.zoonum-contact-info__item:last-child { border-bottom: 0; }
.zoonum-contact-info__icon {
	display: inline-flex; width: 40px; height: 40px; flex-shrink: 0;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(var(--z-primary-rgb), .12);
	color: var(--z-primary);
}
.zoonum-contact-info__text { display: flex; flex-direction: column; }
.zoonum-contact-info__label { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--z-muted); font-weight: 700; }
.zoonum-contact-info__value { color: var(--z-secondary); font-size: 1rem; }

/* ---- FAQ accordion (native <details>) ---- */
.zoonum-faq { margin: 48px 0 0; }
.zoonum-faq__title {
	font-family: var(--z-font-heading);
	font-weight: var(--z-heading-weight);
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--z-secondary);
	margin: 0 0 24px;
	text-align: center;
}
.zoonum-faq__list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.zoonum-faq__item {
	background: #fff;
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.zoonum-faq__item[open] { border-color: rgba(var(--z-primary-rgb), .4); box-shadow: 0 10px 30px -12px rgba(15,23,42,.12); }
.zoonum-faq__q {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--z-secondary);
}
.zoonum-faq__q::-webkit-details-marker { display: none; }
.zoonum-faq__marker {
	position: relative;
	width: 16px; height: 16px;
	flex-shrink: 0;
}
.zoonum-faq__marker::before,
.zoonum-faq__marker::after {
	content: ''; position: absolute; background: var(--z-primary);
	transition: transform .2s ease, opacity .2s ease;
}
.zoonum-faq__marker::before { top: 7px; left: 0; width: 16px; height: 2px; }       /* horizontal */
.zoonum-faq__marker::after  { left: 7px; top: 0; width: 2px; height: 16px; }       /* vertical   */
.zoonum-faq__item[open] .zoonum-faq__marker::after { transform: scaleY(0); opacity: 0; } /* minus when open */
.zoonum-faq__a {
	padding: 0 22px 20px;
	color: var(--z-text);
	line-height: 1.6;
}
.zoonum-faq__a p:last-child { margin-bottom: 0; }

/* ============================================================================
 * SIDE CART (slide-out mini cart)
 * ========================================================================== */
.zoonum-sidecart-overlay {
	position: fixed; inset: 0;
	background: var(--z-sidecart-overlay, rgba(15,23,42,.5));
	opacity: 0; transition: opacity .3s ease;
	z-index: 9998;
}
.zoonum-sidecart-overlay.is-open { opacity: 1; }
.zoonum-sidecart {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: var(--z-sidecart-width, 400px);
	max-width: 92vw;
	background: var(--z-sidecart-bg, #fff);
	color: var(--z-sidecart-text, #0f172a);
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.4,0,.2,1);
	z-index: 9999;
	display: flex; flex-direction: column;
	box-shadow: -16px 0 48px -16px rgba(15,23,42,.35);
}
.zoonum-sidecart.is-open { transform: translateX(0); }

/* Loading: a subtle spinner appears; the panel stays fully opaque. */
.zoonum-sidecart__spinner {
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	display: none; align-items: center; justify-content: center;
	background: rgba(255,255,255,0); /* no dimming of the panel itself */
	z-index: 5; pointer-events: none;
}
.zoonum-sidecart.is-busy .zoonum-sidecart__spinner { display: flex; pointer-events: auto; }
.zoonum-sidecart__spinner-dot {
	width: 34px; height: 34px;
	border: 3px solid rgba(var(--z-primary-rgb), .25);
	border-top-color: var(--z-primary);
	border-radius: 50%;
	animation: zoonum-spin .7s linear infinite;
}
@keyframes zoonum-spin { to { transform: rotate(360deg); } }
/* While busy, gently fade just the items list (not the whole panel) for feedback. */
.zoonum-sidecart.is-busy .zoonum-sidecart__items { opacity: .55; transition: opacity .15s ease; }

.zoonum-sidecart__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 22px; border-bottom: 1px solid var(--z-border);
}
.zoonum-sidecart__title { margin: 0; font-size: 1.2rem; font-family: var(--z-font-heading); color: inherit; }
.zoonum-sidecart__close {
	background: none; border: 0; font-size: 28px; line-height: 1;
	color: var(--z-muted); cursor: pointer; padding: 0 4px; transition: color .15s ease;
}
.zoonum-sidecart__close:hover { color: var(--z-primary); }

.zoonum-sidecart__body { flex: 1 1 auto; overflow-y: auto; padding: 12px 22px; }
.zoonum-sidecart__empty { color: var(--z-muted); text-align: center; padding: 40px 0; }
.zoonum-sidecart__items { list-style: none; margin: 0; padding: 0; }
.zoonum-sidecart__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: 12px; align-items: start;
	padding: 16px 0; border-bottom: 1px solid var(--z-border);
}
.zoonum-sidecart__thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--z-radius-sm); display: block; }
.zoonum-sidecart__info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zoonum-sidecart__name { font-weight: 600; color: inherit; text-decoration: none; font-size: .95rem; line-height: 1.3; }
.zoonum-sidecart__name:hover { color: var(--z-primary); }
.zoonum-sidecart__price { color: var(--z-muted); font-size: .9rem; }
.zoonum-sidecart__qty { display: inline-flex; align-items: center; gap: 0; margin-top: 6px; border: 1px solid var(--z-border); border-radius: var(--z-radius-sm); width: fit-content; overflow: hidden; }
.zoonum-sidecart__step {
	background: var(--z-surface); border: 0; width: 30px; height: 30px;
	font-size: 16px; line-height: 1; cursor: pointer; color: var(--z-secondary);
	display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.zoonum-sidecart__step:hover { background: var(--z-primary); color: #fff; }
.zoonum-sidecart__qtynum { min-width: 34px; text-align: center; font-weight: 600; font-size: .9rem; }
.zoonum-sidecart__remove {
	background: none; border: 0; color: var(--z-muted); font-size: 20px; line-height: 1;
	cursor: pointer; padding: 2px 4px; transition: color .15s ease;
}
.zoonum-sidecart__remove:hover { color: #ef4444; }

.zoonum-sidecart__foot { border-top: 1px solid var(--z-border); padding: 18px 22px; }
.zoonum-sidecart__subtotal { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 1.05rem; }
.zoonum-sidecart__subtotal-label { color: var(--z-muted); }
.zoonum-sidecart__subtotal-amount { font-weight: 700; color: inherit; }
.zoonum-sidecart__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zoonum-sidecart__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 13px 16px; border-radius: var(--z-radius); font-weight: 600; font-size: .95rem;
	text-decoration: none; text-align: center; transition: background .15s ease, opacity .15s ease;
}
.zoonum-sidecart__btn--secondary { background: var(--z-surface); color: var(--z-secondary); border: 1px solid var(--z-border); }
.zoonum-sidecart__btn--secondary:hover { background: var(--z-border); }
.zoonum-sidecart__btn--primary { background: var(--z-primary); color: #fff; }
.zoonum-sidecart__btn--primary:hover { background: var(--z-primary-hover); }
body.zoonum-sidecart-open { overflow: hidden; }

/* ============================================================================
 * SEARCH BAR
 * ========================================================================== */
.zoonum-search-form { display: flex; align-items: stretch; gap: 0; }
.zoonum-search-form input[type="search"],
.zoonum-search-form .search-field {
	background: var(--z-search-bg, #f1f5f9) !important;
	color: var(--z-search-text, #0f172a) !important;
	border: 1px solid var(--z-border) !important;
	border-right: 0 !important;
	border-radius: var(--z-radius-sm) 0 0 var(--z-radius-sm) !important;
	padding: 10px 14px !important;
	font-size: .95rem !important;
	min-width: 0;
}
.zoonum-search-form input[type="search"]:focus { outline: none; border-color: var(--z-primary) !important; }
.zoonum-search-form button[type="submit"],
.zoonum-search-form .search-submit {
	background: var(--z-search-btn-bg, var(--z-primary)) !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 var(--z-radius-sm) var(--z-radius-sm) 0 !important;
	padding: 10px 16px !important;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.zoonum-search-form button[type="submit"]:hover { filter: brightness(.95); }

/* ============================================================================
 * SALE PRICE — crossed-out regular price with the sale price beside it.
 * Applies everywhere a price renders (loop, single, cart, side cart).
 * ========================================================================== */
.woocommerce .price del,
.woocommerce div.product p.price del,
.zoonum-sidecart .price del,
.zoonum-sidecart__price del {
	color: var(--z-muted) !important;
	opacity: .75;
	font-weight: 400 !important;
	text-decoration: line-through !important;
	margin-right: 8px;
}
.woocommerce .price ins,
.woocommerce div.product p.price ins,
.zoonum-sidecart .price ins,
.zoonum-sidecart__price ins {
	background: none !important;
	text-decoration: none !important;
	color: var(--z-primary) !important;
	font-weight: 700 !important;
}
/* The little "Sale" flash badge, consistent across loop + single. */
.woocommerce span.onsale {
	background: var(--z-primary) !important;
	color: #fff !important;
	border-radius: 999px !important;
	min-height: auto !important;
	min-width: auto !important;
	padding: 4px 12px !important;
	font-size: .72rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: .03em;
}

/* ============================================================================
 * LIVE SEARCH RESULTS DROPDOWN
 * ========================================================================== */
.zoonum-search-form { position: relative; }
.zoonum-search-results {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0;
	background: #fff; border: 1px solid var(--z-border);
	border-radius: var(--z-radius); box-shadow: 0 20px 48px -16px rgba(15,23,42,.25);
	z-index: 200; max-height: 60vh; overflow-y: auto; padding: 6px;
}
.zoonum-search-results__loading,
.zoonum-search-results__empty { padding: 16px; text-align: center; color: var(--z-muted); }
.zoonum-search-results__list { list-style: none; margin: 0; padding: 0; }
.zoonum-search-results__item a {
	display: flex; align-items: center; gap: 12px; padding: 10px 12px;
	border-radius: var(--z-radius-sm); text-decoration: none; color: var(--z-secondary);
	transition: background .12s ease;
}
.zoonum-search-results__item a:hover { background: var(--z-surface); }
.zoonum-search-results__thumb img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--z-radius-sm); display: block; }
.zoonum-search-results__meta { display: flex; flex-direction: column; min-width: 0; }
.zoonum-search-results__name { font-weight: 600; font-size: .92rem; line-height: 1.3; }
.zoonum-search-results__price { font-size: .85rem; color: var(--z-muted); }
.zoonum-search-results__price del { margin-right: 6px; }

/* ============================================================================
 * SINGLE PRODUCT — additions (category line, moved description, qty stepper,
 * related products width)
 * ========================================================================== */
.zoonum-sp-category { margin: 0 0 14px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.zoonum-sp-category a { color: var(--z-primary); text-decoration: none; font-weight: 600; }
.zoonum-sp-category a:hover { text-decoration: underline; }
.zoonum-sp-description { color: var(--z-text); line-height: 1.7; margin: 0 0 24px; }
.zoonum-sp-description p:last-child { margin-bottom: 0; }

/* +/- quantity stepper on the add-to-cart form */
.single-product .zoonum-qty-wrap {
	display: inline-flex; align-items: stretch;
	border: 2px solid var(--z-border); border-radius: var(--z-radius-sm);
	overflow: hidden; vertical-align: middle;
}
.single-product .zoonum-qty-wrap input.qty {
	border: 0 !important; border-radius: 0 !important;
	width: 56px !important; text-align: center; padding: 12px 4px !important;
	-moz-appearance: textfield;
}
.single-product .zoonum-qty-wrap input.qty::-webkit-outer-spin-button,
.single-product .zoonum-qty-wrap input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product .zoonum-qty-btn {
	background: var(--z-surface); border: 0; width: 40px; cursor: pointer;
	font-size: 18px; line-height: 1; color: var(--z-secondary);
	display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease;
}
.single-product .zoonum-qty-btn:hover { background: var(--z-primary); color: #fff; }

/* Related & up-sell rows: contain to a sensible width and use a clean grid so
   they don't pile up on the left. */
.single-product .related.products,
.single-product .upsells.products {
	clear: both;
	width: 100%;
	margin-top: 56px;
	grid-column: 1 / -1;   /* span the full product grid, not just the left column */
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
	font-family: var(--z-font-heading);
	font-weight: var(--z-heading-weight);
	font-size: 1.6rem; color: var(--z-secondary); margin: 0 0 24px;
}
.single-product .related.products ul.products,
.single-product .upsells.products ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 28px !important;
	width: 100% !important;
	float: none !important;
}
.single-product .related.products ul.products.columns-2,
.single-product .upsells.products ul.products.columns-2 { grid-template-columns: repeat(2,1fr) !important; }
.single-product .related.products ul.products.columns-3,
.single-product .upsells.products ul.products.columns-3 { grid-template-columns: repeat(3,1fr) !important; }
.single-product .related.products ul.products.columns-5,
.single-product .upsells.products ul.products.columns-5 { grid-template-columns: repeat(5,1fr) !important; }
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; }