/* =====================================================================
   Nuni — Shop widget
   Shop / catalog grid ported pixel-close from Shop Page.html.
   Scoped under .nuni-shop so it can co-exist with theme + WC styles.
   ===================================================================== */

/* Paint the Elementor widget wrapper too so no theme/section white
   bleeds around the rendered widget content. Color matches the single
   product page (.nuni-pd) so a shop page → PDP transition reads as a
   continuous surface. */
.elementor-widget-nuni-shop,
.elementor-widget-nuni-shop > .elementor-widget-container {
	background: #EDE2CE;
	padding: 0;
	overflow-x: clip;
}

.nuni-shop {
	/* Local tokens — kept inside the widget scope so the widget still
	   renders correctly when the global design-system stylesheet hasn't
	   loaded (e.g. inside the Elementor editor preview). Each token
	   prefers the corresponding global --nuni-* variable if present. */
	--shop-sand:        var(--nuni-sand,      #D8BFA3);
	--shop-sand-soft:   var(--nuni-sand-soft, #E8D5BD);
	--shop-sand-deep:   var(--nuni-sand-deep, #B07A2E);
	/* Page surface — matches the single-product widget (.nuni-pd) so
	   a shop → PDP transition feels seamless. */
	--shop-page-bg:     #EDE2CE;
	--shop-bg:          var(--nuni-bg,        #E8DFCE);
	--shop-card-bg:     var(--nuni-card-bg,   #F4ECDD);
	--shop-page:        var(--nuni-page,      #FBF7EE);
	--shop-ink:         var(--nuni-ink,       #1C140C);
	--shop-ink-2:       var(--nuni-ink-2,     #4A3C2C);
	--shop-muted:       var(--nuni-muted,     #6B5B47);
	--shop-line:        var(--nuni-line,      rgba(28, 20, 12, 0.16));
	--shop-line-2:      var(--nuni-line-2,    rgba(28, 20, 12, 0.22));
	--shop-sale:        var(--nuni-sale,      #C44D3E);
	--shop-new:         var(--nuni-new,       #B68A42);
	--shop-r-md:        var(--nuni-r-md,      6px);
	--shop-r-lg:        var(--nuni-r-lg,      10px);
	--shop-r-pill:      var(--nuni-r-pill,    999px);
	--shop-shadow-sm:   var(--nuni-shadow-sm, 0 4px 10px rgba(42, 31, 20, 0.10));
	--shop-dur:         var(--nuni-dur,       300ms);
	--shop-dur-fast:    var(--nuni-dur-fast,  180ms);
	--shop-ease:        var(--nuni-ease,      cubic-bezier(.6, .05, .2, 1));

	background: var(--shop-page-bg);
	color: var(--shop-ink);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	display: block;
	overflow-x: clip;
	padding-bottom: clamp(48px, 5vw, 96px);
}

.nuni-shop *,
.nuni-shop *::before,
.nuni-shop *::after { box-sizing: border-box; }

.nuni-shop img { max-width: 100%; display: block; }
.nuni-shop a { color: inherit; text-decoration: none; }

/* Defensive copy of WP core's .screen-reader-text — guarantees the icon-
   only pagination prev/next links carry an accessible name even when a
   theme strips the class. */
.nuni-shop .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

/* ───── Empty editor state ───── */
.nuni-shop--empty {
	padding: 48px;
	text-align: center;
	color: var(--shop-muted);
	background: var(--shop-card-bg);
	border-radius: var(--shop-r-md);
}

/* ───── Breadcrumbs ───── */
.nuni-shop__crumbs {
	max-width: 1280px;
	margin: 0 auto;
	padding: 24px 56px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--shop-muted);
}
.nuni-shop__crumbs a,
.nuni-shop__crumbs .woocommerce-breadcrumb a {
	color: var(--shop-muted);
	transition: color var(--shop-dur-fast) ease;
}
.nuni-shop__crumbs a:hover { color: var(--shop-ink); }
.nuni-shop__crumbs span[aria-hidden] { opacity: 0.4; }
.nuni-shop__crumbs .woocommerce-breadcrumb { color: var(--shop-muted); }

/* ───── Hero ───── */
.nuni-shop__hero {
	max-width: 1280px;
	margin: 0 auto;
	padding: 28px 56px clamp(40px, 4vw, 64px);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.nuni-shop__title {
	margin: 0;
	font-weight: 400;
	font-size: clamp(44px, 5.4vw, 84px);
	line-height: 1;
	letter-spacing: -0.005em;
	color: var(--shop-ink);
}
.nuni-shop__lede {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--shop-ink-2);
	max-width: 56ch;
	text-wrap: pretty;
}

/* ───── Filters bar ───── */
.nuni-shop__filters {
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 56px;
	border-top: 1px solid var(--shop-line);
	border-bottom: 1px solid var(--shop-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.nuni-shop__cats {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
/* High-specificity selectors (`.nuni-shop button.nuni-shop__cat`) so themes
   that paint `button:hover { background: <accent> }` (often pink/magenta in
   shop themes) can't bleed through onto the tab. */
.nuni-shop .nuni-shop__cat,
.nuni-shop button.nuni-shop__cat {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--shop-r-pill);
	padding: 8px 16px;
	font: inherit;
	font-size: 13px;
	color: var(--shop-ink-2);
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition:
		background var(--shop-dur-fast) ease,
		border-color var(--shop-dur-fast) ease,
		color var(--shop-dur-fast) ease;
}
.nuni-shop .nuni-shop__cat:hover,
.nuni-shop button.nuni-shop__cat:hover,
.nuni-shop .nuni-shop__cat:focus,
.nuni-shop button.nuni-shop__cat:focus {
	background: rgba(28, 20, 12, 0.06);
	color: var(--shop-ink);
	border-color: var(--shop-line);
	outline: none;
}
.nuni-shop .nuni-shop__cat:focus-visible,
.nuni-shop button.nuni-shop__cat:focus-visible {
	outline: 2px solid var(--shop-sand-deep);
	outline-offset: 2px;
}
.nuni-shop .nuni-shop__cat.is-active,
.nuni-shop button.nuni-shop__cat.is-active,
.nuni-shop .nuni-shop__cat.is-active:hover,
.nuni-shop button.nuni-shop__cat.is-active:hover,
.nuni-shop .nuni-shop__cat.is-active:focus,
.nuni-shop button.nuni-shop__cat.is-active:focus {
	background: var(--shop-ink);
	border-color: var(--shop-ink);
	color: var(--shop-card-bg);
}

.nuni-shop__filters-right {
	display: inline-flex;
	align-items: center;
	gap: 18px;
}
.nuni-shop__count {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--shop-muted);
}
.nuni-shop__sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--shop-ink-2);
	letter-spacing: 0.04em;
}
.nuni-shop__sort select {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--shop-ink);
	padding: 4px 22px 4px 0;
	font: inherit;
	font-size: 13px;
	color: var(--shop-ink);
	cursor: pointer;
	font-weight: 600;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--shop-ink) 50%),
		linear-gradient(135deg, var(--shop-ink) 50%, transparent 50%);
	background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
}
.nuni-shop__sort select:focus { outline: none; }

/* ───── Main grid ───── */
.nuni-shop__main {
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(36px, 4vw, 56px) 56px 0;
}
.nuni-shop__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 3vw, 44px) clamp(20px, 2.2vw, 32px);
}

.nuni-shop__product {
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: opacity var(--shop-dur-fast) ease;
}
.nuni-shop__product.is-hidden { display: none; }

.nuni-shop__media {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--shop-r-md);
	overflow: hidden;
	background: var(--shop-card-bg);
	isolation: isolate;
}
/* Aspect-ratio fallback for browsers that don't honor it inside the WC
   image's intrinsic sizing (some Safari + old Chromium themes). */
.nuni-shop__media::before {
	content: "";
	display: block;
	padding-top: 125%;          /* 5 / 4 = 125% — matches aspect-ratio: 4/5 */
}
.nuni-shop .nuni-shop__media-link {
	position: absolute;
	inset: 0;
	display: block;
}
/* High-specificity selector + position:absolute defeats common theme rules
   like `img { height: auto !important }` that otherwise let the image push
   the card box past its 4:5 ratio. */
.nuni-shop .nuni-shop__media img,
.nuni-shop .nuni-shop__media .nuni-shop__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	transition: transform 520ms var(--shop-ease);
}
.nuni-shop__media:hover .nuni-shop__img { transform: scale(1.03); }
.nuni-shop__img-fallback {
	position: absolute;
	inset: 0;
	display: block;
	background:
		repeating-linear-gradient(
			45deg,
			var(--shop-card-bg) 0 12px,
			var(--shop-sand-soft) 12px 24px);
}

.nuni-shop__tag {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--shop-card-bg);
	color: var(--shop-ink);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 5px 10px 4px;
	border-radius: var(--shop-r-pill);
	z-index: 2;
}
.nuni-shop__tag--new      { background: var(--shop-new);  color: #fff; }
.nuni-shop__tag--sale     { background: var(--shop-sale); color: #fff; }
.nuni-shop__tag--featured { background: var(--shop-ink);  color: var(--shop-card-bg); }
.nuni-shop__tag--oos      { background: var(--shop-muted); color: #fff; }
/* Promo / bundle-offer tag (e.g. "3 för 449 kr"). Brand green reads as
   "savings/value" and stays distinct from the red sale badge. */
.nuni-shop__tag--promo    { background: #2F7D5B; color: #fff; }

/* ───── Out-of-stock product treatment ───── */
.nuni-shop__product--oos .nuni-shop__media img,
.nuni-shop__product--oos .nuni-shop__media .nuni-shop__img {
	filter: grayscale(70%) brightness(0.96) contrast(0.95);
	opacity: 0.78;
}
.nuni-shop__product--oos .nuni-shop__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(28, 20, 12, 0.06);
	pointer-events: none;
	z-index: 1;
}
.nuni-shop__product--oos .nuni-shop__name,
.nuni-shop__product--oos .nuni-shop__price {
	opacity: 0.7;
}

/* Quick-add bubble — always visible. High-specificity color rules so
   themes that force `a { color: inherit !important }` can't drag the
   icon stroke into the dark button background. */
.nuni-shop .nuni-shop__quickadd {
	position: absolute;
	right: 12px;
	bottom: 12px;
	border: 0;
	background: var(--shop-ink);
	color: var(--shop-card-bg) !important;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shop-shadow-sm);
	transition:
		background var(--shop-dur-fast) ease,
		transform var(--shop-dur-fast) ease,
		opacity var(--shop-dur-fast) ease;
	z-index: 3;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}
.nuni-shop .nuni-shop__quickadd:hover {
	background: var(--shop-sand-deep);
	transform: scale(1.06);
}
.nuni-shop .nuni-shop__quickadd:focus-visible {
	outline: 2px solid var(--shop-sand-deep);
	outline-offset: 2px;
}
.nuni-shop .nuni-shop__quickadd.is-added { background: #2F7D5B; }
.nuni-shop .nuni-shop__quickadd.is-loading { opacity: 0.75; pointer-events: none; }
.nuni-shop .nuni-shop__quickadd svg {
	width: 16px;
	height: 16px;
	display: block;
	color: var(--shop-card-bg);
}
.nuni-shop .nuni-shop__quickadd svg path {
	stroke: currentColor;
	fill: none;
}
/* Variable-product bubble — links to the PDP with an arrow icon. Bronze
   fill so it reads as "browse / choose options" rather than "add now". */
.nuni-shop .nuni-shop__quickadd--select {
	background: var(--shop-sand-deep);
}
.nuni-shop .nuni-shop__quickadd--select:hover {
	background: var(--shop-ink);
}

/* "Välj alternativ" pill under the price on variable products. */
.nuni-shop__variants {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	padding: 4px 10px 3px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--shop-sand-deep);
	background: rgba(176, 122, 46, 0.10);
	border-radius: var(--shop-r-pill);
	align-self: flex-start;
	width: max-content;
}
.nuni-shop__variants::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}

.nuni-shop__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 2px;
}
.nuni-shop__sub {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--shop-muted);
}
.nuni-shop__name {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--shop-ink);
	line-height: 1.3;
	transition: color var(--shop-dur-fast) ease;
}
.nuni-shop__meta:hover .nuni-shop__name { color: var(--shop-sand-deep); }

.nuni-shop__price {
	margin: 6px 0 0;
	font-size: 19px;
	color: var(--shop-ink);
	line-height: 1;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
.nuni-shop__price .woocommerce-Price-amount,
.nuni-shop__price bdi { font: inherit; color: inherit; }
.nuni-shop__price del,
.nuni-shop__price s {
	font-size: 13px;
	color: var(--shop-muted);
	font-weight: 500;
	text-decoration-thickness: 1px;
}
.nuni-shop__price ins {
	background: transparent;
	text-decoration: none;
	font: inherit;
	color: inherit;
}

/* ───── Pagination ───── */
.nuni-shop__pager {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: clamp(36px, 4vw, 56px) auto 0;
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
}
.nuni-shop__pager .page-numbers {
	appearance: none;
	background: transparent;
	border: 1px solid var(--shop-line-2);
	border-radius: 50%;
	width: 36px;
	height: 36px;
	font: inherit;
	font-size: 13px;
	color: var(--shop-ink);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition:
		background var(--shop-dur-fast) ease,
		color var(--shop-dur-fast) ease,
		border-color var(--shop-dur-fast) ease;
}
.nuni-shop__pager .page-numbers:hover {
	background: var(--shop-ink);
	color: var(--shop-card-bg);
	border-color: var(--shop-ink);
}
.nuni-shop__pager .page-numbers.current {
	background: var(--shop-ink);
	color: var(--shop-card-bg);
	border-color: var(--shop-ink);
}
.nuni-shop__pager .page-numbers.dots {
	border: 0;
	color: var(--shop-muted);
	background: transparent;
}

/* ───── Responsive ───── */
@media (max-width: 1024px) {
	.nuni-shop__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.nuni-shop__crumbs { padding: 16px 20px 0; }
	.nuni-shop__hero   { padding: 16px 20px 32px; gap: 10px; }
	.nuni-shop__filters {
		padding: 12px 20px;
		gap: 16px;
	}
	.nuni-shop__cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		width: 100%;
		padding-bottom: 4px;
		scrollbar-width: none;
	}
	.nuni-shop__cats::-webkit-scrollbar { display: none; }
	.nuni-shop__cat { flex-shrink: 0; }
	.nuni-shop__filters-right {
		width: 100%;
		justify-content: space-between;
	}
	.nuni-shop__main  { padding: 32px 20px 0; }
	.nuni-shop__grid  { gap: 24px 14px; }
	.nuni-shop__name  { font-size: 14.5px; }
	.nuni-shop__price { font-size: 17px; }
	.nuni-shop .nuni-shop__quickadd {
		width: 36px;
		height: 36px;
		right: 8px;
		bottom: 8px;
	}
}