/*
 * assets/product.css — du-marketplace native single-product page.
 *
 * Scope: .du-native-product only. Complements the plugin's
 * product-presentation.css (generic .du-cover/.du-facts/.du-delivery/
 * .du-preview-* rules) which is enqueued by the du-site-tools plugin.
 *
 * Palette: navy #111c4e, blue #2352ed, white, pale blue #eff5ff.
 * System sans stack, no external fonts, no Elementor selectors, no CDN.
 *
 * Handle: du-native-product       (root theme functions.php should register/enqueue)
 * Script: du-native-preview       (assets/preview.js, footer) — lightbox dialog,
 *                                 fullsize links remain usable without JS.
 */

.du-native-product {
	--du-navy: #111c4e;
	--du-blue: #2352ed;
	--du-pale: #eff5ff;
	--du-line: #dfe5f0;
	--du-muted: #55628a;
	--du-ink: #1b2440;
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px 20px 72px;
	color: var(--du-ink);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.du-native-product *,
.du-native-product *::before,
.du-native-product *::after { box-sizing: border-box; }

/* ---------- breadcrumb ---------- */

.du-native-product__breadcrumb { margin: 0 0 22px; }
.du-native-product__breadcrumb .woocommerce-breadcrumb,
.du-native-product__breadcrumb nav {
	margin: 0;
	color: var(--du-muted);
	font-size: 13px;
}
.du-native-product__breadcrumb a { color: var(--du-blue); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- layout: cover left, summary right ---------- */

.du-native-product__layout {
	display: grid;
	grid-template-columns: 330px minmax(0, 1fr);
	column-gap: 56px;
	row-gap: 22px;
	align-items: start;
}

.du-native-product__cover { position: relative; }
.du-native-product__cover .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--du-navy);
	color: #fff;
	padding: 5px 9px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
}

/* Approved cover, unified on the theme palette. */
.du-native-product .du-cover {
	--du-navy: #111c4e;
	--du-blue: #2352ed;
	--du-paper: #f8f7f2;
}
.du-native-product .du-cover--single { width: 100%; max-width: 330px; min-height: 412px; }
.du-native-product .du-cover__preview-link { width: 100%; max-width: 330px; }

/* ---------- summary ---------- */

.du-native-product__summary { min-width: 0; }

.du-native-product__summary .product_title {
	margin: 0 0 10px;
	color: var(--du-navy);
	font-size: clamp(26px, 3.4vw, 36px);
	line-height: 1.13;
	letter-spacing: -0.8px;
	font-weight: 750;
	overflow-wrap: anywhere;
}

.du-native-product__summary .woocommerce-product-rating {
	margin: 0 0 8px;
	color: var(--du-muted);
	font-size: 13px;
}
.du-native-product__summary .woocommerce-product-rating a { color: var(--du-blue); }

/* facts / delivery reuse the plugin markup */
.du-native-product__summary .du-facts { margin: 4px 0 12px; }
.du-native-product__summary .du-delivery { margin: 8px 0 0; }

/* price + native cart together */
.du-native-product__summary .price {
	color: var(--du-navy);
	font-size: 27px;
	font-weight: 700;
	margin: 12px 0 4px;
}
.du-native-product__summary .price del { color: var(--du-muted); opacity: 1; font-weight: 400; }
.du-native-product__summary .price ins { color: var(--du-blue); text-decoration: none; }

.du-native-product__summary .woocommerce-product-details__short-description {
	max-width: 720px;
	margin: 6px 0 18px;
	color: #344463;
	font-size: 15px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.du-native-product__summary form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
	margin: 12px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--du-line);
}

.du-native-product__summary form.cart .quantity { margin: 0; }
.du-native-product__summary form.cart .quantity input.qty {
	width: 76px;
	min-height: 46px;
	padding: 6px 10px;
	border: 1px solid var(--du-line);
	border-radius: 8px;
	font-size: 15px;
}

/* Variable products: real Woo variations table/selects preserved. */
.du-native-product__summary .variations {
	width: 100%;
	max-width: 520px;
	margin: 0 0 12px;
	border-collapse: collapse;
}
.du-native-product__summary .variations th,
.du-native-product__summary .variations td {
	padding: 6px 8px 6px 0;
	text-align: left;
	vertical-align: middle;
	font-size: 14px;
	color: var(--du-navy);
}
.du-native-product__summary .variations select {
	min-height: 42px;
	max-width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--du-line);
	border-radius: 8px;
	background: #fff;
	color: var(--du-navy);
}
.du-native-product__summary .single_variation_wrap .woocommerce-variation-price { margin: 0 0 8px; }

.du-native-product__summary .single_add_to_cart_button,
.du-native-product__summary button[type="submit"].button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	color: #fff;
	background: var(--du-blue);
	border: 1px solid var(--du-blue);
	border-radius: 9px;
	font-size: 15px;
	font-weight: 650;
	text-decoration: none;
	cursor: pointer;
}
.du-native-product__summary .single_add_to_cart_button:hover { background: var(--du-navy); border-color: var(--du-navy); }
.du-native-product__summary .single_add_to_cart_button.disabled,
.du-native-product__summary .single_add_to_cart_button[disabled] { opacity: 0.6; cursor: not-allowed; }
.du-native-product__summary .stock { color: var(--du-muted); font-size: 14px; }
.du-native-product__summary .product_meta {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--du-line);
	color: var(--du-muted);
	font-size: 13px;
	line-height: 1.7;
	overflow-wrap: anywhere;
}
.du-native-product__summary .product_meta a { color: var(--du-blue); }

/* Dokan "assistance" button, when present, stays clickable and secondary. */
.du-native-product__summary .dokan-btn,
.du-native-product__summary .dokan-single-store { margin-top: 12px; }

/* ---------- preview section ---------- */

.du-native-product__preview { margin: 44px 0 0; }
.du-native-product__preview .du-preview-heading h2 {
	margin: 0 0 10px;
	color: var(--du-navy);
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.4px;
}
.du-native-product__preview .du-preview-heading p { max-width: 720px; }

/* ---------- custom public-image preview grid (no Elementor, no Woo gallery JS) ---------- */

.du-native-product__preview .du-native-preview-pages {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
}
.du-native-product__preview .du-native-preview-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--du-line);
	border-radius: 12px;
	box-shadow: 0 5px 18px rgb(17 28 78 / 5%);
}
.du-native-product__preview .du-native-preview-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 320px;
	padding: 14px;
	background: #ebeef5;
	border-radius: 8px;
	text-decoration: none;
}
.du-native-product__preview img.du-native-preview-img {
	display: block;
	width: auto;
	height: 100%;
	max-width: min(100%, 320px);
	max-height: 100%;
	object-fit: contain;
	background: #f8f7f2;
}
.du-native-product__preview .du-native-preview-caption {
	display: block;
	margin: 12px 4px 2px;
	color: var(--du-muted);
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
}
.du-native-product__preview .du-native-preview-link:focus-visible { outline: 3px solid var(--du-blue); outline-offset: 3px; }
@media (max-width: 1024px) {
	.du-native-product__preview .du-native-preview-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.du-native-product__preview .du-native-preview-link { height: 260px; }
}
@media (max-width: 600px) {
	.du-native-product__preview .du-native-preview-pages { grid-template-columns: minmax(0, 1fr); }
	.du-native-product__preview .du-native-preview-link { height: 300px; }
}

/* Native Woo gallery is intentionally NOT used (custom grid above). */

/* ---------- description body ---------- */

.du-native-product__description {
	margin: 44px 0 0;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--du-line);
	border-radius: 12px;
}
.du-native-product__description h2 {
	margin: 0 0 14px;
	color: var(--du-navy);
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.4px;
}
.du-native-product__body { max-width: 860px; color: #344463; font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.du-native-product__body h2,
.du-native-product__body h3 { color: var(--du-navy); }

/* ---------- native tabs (reviews, attributes, Dokan/vendor) ---------- */

.du-native-product .woocommerce-tabs { margin: 40px 0 0; }
.du-native-product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	list-style: none;
}
.du-native-product .woocommerce-tabs ul.tabs::before,
.du-native-product .woocommerce-tabs ul.tabs li::before,
.du-native-product .woocommerce-tabs ul.tabs li::after { display: none; }
.du-native-product .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	background: var(--du-pale);
	border: 1px solid var(--du-line);
	border-radius: 8px;
}
.du-native-product .woocommerce-tabs ul.tabs li a {
	display: block;
	min-height: 46px;
	padding: 12px 18px;
	color: #344463;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.du-native-product .woocommerce-tabs ul.tabs li.active { background: var(--du-navy); border-color: var(--du-navy); }
.du-native-product .woocommerce-tabs ul.tabs li.active a { color: #fff; }
.du-native-product .woocommerce-Tabs-panel {
	padding: 26px;
	background: #fff;
	border: 1px solid var(--du-line);
	border-radius: 12px;
	color: #344463;
	font-size: 15px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
.du-native-product .woocommerce-Tabs-panel h2 { margin-top: 0; color: var(--du-navy); font-size: 22px; }

/* ---------- upsells + related: equal-height cards (same cover grid) ---------- */

.du-native-product .related.products,
.du-native-product .upsells.products { margin: 48px 0 0; }
.du-native-product .related.products > h2,
.du-native-product .upsells.products > h2 {
	margin: 0 0 18px;
	color: var(--du-navy);
	font-size: clamp(20px, 2.4vw, 26px);
	letter-spacing: -0.3px;
}

.du-native-product ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	align-items: stretch;
	gap: 24px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.du-native-product ul.products::before,
.du-native-product ul.products::after { content: none; }
.du-native-product ul.products li.product {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: 0;
	margin: 0;
	padding: 16px;
	float: none;
	width: auto;
	background: #fff;
	border: 1px solid var(--du-line);
	border-radius: 12px;
	container-type: inline-size;
}
.du-native-product ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.du-native-product ul.products li.product .du-cover--card {
	--du-navy: #111c4e;
	--du-blue: #2352ed;
	width: 100%;
	aspect-ratio: 4 / 5;
	min-height: 0;
	padding: 13px 14px;
	border-left: 7px solid var(--du-navy);
	border-radius: 0;
	box-shadow: none;
	flex: 0 0 auto;
}
.du-native-product ul.products li.product .du-cover--card .du-cover__orbit { display: none; }
.du-native-product ul.products li.product .woocommerce-loop-product__title {
	margin: 12px 0 6px;
	padding: 0;
	color: var(--du-navy);
	font-size: 16px;
	font-weight: 650;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
.du-native-product ul.products li.product .du-card-facts {
	margin: 0 0 12px;
	color: var(--du-muted);
	font-size: 11px;
	line-height: 1.5;
}
.du-native-product ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	min-height: calc(2.7em + 10px);
	margin: auto 0 12px;
	padding: 10px 0 0;
	color: var(--du-navy);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}
.du-native-product ul.products li.product .price ins { color: var(--du-blue); text-decoration: none; }
.du-native-product ul.products li.product .button {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	width: 100%;
	min-height: 46px;
	margin: 0;
	padding: 10px 12px;
	color: #fff;
	background: var(--du-blue);
	border: 1px solid var(--du-blue);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

/* ---------- accessible lightbox dialog (preview.js, optional) ---------- */

.du-native-lightbox {
	width: min(92vw, 1000px);
	max-width: 1000px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 24px 60px rgb(17 28 78 / 35%);
}
.du-native-lightbox::backdrop { background: rgb(17 28 78 / 72%); }
.du-native-lightbox__img {
	display: block;
	width: 100%;
	max-height: 82vh;
	object-fit: contain;
	background: #f8f7f2;
}
.du-native-lightbox__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgb(17 28 78 / 85%);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.du-native-lightbox__close:focus-visible { outline: 3px solid var(--du-blue); outline-offset: 2px; }

/* ---------- focus visibility ---------- */

.du-native-product a:focus-visible,
.du-native-product button:focus-visible,
.du-native-product input:focus-visible,
.du-native-product select:focus-visible,
.du-native-product textarea:focus-visible {
	outline: 3px solid var(--du-blue);
	outline-offset: 2px;
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.du-native-product__layout { grid-template-columns: 280px minmax(0, 1fr); column-gap: 36px; }
	.du-native-product ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.du-native-product { padding: 16px 14px 56px; }
	.du-native-product__layout {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}
	.du-native-product__cover { order: -1; }
	.du-native-product .du-cover--single {
		max-width: 220px;
		min-height: 276px;
		margin: 0 auto;
	}
	.du-native-product .du-cover__preview-link { max-width: 220px; margin-left: auto; margin-right: auto; }
	.du-native-product__summary .product_title { font-size: 26px; }
	.du-native-product__summary form.cart { flex-direction: column; align-items: stretch; }
	.du-native-product__summary form.cart .single_add_to_cart_button { width: 100%; }
	.du-native-product__summary form.cart .quantity input.qty { width: 100%; }
	.du-native-product__description,
	.du-native-product .woocommerce-Tabs-panel { padding: 18px; }
	.du-native-product ul.products { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.du-native-product * { transition: none !important; animation: none !important; }
}

/* Native Woo's float/width rules must not narrow the CSS grid summary. */
body.du-native-theme.woocommerce div.product div.du-native-product__summary { width:auto; float:none; margin:0; min-width:0; }
.du-native-product__cover { position:relative; }
.woocommerce .du-native-product span.onsale { min-width:0; min-height:0; line-height:1.3; border-radius:6px; padding:6px 10px; background:#163fb5; color:#fff; left:auto; right:12px; top:12px; }
body.du-native-theme.woocommerce div.product p.price { color:#111c4e; font-weight:750; font-size:25px; }
body.du-native-theme .du-native-product button.dokan-store-support-btn { background:#fff; color:#2352ed; border:1px solid #cad7f7; border-radius:9px; padding:12px 18px; font:600 14px/1.4 system-ui,sans-serif; }