/* =========================================================================
   NP Packaging - wc-core.css
   Shared WooCommerce styles: notices, store buttons, forms, product
   cards, savings, live search dropdown, mini cart drawer, wishlist and the
   sales notification popup. Loaded on any page that can show these.
   ========================================================================= */
/* Store layout wrapper */
.np-wc-wrap {
	padding-block: 24px 56px;
}

/* -------------------------------------------------------------------------
   Notices
   ------------------------------------------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	list-style: none;
	margin: 0 0 20px;
	padding: 14px 18px 14px 46px;
	border: var(--np-border);
	border-left-width: 4px;
	border-radius: var(--np-radius-s);
	background: var(--np-white);
	position: relative;
	font-size: var(--np-text-s);
}

.woocommerce-message {
	border-left-color: var(--np-green);
}

.woocommerce-info {
	border-left-color: var(--np-yellow-dark);
}

.woocommerce-error {
	border-left-color: var(--np-red);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.woocommerce-message::before {
	background: var(--np-green);
}

.woocommerce-info::before {
	background: var(--np-yellow);
}

.woocommerce-error::before {
	background: var(--np-red);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: right;
	margin-left: 12px;
}

/* -------------------------------------------------------------------------
   Store buttons
   ------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	font-family: var(--np-font);
	font-size: var(--np-text-s);
	font-weight: 700;
	line-height: 1.2;
	border-radius: var(--np-radius-s);
	border: 2px solid transparent;
	background: var(--np-yellow);
	color: var(--np-black);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--np-yellow-dark);
	color: var(--np-black);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--np-black);
	color: var(--np-white);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: #2b2b2b;
	color: var(--np-white);
}

.woocommerce a.button.disabled,
.woocommerce button.button.disabled,
.woocommerce button.button:disabled {
	background: var(--np-grey-200);
	color: var(--np-grey-600);
	cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
.woocommerce .form-row input.input-text,
.woocommerce .form-row textarea,
.woocommerce .form-row select,
.woocommerce .quantity .qty {
	font-family: var(--np-font);
	font-size: var(--np-text-s);
	border: var(--np-border);
	border-radius: var(--np-radius-s);
	padding: 11px 13px;
	background: var(--np-white);
	color: var(--np-ink);
}

.woocommerce .form-row input.input-text:focus,
.woocommerce .form-row textarea:focus,
.woocommerce .form-row select:focus {
	border-color: var(--np-black);
	outline: none;
	box-shadow: 0 0 0 3px var(--np-yellow-soft);
}

/* Generic price colouring (refined per-context in later stages) */
.woocommerce del {
	color: var(--np-grey-400);
}

.woocommerce ins {
	text-decoration: none;
	font-weight: 800;
	color: var(--np-black);
}

/* =========================================================================
   Product cards

   WooCommerce core lays products out with floats and percentage widths
   (li.product { float: left; width: 30.75%; margin-right: 3.8% }). Those
   rules are more specific than a bare `ul.products`, which collapsed the
   grid on live sites. Everything below matches or exceeds WooCommerce's
   specificity and neutralises float, width, margin and clear so the CSS
   Grid is the single source of layout truth.
   ========================================================================= */
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products,
.np-shop-main ul.products,
.related.products ul.products,
.upsells.products ul.products,
.cross-sells ul.products,
.np-eco__products ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
	min-width: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Neutralise WooCommerce's clearfix on the list itself. */
	float: none;
}

ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce-page ul.products li.product.first,
.woocommerce-page ul.products li.product.last {
	float: none;
	clear: none;
	width: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	/* WooCommerce sets these on some layouts. */
	position: relative;
	text-align: left;
}

/* Column counts requested by the loop (homepage rows, eco split, upsells). */
.woocommerce ul.products.columns-1,
ul.products.columns-1 {
	grid-template-columns: minmax(0, 1fr);
}

.columns-2 ul.products,
.woocommerce ul.products.columns-2,
ul.products.columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.woocommerce ul.products.columns-3,
ul.products.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.woocommerce ul.products.columns-5,
ul.products.columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.np-product-card {
	display: flex;
	flex-direction: column;
	border: var(--np-border);
	border-radius: var(--np-radius-s);
	background: var(--np-white);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.np-product-card:hover {
	border-color: var(--np-black);
	box-shadow: 0 4px 14px rgba(17, 17, 17, 0.08);
}

.np-product-card__media {
	position: relative;
	background: var(--np-grey-50);
}

.np-product-card__media a {
	display: block;
	aspect-ratio: 1 / 1;
}

.np-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.np-product-card__flag {
	position: absolute;
	top: 10px;
	left: 10px;
	background: var(--np-red);
	color: var(--np-white);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 8px;
	border-radius: 3px;
}

.np-product-card__flag--out {
	background: var(--np-grey-600);
}

.np-wish {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: var(--np-border);
	border-radius: 50%;
	background: var(--np-white);
	color: var(--np-grey-600);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.np-wish:hover {
	color: var(--np-red);
	border-color: var(--np-red);
}

.np-wish.is-saved {
	color: var(--np-red);
	border-color: var(--np-red);
}

.np-wish.is-saved svg {
	fill: currentColor;
}

.np-product-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 13px 14px 15px;
	flex: 1;
}

.np-product-card__title {
	font-size: var(--np-text-s);
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}

.np-product-card__title a {
	color: var(--np-black);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.np-product-card__title a:hover {
	text-decoration: underline;
}

/* Stars */
.np-stars {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.np-stars__row {
	position: relative;
	display: inline-block;
	width: 86px;
	height: 15px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2e2df' d='m12 2.8 2.8 5.9 6.4.8-4.7 4.4 1.2 6.3L12 17.1l-5.7 3.1 1.2-6.3-4.7-4.4 6.4-.8Z'/%3E%3C/svg%3E");
	background-size: 17.2px 15px;
	background-repeat: repeat-x;
}

.np-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffc400' d='m12 2.8 2.8 5.9 6.4.8-4.7 4.4 1.2 6.3L12 17.1l-5.7 3.1 1.2-6.3-4.7-4.4 6.4-.8Z'/%3E%3C/svg%3E");
	background-size: 17.2px 15px;
	background-repeat: repeat-x;
}

.np-stars__count {
	font-size: 0.78rem;
	color: var(--np-grey-600);
}

.np-product-card__pack {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 0.78rem;
	color: var(--np-grey-600);
}

/* Price + savings */
.np-save {
	display: inline-block;
	background: var(--np-red);
	color: var(--np-white);
	font-size: 0.78rem;
	font-weight: 800;
	padding: 3px 8px;
	border-radius: 3px;
	margin-right: 8px;
	margin-bottom: 4px;
}

.np-product-card__price {
	margin-top: auto;
	font-weight: 800;
	font-size: 1.05rem;
}

.np-product-card__price .np-save {
	display: block;
	width: fit-content;
	margin-right: 0;
}

.price del {
	color: var(--np-grey-400);
	font-weight: 600;
	font-size: 0.85em;
}

.price ins {
	text-decoration: none;
	color: var(--np-black);
}

.np-product-card__actions .np-btn {
	width: 100%;
	text-align: center;
	justify-content: center;
	font-size: var(--np-text-s);
	padding: 10px 12px;
}

.np-product-card .added_to_cart {
	display: block;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 700;
	margin-top: 6px;
	color: var(--np-green);
}

/* =========================================================================
   Live search dropdown
   ========================================================================= */
.np-search__results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 500;
	background: var(--np-white);
	border: var(--np-border);
	border-radius: var(--np-radius-s);
	box-shadow: 0 10px 28px rgba(17, 17, 17, 0.16);
	max-height: 430px;
	overflow-y: auto;
}

.np-search__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	color: var(--np-black);
}

.np-search__item img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 3px;
	border: var(--np-border);
	flex: 0 0 auto;
	background: var(--np-grey-50);
}

.np-search__item.is-active,
.np-search__item:hover {
	background: var(--np-grey-50);
}

.np-search__item-body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.np-search__item-title {
	font-size: var(--np-text-s);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.np-search__item-sku {
	font-size: 0.72rem;
	color: var(--np-grey-400);
}

.np-search__item-price {
	font-size: 0.82rem;
	font-weight: 700;
}

.np-search__item-price .np-save {
	font-size: 0.68rem;
	padding: 2px 6px;
	margin: 0 6px 0 0;
}

.np-search__all {
	display: block;
	text-align: center;
	padding: 11px;
	font-weight: 800;
	font-size: var(--np-text-s);
	color: var(--np-black);
	background: var(--np-yellow);
	border-top: var(--np-border);
}

.np-search__all.is-active,
.np-search__all:hover {
	background: var(--np-yellow-dark);
}

.np-search__empty {
	margin: 0;
	padding: 16px;
	font-size: var(--np-text-s);
	color: var(--np-grey-600);
}

/* =========================================================================
   Mini cart drawer
   ========================================================================= */
.np-cart-drawer {
	left: auto;
	right: 0;
	transform: translateX(102%);
}

.np-cart-drawer.is-open {
	transform: translateX(0);
}

.np-cart-drawer .np-drawer__body {
	padding: 16px 18px 20px;
}

.widget_shopping_cart_content .woocommerce-mini-cart {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	gap: 12px;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	border-bottom: var(--np-border);
	padding-bottom: 12px;
	position: relative;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item a:not(.remove) {
	color: var(--np-black);
	font-size: var(--np-text-s);
	font-weight: 600;
	line-height: 1.3;
	display: block;
	grid-column: 2;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item img {
	width: 58px;
	height: 58px;
	object-fit: cover;
	border: var(--np-border);
	border-radius: var(--np-radius-s);
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
	float: none;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item .quantity {
	grid-column: 2;
	font-size: 0.82rem;
	color: var(--np-grey-600);
}

.widget_shopping_cart_content .woocommerce-mini-cart-item a.remove {
	position: absolute;
	top: 0;
	right: 0;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: var(--np-border);
	color: var(--np-red) !important;
	font-size: 1rem;
	text-decoration: none;
}

.widget_shopping_cart_content .woocommerce-mini-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 800;
	border-top: 2px solid var(--np-black);
	padding-top: 12px;
	margin: 0 0 14px;
}

.widget_shopping_cart_content .woocommerce-mini-cart__buttons {
	display: grid;
	gap: 8px;
	margin: 0;
}

.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button {
	display: block;
	text-align: center;
	border-radius: var(--np-radius-s);
	font-weight: 800;
	padding: 12px 16px;
	background: var(--np-white);
	color: var(--np-black);
	border: 2px solid var(--np-black);
}

.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button.checkout {
	background: var(--np-yellow);
	border-color: var(--np-yellow);
}

.widget_shopping_cart_content .woocommerce-mini-cart__buttons .button.checkout:hover {
	background: var(--np-yellow-dark);
	border-color: var(--np-yellow-dark);
}

.widget_shopping_cart_content .woocommerce-mini-cart__empty-message {
	text-align: center;
	color: var(--np-grey-600);
	padding: 26px 0;
}

/* =========================================================================
   Wishlist page
   ========================================================================= */
.np-wishlist-grid {
	margin-top: 4px;
}

/* =========================================================================
   Sales notification popup
   ========================================================================= */
.np-notif {
	position: fixed;
	right: 16px;
	left: auto;
	bottom: 16px;
	z-index: 900;
	display: flex;
	align-items: stretch;
	gap: 0;
	width: min(340px, calc(100vw - 32px));
	background: var(--np-white);
	border: var(--np-border);
	border-left: 4px solid var(--np-yellow);
	border-radius: var(--np-radius-s);
	box-shadow: 0 10px 30px rgba(17, 17, 17, 0.18);
	padding: 0;
	color: var(--np-black);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.np-notif.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.np-notif {
		transition: opacity 0.15s ease;
		transform: none;
	}
}

/* Link and close button are siblings, each independently focusable. */
.np-notif__link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	padding: 12px;
	color: inherit;
	text-decoration: none;
	border-radius: var(--np-radius-s);
}

.np-notif__link:hover .np-notif__product {
	text-decoration: underline;
}

.np-notif__link:focus-visible,
.np-notif__close:focus-visible {
	outline: 2px solid var(--np-black);
	outline-offset: -2px;
}

.np-notif__img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border: var(--np-border);
	border-radius: var(--np-radius-s);
	flex: 0 0 auto;
	background: var(--np-grey-50);
}

.np-notif__body {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.np-notif__lead {
	font-size: 0.74rem;
	color: var(--np-grey-600);
}

.np-notif__product {
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.np-notif__time {
	font-size: 0.72rem;
	color: var(--np-grey-400);
}

.np-notif__close {
	flex: 0 0 auto;
	align-self: flex-start;
	width: 30px;
	height: 30px;
	margin: 4px 4px 0 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--np-grey-400);
	font-size: 1.15rem;
	cursor: pointer;
	line-height: 1;
}

.np-notif__close:hover {
	color: var(--np-black);
}

/* Bottom right on desktop. On small screens it lifts clear of sticky add to
   cart bars, cookie notices and other thumb-reach controls, and narrows so it
   never spans the full width of the viewport. */
@media (max-width: 767px) {
	.np-notif {
		right: 10px;
		left: 10px;
		width: auto;
		max-width: 360px;
		margin-left: auto;
		bottom: 92px;
	}
}

/* =========================================================================
   QA fixes
   ========================================================================= */

/* Notices and the core sale flash inside the single product grid */
div.product .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
}

span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--np-red);
	color: var(--np-white);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 3px;
	min-width: 0;
	min-height: 0;
	line-height: 1.4;
}

/* Card override renders its own flag, so hide the duplicate in loops */
.np-product-card span.onsale {
	display: none;
}

/* Keep closed drawers out of the accessibility tree and tab order */
.np-cart-drawer:not(.is-open) {
	visibility: hidden;
	transition: transform 0.22s ease, visibility 0s 0.22s;
}

.np-cart-drawer.is-open {
	visibility: visible;
}

@media (max-width: 1023px) {
	.np-filters:not(.is-open) {
		visibility: hidden;
		transition: transform 0.22s ease, visibility 0s 0.22s;
	}

	.np-filters.is-open {
		visibility: visible;
	}
}

/* =========================================================================
   Responsive product grids

   Desktop 1200px+ : 4 across
   Laptop          : 3 across
   Tablet          : 2 across
   Small mobile    : 1 across
   Column counts requested by the loop are capped, never expanded, so a
   4-column homepage row degrades sensibly while a 2-column eco row stays 2.
   ========================================================================= */
@media (max-width: 1199px) {
	ul.products,
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-4,
	ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	ul.products.columns-5 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 899px) {
	ul.products,
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-3,
	ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	ul.products.columns-5 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}

@media (max-width: 400px) {
	ul.products,
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-2,
	ul.products.columns-2,
	.woocommerce ul.products.columns-3,
	ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	ul.products.columns-5 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Card internals must never be squeezed into vertical strips. */
.np-product-card__actions .np-btn,
.np-product-card .button {
	display: block;
	width: 100%;
	min-width: 0;
	white-space: normal;
	word-break: normal;
	text-align: center;
}

/* =========================================================================
   Mini cart: item meta wrapping
   =========================================================================
   The bundle offer note (theme cart item data) was rendering as a floated
   definition list beside the thumbnail, so it wrapped one word per line.
   It now sits in the content column as a compact single block.
   ========================================================================= */
.widget_shopping_cart_content .woocommerce-mini-cart-item .variation,
.widget_shopping_cart_content .woocommerce-mini-cart-item dl.variation {
	grid-column: 2;
	display: block;
	margin: 4px 0 0;
	padding: 0;
	font-size: 0.76rem;
	line-height: 1.45;
	color: var(--np-grey-600);
	min-width: 0;
	overflow-wrap: break-word;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item dl.variation dt,
.widget_shopping_cart_content .woocommerce-mini-cart-item dl.variation dd {
	display: inline;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
	font-size: inherit;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item dl.variation dt {
	font-weight: 700;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item dl.variation dd::after {
	content: "";
	display: block;
}

.widget_shopping_cart_content .woocommerce-mini-cart-item dl.variation p {
	display: inline;
	margin: 0;
}

/* Block-based mini cart (if the Mini Cart block is used in the header). */
.wc-block-mini-cart__drawer .wc-block-components-product-metadata__description {
	display: none;
}