/**
 * wideum-resp-grids.css — RESPONSIVE de les GRAELLES DE CARDS (mòbil + tablet).
 *
 * Objectiu: clavar el nombre de columnes de cada graella de cards a producció
 * (wideum.com) a cada breakpoint, sense tocar el desktop, i garantir que CAP
 * contingut (card, imatge, títol llarg) desbordi horitzontalment.
 *
 * Breakpoints (els d'Elementor, que són els que generen les amplades inline
 * per-element `_element_custom_width_(tablet|mobile)` que aquí ajustem):
 *   - TABLET : @media (max-width:1024px)
 *   - MÒBIL  : @media (max-width:767px)
 * El tema té a més punts propis a 1280/1100/800/600 (wideum-theme.css); les
 * regles d'aquí només actuen ≤1024 i ≤767, així que el desktop queda intacte.
 *
 * Columnes objectiu per graella (mesurat a prod amb Playwright; on prod ja no
 * té el bloc s'aplica la intenció original 3→2→1 del tema):
 *   BLOC            desktop  tablet(820)  mòbil(390)   font de la referència
 *   product-cards   3        3 (visible)  1            prod smart-glasses
 *                            2 (hover)    1            prod realwear
 *   video-cards     2        2            1            prod realwear  (ja OK: fix-f)
 *   cards (genèric) 3        2            1            prod partners/remote-eye (ja OK)
 *   columns (prod)  3        3            2            prod remote-eye
 *   partners-cols   4-5      4            1            prod partners
 *   benefits        4-5      4            2 (2×2)      stat cards compactes
 *   why             3        2            1            intenció original (bloc absent a prod)
 *   values          2        2            1            prod about-us (ja OK)
 *   team            4        4            2            prod about-us
 *   large-cards     3        3            1            tema original (ja OK)
 *   progressive     3        3            1            simplificat de carrusel (ja OK)
 *
 * Les cards mantenen alçada igual dins de cada fila (fix-g) també a mòbil/tablet:
 * aquí NOMÉS canviem amplada (flex-basis/width/max-width) i el gap, no l'stretch.
 *
 * La classe de card viu al wrapper extern .elementor-widget/.e-con, per això
 * els !important guanyen l'amplada inline per-element que emet Elementor
 * (`--width` / `width` a l'ID `.elementor-element-XXXX`).
 */

/* ================================================================== *
 * 0) SEGURETAT ANTI-DESBORDAMENT (tots els breakpoints).
 *    Cap imatge/card/títol no pot sortir de l'amplada del seu contenidor.
 * ================================================================== */
.w-cards-grid, .w-large-cards-grid, .w-benefits-grid, .w-why-grid,
.w-team-grid, .w-progressive-grid, .w-columns-grid, .w-values-grid,
.product-cards__container, .video-cards__container, .cards__container {
	max-width: 100%;
}

.w-card, .w-large-card, .w-benefit-card, .w-why-card, .w-team-card,
.w-progressive-card, .w-col, .w-value-item,
.product-cards__product, .video-cards__item, .cards__card {
	box-sizing: border-box;
}

/* min-width:0 NOMÉS a les cards natives w-* (widgets Elementor), perquè
 * encongeixin dins del flex sense desbordar. A les cards controlades pel tema
 * (product-cards/video-cards/cards) el min-content intrínsec és el que manté
 * 2 columnes a tablet — no el toquem o passarien a 3. */
.w-card, .w-large-card, .w-benefit-card, .w-why-card, .w-team-card,
.w-progressive-card, .w-col, .w-value-item {
	min-width: 0;
}

/* Imatges/logos/pòsters mai més amples que la card. */
.w-card img, .w-large-card img, .w-benefit-card img, .w-why-card img,
.w-team-card img, .w-progressive-card img, .w-col img, .w-value-item img,
.product-cards__product img, .video-cards__item img, .cards__card img {
	max-width: 100%;
	height: auto;
}

/* Títols/textos llargs trenquen paraula abans de desbordar. */
.w-card *, .w-large-card *, .w-benefit-card *, .w-why-card *, .w-team-card *,
.w-progressive-card *, .w-col *, .w-value-item *,
.product-cards__product *, .video-cards__item *, .cards__card * {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* ================================================================== *
 * 1) TABLET (≤1024px)
 * ================================================================== */
@media (max-width: 1024px) {

	/* partners-cols: a prod segueixen 4 en una fila (no 2). El mapper posa
	 * un tablet=45% (2 col) que aquí corregim a 4 col. Distingim la variant
	 * partners per la classe de secció .w-columns--partners. */
	.w-columns--partners .w-columns-grid,
	.w-columns--partners .w-columns-grid > .e-con-inner {
		gap: 16px !important;
		justify-content: center !important;
	}
	.w-columns--partners .w-col {
		flex: 0 0 calc(25% - 12px) !important;
		max-width: calc(25% - 12px) !important;
		width: calc(25% - 12px) !important;
	}
}

/* product-cards visibleInfo: a prod queden 3 en fila fins ≤1024 (banda tablet);
 * el tema ≤800 ja les passa a 1 col, per això limitem a 801–1024. hoverInfo el
 * tema ja el porta a 2 col (calc(50%-10px)), que coincideix amb prod. */
@media (min-width: 801px) and (max-width: 1024px) {
	.product-cards--visibleInfo .product-cards__product {
		max-width: calc(33.33% - 10px) !important;
		width: calc(33.33% - 10px) !important;
	}
}

/* ================================================================== *
 * 2) MÒBIL (≤767px) — 1 columna per defecte, excepte cards compactes
 *    (benefits/team/columns) que a prod van a 2 columnes.
 * ================================================================== */
@media (max-width: 767px) {

	/* columns (variant PRODUCT): a prod van a 2 col a mòbil (icona+text curt). */
	.w-columns:not(.w-columns--partners) .w-columns-grid,
	.w-columns:not(.w-columns--partners) .w-columns-grid > .e-con-inner {
		gap: 16px !important;
		justify-content: center !important;
	}
	.w-columns:not(.w-columns--partners) .w-col {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		width: calc(50% - 8px) !important;
	}

	/* partners-cols: a mòbil, 1 columna (com prod). */
	.w-columns--partners .w-col {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* team: a prod queden 2 per fila a mòbil (foto+nom+rol). */
	.w-team-grid,
	.w-team-grid > .e-con-inner {
		gap: 16px !important;
		justify-content: center !important;
	}
	.w-team-card {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		width: calc(50% - 8px) !important;
	}

	/* benefits (stat cards): 2×2 a mòbil. Corregeix cards diminutes (62px) que
	 * quedaven perquè el flex-basis de desktop (~22%) guanyava el width:100%. */
	.w-benefits-grid,
	.w-benefits-grid > .e-con-inner {
		gap: 16px !important;
		justify-content: center !important;
	}
	.w-benefit-card {
		flex: 0 0 calc(50% - 8px) !important;
		max-width: calc(50% - 8px) !important;
		width: calc(50% - 8px) !important;
	}

	/* why (3 col desktop → 1 col a mòbil). Defensiu: el bloc no és a cap pàgina
	 * local actual, però deixem la regla per si es reactiva el bloc home/why. */
	.w-why-card {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Reafirmació 1 col per a les cards grans/amples (ja hi són, però blindem
	 * davant de l'amplada inline de desktop si alguna pàgina quedés obsoleta). */
	.w-large-card, .w-progressive-card {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
}
/* Woo Loop Item #999: Elementor puts the class on the shortcode widget, not
   the image itself. Make media fill the card consistently for both hardware
   and the square software artwork; this removes the false empty right column. */
.wideum-loop-card__image,
.wideum-loop-card__image .elementor-shortcode,
.wideum-loop-card__image .wloop-product-image {
	display: block;
	width: 100%;
}
.wideum-loop-card__image .wloop-product-image {
	overflow: hidden;
	background: #f7f8fa;
	border-radius: 8px;
}
/* Un sol aspect-ratio per a totes les cards perquè les files quedin alineades.
   Fotos lifestyle omplen el marc (cover); els retalls d'accessori es mostren
   sencers amb aire (contain + padding) en lloc de bandes grises desiguals. */
.wideum-loop-card__image .wloop-product-image img {
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
}
.e-loop-item.product_cat-accessories .wideum-loop-card__image .wloop-product-image img,
.e-loop-item.product_cat-kits .wideum-loop-card__image .wloop-product-image img {
	object-fit: contain;
	padding: 9%;
}
/* Els kits amb foto lifestyle real (PoC) mantenen cover. */
.e-loop-item.post-838 .wideum-loop-card__image .wloop-product-image img {
	object-fit: cover;
	padding: 0;
}
/* Cards d'una mateixa fila: alçada igual i botó Add to cart ancorat a baix.
 *
 * L'ancoratge va al BOTÓ, no al preu. Abans el `margin-top:auto` el portava el
 * preu i empenyia preu+botó junts cap avall, cosa que deixava 88–94px de buit
 * entre el títol i el preu a les cards amb títol curt (mesurat a /shop/): el
 * preu quedava lluny del producte a què pertany. Ara el preu va enganxat al
 * títol amb el `gap` de la card i només el botó absorbeix la diferència
 * d'alçada, que és el que realment ha d'estar alineat entre cards. */
.e-loop-item > .wideum-loop-card {
	height: 100%;
}
.wideum-loop-card > .wideum-loop-card__atc {
	margin-top: auto;
	padding-top: 10px;
}

/* ---- Targetes de fabricant a les landings (.wideum-brand-card) ----
   Botó "Shop <marca>" ancorat a baix perquè les 4 targetes quedin alineades
   encara que els textos tinguin llargades diferents. */
.wideum-brand-row > .wideum-brand-card {
	height: 100%;
}
.wideum-brand-card > .e-con:last-child {
	flex-grow: 1;
}
.wideum-brand-card .elementor-widget-button {
	margin-top: auto;
}

/* ---- Graelles de producte de les brand landings (.wideum-brand-products-loop) ----
   Marques amb 1-2 productes (Moziware, Epson) deixaven una targeta òrfena
   enganxada a l'esquerra amb 3/4 de fila buida: centrem les cel·les sobrants
   mantenint l'amplada de card d'una graella de 4. */
.wideum-brand-products-loop {
	/* En seccions amb align-items:center el widget cauria a min-content i
	   l'auto-fit es quedaria amb 1 columna. */
	width: 100%;
}
.wideum-brand-products-loop .elementor-loop-container {
	/* 260px x 4 + 3 gaps cap dins del contenidor boxed (~1140px). */
	grid-template-columns: repeat(auto-fit, minmax(0, 260px)) !important;
	justify-content: center;
}
@media (max-width: 767px) {
	.wideum-brand-products-loop .elementor-loop-container {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* ---- Loops petits: menys productes que columnes ----
   Els loops d'upsell, de la Suite i d'accessoris de marca sovint tenen 1-3
   ítems dins d'una graella de 3-4 columnes: quedava un forat de 400-1000px a
   la dreta. Amb auto-fit les pistes buides es col·lapsen i les cards es
   distribueixen centrades, amb una amplada màxima perquè no s'inflin.
   Els ARXIUS no s'hi inclouen: allà la fila parcial final és el comportament
   normal d'una graella multi-fila (i el mateix que fa wideum.com). */
.wshop-pdp-upsell-loop .elementor-loop-container,
.wideum-brand-suite-loop .elementor-loop-container,
.wideum-brand-accessories-loop .elementor-loop-container,
.wusa-product-loop .elementor-loop-container {
	grid-template-columns: repeat(auto-fit, minmax(260px, 400px)) !important;
	justify-content: center;
}

/* Els mòduls amb loop centrat porten el títol també centrat, com el bloc
   product-cards del web (títol i graella centrats com una unitat). */
.wshop-pdp-upsell > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
.wshop-brand-suite > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
.wshop-brand-accessories > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
	text-align: center;
}