/*
Theme Name:   NovaByte
Theme URI:    https://novabyte.cat
Description:  Tema fill de Storefront per a la botiga de NovaByte. Fosc i premium, amb un sol color que brilla: el blau de la marca. Projecte 2 ASIX (ICA0-PRJ2I01) · Grup 6.
Author:       Grup 6 · Salesians de Sarrià
Template:     storefront
Version:      1.1.4
Requires PHP: 8.1
Text Domain:  tema-novabyte
License:      GNU General Public License v3 or later
*/

/* =============================================================================
   0. Fonts allotjades al servidor (llicència SIL Open Font License, a assets/fonts)
   ========================================================================== */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/poppins-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Poppins";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/poppins-latin-800-normal.woff2") format("woff2");
}

/* =============================================================================
   1. Variables de disseny
   ========================================================================== */
:root {
	--nb-negre: #070A12;          /* fons de la pàgina */
	--nb-fosc: #0F172A;           /* seccions i targetes (blau fosc de la marca) */
	--nb-fosc-2: #111827;         /* un pas més clar: camps, files */
	--nb-linia: rgba(37, 99, 235, 0.18);
	--nb-linia-forta: rgba(37, 99, 235, 0.42);
	--nb-blau: #2563EB;           /* l'únic color que brilla: botons, preus, actius */
	--nb-blau-hover: #3B74F0;
	--nb-blau-text: #5B8CFF;      /* el mateix blau aclarit per al text petit (contrast AA sobre fosc) */
	--nb-cian: #22D3EE;           /* només brillantor i estats en passar-hi el ratolí */
	--nb-text: #E2E8F0;
	--nb-text-2: #94A3B8;
	--nb-blanc: #FFFFFF;
	--nb-ok: #34D399;
	--nb-error: #F87171;

	--nb-font-titol: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--nb-font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--nb-tall: 12px;              /* mida del tall en diagonal */
	--nb-tall-forma: polygon(0 0, 100% 0, 100% calc(100% - var(--nb-tall)), calc(100% - var(--nb-tall)) 100%, 0 100%);
	--nb-brillantor: 0 0 0 1px var(--nb-blau), 0 18px 48px -18px rgba(34, 211, 238, 0.45);
	--nb-rapid: 180ms cubic-bezier(0.2, 0.7, 0.2, 1);

	--nb-amplada: 1320px;
	--nb-marge: clamp(16px, 4vw, 40px);
	--nb-cap-alcada: 72px;

	color-scheme: dark;
}

/* =============================================================================
   2. Base
   ========================================================================== */
html {
	scrollbar-color: #22345F var(--nb-negre);
	background: var(--nb-negre);
	scroll-padding-top: calc(var(--nb-cap-alcada) + 16px);
}
html.nb-sense-scroll { overflow: hidden; }

body,
body.custom-background {
	background: var(--nb-negre);
	color: var(--nb-text);
	font-family: var(--nb-font-text);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--nb-font-titol);
	font-weight: 700;
	color: var(--nb-blanc);
	line-height: 1.15;
	letter-spacing: 0.01em;
}
h1 { font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }

p, ul, ol, dl, table, blockquote { color: inherit; }
strong, b { color: var(--nb-blanc); font-weight: 600; }
hr { background: var(--nb-linia); height: 1px; border: 0; }

a { color: var(--nb-blau-text); text-decoration: none; transition: color var(--nb-rapid); }
a:hover, a:focus { color: var(--nb-cian); }

::selection { background: var(--nb-blau); color: var(--nb-blanc); }

/* Focus: anell blau només amb el teclat (Storefront posa el lila de WooCommerce a tot) */
body.nb :focus:not(:focus-visible) { outline: none; }
body.nb :focus-visible {
	outline: 2px solid var(--nb-blau-text);
	outline-offset: 3px;
}
/* els camps ja tenen el seu anell (box-shadow) */
body.nb input:focus-visible,
body.nb textarea:focus-visible,
body.nb select:focus-visible { outline: none; }

img { border-radius: 0; }

.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 12px 18px;
	background: var(--nb-blau);
	color: var(--nb-blanc);
	font-weight: 700;
}

/* Contenidors */
.col-full,
.nb-contenidor {
	max-width: var(--nb-amplada);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--nb-marge);
	padding-right: var(--nb-marge);
	box-sizing: border-box;
}
.site-content { padding: 8px 0 104px; }
.content-area,
.storefront-full-width-content .content-area {
	width: 100%;
	float: none;
	margin: 0;
}
.site-main { margin-bottom: 0; }
.hentry { margin: 0; padding: 0; border: 0; }

/* Etiqueta petita en majúscules a sobre dels títols («NOVETATS», «GAMING»...) */
.nb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font: 600 12px/1.2 var(--nb-font-text);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nb-blau-text);
}
.nb-eyebrow::before {
	content: "";
	width: 18px;
	height: 3px;
	background: var(--nb-blau);
	transform: skewX(-35deg);
	box-shadow: 0 0 10px rgba(34, 211, 238, 0.6);
}
a.nb-eyebrow:hover { color: var(--nb-cian); }

/* =============================================================================
   3. Botons (tall en diagonal i brillantor en passar-hi el ratolí)
   El color de fons va en un ::before retallat; així el botó pot fer brillantor
   amb drop-shadow seguint la forma del tall.
   ========================================================================== */
button,
input[type="button"],
input[type="reset"] {
	background: none;
	color: inherit;
	border: 0;
	border-radius: 0;
	text-shadow: none;
}

.nb-boto,
.button,
button[type="submit"],
.single_add_to_cart_button,
body.nb .wc-block-components-button:not(.is-link) {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 12px 26px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--nb-blanc);
	font-family: var(--nb-font-text);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	transition: filter var(--nb-rapid), transform var(--nb-rapid);
}
.nb-boto::before,
.button::before,
button[type="submit"]::before,
.single_add_to_cart_button::before,
body.nb .wc-block-components-button:not(.is-link)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--nb-blau);
	clip-path: var(--nb-tall-forma);
	transition: background var(--nb-rapid);
}
.nb-boto:hover,
.button:hover,
button[type="submit"]:hover,
.single_add_to_cart_button:hover,
body.nb .wc-block-components-button:not(.is-link):hover,
.nb-boto:focus-visible,
.button:focus-visible,
button[type="submit"]:focus-visible {
	color: var(--nb-blanc);
	background: transparent;
	filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.55));
}
.nb-boto:hover::before,
.button:hover::before,
button[type="submit"]:hover::before,
.single_add_to_cart_button:hover::before,
body.nb .wc-block-components-button:not(.is-link):hover::before {
	background: var(--nb-blau-hover);
}
.nb-boto:active,
.button:active,
button[type="submit"]:active { transform: translateY(1px); }
.nb-boto .nb-svg { width: 18px; height: 18px; transition: transform var(--nb-rapid); }
.nb-boto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	clip-path: var(--nb-tall-forma);
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
	background-size: 250% 100%;
	background-position: 150% 0;
	transition: background-position 700ms ease;
}
.nb-boto:hover::after { background-position: -60% 0; }
.nb-boto:hover .nb-svg { transform: translateX(3px); }
.nb-boto--gran { min-height: 56px; padding: 16px 34px; font-size: 14px; }

.button.disabled,
.button:disabled,
button:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

/* Els input de tipus submit no poden tenir ::before: el tall va directament al botó */
input[type="submit"] {
	min-height: 46px;
	padding: 12px 26px;
	border: 0;
	border-radius: 0;
	background: var(--nb-blau);
	color: var(--nb-blanc);
	font: 700 13px/1.2 var(--nb-font-text);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	clip-path: var(--nb-tall-forma);
	cursor: pointer;
	transition: background var(--nb-rapid);
}
input[type="submit"]:hover { background: var(--nb-blau-hover); }

/* Enllaç amb fletxa («Tota la botiga →») */
.nb-enllac-fletxa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nb-text);
	white-space: nowrap;
}
.nb-enllac-fletxa .nb-svg { width: 18px; height: 18px; color: var(--nb-blau-text); transition: transform var(--nb-rapid); }
.nb-enllac-fletxa:hover .nb-svg { transform: translateX(4px); color: var(--nb-cian); }

/* =============================================================================
   4. Formularis
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select,
.select2-container .select2-selection,
.input-text {
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid var(--nb-linia-forta);
	border-radius: 0;
	background: var(--nb-fosc-2);
	color: var(--nb-text);
	font-family: var(--nb-font-text);
	font-size: 15px;
	box-shadow: none;
	transition: border-color var(--nb-rapid), box-shadow var(--nb-rapid);
}
textarea { min-height: 120px; }
input::placeholder, textarea::placeholder { color: var(--nb-text-2); opacity: 1; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus,
.input-text:focus {
	outline: none;
	border-color: var(--nb-blau);
	background: var(--nb-fosc-2);
	box-shadow: 0 0 0 1px var(--nb-blau), 0 0 18px -4px rgba(34, 211, 238, 0.45);
}
label { color: var(--nb-text); font-weight: 500; }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--nb-blau); }
.required { color: var(--nb-blau-text); }
select {
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px;
}

/* Cerca de productes */
.woocommerce-product-search {
	display: flex;
	gap: 0;
	position: relative;
}
.woocommerce-product-search .search-field {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding-left: 18px;
}
.woocommerce-product-search button[type="submit"] { min-height: 52px; flex-shrink: 0; }

/* =============================================================================
   5. Capçalera
   ========================================================================== */
.nb-cap {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(7, 10, 18, 0.78);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--nb-linia);
}
.nb-cap { transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
.nb-cap.es-desplacat {
	background: rgba(7, 10, 18, 0.9);
	border-bottom-color: var(--nb-linia-forta);
	box-shadow: 0 14px 34px -26px rgba(37, 99, 235, 0.9);
}
.admin-bar .nb-cap { top: 32px; }
@media (max-width: 782px) { .admin-bar .nb-cap { top: 46px; } }

.nb-cap__interior {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	max-width: var(--nb-amplada);
	height: var(--nb-cap-alcada);
	margin: 0 auto;
	padding: 0 var(--nb-marge);
	box-sizing: border-box;
}
.nb-cap__logo { justify-self: start; line-height: 0; }
.nb-cap__logo .custom-logo-link { display: inline-block; }
.nb-cap__logo img,
.nb-mobil__cap img,
.nb-peu__marca img { width: auto; height: 34px; max-width: none; }
.nb-cap__nom { font: 800 22px/1 var(--nb-font-titol); color: var(--nb-blanc); text-transform: uppercase; }

.nb-cap__nav { justify-self: center; }
.nb-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nb-nav a {
	position: relative;
	display: block;
	padding: 26px 13px;
	color: var(--nb-text);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}
.nb-nav a::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: -1px;
	height: 2px;
	background: var(--nb-blau);
	box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--nb-rapid);
}
.nb-nav a:hover { color: var(--nb-blanc); }
body.nb .nb-nav a:focus-visible { outline-offset: -8px; }
.nb-nav a:hover::after,
.nb-nav .current-menu-item > a::after,
.nb-nav .current-product_cat-ancestor > a::after { transform: scaleX(1); }
.nb-nav .current-menu-item > a { color: var(--nb-blanc); }

.nb-cap__accions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 2px;
}
.nb-cap__boto {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--nb-text);
	cursor: pointer;
	transition: color var(--nb-rapid);
}
.nb-cap__boto:hover,
.nb-cap__boto[aria-expanded="true"] { color: var(--nb-cian); }
.nb-cap__boto .nb-svg { width: 22px; height: 22px; }
.nb-cap__menu { display: none; }

.nb-cistella__nombre {
	position: absolute;
	top: 3px;
	right: 0;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	background: var(--nb-blau);
	color: var(--nb-blanc);
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
	box-sizing: border-box;
}
.nb-cistella__nombre.es-buida { display: none; }
@keyframes nb-salta {
	0% { scale: 1; filter: none; }
	35% { scale: 1.5; filter: drop-shadow(0 0 8px var(--nb-cian)); }
	100% { scale: 1; filter: none; }
}
.nb-cistella__nombre.nb-salta { animation: nb-salta 650ms cubic-bezier(0.3, 1.6, 0.5, 1); }

/* Panell de cerca que es desplega sota la capçalera */
.nb-cerca {
	border-top: 1px solid var(--nb-linia);
	background: rgba(7, 10, 18, 0.96);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 200ms ease, transform 200ms ease;
}
.nb-cerca.es-obert { opacity: 1; transform: none; }
.nb-cerca__interior { max-width: 760px; margin: 0 auto; padding: 20px var(--nb-marge); }

/* Menú del mòbil a pantalla completa */
.nb-mobil {
	position: fixed;
	inset: 0;
	z-index: 2000;
	overflow-y: auto;
	padding: 0 var(--nb-marge) 40px;
	background:
		radial-gradient(120% 60% at 100% 0%, rgba(37, 99, 235, 0.22), transparent 60%),
		var(--nb-negre);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 200ms ease, transform 200ms ease;
}
.nb-mobil.es-obert { opacity: 1; transform: none; }
.nb-mobil__cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--nb-cap-alcada);
	border-bottom: 1px solid var(--nb-linia);
	margin-bottom: 28px;
}
.nb-mobil__llista {
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}
.nb-mobil__llista a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--nb-linia);
	color: var(--nb-blanc);
	font: 800 clamp(22px, 6vw, 30px)/1.15 var(--nb-font-titol);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.nb-mobil__llista a:hover,
.nb-mobil__llista .current-menu-item > a { color: var(--nb-blau-text); }
.nb-mobil__cerca { margin-bottom: 28px; }
.nb-mobil__secundari {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nb-mobil__secundari a {
	color: var(--nb-text-2);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

@media (max-width: 1099px) {
	.nb-cap__interior { grid-template-columns: auto 1fr auto; gap: 8px; }
	.nb-cap__menu { display: inline-grid; margin-left: -10px; }
	.nb-cap__nav { display: none; }
}
@media (min-width: 1100px) {
	.nb-mobil { display: none !important; }
}
@media (max-width: 420px) {
	.nb-cap__logo img { height: 28px; }
	.nb-cap__compte { display: none; }
}

/* Ruta de navegació */
.storefront-breadcrumb {
	margin: 0;
	padding: 22px 0 6px;
	background: none;
}
.woocommerce-breadcrumb {
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nb-text-2);
}
.woocommerce-breadcrumb a {
	color: var(--nb-text-2);
	text-decoration: none;
}
.woocommerce-breadcrumb a:hover { color: var(--nb-cian); }
.woocommerce-breadcrumb a:first-of-type::before { display: none; }
.woocommerce-breadcrumb .breadcrumb-separator {
	position: static;
	display: inline;
	padding: 0 6px;
	text-indent: 0;
	color: var(--nb-blau);
}
.woocommerce-breadcrumb .breadcrumb-separator::before,
.woocommerce-breadcrumb .breadcrumb-separator::after { display: none; }

/* =============================================================================
   6. Portada
   ========================================================================== */
.nb-portada .site-content { padding: 0; }
.nb-portada #content > .col-full { max-width: none; padding: 0; }

/* --- Animacions comunes ------------------------------------------------------------ */
@keyframes nb-puja { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes nb-linia { from { translate: 0 110%; } to { translate: 0 0; } }
@keyframes nb-brilla { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes nb-escena {
	from { opacity: 0; translate: 48px 0; scale: 0.95; filter: blur(8px); }
	to { opacity: 1; translate: 0 0; scale: 1; filter: none; }
}
@keyframes nb-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes nb-batec { 0%, 100% { opacity: 0.55; scale: 1; } 50% { opacity: 0.95; scale: 1.08; } }
@keyframes nb-graella { to { background-position: 0 56px, 56px 0; } }
@keyframes nb-cinta { to { translate: -50% 0; } }
@keyframes nb-baixa {
	0% { transform: scaleY(0); transform-origin: top; }
	45% { transform: scaleY(1); transform-origin: top; }
	55% { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}
@property --nb-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes nb-gira-vora { to { --nb-angle: 360deg; } }

/* Entrada de la portada quan carrega: cada peça amb el seu retard (--d) */
.js .nb-entra {
	animation: nb-puja 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(120ms + var(--d, 0) * 90ms);
}

/* --- Pantalla inicial ----------------------------------------------------------------- */
.nb-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: calc(100svh - var(--nb-cap-alcada));
	padding: clamp(40px, 6vw, 72px) 0 calc(4.4vw + 120px);
	overflow: hidden;
	background:
		radial-gradient(60% 70% at 72% 48%, rgba(37, 99, 235, 0.28), transparent 70%),
		radial-gradient(40% 40% at 72% 52%, rgba(34, 211, 238, 0.10), transparent 70%),
		linear-gradient(180deg, var(--nb-fosc) 0%, #0A1020 100%);
	/* la diagonal de baix té la mateixa inclinació a totes les amplades (la segueix la cinta) */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.4vw), 0 100%);
}
/* graella tècnica que es desplaça molt a poc a poc i s'esvaeix cap als costats */
.nb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(37, 99, 235, 0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(37, 99, 235, 0.10) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(70% 70% at 70% 50%, #000 0%, transparent 75%);
	mask-image: radial-gradient(70% 70% at 70% 50%, #000 0%, transparent 75%);
	animation: nb-graella 14s linear infinite;
	pointer-events: none;
}
/* llum que segueix el cursor (--mx i --my les posa el JS) */
.nb-hero__llum {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(560px circle at var(--mx, 72%) var(--my, 45%), rgba(37, 99, 235, 0.20), transparent 60%);
	pointer-events: none;
}
.nb-hero__interior {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
	width: 100%;
}
.nb-hero__text .nb-eyebrow { margin-bottom: 24px; }
.nb-hero__titol {
	margin: 0 0 24px;
	font-size: clamp(34px, 4.7vw, 84px);
	line-height: 1;
	letter-spacing: 0.01em;
	filter: drop-shadow(0 0 32px rgba(37, 99, 235, 0.35));
}
/* Cada línia del títol entra des de baix. El marge de dalt deixa lloc als accents
   (la «É» de «MÉS»), que d'una altra manera quedarien tallats o tocarien l'etiqueta. */
.nb-linia {
	display: block;
	overflow: hidden;
	padding: 0.18em 0 0.06em;
	margin: -0.18em 0 -0.06em;
}
.nb-linia > span { display: block; }
.js .nb-linia > .nb-entra { animation-name: nb-linia; animation-duration: 850ms; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	/* un reflex de llum passa una sola vegada pel títol quan ja ha entrat */
	.nb-hero__titol .nb-linia > span {
		background: linear-gradient(100deg, #fff 0 40%, #A9C1FF 48%, #fff 56% 100%);
		background-size: 300% 100%;
		background-position: 0 0;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	.js .nb-hero__titol .nb-linia > .nb-entra {
		animation: nb-linia 850ms cubic-bezier(0.2, 0.7, 0.2, 1) both, nb-brilla 1500ms ease-in-out both;
		animation-delay: calc(120ms + var(--d, 0) * 90ms), calc(1000ms + var(--d, 0) * 160ms);
	}
}
.nb-hero__sub {
	max-width: 46ch;
	margin: 0 0 16px;
	color: var(--nb-text-2);
	font-size: clamp(16px, 1.3vw, 18px);
}
.nb-hero__sub strong { color: var(--nb-text); font-weight: 600; }
.nb-hero__preu {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 12px;
	margin: 0 0 30px;
	color: var(--nb-blau-text);
	font: 800 clamp(26px, 2.4vw, 34px)/1.1 var(--nb-font-titol);
}
.nb-hero__preu del { color: var(--nb-text-2); font-size: 0.55em; font-weight: 700; opacity: 1; }
.nb-hero__preu ins { text-decoration: none; }

/* Especificacions curtes (portada i aparador) */
.nb-specs { display: flex; flex-wrap: wrap; margin: 36px 0 0; padding: 0; }
.nb-specs > div { padding: 2px 24px; border-left: 1px solid var(--nb-linia-forta); }
.nb-specs > div:first-child { padding-left: 0; border-left: 0; }
.nb-specs dt {
	margin: 0 0 6px;
	color: var(--nb-text-2);
	font: 600 11px/1.2 var(--nb-font-text);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.nb-specs dd { margin: 0; color: var(--nb-blanc); font: 700 15px/1.3 var(--nb-font-titol); }

/* La gràfica: s'inclina amb el cursor (transform), entra i flota (translate/scale) */
.nb-hero__escena {
	position: relative;
	margin-right: -2vw;
	transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .nb-hero__escena { animation: nb-escena 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms both; }
.nb-hero__escena::before {
	content: "";
	position: absolute;
	inset: 14% 12%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(37, 99, 235, 0.5), transparent);
	filter: blur(30px);
	animation: nb-batec 5s ease-in-out infinite;
}
.nb-hero__producte { position: relative; animation: nb-flota 6s ease-in-out 1.3s infinite; }
.nb-hero__cos { display: block; width: 100%; height: auto; }
/* Les pales giren damunt del cos (posició calculada a genera-imatges.py) */
.nb-ventilador {
	position: absolute;
	top: 30%;
	width: 26.667%;
	height: auto;
	pointer-events: none;
	transition: opacity 1.2s ease;
}
.nb-ventilador--1 { left: 22.253%; }
.nb-ventilador--2 { left: 56.093%; }
.es-silenci .nb-ventilador { opacity: 0.7; }
.nb-hero__0db {
	position: absolute;
	left: 50%;
	bottom: 2%;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 16px;
	border: 1px solid var(--nb-linia-forta);
	background: rgba(7, 10, 18, 0.82);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--nb-text);
	font: 600 11px/1 var(--nb-font-text);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	translate: -50% 10px;
	transition: opacity 300ms ease, translate 300ms ease;
	pointer-events: none;
}
.es-silenci .nb-hero__0db { opacity: 1; translate: -50% 0; }
.nb-hero__0db .nb-unitat { text-transform: none; } /* «dB», no «DB» */
.nb-punt { width: 8px; height: 8px; border-radius: 50%; background: var(--nb-ok); box-shadow: 0 0 10px var(--nb-ok); }

/* Indicació per baixar */
.nb-hero__baixa {
	position: absolute;
	left: 50%;
	bottom: calc(2.2vw + 76px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	translate: -50% 0;
	color: var(--nb-text-2);
	font: 600 10px/1 var(--nb-font-text);
	letter-spacing: 0.24em;
	text-transform: uppercase;
}
.nb-hero__baixa::after {
	content: "";
	width: 1px;
	height: 40px;
	background: linear-gradient(var(--nb-blau-text), transparent);
	animation: nb-baixa 2.4s ease-in-out infinite;
}
.nb-hero__baixa:hover { color: var(--nb-cian); }

/* --- Cinta de categories: segueix la diagonal de la pantalla inicial ---------------- */
.nb-inici { overflow-x: clip; }
.nb-cinta {
	position: relative;
	z-index: 3;
	margin-top: calc(-2.2vw - 44px);
	padding: 26px 0;
}
.nb-cinta__banda {
	margin: 0 -4%;
	background: var(--nb-blau);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 18px 60px -18px rgba(37, 99, 235, 0.9);
	transform: rotate(-2.5deg);
	overflow: hidden;
}
.nb-cinta__pista {
	display: flex;
	align-items: center;
	width: max-content;
	padding: 15px 0;
	animation: nb-cinta 42s linear infinite;
}
.nb-cinta__pista span {
	margin-right: 26px;
	color: var(--nb-blanc);
	font: 800 clamp(16px, 1.6vw, 22px)/1 var(--nb-font-titol);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
.nb-cinta__pista .nb-cinta__sep { color: rgba(255, 255, 255, 0.55); font-size: 0.8em; }

/* --- Seccions --- */
.nb-seccio { padding: clamp(56px, 8vw, 104px) 0; }
.nb-seccio + .nb-seccio { padding-top: 0; }
.nb-seccio__cap {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}
.nb-seccio__titol,
.related > h2,
.upsells > h2,
.cross-sells > h2 {
	margin: 0;
	font-size: clamp(26px, 3.2vw, 42px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --- Categories --- */
.nb-categories__llista {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nb-cat {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--nb-fosc);
	border: 1px solid var(--nb-linia);
	color: var(--nb-blanc);
	transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color var(--nb-rapid), box-shadow var(--nb-rapid);
}
.nb-cat img {
	position: absolute;
	top: -7%;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* fosc a baix per llegir el nom, i una llum que segueix el cursor (--x, --y) */
.nb-cat::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(320px circle at var(--x, 50%) var(--y, 30%), rgba(37, 99, 235, 0.22), transparent 60%),
		linear-gradient(to top, rgba(7, 10, 18, 0.98) 20%, rgba(7, 10, 18, 0) 58%);
}
.nb-cat__text {
	position: absolute;
	z-index: 1;
	left: 18px;
	right: 18px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.nb-cat__num {
	color: var(--nb-blau-text);
	font: 700 12px/1 var(--nb-font-titol);
	letter-spacing: 0.16em;
}
.nb-cat__nom {
	font: 800 clamp(14px, 1.2vw, 18px)/1.15 var(--nb-font-titol);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}
/* el nombre de productes deixa lloc a la fletxa, que va a la mateixa alçada */
.nb-cat__compte {
	display: flex;
	align-items: center;
	min-height: 36px;
	padding-right: 48px;
	color: var(--nb-text-2);
	font-size: 13px;
}
.nb-cat__fletxa {
	position: absolute;
	z-index: 1;
	right: 16px;
	bottom: 18px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--nb-linia-forta);
	color: var(--nb-text);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
	transition: background var(--nb-rapid), border-color var(--nb-rapid);
}
.nb-cat__fletxa .nb-svg { width: 18px; height: 18px; transition: transform var(--nb-rapid); }
.nb-cat:hover,
.nb-cat:focus-visible {
	color: var(--nb-blanc);
	border-color: var(--nb-blau);
	box-shadow: var(--nb-brillantor);
}
.nb-cat:hover img { transform: scale(1.07); }
.nb-cat:hover .nb-cat__fletxa { background: var(--nb-blau); border-color: var(--nb-blau); }
.nb-cat:hover .nb-cat__fletxa .nb-svg { transform: translateX(2px); }

/* Vora que s'il·lumina i gira en passar-hi el ratolí (categories i productes) */
.nb-cat::before,
ul.products li.product::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	padding: 1px;
	background: conic-gradient(from var(--nb-angle), transparent 0 55%, var(--nb-blau) 72%, var(--nb-cian) 82%, transparent 92%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 250ms ease;
	animation: nb-gira-vora 2.6s linear infinite paused;
	pointer-events: none;
}
.nb-cat:hover::before,
ul.products li.product:hover::before { opacity: 1; animation-play-state: running; }

/* --- Aparador d'un producte ----------------------------------------------------------- */
.nb-aparador {
	position: relative;
	padding: clamp(64px, 9vw, 120px) 0;
	overflow: hidden;
	background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.7) 25%, rgba(15, 23, 42, 0.7) 75%, transparent);
}
/* nom del producte gegant, només contorn, al fons */
.nb-aparador__fons {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	translate: -50% -50%;
	color: transparent;
	-webkit-text-stroke: 1px rgba(91, 140, 255, 0.14);
	font: 800 clamp(72px, 13vw, 220px)/1 var(--nb-font-titol);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}
.nb-aparador__interior {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 6vw, 96px);
}
.nb-aparador__imatge {
	transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
	transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nb-aparador__imatge img {
	display: block;
	width: 100%;
	height: auto;
	/* la imatge es fon amb el fons: el portàtil sembla que suri */
	-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
	animation: nb-flota 7s ease-in-out infinite;
}
.nb-aparador__desc { max-width: 48ch; margin: 18px 0 0; color: var(--nb-text-2); font-size: 17px; }
.nb-aparador__specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin-top: 28px;
	border-top: 1px solid var(--nb-linia);
}
.nb-aparador__specs > div,
.nb-aparador__specs > div:first-child {
	padding: 16px 16px 16px 0;
	border-left: 0;
	border-bottom: 1px solid var(--nb-linia);
}
.nb-aparador__specs > div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--nb-linia); }
.nb-aparador__compra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	margin-top: 32px;
}
.nb-aparador__preu {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 0;
	color: var(--nb-blau-text);
	font: 800 clamp(28px, 2.6vw, 38px)/1 var(--nb-font-titol);
}
.nb-aparador__preu del { order: 2; color: var(--nb-text-2); font-size: 0.5em; font-weight: 700; opacity: 1; }
.nb-aparador__preu ins { text-decoration: none; }

/* --- Xifres ----------------------------------------------------------------------------- */
.nb-xifres {
	position: relative;
	margin-top: clamp(16px, 3vw, 32px);
	padding: clamp(56px, 7vw, 88px) 0;
	background: var(--nb-fosc);
	clip-path: polygon(0 2.2vw, 100% 0, 100% calc(100% - 2.2vw), 0 100%);
}
.nb-xifres::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(50% 120% at 0% 50%, rgba(37, 99, 235, 0.18), transparent 70%),
		radial-gradient(40% 120% at 100% 50%, rgba(34, 211, 238, 0.06), transparent 70%);
	pointer-events: none;
}
.nb-xifres__llista {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nb-xifres__llista li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 20px;
	border-left: 1px solid var(--nb-linia-forta);
}
.nb-xifres__llista .nb-svg { width: 26px; height: 26px; color: var(--nb-blau-text); filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.4)); }
.nb-xifra {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: var(--nb-blanc);
	font: 800 clamp(40px, 4.6vw, 64px)/1 var(--nb-font-titol);
	font-variant-numeric: tabular-nums;
}
.nb-xifra small { color: var(--nb-blau-text); font-size: 0.38em; font-weight: 700; letter-spacing: 0.02em; } /* «h», no «H» */
.nb-xifra__text { color: var(--nb-text-2); font-size: 14px; }
.nb-xifres__peu {
	position: relative;
	margin: 40px 0 0;
	color: var(--nb-text-2);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

/* =============================================================================
   7. Catàleg i targetes de producte
   ========================================================================== */
.nb-cataleg__cap { padding: 18px 0 8px; }
.nb-cataleg__titol {
	margin: 0;
	font-size: clamp(34px, 5vw, 64px);
	line-height: 1;
}
.nb-cataleg__total { margin: 10px 0 24px; color: var(--nb-text-2); font-size: 14px; }
body.nb .woocommerce-products-header { margin: 0; padding: 0; }
/* sense títol (el posa nb-cataleg__cap) ni descripció, la capçalera de WooCommerce queda buida */
.woocommerce-products-header:not(:has(*)),
.woocommerce-notices-wrapper:empty { display: none; }
.term-description, .page-description { color: var(--nb-text-2); }

/* Accés ràpid a les categories */
.nb-xips ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}
.nb-xips a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 16px;
	border: 1px solid var(--nb-linia-forta);
	color: var(--nb-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
	transition: border-color var(--nb-rapid), color var(--nb-rapid), background var(--nb-rapid);
}
.nb-xips a:hover { border-color: var(--nb-blau); color: var(--nb-blanc); }
.nb-xips a[aria-current="page"] { background: var(--nb-blau); border-color: var(--nb-blau); color: var(--nb-blanc); }

/* Ordre i resultats */
.storefront-sorting {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 0 0 24px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--nb-linia);
	font-size: 14px;
}
.storefront-sorting::before,
.storefront-sorting::after { display: none; }
.storefront-sorting .woocommerce-ordering { margin: 0; float: none; }
.storefront-sorting .woocommerce-ordering select { min-height: 40px; font-size: 13px; }
.storefront-sorting .woocommerce-result-count { margin: 0; float: none; color: var(--nb-text-2); }
.storefront-sorting .woocommerce-pagination { margin-left: auto; float: none; }
.site-main ul.products + .storefront-sorting,
.storefront-sorting:last-child { border-bottom: 0; border-top: 1px solid var(--nb-linia); padding: 20px 0 0; margin: 32px 0 0; }

.woocommerce-pagination .page-numbers { border: 0; margin: 0; }
.woocommerce-pagination .page-numbers li { border: 0; }
.woocommerce-pagination .page-numbers li .page-numbers {
	min-width: 36px;
	padding: 6px 10px;
	background: var(--nb-fosc-2);
	color: var(--nb-text);
	border: 1px solid var(--nb-linia);
}
.woocommerce-pagination .page-numbers li .page-numbers.current { background: var(--nb-blau); color: var(--nb-blanc); border-color: var(--nb-blau); }

/* Graella de productes */
.site-main ul.products,
ul.products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
}
ul.products::before,
ul.products::after { display: none; }
/* Storefront dona a cada producte una amplada en % i un marge amb regles molt específiques
   (p. ex. .storefront-full-width-content .site-main ul.products.columns-4 li.product).
   Aquí la mida la fa la graella: cal guanyar-les. */
body.nb ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	clear: none !important;
}

/* Targeta */
ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0 0 18px;
	text-align: left;
	background: var(--nb-fosc);
	border: 1px solid var(--nb-linia);
	transition: border-color var(--nb-rapid), box-shadow var(--nb-rapid), transform var(--nb-rapid);
}
ul.products li.product:hover,
ul.products li.product:focus-within {
	border-color: var(--nb-blau);
	box-shadow: var(--nb-brillantor);
	transform: translateY(-4px);
}
ul.products li.product::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(320px circle at var(--x, 50%) var(--y, 0%), rgba(37, 99, 235, 0.16), transparent 60%);
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none;
}
ul.products li.product:hover::after { opacity: 1; }
ul.products li.product .woocommerce-LoopProduct-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: var(--nb-blanc);
}
.nb-targeta__imatge {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: 16px;
	background: var(--nb-negre);
	border-bottom: 1px solid var(--nb-linia);
}
ul.products li.product img,
.nb-targeta__imatge img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
ul.products li.product:hover .nb-targeta__imatge img { transform: scale(1.06); }
/* reflex de llum que creua la imatge en passar-hi el ratolí */
.nb-targeta__imatge::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.10) 50%, transparent 65%);
	translate: -100% 0;
	transition: translate 700ms ease;
	pointer-events: none;
}
ul.products li.product:hover .nb-targeta__imatge::after { translate: 100% 0; }
.nb-targeta__categoria {
	display: block;
	padding: 0 18px;
	margin-bottom: 6px;
	color: var(--nb-text-2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
	margin: 0 0 12px;
	padding: 0 18px;
	color: var(--nb-blanc);
	font: 700 16px/1.3 var(--nb-font-titol);
	letter-spacing: 0.01em;
	text-transform: none;
}
ul.products li.product .price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: auto 0 16px;
	padding: 0 18px;
	color: var(--nb-blau-text);
	font: 700 20px/1.2 var(--nb-font-titol);
}
.price del { order: 2; color: var(--nb-text-2); font-size: 0.7em; font-weight: 600; opacity: 1; }
/* (Storefront hi posa marge amb «ul.products li.product .price ins»: cal el mateix pes) */
body.nb .price ins,
body.nb ul.products li.product .price ins { margin-left: 0; text-decoration: none; font-weight: inherit; }
ul.products li.product .button {
	z-index: 2;
	align-self: stretch;
	margin: 0 18px;
	min-height: 44px;
	padding: 10px 14px;
	font-size: 12px;
}
ul.products li.product .added_to_cart {
	display: block;
	margin: 10px 18px 0;
	padding: 0;
	background: none;
	color: var(--nb-blau-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
}

/* Etiqueta d'oferta: insígnia amb tall en diagonal */
.onsale {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	min-height: 0;
	margin: 0;
	padding: 5px 16px 5px 10px;
	border: 0;
	border-radius: 0;
	background: var(--nb-blau);
	color: var(--nb-blanc);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* Aparició escalonada (només si el JS ho activa i l'usuari no ha demanat menys moviment).
   És una animació de «translate» i no una transició: així no endarrereix els efectes de hover. */
.nb-anima .nb-revela:not(.es-veu) { opacity: 0; }
.nb-anima .nb-revela.es-veu {
	animation: nb-puja 650ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
	animation-delay: calc(var(--i, 0) * 80ms);
}

/* =============================================================================
   8. Fitxa de producte
   ========================================================================== */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 0 clamp(32px, 5vw, 72px);
	align-items: start;
	padding-top: 16px;
}
.single-product div.product > * { grid-column: 1 / -1; }
body.nb.single-product div.product .woocommerce-product-gallery {
	grid-column: 1;
	grid-row: 1;
	float: none;
	width: auto;
	margin: 0;
	background: var(--nb-negre);
	border: 1px solid var(--nb-linia);
}
.single-product div.product > .onsale {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	top: auto;
	left: auto;
	align-self: start;
	justify-self: start;
	margin: 18px;
}
body.nb.single-product div.product .summary {
	grid-column: 2;
	grid-row: 1;
	float: none;
	width: auto;
	margin: 0;
	padding-top: 8px;
}
.woocommerce-product-gallery img { width: 100%; display: block; }
.woocommerce-product-gallery .flex-control-thumbs li img { opacity: 0.6; border: 1px solid var(--nb-linia); }
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active { opacity: 1; border-color: var(--nb-blau); }
.woocommerce-product-gallery__trigger {
	top: 16px !important;
	right: 16px !important;
	background: rgba(7, 10, 18, 0.7) !important;
	border: 1px solid var(--nb-linia-forta);
	border-radius: 0 !important;
}

.single-product div.product .product_title {
	margin: 0 0 18px;
	font-size: clamp(28px, 3.2vw, 44px);
	line-height: 1.05;
}
.single-product div.product p.price {
	margin: 0 0 18px;
	color: var(--nb-blau-text);
	font: 800 clamp(30px, 3vw, 38px)/1.1 var(--nb-font-titol);
	display: flex;
	align-items: baseline;
	gap: 14px;
}
.single-product div.product p.price del { font-size: 0.55em; }
.woocommerce-product-details__short-description {
	margin-bottom: 18px;
	color: var(--nb-text-2);
	font-size: 17px;
}
.single-product div.product .stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
	color: var(--nb-ok);
	font-size: 14px;
	font-weight: 600;
}
.single-product div.product .stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 10px currentColor;
	font-family: inherit;
	margin: 0;
}
.single-product div.product .stock.out-of-stock { color: var(--nb-error); }

.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
}
.single-product div.product form.cart .quantity { margin: 0; float: none; }
.quantity .qty {
	width: 76px;
	min-height: 56px;
	padding: 8px;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
}
.single-product div.product form.cart .single_add_to_cart_button {
	flex: 1;
	min-height: 56px;
	padding: 16px 28px;
	font-size: 14px;
}

.nb-avantatges {
	display: grid;
	gap: 10px;
	margin: 0 0 24px;
	padding: 18px 0;
	list-style: none;
	border-top: 1px solid var(--nb-linia);
	border-bottom: 1px solid var(--nb-linia);
}
.nb-avantatges li { display: flex; align-items: center; gap: 12px; color: var(--nb-text); font-size: 14px; }
.nb-avantatges .nb-svg { width: 20px; height: 20px; color: var(--nb-blau-text); }

.product_meta {
	padding: 0;
	border: 0;
	color: var(--nb-text-2);
	font-size: 13px;
}
.product_meta > span { display: block; margin-bottom: 4px; }
.product_meta a { color: var(--nb-text); }
.product_meta a:hover { color: var(--nb-cian); }
.single-product div.product .summary .edit-link { display: none; }

/* Descripció i especificacions */
.nb-detalls {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	margin-top: clamp(48px, 6vw, 80px);
	padding-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--nb-linia);
}
.nb-detalls h2 {
	margin: 0 0 18px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.nb-detalls__descripcio p { color: var(--nb-text); font-size: 16px; max-width: 62ch; }

table.woocommerce-product-attributes,
.shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-top: 1px solid var(--nb-linia);
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: 14px 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--nb-linia);
	vertical-align: top;
	text-align: left;
}
.woocommerce-product-attributes th {
	width: 42%;
	padding-right: 16px;
	color: var(--nb-text-2);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.woocommerce-product-attributes td { color: var(--nb-blanc); font-size: 15px; font-weight: 500; font-style: normal; }
.woocommerce-product-attributes td p { margin: 0; padding: 0; }
body.nb .woocommerce-product-attributes tr td,
body.nb .woocommerce-product-attributes tr th { background: none; }
body.nb .woocommerce-product-attributes tr:hover td,
body.nb .woocommerce-product-attributes tr:hover th { background: rgba(37, 99, 235, 0.06); }

/* Ressenyes */
.nb-detalls__ressenyes {
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--nb-linia);
}
#reviews { max-width: 760px; }
#reviews .woocommerce-Reviews-title,
#reviews #reply-title {
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
}
#reviews .woocommerce-noreviews,
#reviews .woocommerce-verification-required { color: var(--nb-text-2); }
#reviews .comment-respond { padding: 0; background: none; }
p.stars a::before { color: var(--nb-text-2); }
p.stars a:hover ~ a::before { color: var(--nb-text-2); }
p.stars:hover a::before,
p.stars.selected a.active::before,
p.stars.selected a:not(.active)::before { color: var(--nb-blau-text); }
p.stars.selected a.active ~ a::before { color: var(--nb-text-2); }
.star-rating span::before { color: var(--nb-blau-text); }

/* Productes relacionats */
.related.products,
.upsells.products {
	margin-top: clamp(56px, 7vw, 96px);
	padding-top: 0;
	border: 0;
}
body.nb .related.products > h2:first-child,
body.nb .up-sells > h2:first-child { margin-bottom: 28px; text-align: left; }

/* Barra de compra enganxada (Storefront), sota la capçalera */
.storefront-sticky-add-to-cart {
	top: var(--nb-cap-alcada);
	z-index: 999;
	padding: 10px 0;
	background: rgba(7, 10, 18, 0.9);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--nb-linia);
	box-shadow: none;
	color: var(--nb-text);
}
.admin-bar .storefront-sticky-add-to-cart { top: calc(var(--nb-cap-alcada) + 32px); }
/* amagada, Storefront la puja just darrere de la capçalera, que és translúcida: no s'ha de veure */
.storefront-sticky-add-to-cart:not(.storefront-sticky-add-to-cart--slideInDown) { visibility: hidden; }
.storefront-sticky-add-to-cart__content { display: flex; align-items: center; gap: 16px; }
.storefront-sticky-add-to-cart__content img { width: 48px; height: 48px; margin: 0; border: 1px solid var(--nb-linia); box-shadow: none; padding: 0; border-radius: 0; }
.storefront-sticky-add-to-cart__content-title { color: var(--nb-text); }
.storefront-sticky-add-to-cart__content-title strong { color: var(--nb-blanc); font-family: var(--nb-font-titol); }
.storefront-sticky-add-to-cart__content-price { color: var(--nb-blau-text); font-weight: 700; margin-right: 0; }
.storefront-sticky-add-to-cart__content-price del { color: var(--nb-text-2); }
.storefront-sticky-add-to-cart__content-button { margin-left: auto; }
.storefront-sticky-add-to-cart .star-rating { display: none; }

/* =============================================================================
   9. Pàgines (Qui som, Contacte, Cistella, Pagament, El meu compte...)
   ========================================================================== */
.nb-pagina__etiqueta { margin-top: 18px; }
body.nb .hentry .entry-header,
body.nb .hentry .entry-header .entry-title {
	margin: 0 0 32px;
	padding: 0;
	border: 0;
	text-align: left;
}
body.nb .hentry .entry-header .entry-title { margin: 0; }
/* la cistella i el pagament (blocs «alignwide») s'alineen amb la resta del contingut */
body.nb.storefront-full-width-content .hentry .entry-content .alignwide {
	width: auto;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.page .entry-title,
.hentry .entry-title {
	margin: 0;
	font-size: clamp(32px, 4.6vw, 60px);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--nb-blanc);
}
.entry-content { color: var(--nb-text); }
.entry-content p { max-width: 72ch; }
.entry-content p a,
.entry-content li a { color: var(--nb-blau-text); text-decoration: underline; text-underline-offset: 3px; }
.entry-content p a:hover,
.entry-content li a:hover { color: var(--nb-cian); }

table { color: var(--nb-text); }
table th, table td { background: none; }
table thead th, table th { color: var(--nb-blanc); }
table tbody td { background: none; }
table tbody tr:nth-child(2n) td { background: rgba(255, 255, 255, 0.02); }

/* Avisos (afegit a la cistella, errors...) */
.woocommerce-noreviews::before,
p.no-comments::before { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	position: relative;
	margin: 0 0 24px;
	padding: 16px 20px 16px 48px;
	border: 1px solid var(--nb-linia);
	border-left: 3px solid var(--nb-blau);
	border-radius: 0;
	background: var(--nb-fosc);
	color: var(--nb-text);
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--nb-blau-text); }
.woocommerce-noreviews,
p.no-comments { padding-left: 20px; }
.woocommerce-error { border-left-color: var(--nb-error); }
.woocommerce-error::before { color: var(--nb-error); }
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { color: var(--nb-blau-text); }
.woocommerce-message .button,
.woocommerce-info .button { float: right; min-height: 36px; padding: 8px 16px; font-size: 11px; margin-left: 16px; }

/* El meu compte */
.woocommerce-account .woocommerce-MyAccount-navigation ul { border-top: 1px solid var(--nb-linia); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--nb-linia); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { color: var(--nb-text); padding: 12px 0; display: block; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--nb-blau-text); }
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-ResetPassword {
	padding: 28px;
	border: 1px solid var(--nb-linia);
	background: var(--nb-fosc);
}
.u-columns h2 { font-size: 22px; font-weight: 800; text-transform: uppercase; }
.woocommerce-form__label-for-checkbox { color: var(--nb-text-2); }
.lost_password a { color: var(--nb-text-2); }

/* =============================================================================
   10. Cistella i pagament (blocs de WooCommerce): tot fosc, sense parts blanques
   Les regles porten «body.nb» perquè els estils dels blocs es carreguen més tard.
   ========================================================================== */
body.nb .wp-block-woocommerce-cart,
body.nb .wp-block-woocommerce-checkout { color: var(--nb-text); margin-bottom: 0; }

body.nb .wc-block-components-title,
body.nb .wc-block-components-checkout-step__title,
body.nb .wc-block-cart__totals-title,
body.nb .wc-block-components-checkout-order-summary__title-text {
	color: var(--nb-blanc);
	font-family: var(--nb-font-titol);
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
body.nb .wc-block-components-checkout-step__title { font-size: 20px; }
body.nb .wc-block-cart__totals-title { font-size: 13px; letter-spacing: 0.16em; color: var(--nb-text-2); }
body.nb .wc-block-components-checkout-step__description,
body.nb .wc-block-components-checkout-step__heading-content { color: var(--nb-text-2); }

/* Taula de la cistella */
body.nb table.wc-block-cart-items,
body.nb table.wc-block-cart-items th,
body.nb table.wc-block-cart-items td { background: none; border-color: var(--nb-linia); }
body.nb .wc-block-cart-items__header { color: var(--nb-text-2); font-size: 12px; letter-spacing: 0.14em; }
body.nb table.wc-block-cart-items .wc-block-cart-items__row { border-bottom: 1px solid var(--nb-linia); }
body.nb .wc-block-cart-item__image img,
body.nb .wc-block-components-order-summary-item__image img { border: 1px solid var(--nb-linia); background: var(--nb-negre); }
body.nb .wc-block-components-product-name {
	color: var(--nb-blanc);
	font-family: var(--nb-font-titol);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}
body.nb a.wc-block-components-product-name:hover { color: var(--nb-cian); }
body.nb .wc-block-components-product-metadata,
body.nb .wc-block-components-product-metadata__description,
body.nb .wc-block-components-product-details { color: var(--nb-text-2); }
body.nb .wc-block-components-product-price,
body.nb .wc-block-components-product-price__value,
body.nb .wc-block-cart-item__total .wc-block-components-product-price__value { color: var(--nb-blanc); font-weight: 600; }
body.nb .wc-block-components-product-price del,
body.nb .wc-block-components-product-price__regular { color: var(--nb-text-2); }
body.nb .wc-block-components-sale-badge,
body.nb .wc-block-components-product-badge {
	background: transparent;
	border: 1px solid var(--nb-blau);
	border-radius: 0;
	color: var(--nb-blau-text);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
body.nb .wc-block-cart-item__remove-link,
body.nb .wc-block-cart-item__remove-link:visited { color: var(--nb-text-2) !important; font-size: 13px; }
body.nb .wc-block-cart-item__remove-link:hover { color: var(--nb-cian) !important; }

/* Selector de quantitat */
body.nb .wc-block-components-quantity-selector {
	border: 1px solid var(--nb-linia-forta);
	border-radius: 0;
	background: var(--nb-fosc-2);
}
body.nb .wc-block-components-quantity-selector::after { border: 0; }
body.nb .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	min-height: 0;
	border: 0;
	background: transparent;
	color: var(--nb-blanc);
	box-shadow: none;
	font-weight: 600;
}
body.nb .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button { color: var(--nb-text); min-width: 34px; }
body.nb .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover { color: var(--nb-cian); }

/* Totals i resum de la comanda */
body.nb .wc-block-components-totals-wrapper,
body.nb .wc-block-components-totals-item,
body.nb .wc-block-components-panel,
body.nb .wc-block-components-order-summary,
body.nb .wc-block-components-totals-coupon,
body.nb .wc-block-components-totals-footer-item { border-color: var(--nb-linia) !important; }
body.nb .wc-block-components-totals-item__label,
body.nb .wc-block-components-totals-item__value,
body.nb .wc-block-components-panel__button { color: var(--nb-text); }
body.nb .wc-block-components-totals-item__description,
body.nb .wc-block-components-totals-shipping__via,
body.nb .wc-block-components-shipping-address { color: var(--nb-text-2); }
body.nb .wc-block-components-totals-footer-item .wc-block-components-totals-item__label { color: var(--nb-blanc); font-family: var(--nb-font-titol); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
body.nb .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color: var(--nb-blau-text); font-family: var(--nb-font-titol); font-weight: 800; font-size: 26px; }
body.nb .wc-block-components-totals-footer-item-tax { color: var(--nb-text-2); }
body.nb .wc-block-components-panel__button-icon { fill: currentColor; }
body.nb .wp-block-woocommerce-checkout-order-summary-block,
body.nb .wc-block-components-sidebar .wc-block-components-panel,
body.nb .wp-block-woocommerce-cart-order-summary-block {
	border: 1px solid var(--nb-linia);
	border-radius: 0;
	background: var(--nb-fosc);
}
body.nb .wp-block-woocommerce-cart-order-summary-block { padding: 0 20px; }
body.nb .wc-block-components-order-summary-item__quantity {
	background: var(--nb-blau);
	border: 2px solid var(--nb-fosc);
	color: var(--nb-blanc);
	box-shadow: none;
	border-radius: 0;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}
body.nb .wc-block-components-order-summary-item__description p { color: var(--nb-text-2); }
body.nb .wc-block-components-order-summary-item__individual-prices { color: var(--nb-text-2); }

/* Camps del formulari de pagament */
body.nb .wc-block-components-text-input input,
body.nb .wc-block-components-text-input input[type="text"],
body.nb .wc-block-components-text-input input[type="email"],
body.nb .wc-block-components-text-input input[type="tel"],
body.nb .wc-block-components-text-input input[type="number"],
body.nb .wc-block-components-text-input input[type="password"],
body.nb .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input,
body.nb .wc-blocks-components-select .wc-blocks-components-select__select,
body.nb .wc-block-components-textarea,
body.nb .wc-block-checkout__add-note textarea,
body.nb .wc-block-components-form .wc-block-components-text-input input {
	border: 1px solid var(--nb-linia-forta);
	border-radius: 0;
	background-color: var(--nb-fosc-2);
	color: var(--nb-blanc);
	box-shadow: none;
}
body.nb .wc-block-components-text-input input:focus,
body.nb .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input:focus,
body.nb .wc-blocks-components-select .wc-blocks-components-select__select:focus,
body.nb .wc-block-components-textarea:focus {
	border-color: var(--nb-blau);
	box-shadow: 0 0 0 1px var(--nb-blau), 0 0 18px -4px rgba(34, 211, 238, 0.45);
}
body.nb .wc-block-components-text-input label,
body.nb .wc-block-components-combobox .wc-block-components-combobox-control label,
body.nb .wc-blocks-components-select .wc-blocks-components-select__label { color: var(--nb-text-2); }
body.nb .wc-blocks-components-select .wc-blocks-components-select__container { background: var(--nb-fosc-2); border-radius: 0; }
body.nb .wc-blocks-components-select .wc-blocks-components-select__expand { fill: var(--nb-text-2); }
body.nb .wc-blocks-components-select__select option { background: var(--nb-fosc-2); color: var(--nb-text); }
body.nb .wc-block-components-address-form__address_2-toggle,
body.nb .wc-block-components-checkbox label,
body.nb .wc-block-checkout__terms,
body.nb .wc-block-components-checkout-step__container p { color: var(--nb-text-2); }
body.nb .wc-block-components-validation-error { color: var(--nb-error); }
body.nb .wc-block-components-address-card { border-color: var(--nb-linia); background: var(--nb-fosc); border-radius: 0; }

/* Caselles i botons d'opció */
body.nb .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
	border: 1px solid var(--nb-text-2);
	border-radius: 0;
	background: var(--nb-fosc-2);
}
body.nb .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--nb-blau); border-color: var(--nb-blau); }
body.nb .wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--nb-blanc); }
body.nb .wc-block-components-radio-control__input {
	border: 1px solid var(--nb-text-2);
	background: var(--nb-fosc-2);
}
body.nb .wc-block-components-radio-control__input:checked { border-color: var(--nb-blau); }
body.nb .wc-block-components-radio-control__input:checked::before { background: var(--nb-blau); }
body.nb .wc-block-components-radio-control__option,
body.nb .wc-block-components-radio-control-accordion-option,
body.nb .wc-block-components-radio-control--highlight-checked {
	border-color: var(--nb-linia) !important;
	border-radius: 0 !important;
	box-shadow: none;
	color: var(--nb-text);
}
body.nb .wc-block-components-radio-control--highlight-checked::after { border-color: var(--nb-linia); border-radius: 0; }
body.nb .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked,
body.nb .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
body.nb .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1px var(--nb-blau) !important;
	border-radius: 0 !important;
	background: rgba(37, 99, 235, 0.08);
}
body.nb .wc-block-components-radio-control__label,
body.nb .wc-block-components-radio-control__secondary-label { color: var(--nb-text); }
body.nb .wc-block-components-radio-control__description,
body.nb .wc-block-components-radio-control__secondary-description,
body.nb .wc-block-components-radio-control-accordion-content { color: var(--nb-text-2); }
body.nb .wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__secondary-label { color: var(--nb-blau-text); font-weight: 700; }

/* Botons principals de la cistella i del pagament */
body.nb .wc-block-cart__submit-button,
body.nb .wc-block-components-checkout-place-order-button {
	width: 100%;
	min-height: 58px;
	font-size: 14px;
}
body.nb .wc-block-components-checkout-return-to-cart-button { color: var(--nb-text-2); }
body.nb .wc-block-components-checkout-return-to-cart-button:hover { color: var(--nb-cian); }

/* Avisos i esquelets de càrrega dels blocs */
body.nb .wc-block-components-notice-banner {
	border: 1px solid var(--nb-linia);
	border-left: 3px solid var(--nb-blau);
	border-radius: 0;
	background: var(--nb-fosc);
	color: var(--nb-text);
}
body.nb .wc-block-components-notice-banner.is-error { border-left-color: var(--nb-error); }
body.nb .wc-block-components-notice-banner > svg { background: var(--nb-blau); fill: var(--nb-blanc); border-radius: 0; }
body.nb .wc-block-components-skeleton__element,
body.nb .wc-block-components-skeleton__element--static { background: rgba(148, 163, 184, 0.12); }
body.nb .wc-block-components-loading-mask__children,
body.nb .wc-block-components-spinner { color: var(--nb-blau-text); }
body.nb .wc-block-components-express-payment-continue-rule { color: var(--nb-text-2); }
body.nb .wc-block-components-express-payment-continue-rule::before,
body.nb .wc-block-components-express-payment-continue-rule::after { border-color: var(--nb-linia); }

/* Cistella buida */
body.nb .wc-block-cart__empty-cart__title { color: var(--nb-blanc); font-family: var(--nb-font-titol); text-transform: uppercase; }
body.nb .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { background: var(--nb-fosc); border: 1px solid var(--nb-linia); padding-bottom: 16px; }
body.nb .wc-block-grid__product-title { color: var(--nb-blanc); }
body.nb .wc-block-grid__product-price { color: var(--nb-blau-text); }

/* =============================================================================
   11. Peu de pàgina
   ========================================================================== */
.nb-peu {
	position: relative;
	margin-top: 0;
	background: #05070D;
	border-top: 1px solid var(--nb-linia);
	color: var(--nb-text-2);
	font-size: 14px;
}
.nb-peu::before {
	content: "";
	position: absolute;
	top: -2px;
	left: var(--nb-marge);
	width: 140px;
	height: 3px;
	background: var(--nb-blau);
	box-shadow: 0 0 14px rgba(34, 211, 238, 0.7);
	clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}
.nb-peu__graella {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-top: 64px;
	padding-bottom: 48px;
}
.nb-peu__marca p { max-width: 34ch; margin: 18px 0 0; }
.nb-peu__titol {
	margin: 0 0 16px;
	color: var(--nb-blanc);
	font: 700 12px/1.2 var(--nb-font-text);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.nb-peu ul { margin: 0; padding: 0; list-style: none; }
.nb-peu li { margin-bottom: 10px; }
.nb-peu a { color: var(--nb-text-2); }
.nb-peu a:hover { color: var(--nb-cian); }
.nb-peu__nom {
	margin: 0;
	padding: 0 var(--nb-marge) 8px;
	overflow: hidden;
	color: transparent;
	-webkit-text-stroke: 1px rgba(91, 140, 255, 0.3);
	background: linear-gradient(90deg, transparent 0 42%, rgba(37, 99, 235, 0.28) 50%, transparent 58%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	font: 800 clamp(56px, 15vw, 230px)/0.85 var(--nb-font-titol);
	letter-spacing: 0.01em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	user-select: none;
	animation: nb-brilla-peu 10s ease-in-out infinite;
}
@keyframes nb-brilla-peu { 0% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
.nb-peu__baix { border-top: 1px solid var(--nb-linia); }
.nb-peu__baix .nb-contenidor {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-top: 20px;
	padding-bottom: 24px;
	font-size: 13px;
}
.nb-peu__baix p { margin: 0; }

/* =============================================================================
   12. Adaptació a pantalles petites
   ========================================================================== */
@media (max-width: 1099px) {
	ul.products,
	.site-main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.nb-categories__llista { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.nb-categories__llista li { grid-column: span 2; }
	.nb-categories__llista li:nth-child(-n+2) { grid-column: span 3; }
	.nb-categories__llista li:nth-child(-n+2) .nb-cat { aspect-ratio: 16 / 10; }
	.nb-xifres__llista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
	.nb-peu__graella { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	.nb-hero { min-height: 0; padding: 24px 0 calc(4.4vw + 96px); }
	.nb-hero__interior { grid-template-columns: 1fr; gap: 8px; }
	.nb-hero__escena { order: -1; margin: 0 -4vw; }
	.nb-hero__baixa { display: none; }
	.nb-aparador__interior { grid-template-columns: 1fr; }
	.nb-aparador__imatge { max-width: 520px; margin: 0 auto; }
	.single-product div.product { grid-template-columns: 1fr; }
	body.nb.single-product div.product .summary { grid-column: 1; grid-row: 2; padding-top: 28px; }
	.nb-detalls { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	:root { --nb-cap-alcada: 64px; }
	ul.products,
	.site-main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	ul.products li.product { padding-bottom: 12px; }
	.nb-targeta__imatge { margin-bottom: 12px; }
	.nb-targeta__categoria { padding: 0 12px; font-size: 10px; letter-spacing: 0.12em; }
	ul.products li.product .woocommerce-loop-product__title { padding: 0 12px; font-size: 14px; }
	ul.products li.product .price { padding: 0 12px; font-size: 17px; margin-bottom: 12px; }
	ul.products li.product .button { margin: 0 12px; padding: 9px 8px; font-size: 10.5px; letter-spacing: 0.06em; min-height: 40px; }
	.nb-categories__llista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.nb-categories__llista li,
	.nb-categories__llista li:nth-child(-n+2) { grid-column: span 1; }
	.nb-categories__llista li:first-child { grid-column: span 2; }
	.nb-categories__llista li .nb-cat,
	.nb-categories__llista li:nth-child(-n+2) .nb-cat { aspect-ratio: 4 / 5; }
	.nb-categories__llista li:first-child .nb-cat { aspect-ratio: 16 / 10; }
	.nb-cat__text { left: 14px; right: 12px; bottom: 14px; }
	.nb-cat__nom { font-size: 13.5px; letter-spacing: 0.01em; }
	.nb-cat__compte { min-height: 32px; padding-right: 40px; font-size: 12px; }
	.nb-cat__fletxa { right: 12px; bottom: 14px; width: 32px; height: 32px; }
	.nb-seccio__cap { flex-direction: column; align-items: flex-start; gap: 12px; }
	/* especificacions en forma de taula: nom a l'esquerra i valor a la dreta */
	.nb-specs { display: grid; margin-top: 28px; border-top: 1px solid var(--nb-linia); }
	.nb-specs > div,
	.nb-specs > div:first-child,
	.nb-aparador__specs > div:nth-child(2n) {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
		padding: 12px 0;
		border-left: 0;
		border-bottom: 1px solid var(--nb-linia);
	}
	.nb-specs dt { margin: 0; }
	.nb-specs dd { text-align: right; font-size: 14px; }
	.nb-aparador__specs { grid-template-columns: 1fr; }
	.nb-xifres__llista { gap: 32px 20px; }
	.nb-xifres__llista li { padding-left: 14px; }
	.nb-xifres__peu { margin-top: 32px; font-size: 11px; }
	.nb-peu__graella { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
	.storefront-sorting { gap: 10px 16px; }
	.single-product div.product form.cart .single_add_to_cart_button { flex-basis: 100%; }
	.woocommerce-message .button,
	.woocommerce-info .button { float: none; display: flex; margin: 12px 0 0; }
}

/* =============================================================================
   13. Menys moviment si l'usuari ho demana
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
	ul.products li.product:hover .nb-targeta__imatge img,
	.nb-cat:hover img { transform: none; }
}