/* =============================================================================
 * wideum-shop-f13.css — F13 · Revisió final de disseny (passada TOTAL desktop)
 *
 * Correccions transversals detectades revisant les 28 captures desktop EN+ES de
 * tools/backups/design-shots/total-final1/ contra el web canònic (localhost:8883).
 *
 * Regla d'or d'aquest full: NOMÉS regles de sistema (una causa → una regla que
 * val per a totes les pàgines). Res de per-document, res al custom_css.
 *
 * S'encua l'ÚLTIM del bloc de fulls consolidats del shop (assets.php, prioritat
 * 30), de manera que guanya per ordre de font en cas d'empat d'especificitat.
 *
 * ÍNDEX
 *   1. Cinta de logos "Trusted by" — filtre canònic
 *   2. Radi de 10px als mòduls canònics dins d'Elementor
 *   3. Mòduls canònics <section> imbricats: alçada inflada (140/105)
 *   4. Heros: padding vertical asimètric (40/105)
 *   5. Carrusels d'una sola diapositiva: punt de paginació orfe
 *   6. Selector d'idioma orfe sota el footer
 *   7. Preu rebaixat subratllat
 *   8. Footer banner: subtítol descentrat
 *   9. Imatge de card del loop: doble fons i paritat EN/ES
 *  10. Graelles de 2 productes que estiren la card
 *  11. Subtítols de secció en seccions alineades a l'esquerra
 *  12. Secció grisa a sang al PDP de hardware
 *  13. Capçalera: el menú es menja el selector d'idioma en castellà
 *  14. Títol de pàgina de plantilles no-Elementor (.entry-title)
 *  15. Ajustos de la segona passada (aire del banner, botons, doble fons PDP)
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. CINTA DE LOGOS "TRUSTED BY INDUSTRIAL TEAMS"
 *
 * Causa: `.wideum-home-partners img` feia `grayscale(1) + opacity .55`, que
 * CONSERVA la luminància de l'original. Els logos foscos (KOMATSU, COMEXI)
 * quedaven gairebé negres i els clars o de color mitjà (MAPFRE #D81E05, SEAT,
 * dalkia) quedaven quasi invisibles — el bug reportat del logo de MAPFRE.
 *
 * El web canònic aplana la luminància: `.logo-row__logo` fa
 * `filter: brightness(0); opacity: .3` (verificat amb getComputedStyle a
 * localhost:8883), de manera que TOTS els logos surten al mateix gris.
 * -------------------------------------------------------------------------- */
.wideum-home-partners img {
	filter: brightness(0);
	opacity: .3;
}

.wideum-home-partners img:hover {
	filter: none;
	opacity: 1;
}

/* -----------------------------------------------------------------------------
 * 2. RADI DE 10px ALS MÒDULS CANÒNICS DINS D'ELEMENTOR
 *
 * Causa: Elementor declara `--border-radius: 0` a CADA `.e-con`. Els mòduls del
 * tema fan `border-radius: var(--border-radius)`, així que qualsevol mòdul
 * canònic renderitzat dins d'un contenidor d'Elementor perd el radi i queda amb
 * cantonades vives, mentre els mòduls construïts a Elementor (.wideum-loop-card,
 * .case-studies__card, .wideum-brand-band) sí que el tenen a 10px.
 *
 * No es pot redefinir `--border-radius` a `.e-con` (Elementor la fa servir per
 * al radi del propi contenidor: arrodoniria TOTES les caixes), ni fer servir el
 * fallback `var(--border-radius, 10px)`: la variable NO és indefinida, està
 * definida a 0, així que el fallback no s'activaria mai. Cal el valor literal,
 * com ja fa wideum-forms.css amb els camps de formulari.
 *
 * Mesurat abans: .wideum-card 0 · .wideum-brand-card 0 · .testimonials__card 0 ·
 * .footer-banner__box 0 · .wksts__card 12 · .wloop-product-image 8.
 * -------------------------------------------------------------------------- */
.elementor .wideum-card,
.elementor .wideum-brand-card,
.elementor .testimonials__card,
.elementor .footer-banner__box,
.elementor .wksts__card,
.wideum-loop-card__image .wloop-product-image {
	border-radius: 10px;
}

/* -----------------------------------------------------------------------------
 * 3. MÒDULS CANÒNICS <section> IMBRICATS — ALÇADA INFLADA
 *
 * Causa arrel de "els mòduls queden massa alts". Els mòduls canònics
 * (.testimonials, .case-studies, .footer-banner) es renderitzen com un
 * <section> dins d'un widget d'Elementor. La regla global del tema
 *
 *     section              { padding: calc(var(--section-spacing)*1.5) 0 }  → 105px
 *     section:first-of-type{ padding-top: calc(var(--section-spacing)*2)  }  → 140px
 *
 * els arriba igualment, i com que cada mòdul és l'ÚNIC <section> del seu widget
 * sempre compleix `:first-of-type` → 140px a dalt i 105px a baix, SEMPRE.
 *
 * Al web canònic això és correcte: el mòdul ÉS la secció de pàgina. Al shop no:
 * viu dins d'una secció `.wsec-*` que ja porta el seu propi ritme (padding de
 * secció + gap de 34px), de manera que se sumaven 245px de cromo per mòdul.
 * Mesurat a /category/smart-glasses/: .wsec-proof feia 1788px d'alt per un
 * testimoni (431px de contingut) i un cas d'èxit (605px), amb ~279px morts
 * entre els dos i ~174px entre el títol de secció i la primera targeta.
 *
 * Aquí el ritme el posa la secció contenidora; el mòdul només hi aporta un
 * respir regular (30px = --margin-section-regular). Amb el gap de 34px de la
 * secció això dona ~64px títol→contingut i ~94px entre mòduls, que és el ritme
 * del web.
 * -------------------------------------------------------------------------- */
.elementor-widget-container > section.testimonials,
.elementor-widget-container > section.case-studies,
.elementor-widget-container > section.footer-banner,
.elementor-widget-container > section.features {
	padding-top: var(--margin-section-regular);
	padding-bottom: var(--margin-section-regular);
}

/* Bandes grises concèntriques al mòdul `.features` (Why <marca>? de les brand
 * landings i el bloc de software del PDP de Remote Eye). Mesurat: TRES rectangles
 * grisos encaixats — la secció `.w-features.wsec-bg` (1382), la seva banda
 * (1327, perquè `.section-bg` fa el 96% d'una secció que JA està encaixada) i la
 * banda pròpia del mòdul `.features` (1229). Les vores no coincidien amb les de
 * la resta de bandes del shop (29–1411) i es veia l'escaló.
 *
 * El tema ja fa exactament això per a `.testimonials`
 * (`.testimonials .section-bg-container { display: none }`): un mòdul dins d'una
 * secció que ja pinta el fons no n'ha de pintar un altre. */
.wsec-bg .elementor-widget-container > section.features .section-bg-container,
.w-features .elementor-widget-container > section.features .section-bg-container {
	display: none;
}

/* I la banda de la secció recupera l'amplada completa de la secció, que ja està
 * encaixada al 96% — si no, s'hi aplicaria el 96% dues vegades. */
.w-features.wsec-bg > .elementor-widget-html .section-bg,
.w-features.wsec-bg > .e-con-inner > .elementor-widget-html .section-bg {
	width: 100%;
	max-width: none;
}

/* Doble sagnat lateral del mateix motiu: `.container` del tema fa
 * `padding: 0 10%` perquè al web viu directament sota el <body> (1440 → 1152 de
 * contingut). Dins d'Elementor ja hi ha la gutter de la secció boxed (1440 →
 * 1280), així que el 10% s'aplicava una segona vegada i deixava el mòdul a
 * 1024px: el footer banner quedava 256px més estret que TOTA la resta de la
 * pàgina i, a les pàgines on a sobre hi ha una banda grisa de 1382px, es veia
 * l'escaló. Amb la gutter a 0 el mòdul torna a la graella de 1280, que és
 * l'amplada del banner de la home. */
.elementor-widget-container > section > .container {
	padding-inline: 0;
}

/* -----------------------------------------------------------------------------
 * 4. HEROS — PADDING VERTICAL ASIMÈTRIC
 *
 * Causa: totes les seccions `.w-hero` porten padding 40px a dalt i 105px a baix,
 * cosa que deixa una franja morta de ~65px al peu del hero (molt visible als
 * heros navy: home, 404, industries, kits, brand landings). Simetritzem al
 * ritme de secció del web (--section-spacing = 70px).
 *
 * Afecta: .wideum-home-hero, .wideum-cat-hero, .wind-hero, .wshop-404,
 * .wkits-hero, .w-brand-hero — totes comparteixen `.w-hero`.
 * -------------------------------------------------------------------------- */
.elementor .e-con.w-hero {
	padding-top: var(--section-spacing);
	padding-bottom: var(--section-spacing);
}

/* -----------------------------------------------------------------------------
 * 4b. CTA INTERMEDI AMB CARD NAVY SENSE PADDING (arxiu d'Accessories)
 *
 * Símptoma reportat: a /category/accessories/ el títol "Complete your kit" surt
 * enganxat a la cinta de logos de sobre i el botó "Book a Demo" ran de la vora
 * inferior de la card navy.
 *
 * Causa: la secció `wsec-kit-cta` va quedar sense CAP font de padding vertical.
 * `apply-concepts.php` (línies 236-248) només posa la classe base `.w-hero` a
 * `$data[0]`, i `apply-typography-scale.php:356` li va afegir el modificador
 * `w-hero--white` — que només canvia el color del text. Resultat: l'única secció
 * de tota la família d'arxius amb el modificador i sense la classe base, i per
 * tant l'única sense els 70px de la regla 4. Com que porta una banda navy
 * `--boxed` (position:absolute, height:100%) que es veu com una card, el contingut
 * queda ran de la vora. Als altres tres arxius el CTA intermedi
 * (`wsec-choice-cta`, `wsec-poc-cta`, `wsec-rollout-cta`) sí que té 64/64 al data.
 *
 * Es corregeix pel marcador `wsec-*`, que ja s'emet al DOM, i no editant la
 * plantilla: `build-category-archives-v2.php:266` sobreescriu `_elementor_data`
 * sencer a cada regeneració i s'hi perdria. Fer-ho aquí també protegeix qualsevol
 * futur CTA intermedi que caigui al mateix parany.
 * -------------------------------------------------------------------------- */
.elementor .e-con.wsec-kit-cta {
	padding-top: var(--section-spacing);
	padding-bottom: var(--section-spacing);
}

/* -----------------------------------------------------------------------------
 * 5. CARRUSELS D'UNA SOLA DIAPOSITIVA — PUNT DE PAGINACIÓ ORFE
 *
 * Causa: slick pinta `.slick-dots` incondicionalment. Amb un sol testimoni o un
 * sol cas d'èxit (la majoria d'arxius i PDPs) queda un punt turquesa solitari
 * flotant que sembla un element trencat. Amagat quan no hi ha 2a diapositiva.
 * -------------------------------------------------------------------------- */
.slick-dots:not(:has(li:nth-child(2))) {
	display: none !important;
}

/* -----------------------------------------------------------------------------
 * 6. SELECTOR D'IDIOMA ORFE SOTA EL FOOTER
 *
 * Causa: WPML injecta el switcher "footer statics" (`.wpml-ls-statics-footer`)
 * directament a <body>, després del footer. Surt sense estil, sobre blanc i fora
 * de la caixa grisa del footer, a TOTES les pàgines menys la home, i duplica el
 * switcher que ja hi ha a la capçalera.
 * -------------------------------------------------------------------------- */
.wpml-ls-statics-footer {
	display: none !important;
}

/* -----------------------------------------------------------------------------
 * 7. PREU REBAIXAT SUBRATLLAT
 *
 * Causa: WooCommerce marca el preu rebaixat amb <ins>, i mai s'ha reiniciat el
 * subratllat per defecte del navegador. Afecta tots els loops amb descompte
 * (Remote Support Kit) a totes les pàgines i idiomes.
 * -------------------------------------------------------------------------- */
.price ins,
.woocommerce-Price-amount ins,
.wideum-loop-card__price ins {
	text-decoration: none;
}

/* -----------------------------------------------------------------------------
 * 8. FOOTER BANNER — SUBTÍTOL DESCENTRAT
 *
 * Causa: el <p> porta alhora `.footer-banner__text` (tema: max-width 560px +
 * `margin: 0 auto`) i `.section-subtitle`, i la regla de `.section-subtitle`
 * guanya per ordre de font imposant `margin: -35px 0 60px` — sense `auto`. El
 * bloc de 560px es quedava enganxat a l'esquerra dins d'una caixa de 904px:
 * mesurat amb el centre del text a x=548 i el del títol/botons a x=720.
 * -------------------------------------------------------------------------- */
.footer-banner__box .footer-banner__text {
	margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 9. IMATGE DE CARD DEL LOOP — DOBLE FONS I PARITAT EN/ES
 *
 * (a) Doble fons: el pou de la imatge era gris (#f7f8fa) i molts packshots
 *     porten el blanc cuit a dins (ARC 3 Base, Thermal Camera Module, els kits).
 *     Resultat: un rectangle blanc dins d'un rectangle gris dins d'una card
 *     blanca. Amb el pou blanc, el marc el fa la vora de la card i el 4/3 +
 *     padding segueix donant aire al packshot.
 *
 * (b) Paritat EN/ES: les regles de `object-fit: contain` estaven clavades als
 *     slugs anglesos (`product_cat-accessories`, `product_cat-kits`) i a l'ID
 *     del post EN (`post-838`). En castellà els slugs són `accesorios` /
 *     `kits-es` i els ítems del loop no emeten `post-<id>`, així que el MATEIX
 *     producte sortia `contain` en anglès i `cover` en castellà (comparat al
 *     carret EN vs ES). `e-loop-item-<id>` sí que existeix en tots dos idiomes.
 * -------------------------------------------------------------------------- */
.wideum-loop-card__image .wloop-product-image {
	background: var(--white, #fff);
}

.e-loop-item.product_cat-accesorios .wideum-loop-card__image .wloop-product-image img,
.e-loop-item.product_cat-kits-es .wideum-loop-card__image .wloop-product-image img {
	object-fit: contain;
	padding: 9%;
}

/* Els kits amb foto lifestyle real (PoC) mantenen cover, en tots dos idiomes.
   Va DESPRÉS de les regles de `contain` per guanyar per ordre de font. */
.e-loop-item.e-loop-item-838 .wideum-loop-card__image .wloop-product-image img,
.e-loop-item.e-loop-item-839 .wideum-loop-card__image .wloop-product-image img {
	object-fit: cover;
	padding: 0;
}

/* -----------------------------------------------------------------------------
 * 10. GRAELLES DE 2 PRODUCTES QUE ESTIREN LA CARD
 *
 * Causa: les seccions d'enriquiment de les brand landings (Wideum Suite,
 * accessoris) fan servir `elementor-grid-2`, de manera que amb 2 productes cada
 * card s'estira a 675px mentre la graella principal de la mateixa pàgina manté
 * cards de 260px. El mateix component surt a dues escales molt diferents en una
 * sola pàgina, i el packshot queda perdut al mig.
 * -------------------------------------------------------------------------- */
.wshop-brand-enrichment .elementor-loop-container {
	grid-template-columns: repeat(auto-fit, minmax(0, 260px)) !important;
	justify-content: center;
}

@media (max-width: 767px) {
	.wshop-brand-enrichment .elementor-loop-container {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* -----------------------------------------------------------------------------
 * 11. SUBTÍTOLS DE SECCIÓ EN SECCIONS ALINEADES A L'ESQUERRA
 *
 * Causa: la regla de wideum-shop-typography.css §6 centra TOT `.section-subtitle`
 * de primer nivell (max-width 930 + margin auto + text-align center) perquè al
 * shop les seccions són centrades. A /industries/ no ho són: eyebrow, h2,
 * checklist i botons van a l'esquerra i només el paràgraf quedava centrat i
 * sagnat (mesurat: h2 a x=80, paràgraf a x=300). Les seccions d'industries
 * porten `.wind-vertical`, així que l'excepció és exacta i no toca la resta.
 * -------------------------------------------------------------------------- */
.wind-vertical > .e-con-inner > .elementor-widget-text-editor.section-subtitle,
.wind-vertical > .elementor-widget-text-editor.section-subtitle {
	max-width: none;
	margin-inline: 0;
	text-align: inherit;
}

/* -----------------------------------------------------------------------------
 * 12. SECCIÓ GRISA A SANG AL PDP DE HARDWARE — RESOLT A LES DADES (F1.5)
 *
 * Aquí hi havia una banda reproduïda amb un pseudo-element (`::before` amb
 * `inset: 0 2%`) per no tocar el `_elementor_data` del PDP. A la passada F1.5
 * `.wshop-pdp-upsell` (i la resta de seccions que encara pintaven el fons a
 * sang) s'han convertit al patró canònic amb
 * `tools/design/apply-section-bg.php f15 write`: la secció porta `.wsec-bg` i
 * un widget HTML amb `.section-bg-container > .section-bg`, i la geometria la
 * dona wideum-shop-typography.css §5. El pseudo-element duplicava la banda, així
 * que s'ha eliminat. No el tornis a afegir: qualsevol secció grisa/navy nova ha
 * de passar per l'script.
 * -------------------------------------------------------------------------- */

/* Cards del loop d'upsell del PDP: mateixa anatomia que .wideum-loop-card.
 *
 * Causa 1 (padding): wideum-shop-pdp.css ja demana `padding: 18px 18px 22px`,
 * però el full de WooCommerce imposa `padding: 0` amb més pes i guanya — mesurat
 * `padding: 0px` i el títol començant a 1px de la vora de la card.
 *
 * Causa 2 (desalineació): el <li> és `display: block`, de manera que l'alçada
 * igual la dona la graella però el contingut NO està ancorat. Amb un títol de 2
 * línies el preu queia a 444px i el botó a 493px (contra 391/440 dels germans),
 * i el botó acabava a 1px del marc inferior de la card. Amb el <li> i el seu
 * enllaç en columna flexible i el preu amb `margin-top: auto`, el bloc
 * preu + botó queda ancorat a baix i s'alinea a tota la fila. */
.wshop-pdp-upsell ul.products li.product {
	display: flex !important;
	flex-direction: column !important;
	padding: 18px 18px 22px !important;
}

.wshop-pdp-upsell ul.products li.product > .woocommerce-loop-product__link {
	display: flex !important;
	flex: 1 1 auto;
	flex-direction: column !important;
	align-items: stretch;
}

/* Qui absorbeix la diferència d'alçada és el BOTÓ, no el preu — igual que a
 * .wideum-loop-card (wideum-resp-grids.css). Amb l'`auto` al preu, a les cards
 * de títol curt el preu quedava lluny del producte a què pertany; i com que
 * aquestes cards i les de la botiga surten a la mateixa pàgina, la incoherència
 * es veia. Canviat el 2026-07-30 amb el mateix criteri a tots dos llocs. */
.wshop-pdp-upsell ul.products li.product .price {
	padding-top: 12px;
}

.wshop-pdp-upsell ul.products li.product .button {
	margin-top: auto;
	padding-top: 12px;
}

/* -----------------------------------------------------------------------------
 * 13. CAPÇALERA: EL MENÚ ES MENJA EL SELECTOR D'IDIOMA EN CASTELLÀ
 *
 * Causa: `ul.main-menu` és un ítem flex centrat dins del widget del megamenú i
 * porta `gap: 30px` + `padding-left: 40px`. Amb `min-width: auto` no pot encongir
 * per sota del seu contingut, de manera que quan les etiquetes són més llargues
 * sobreïx la seva pròpia cel·la per TOTS DOS costats (està centrada).
 *
 * Mesurat a 1440: EN el <ul> fa 803px dins d'una cel·la de 797 (sobreïx 3px per
 * banda, inofensiu); ES fa 850px dins de 763 (sobreïx 43px per banda) i la vora
 * dreta arriba a x=1041 quan el bloc d'idioma comença a x=1021 → "Recursos ⌄" i
 * "Español" es toquen. Es veu a TOTES les pàgines ES.
 *
 * El padding esquerre de 40px no fa cap servei (els ítems ja van centrats amb
 * `justify-content: center`) i només desplaça el menú. Traient-lo i ajustant el
 * gap a 24px el <ul> cap a la seva cel·la en tots dos idiomes.
 * -------------------------------------------------------------------------- */
.wideum-header .main-menu {
	min-width: 0;
	max-width: 100%;
	padding-left: 0;
	gap: 24px;
}

/* -----------------------------------------------------------------------------
 * 14. TÍTOL DE PÀGINA DE PLANTILLES NO-ELEMENTOR
 *
 * Causa: /shop-policies/ no és una pàgina d'Elementor, així que el seu <h1>
 * surt amb `.entry-title` del tema (38px, dins d'una columna estreta) en lloc
 * del rol `page-title` (60px). Era l'únic títol de pàgina fora de l'escala.
 * -------------------------------------------------------------------------- */
.entry-title {
	font-family: var(--primary-font-family);
	font-size: var(--title-regular-size);
	line-height: var(--title-regular-lineheight);
	font-weight: var(--bold);
	color: var(--dark-blue);
}

/* -----------------------------------------------------------------------------
 * 15. AJUSTOS DE LA SEGONA PASSADA (regressions detectades revisant els "després")
 * -------------------------------------------------------------------------- */

/* 15a · El footer banner necessita MÉS aire a dalt que els carrusels.
 *
 * La regla §3 el va deixar a 30px com als altres mòduls, però el banner no és un
 * mòdul intercalat: és l'últim bloc abans del footer i sovint va just sota una
 * caixa grisa. Mesurat després de §3: el buit entre el bloc anterior i la caixa
 * navy queia de 141px a 31px, fora del ritme de 65–90px de la resta de la pàgina
 * i incoherent amb la home (91px). El tornem a 90px, que és el que fa la home. */
.elementor-widget-container > section.footer-banner {
	padding-top: calc(var(--margin-section-large) * 1.5);
}

/* 15b · Botons dels mòduls canònics fora de l'escala de botons.
 *
 * `.button` del tema surt amb radius 3px i padding 11/18 dins del shop, mentre
 * que el botó canònic (verificat a localhost:8883 i a tots els widgets
 * d'Elementor del shop) és radius 10px i padding 13/26. Es notava sobretot al
 * footer banner: la caixa ja té radius 10 i el botó de dins era un rectangle
 * gairebé viu, diferent del botó píndola de la home. */
.footer-banner__buttons-container a.button,
.woocommerce .footer-banner__buttons-container a.button,
.case-studies__button.button,
.woocommerce .case-studies__button.button,
.testimonials .button {
	border-radius: 10px;
	padding: 13px 26px;
}

.footer-banner__buttons-container a.button.button--transparent,
.woocommerce .footer-banner__buttons-container a.button.button--transparent {
	padding: 11px 24px;
}

/* 15c · Doble fons a la card de "Compatible accessories" del PDP.
 *
 * Mateix defecte que §9 però en un altre component: `.wshop-compat__thumb` és un
 * pou gris amb la imatge `contain` a dins, i els packshots porten el blanc cuit
 * → rectangle blanc dins d'un rectangle gris dins d'una card blanca. §9 només
 * arreglava `.wloop-product-image`, de manera que aquesta card quedava com
 * l'única amb doble fons de tot el PDP. El radi també anava a 8 en lloc de 10. */
.wshop-compat__thumb {
	background: var(--white, #fff);
	border-radius: 10px;
}

/* =============================================================================
 * WOO CHROME — inputs, avisos i taules natius de WooCommerce al llenguatge
 * del shop (cart, checkout, my-account, cerca). El crom per defecte de Woo
 * (cantonades vives, blau/teal, botons grisos) trencava el sistema.
 * ========================================================================== */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.cart td.actions .coupon .input-text,
.woocommerce .select2-container .select2-selection--single,
.woocommerce-page form .form-row input.input-text {
	min-height: 46px;
	padding: 10px 13px;
	border: 1px solid #c9d0dc;
	border-radius: 10px;
	background: #fff;
	color: #1c2440;
	font-size: 15px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: #1ca3b5;
	box-shadow: 0 0 0 3px rgba(28, 163, 181, .12);
}

.woocommerce form .form-row label {
	color: #00175c;
	font-weight: 600;
}

/* Casella nativa: color de marca sense tocar markup. */
.woocommerce input[type="checkbox"],
.woocommerce input[type="radio"] {
	accent-color: #00175c;
	width: 18px;
	height: 18px;
}

/* Avisos (carret buit, cupó aplicat, errors): barra teal de Woo → navy/mint. */
.woocommerce-info,
.woocommerce-message {
	border-top-color: #4adbc4;
	border-radius: 10px;
	background: #f7f8fa;
	color: #00175c;
}

.woocommerce-info::before,
.woocommerce-message::before {
	color: #4adbc4;
}

.woocommerce-error {
	border-top-color: #d64545;
	border-radius: 10px;
	background: #fdf3f3;
}

/* Taula del carret i totals: vores del sistema, cantonades del sistema. */
.woocommerce table.shop_table {
	border: 1px solid #e5e8ef;
	border-radius: 10px;
	border-collapse: separate;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	color: #00175c;
	font-weight: 700;
}

/* Espai per al badge flotant de Calendly (desktop): que no trepitgi el footer. */
body.woocommerce-page .wideum-footer,
body .elementor-location-footer {
	padding-bottom: 32px;
}

/* Hero de marca amb color CLAR (Rokid #00ABFE): el mint de l'eyebrow i del
   botó outline no hi contrasta prou. Sobre marca clara tot va en blanc. */
.w-hero--brightbrand .elementor-widget-heading.w-pretitle--on-dark .elementor-heading-title,
.w-hero--brightbrand .elementor-widget-text-editor.w-pretitle--on-dark p {
	color: var(--white);
}

.w-hero--brightbrand .w-btn-outline .elementor-button,
.w-hero--brightbrand .elementor-widget-button.w-btn-outline .elementor-button {
	border-color: var(--white);
	color: var(--white);
}

.w-hero--brightbrand .w-btn-outline .elementor-button:hover {
	background-color: rgba(255, 255, 255, .18);
	color: var(--white);
}