/*
 * Product page — 2026-10-19 redesign styles (owner).
 * Moved out of the inline <style> in woocommerce/single-product.php so browsers and crawlers
 * cache them once instead of re-downloading ~4 KB (gzip) with every product page.
 * Loaded ONLY on product pages, right after style.css (header.php), versioned by filemtime.
 * The legacy inline <style> in the template still comes later in the page; these rules win by
 * specificity (#np-buybox ID, main .np-svc …, body.single-product …), not by order.
 */

/* ---------- buy box ---------- */
/* ===== 2026-10-19 buy box (#np-buybox) — price, availability, qty + cart, wishlist, ESTO =====
   Scoped by ID so it outranks the legacy class rules above (main .cart, main .add_to_cart_button,
   .number-input …) without editing them; those still serve the "Līdzīgie produkti" cards.
   Layout: one column on narrow widths; two columns once the BOX is >= 600px wide
   (container query, so tablet widths with a narrow details column stay single-column). */
#np-buybox {
	--np-pb-now-size: 30px;        /* discount/akcija price block (inc/category-discounts.php) */
	--np-pb-now-weight: 700;
	--np-pb-now-color: #0B253D;
	--np-pb-old-size: 16px;
	container-type: inline-size;
	margin: 24px 15px 8px;         /* 15px = Bootstrap gutter: lines up with the section text above/below */
	padding: 20px 22px 16px;
	text-align: left;              /* legacy mobile rules centre product-page text */
	border: 1px solid #DCE2E8;
	border-radius: 6px;
	background: #fff;
	font-family: var(--np-font-sans);
	color: #2E4158;
}
#np-buybox .np-vh,
#np-buybox .np-price__label {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#np-buybox .np-buybox__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "price" "stock" "cart" "wish" "esto";
	row-gap: 14px;
	align-items: center;
}
#np-buybox .np-buybox__price { grid-area: price; min-width: 0; }
#np-buybox .np-buybox__stock { grid-area: stock; min-width: 0; }
#np-buybox .np-buybox__cart  { grid-area: cart;  min-width: 0; }
#np-buybox .np-buybox__wish  { grid-area: wish; }
#np-buybox .np-buybox__esto  { grid-area: esto; }
@container (min-width: 600px) {
	#np-buybox .np-buybox__grid {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "price cart" "stock wish" "esto esto";
		column-gap: 32px;
		row-gap: 12px;
	}
	#np-buybox .np-buybox__wish { justify-self: end; }
}

/* -- price -- */
#np-buybox .np-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; line-height: 1.1; }
#np-buybox .np-price__now,
#np-buybox .np-price__now b {
	font-size: 30px !important; font-weight: 700 !important; line-height: 1.1 !important;
	color: #0B253D !important; letter-spacing: -0.01em; text-transform: none !important;
	font-variant-numeric: tabular-nums;
}
#np-buybox .np-price__old { font-size: 16px; }
#np-buybox .np-pricebox { font-variant-numeric: tabular-nums; }
#np-buybox .np-frame-note,
#np-buybox .np-roll-note {
	display: block; margin-top: 6px;
	font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; color: #5F6670 !important;
}

/* -- availability: plain text + line icon (replaces the dot-in-a-pill look, here only) -- */
#np-buybox .np-buybox__stock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
#np-buybox .np-stock-pill {
	display: inline-flex; align-items: center; gap: 7px;
	min-height: 0; padding: 0; border-radius: 0; background: none !important; box-shadow: none;
	font-size: 14px !important; font-weight: 600; line-height: 1.4; white-space: normal; text-transform: none;
}
#np-buybox .np-stock-pill--ok     { color: #2F7A3A !important; }
#np-buybox .np-stock-pill--remote { color: #9A5A00 !important; }
#np-buybox .np-stock-pill--out    { color: #C12727 !important; }
#np-buybox .np-stock-pill--ask    { color: #515252 !important; }
#np-buybox .np-stock-pill--delivery { font-weight: 400; color: #0B253D !important; }
#np-buybox .np-eta { font-weight: 700; color: #0B253D; }   /* the delivery promise: owner wants it noticed */
/* "Piegāde" + <strong> are two flex items: a normal word space between them, icon keeps its 7px */
#np-buybox .np-stock-pill--delivery { gap: 4px; }
#np-buybox .np-stock-pill--delivery::before { margin-right: 3px; }
#np-buybox .np-stock-dot,
#np-buybox .np-stock-pill--delivery::before {
	content: ""; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 0; transform: none;
	background: currentColor;
	-webkit-mask: var(--np-ico) center / contain no-repeat; mask: var(--np-ico) center / contain no-repeat;
}
#np-buybox .np-stock-pill--ok .np-stock-dot {
	--np-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
}
#np-buybox .np-stock-pill--remote .np-stock-dot {
	--np-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}
#np-buybox .np-stock-pill--out .np-stock-dot {
	--np-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}
#np-buybox .np-stock-pill--ask .np-stock-dot {
	--np-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5v.5'/%3E%3C/svg%3E");
}
#np-buybox .np-stock-pill--delivery::before {
	width: 20px; height: 18px; color: #0079C1;   /* brand blue: draws the eye to the delivery line */
	--np-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v9.5h-11zM13.5 9.5h4.3l3.2 3.5v3h-7.5'/%3E%3Ccircle cx='6.5' cy='17.5' r='1.8' fill='%23fff'/%3E%3Ccircle cx='17' cy='17.5' r='1.8' fill='%23fff'/%3E%3C/svg%3E");
}

/* -- qty stepper + Ielikt grozā -- */
#np-buybox form.cart {
	display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch;
	justify-content: flex-start !important; gap: 10px;
	width: 100%; height: auto !important; margin: 0 !important; padding: 0;
	background: none !important; border-radius: 0;
}
#np-buybox .number-input {
	display: inline-flex !important; flex: 0 0 auto; align-items: stretch;
	width: auto !important; height: 42px; margin: 0 !important; float: none !important;
	border: 1px solid #C9D2DB; border-radius: 4px; background: #fff; overflow: hidden;
}
#np-buybox .number-input > * { height: 100% !important; }
#np-buybox .number-input button {
	width: 36px !important; height: 100% !important; margin: 0 !important; padding: 0 !important;
	border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #2E4158 !important;
	font: 500 18px/1 var(--np-font-sans) !important; text-align: center !important;
	cursor: pointer; transition: background-color .15s ease;
}
#np-buybox .number-input button:hover { background: #F1F4F7 !important; }
#np-buybox .number-input .quantity,
#np-buybox .number-input .quantity input.qty {
	width: 42px !important; height: 100% !important;
}
#np-buybox .number-input .quantity input.qty {
	margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
	border-left: 1px solid #E6EAEE !important; border-right: 1px solid #E6EAEE !important;
	background: #fff !important; color: #0B253D !important;
	font: 600 15px var(--np-font-sans) !important; text-align: center;
}
#np-buybox .add_to_cart_button {
	flex: 1 1 auto; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
	width: auto !important; min-width: 0; height: 42px !important; margin: 0 !important; padding: 0 18px !important;
	float: none !important; border: 0 !important; border-radius: 4px !important;
	background: #2E4158 !important; color: #fff !important; box-shadow: none !important;
	font: 600 15px/1 var(--np-font-sans) !important; letter-spacing: .01em; text-transform: none !important;
	white-space: nowrap; transition: background-color .15s ease;
}
#np-buybox .add_to_cart_button:hover { background: #1F2E40 !important; }
#np-buybox .add_to_cart_button img { width: 18px !important; height: 18px !important; margin: 0 !important; }

/* -- wishlist: quiet text button -- */
#np-buybox .wishlist-toggle--single {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 4px 0;
	border: 0; background: none; cursor: pointer;
	font: 500 14px/1.3 var(--np-font-sans); color: #2E4158;
}
#np-buybox .wishlist-toggle--single .np-i { font-size: 16px; color: #2E4158; transition: transform .15s ease; }
/* wishlist.css shrinks the whole button on :active. On this wide button that slides the heart
   ~12px away from the pointer mid-click, so mouseup lands outside the button and the click
   never reaches it (only the text worked). Press feedback on the heart only. */
#np-buybox .wishlist-toggle--single:active { transform: none; }
#np-buybox .wishlist-toggle--single:active .np-i { transform: scale(.85); }
#np-buybox .wishlist-toggle--single:hover,
#np-buybox .wishlist-toggle--single:hover .np-i,
#np-buybox .wishlist-toggle--single.is-active,
#np-buybox .wishlist-toggle--single.is-active .np-i { color: #C12727; }

/* -- ESTO strip: logo cropped to the mark (the PNG repeats the text line underneath) -- */
#np-buybox .np-buybox__esto { margin-top: -2px; padding-top: 10px; border-top: 1px solid #E9EDF1; }
#np-buybox #esto_calculator,
#np-buybox #esto_calculator > a { display: flex; align-items: center; gap: 12px; margin: 0; color: inherit; text-decoration: none; }
#np-buybox #esto_calculator img {
	flex: 0 0 auto; width: 90px !important; max-width: none !important; height: 24px !important;
}
#np-buybox #esto_calculator .monthly_payment { font-size: 14px; font-weight: 500; line-height: 1.35; color: #2E4158; }
#np-buybox #esto_monthly_payment { font-weight: 700; }

/* -- keyboard focus -- */
#np-buybox button:focus-visible,
#np-buybox a:focus-visible { outline: 2px solid #0079C1; outline-offset: 2px; }
#np-buybox .number-input:focus-within { border-color: #0079C1; }
#np-buybox .number-input .quantity input.qty:focus { outline: none; }

@media (max-width: 575px) {
	#np-buybox { --np-pb-now-size: 28px; margin-top: 20px; padding: 16px; }
	#np-buybox * { text-align: left; }
	#np-buybox .np-price__now,
	#np-buybox .np-price__now b { font-size: 28px !important; }
}
@media (prefers-reduced-motion: reduce) {
	#np-buybox * { transition: none !important; }
}

/* ---------- recommendation headings (Saderīgie / Saistītie / Aizstājējprodukti / Līdzīgie) ---------- */
/* 2026-10-19 (owner): recommendation headings (Saderīgie / Saistītie / Līdzīgie …) were 36px
   italic UPPERCASE with 44px under them — loud, and they pushed the products far down. */
body.single-product .products-featured { padding-top: 28px !important; }
body.single-product .products-featured .title {
	font: 600 22px/1.3 var(--np-font-sans) !important;
	font-style: normal !important;
	display: block !important;
	margin: 0 0 16px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	color: #0B253D !important;
}
/* short hairline after the heading ("Saderīgie produkti ———"), same grey as the panel borders */
body.single-product .products-featured .title {
	display: flex !important;
	align-items: center !important;
	gap: 16px;
}
body.single-product .products-featured .title::after {
	content: "";
	flex: 0 0 192px;
	height: 1px;
	background: #DCE2E8;
}
@media (max-width: 575px) {
	body.single-product .products-featured { padding-top: 22px !important; }
	body.single-product .products-featured .title { font-size: 19px !important; margin-bottom: 12px !important; gap: 12px; }
	body.single-product .products-featured .title::after { flex-basis: 112px; }
}

/* ---------- service panel ---------- */
/* ===== 2026-10-19 service panel (.np-svc): question / delivery / return / payment =====
   Same visual language as #np-buybox. Printed twice (desktop under the image, mobile at the
   bottom of the details column). Selectors start with main so they outrank global h2/p rules. */
.product-image .np-under-image { margin-top: 24px; }
main .np-svc {
	border: 1px solid #DCE2E8; border-radius: 6px; background: #fff;
	font-family: var(--np-font-sans); color: #515252; text-align: left;
}
main .np-svc-mobile .np-svc { margin: 24px 15px 0; }
main .np-svc .np-svc__row {
	display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 14px; align-items: start;
	padding: 16px 18px;
}
main .np-svc .np-svc__row + .np-svc__row { border-top: 1px solid #EEF1F4; }
main .np-svc .np-svc__row--ask { align-items: center; padding-top: 10px; padding-bottom: 10px; }   /* compact: one-line row */
main .np-svc .np-svc__ico { display: block; width: 20px; height: 20px; color: #5F6B78; }
main .np-svc .np-svc__row > .np-svc__ico { margin-top: 1px; }
main .np-svc .np-svc__title {
	margin: 0 !important; padding: 0 !important;
	font: 600 15px/1.35 var(--np-font-sans) !important; color: #0B253D !important;
	text-transform: none !important; letter-spacing: 0 !important; text-align: left !important;
}
main .np-svc .np-svc__text,
main .np-svc .np-svc__list li {
	margin: 4px 0 0 !important;
	font: 400 14px/1.5 var(--np-font-sans) !important; color: #515252 !important; text-align: left !important;
}
main .np-svc .np-svc__text a {
	color: #0079C1; font-weight: 500; text-decoration: none; white-space: nowrap;
}
main .np-svc .np-svc__text a:hover { color: #0056B3; text-decoration: underline; }
main .np-svc .np-svc__list { margin: 2px 0 0; padding: 0; list-style: none; }
main .np-svc .np-svc__list li { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px !important; }
main .np-svc .np-svc__list .np-svc__ico { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; color: #8A939D; }
main .np-svc .np-svc__list--prices { margin-top: 10px; padding-top: 8px; border-top: 1px solid #EEF1F4; }
main .np-svc .np-svc__list--prices b { font-weight: 700; color: #0B253D; white-space: nowrap; }
main .np-svc .np-svc__wa {
	display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
	border-radius: 4px; background: #38A05F; color: #fff !important; text-decoration: none;
	font: 600 13px/1 var(--np-font-sans); white-space: nowrap; transition: background-color .15s ease;
}
main .np-svc .np-svc__wa:hover { background: #2E8A50; }
main .np-svc .np-svc__wa .np-i { width: 14px; height: 14px; font-size: 14px; color: #fff; }
main .np-svc a:focus-visible { outline: 2px solid #0079C1; outline-offset: 2px; }
@media (max-width: 575px) {
	main .np-svc .np-svc__row { padding: 14px 16px; column-gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	main .np-svc .np-svc__wa { transition: none; }
}