/* ============================================================================
 * wideum-resp-features.css
 * ----------------------------------------------------------------------------
 * RESPONSIVE fidelity for the custom widget `wideum-features`
 * (widgets/class-widget-features.php) — the interactive "scroll-sync" feature
 * list (item list + image-swap panel). Owned exclusively by this file + that
 * widget's PHP.
 *
 * PROBLEM this file fixes
 * -----------------------
 * On production the block sits inside the theme's `.container`, which supplies
 * the horizontal gutter at every breakpoint:
 *     .container         { padding: 0 10%; }
 *     @media <=700px     { .container { padding: 0 25px; } }
 * In the Elementor build a global rule
 *     .elementor-widget-wideum-features .container { padding:0; max-width:100%; }
 * (wideum-legacy.css) NEUTRALISES that gutter so the boxed 1280 Elementor
 * container is not restricted a SECOND time on DESKTOP — correct there, but it
 * also strips the gutter on tablet/mobile, where prod keeps it. Result on local:
 * the subtitle, the active feature box and the swapped image all run edge-to-edge
 * (touching the screen border) instead of sitting inside prod's ~25px / 10%
 * gutter.
 *
 * FIX: restore the theme's own `.container` gutter for THIS widget ONLY on the
 * viewports where prod applies it and where the Elementor container already
 * equals the viewport width (<=1050px, i.e. the JS mobile/tablet layout) — never
 * on desktop, where the neutralise must stand so content stays 1280 wide.
 * Higher specificity ( .elementor-widget-wideum-features .features .container )
 * wins over the neutralise rule ( .elementor-widget-wideum-features .container ).
 *
 * The image-swap itself (which image shows, active item, move-into-item on
 * mobile) is driven by JS (assets/js/wideum-widgets.js, module "Features") and
 * ALREADY works on mobile — images are moved inside the active item. No JS
 * change is required; this file is purely layout/gutter fidelity.
 * ==========================================================================*/

/* Tablet + mobile band: recreate prod's `.container` gutter (prod = 0 10%). */
@media (max-width: 1050px) {
	.elementor-widget-wideum-features .features .container {
		padding-left: 10%;
		padding-right: 10%;
		box-sizing: border-box;
	}
}

/* Mobile: prod switches the gutter to a fixed 25px (theme's <=700px rule). */
@media (max-width: 700px) {
	.elementor-widget-wideum-features .features .container {
		padding-left: 25px;
		padding-right: 25px;
	}
}

/* Productes de software importats de la web Elementor principal.
 * El contenidor arrel ja aporta els 105px originals. El <section> intern del
 * widget rebia, a més, el padding global del tema i duplicava l'espai vertical.
 * També restaurem el marge de títol que el reset d'Elementor trepitja. */
.wshop-source-software-block .elementor-widget-wideum-features > .elementor-widget-container > section.features {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.wshop-source-software-block .features__title.section-title {
	margin-top: 0;
	margin-bottom: var(--margin-section-large, 70px);
}

.wshop-source-software-block .features__title + .features__subtitle {
	margin-top: -35px;
}

@media (max-width: 767px) {
	.wshop-source-software-block .features__title.section-title {
		margin-bottom: var(--margin-section-regular, 40px);
	}

	.wshop-source-software-block .features__title + .features__subtitle {
		margin-top: -15px;
	}
}

/* ---- Pàgines de contingut pla (polítiques, legals): shop-policies, legal,
   cookies. Hello Elementor les treu amb .page-header/.page-content nus:
   les vestim amb el llenguatge del shop sense tocar el contingut. ---- */
.page-template-default:not(.elementor-page) .page-header {
	max-width: 820px;
	margin: 0 auto;
	padding: 56px 20px 0;
}

.page-template-default:not(.elementor-page) .page-header .entry-title {
	margin: 0 0 6px;
	color: #00175c;
	font-size: 38px;
	font-weight: 700;
}

.page-template-default:not(.elementor-page) .page-content {
	max-width: 820px;
	margin: 0 auto;
	padding: 8px 20px 72px;
	color: #1c2440;
	font-size: 15.5px;
	line-height: 1.65;
}

.page-template-default:not(.elementor-page) .page-content h2,
.page-template-default:not(.elementor-page) .page-content h3 {
	margin: 28px 0 10px;
	color: #00175c;
	font-weight: 700;
}

.page-template-default:not(.elementor-page) .page-content h2 {
	padding-bottom: 8px;
	border-bottom: 1px solid #e5e8ef;
	font-size: 24px;
}

.page-template-default:not(.elementor-page) .page-content h3 {
	font-size: 19px;
}

.page-template-default:not(.elementor-page) .page-content a {
	color: #1ca3b5;
	font-weight: 600;
}

.page-template-default:not(.elementor-page) .page-content li {
	margin-bottom: 6px;
}