/*
 * NELLCA Product Page — Layout: Advanced
 * Mobile-first. Breakpoints: 768px (tvåkolumns), 992px (bred desktop).
 */

/* ════════════════════════════════════════════════════════════
   SHOPTIMIZER ARCHIVE-HEADER
   Shoptimizer renderar alltid <div class="archive-header"> i header.php.
   Vi tar bort breadcrumben från shoptimizer_content_top och renderar den
   som overlay i herobilden istället. Det tomma archive-header-elementet
   döljs för att undvika ett synligt vitt mellanrum.
   ════════════════════════════════════════════════════════════ */

.single-product .archive-header {
	display: none;
}

/* ════════════════════════════════════════════════════════════
   FULLBREDD-WRAPPER
   Bryter ut ur WooCommerce/Shoptimizers container.
   Alla direkta barn som ska ha maxbredd använder en __inner-wrapper.
   ════════════════════════════════════════════════════════════ */

.nellca-pp-layout-advanced {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* Förhindrar horisontell scroll orsakad av att 100vw inkluderar
	   scrollbar-bredden medan sidans layout-bredd inte gör det */
	overflow-x: hidden;
}

/* Produkthuvud-innern: innesluten med max-width och gutter */
.nellca-pp-product-header__inner {
	max-width: var(--nellca-pp-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--nellca-pp-gutter-mobile);
	padding-right: var(--nellca-pp-gutter-mobile);
}

@media (min-width: 768px) {
	.nellca-pp-product-header__inner {
		padding-left: var(--nellca-pp-gutter);
		padding-right: var(--nellca-pp-gutter);
	}
}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */

.nellca-pp-hero {
	position: relative;
	width: 100%;
	background-color: var(--nellca-pp-hero-bg);
	/* Hero wraps bildyta + miniaty-rad — ingen fast höjd behövs */
}

.nellca-pp-hero--no-image {
	height: auto;
	min-height: 60px;
	background: none;
}

/* ── Galleri ── */

.nellca-pp-gallery {
	position: relative;
	width: 100%;
	/* Galleriet = enbart bildytan. Miniatyrerna är en syskon-nod i
	   .nellca-pp-hero och kan aldrig överlappa bilden */
	height: var(--nellca-pp-hero-height-mobile);
	overflow: hidden;
}

@media (min-width: 768px) {
	.nellca-pp-gallery {
		height: var(--nellca-pp-hero-height-desktop);
	}
}

.nellca-pp-slides {
	width: 100%;
	height: 100%;
	position: relative;
}

.nellca-pp-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.nellca-pp-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.nellca-pp-slide {
	cursor: pointer; /* Signalerar att bilden är klickbar (öppnar lightbox) */
}

.nellca-pp-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;   /* Hela bilden synlig mot vit/grå bakgrund */
	object-position: center;
}

/* Stående bilder (höjd > bredd): zooma in så de fyller hela bildytan */
.nellca-pp-slide--portrait img {
	object-fit: cover;
}

/* ── Pil-knappar (desktop only) ── */

.nellca-pp-arrow {
	/* Dolda på mobil — swipe räcker */
	display: none;
	position: absolute;
	/* Galleriet är nu enbart bildytan, så top:50% centrerar korrekt */
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	/* Semi-transparent bakgrund — samma approach som breadcrumb-overlayns bakgrund,
	   säkerställer läsbarhet mot både ljusa studiobilder och mörka bakgrunder */
	background: rgba(0, 0, 0, 0.42);
	color: #fff;
	cursor: pointer;
	transition: background 0.18s;
}

.nellca-pp-arrow:hover {
	background: rgba(0, 0, 0, 0.68);
}

.nellca-pp-arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.nellca-pp-arrow--prev { left: 16px; }
.nellca-pp-arrow--next { right: 16px; }

@media (min-width: 768px) {
	.nellca-pp-arrow {
		display: flex;
	}
}

/* ── Thumbnail-navigation (ersätter dots) ── */

.nellca-pp-dots {
	/* Flödar under bilden i galleriets flex-kolumn,
	   istället för att överlappa bilden med position:absolute */
	position: static;
	display: flex;
	justify-content: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 10px 0;
	background-color: var(--nellca-pp-hero-bg);
}

.nellca-pp-dot {
	display: block;
	width: 56px;
	height: 56px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.25);
	border: 2px solid transparent;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
	opacity: 0.6;
	transition: opacity 0.2s, border-color 0.2s;
}

.nellca-pp-dot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nellca-pp-dot.is-active {
	opacity: 1;
	border-color: #fff;
}

.nellca-pp-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════
   BREADCRUMB-OVERLAY — lager ovanpå herobilden
   Full bredd så att max-width + margin:auto ger samma
   vänsterjustering som produktnamnet och logotypen.
   Transparent bakgrund, mörk text med svag text-shadow.
   ════════════════════════════════════════════════════════════ */

.nellca-pp-breadcrumb-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 3;
}

.nellca-pp-breadcrumb-overlay .woocommerce-breadcrumb {
	display: block;
	background: transparent;
	/* Speglar __inner-containerns gutter — justerar med produktnamnet */
	max-width: var(--nellca-pp-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--nellca-pp-gutter-mobile);
	padding-right: var(--nellca-pp-gutter-mobile);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	color: #333;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media (max-width: 767px) {
	.nellca-pp-breadcrumb-overlay .woocommerce-breadcrumb {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (min-width: 768px) {
	.nellca-pp-breadcrumb-overlay .woocommerce-breadcrumb {
		padding-left: var(--nellca-pp-gutter);
		padding-right: var(--nellca-pp-gutter);
	}
}

.nellca-pp-breadcrumb-overlay .woocommerce-breadcrumb a {
	color: #333;
	text-decoration: none;
}

.nellca-pp-breadcrumb-overlay .woocommerce-breadcrumb a:hover {
	color: #000;
}

/* ════════════════════════════════════════════════════════════
   PRODUKTHUVUD: namn + artikelnummer
   ════════════════════════════════════════════════════════════ */

.nellca-pp-product-header {
	background: var(--nellca-pp-header-bg);
	padding-top: var(--nellca-pp-header-padding-y);
	padding-bottom: var(--nellca-pp-header-padding-y);
	border-bottom: 1px solid var(--nellca-pp-data-border);
}

.nellca-pp-product-title {
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 2rem);
	line-height: 1.2;
}

.nellca-pp-product-sku {
	display: block;
	color: var(--nellca-pp-sku-color);
	font-size: var(--nellca-pp-sku-size);
}

/* ════════════════════════════════════════════════════════════
   TVÅKOLUMNS-SEKTION
   Mobil: enkelpelare (konfiguratorn ovanför beskrivningen via CSS order)
   Desktop (≥768px): 50/50 flex
   ════════════════════════════════════════════════════════════ */

.nellca-pp-columns {
	display: flex;
	flex-direction: column;
	max-width: var(--nellca-pp-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--nellca-pp-gutter-mobile);
	padding-right: var(--nellca-pp-gutter-mobile);
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

@media (min-width: 768px) {
	.nellca-pp-columns {
		flex-direction: row;
		gap: var(--nellca-pp-col-gap);
		align-items: flex-start;
		padding-left: var(--nellca-pp-gutter);
		padding-right: var(--nellca-pp-gutter);
	}
}

/* Vänster kolumn: beskrivning */
.nellca-pp-col-left {
	flex: 1 1 0;
	min-width: 0;
	/* På mobil: höger kolumn (konfiguratorn) visas FÖRE beskrivningen */
	order: 2;
}

@media (min-width: 768px) {
	.nellca-pp-col-left {
		order: 1;
	}
}

/* Höger kolumn: konfigurator + köp
   WC:s .summary.entry-summary renderas inuti denna wrapper */
.nellca-pp-col-right {
	flex: 1 1 0;
	min-width: 0;
	/* På mobil: höger kolumn visas FÖRE vänster */
	order: 1;
	/* position: relative krävs för att hålla absolut-positionerade barn
	   (t.ex. sticky cart-overlay från Shoptimizer) inom kolumnen */
	position: relative;
}

@media (min-width: 768px) {
	.nellca-pp-col-right {
		order: 2;
		/* Sticky höger kolumn på desktop (konfiguratorn följer med vid scroll) */
		position: sticky;
		top: 80px;
		align-self: flex-start;
	}
}

/* Återställ WC:s .summary.entry-summary inuti höger kolumn */
.nellca-pp-col-right .summary.entry-summary {
	float: none;
	width: 100%;
	clear: none;
	/* Nollställ WC/Shoptimizer-marginal så höger kolumn börjar lika nära linjen som vänster */
	margin-top: 0;
	padding-top: 0;
}

/* Shoptimizer: p.price { float:left; margin:0 0 0.5rem } och
   .woocommerce-product-rating { clear:both } skapar ett gap ovanför form.cart.
   p.price och .woocommerce-variation-price döljs globalt via layout-shared.css.
   form.cart { margin:0.75rem 0 1rem } nollställs så konfiguratorn
   börjar i linje med beskrivningen i vänster kolumn. */
.nellca-pp-col-right .summary.entry-summary .woocommerce-product-rating {
	display: none;
}

.nellca-pp-col-right .summary.entry-summary form.cart {
	margin-top: 0 !important;
}

/* ── B2B Sales Agent: prislåda (nellca-b2b-price-box) ──────────────
   b2b-sales-agents inline CSS sätter upp flex-layout på
   .product-configurator-box .woocommerce-variation-add-to-cart,
   men den klassen finns inte i advanced layout.
   Vi replikerar samma flex-kontext scoped till vår kolumn så att
   pris-boxen, qty-fältet och köpknappen hamnar rätt utan att ändra
   b2b-sales-agents kod.
   ────────────────────────────────────────────────────────────────── */

.nellca-pp-col-right .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 10px !important;
}

/* Konfiguratorn tar alltid full bredd som flex-barn */
#nellca-konfigurator-mount {
	flex: 0 0 100%;
	min-width: 0;
}

/* Admin-komponentlista och positionsmärkning: full radbredd i flex-kontexten.
   Utan detta kan nästa flex-syskon (SKU, qty, etc.) hamna bredvid dem
   istället för under, eftersom de annars bara tar sin naturliga bredd. */
#nellca-admin-breakdown-wrap {
	flex: 0 0 100%;
	min-width: 0;
}

.nellca-position-label-wrap {
	flex: 0 0 100%;
	min-width: 0;
}

/* B2B-prisboxens egna inline CSS sätter order:1 globalt på .nellca-b2b-price-box.
   Det gör att positionsmärkning (order:0 default) alltid hamnar före prisboxen
   visuellt, oavsett DOM-ordning. Nollställer order här så enbart DOM-ordningen
   avgör: B2B renderas på woocommerce_before_add_to_cart_button prio 5 (före
   positionsmärkning prio 100) och ska därmed visas före positionsmärkning. */
.nellca-pp-col-right .nellca-b2b-price-box {
	order: 0 !important;
}

.nellca-pp-col-right .woocommerce-variation-add-to-cart .quantity {
	order: 2;
	flex: 0 0 auto;
	/* margin-right: 34px kompenserar för .quantity-nav som är position:absolute; right:-34px;
	   dvs. knapparna sticker ut 34px till höger utanför .quantity-boxen och krockar annars
	   med köpknappen i flex-kontexten. */
	margin: 0 34px 0 0 !important;
}

.nellca-pp-col-right .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
	order: 3;
	/* flex: 1 1 0 ignorerar Shoptimizers width: calc(100% - 90px) som flex-basis,
	   margin: 0 tar bort Shoptimizers margin-left: 40px (float-era layout) */
	flex: 1 1 0 !important;
	width: auto !important;
	margin: 0 !important;
}

/* Beskrivningstext */
.nellca-pp-description {
	font-size: 1rem;
	line-height: 1.7;
	/* Nollställ eventuell top-marginal så vänster kolumn börjar lika nära linjen som höger */
	margin-top: 0;
}

.nellca-pp-description p:first-child {
	margin-top: 0;
}

.nellca-pp-description p:last-child {
	margin-bottom: 0;
}

/* ════════════════════════════════════════════════════════════
   PRODUKTDATA: tvåkolumns-sektion (specs + filer)
   Mobil: en kolumn. Desktop (≥768px): 60/40 flex.
   ════════════════════════════════════════════════════════════ */

.nellca-pp-product-data {
	background: var(--nellca-pp-data-bg);
	border-top: 1px solid var(--nellca-pp-data-border);
	border-bottom: 1px solid var(--nellca-pp-data-border);
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	overflow-x: hidden;
}

.nellca-pp-product-data__inner {
	max-width: var(--nellca-pp-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--nellca-pp-gutter-mobile);
	padding-right: var(--nellca-pp-gutter-mobile);
}

@media (min-width: 768px) {
	.nellca-pp-product-data__inner {
		padding-left: var(--nellca-pp-gutter);
		padding-right: var(--nellca-pp-gutter);
	}
}

/* Tvåkolumns-wrapper */
.nellca-pp-product-data__cols {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

@media (min-width: 768px) {
	.nellca-pp-product-data__cols {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--nellca-pp-col-gap);
	}
}

/* Specs-kolumn — på mobil: naturlig höjd (flex-basis:0 kollapsar i column-flex på iOS)
   På desktop: 60% via flex-ratio */
.nellca-pp-product-data__specs {
	min-width: 0;
	overflow-x: auto;
}

/* Filer-kolumn */
.nellca-pp-product-data__files {
	min-width: 0;
}

@media (min-width: 768px) {
	.nellca-pp-product-data__specs {
		flex: 3 1 0;
	}
	.nellca-pp-product-data__files {
		flex: 2 1 0;
	}
}

.nellca-pp-product-data__heading {
	margin: 0 0 1.5rem;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── NVA_Frontend::build_specs() HTML-struktur ──────────────────
   nellca-variatons-attr returnerar .nellca-custom-specs med
   .nellca-spec-group och .nellca-spec-table. Vi stilar det här
   istället för via output_scripts() som enbart anropas i spec-fliken.
   ────────────────────────────────────────────────────────────── */

.nellca-pp-product-data .nellca-custom-specs {
	width: 100%;
}

.nellca-pp-product-data .nellca-spec-group {
	margin-bottom: 1.75rem;
}

.nellca-pp-product-data .nellca-spec-group:last-child {
	margin-bottom: 0;
}

/* Grupprubrik: versaler + separator-linje */
.nellca-pp-product-data .nellca-spec-group h4 {
	margin: 0 0 var(--nellca-pp-data-heading-gap);
	padding-bottom: var(--nellca-pp-data-heading-gap);
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #555;
	border-bottom: 2px solid var(--nellca-pp-data-border);
}

/* Specifikationstabell */
.nellca-pp-product-data .nellca-spec-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	display: table !important; /* Override för eventuell nollstä   llning från nellca-variatons-attr */
}

.nellca-pp-product-data .nellca-spec-table tr {
	border-bottom: 1px solid var(--nellca-pp-data-row-border);
}

.nellca-pp-product-data .nellca-spec-table tr:last-child {
	border-bottom: none;
}

.nellca-pp-product-data .nellca-spec-table td {
	padding: 0.55em 0;
	vertical-align: middle;
	line-height: 1.4;
	font-size: 0.9rem;
}

.nellca-pp-product-data .nellca-spec-table td.label {
	width: 45%;
	color: #555;
	padding-right: 1.5em;
}

.nellca-pp-product-data .nellca-spec-table td.value {
	text-align: right;
	color: #222;
	white-space: pre-line;
}

/* ── Fallback-tabell (om NVA_Frontend inte är aktivt) ── */

.nellca-pp-attr-group {
	margin-bottom: 1.5rem;
}

.nellca-pp-attr-group:last-child {
	margin-bottom: 0;
}

.nellca-pp-attr-group__title {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #555;
	margin: 0 0 var(--nellca-pp-data-heading-gap);
	padding-bottom: var(--nellca-pp-data-heading-gap);
	border-bottom: 2px solid var(--nellca-pp-data-border);
}

.nellca-pp-attr-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.nellca-pp-attr-row {
	border-bottom: 1px solid var(--nellca-pp-data-row-border);
}

.nellca-pp-attr-row:last-child {
	border-bottom: none;
}

.nellca-pp-attr-label,
.nellca-pp-attr-value {
	padding: 0.55em 0;
	vertical-align: middle;
	line-height: 1.4;
}

.nellca-pp-attr-label {
	color: #555;
	padding-right: 1.5em;
	white-space: nowrap;
}

.nellca-pp-attr-value {
	text-align: right;
	color: #222;
}

/* ════════════════════════════════════════════════════════════
   PDF-LÄNKAR: Filer-kolumnen + konfiguratorrutan
   ════════════════════════════════════════════════════════════ */

/* Lista med filer i produktdata-sektionen */
.nellca-pp-file-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Textlänk med ikon */
.nellca-pp-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: #333;
	text-decoration: none;
	line-height: 1.3;
}

.nellca-pp-pdf-link:hover {
	color: #000;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.nellca-pp-pdf-icon {
	flex-shrink: 0;
	opacity: 0.7;
}

.nellca-pp-pdf-link:hover .nellca-pp-pdf-icon {
	opacity: 1;
}

/* Länk i konfiguratorrutan — lite avstånd uppåt mot köpknappen */
.nellca-pp-pdf-link-wrap--configurator {
	margin-top: 0.75rem;
}

/* ════════════════════════════════════════════════════════════
   MILJÖBILDER (nellca-references)
   nellca-references renderar .nellca-env-images med egen CSS.
   Nedan är kompletterande anpassningar för advanced layout.
   ════════════════════════════════════════════════════════════ */

.nellca-pp-layout-advanced .nellca-env-images {
	max-width: var(--nellca-pp-max-width);
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	padding-top: 3rem;
	padding-bottom: 3rem;
	padding-left: var(--nellca-pp-gutter-mobile);
	padding-right: var(--nellca-pp-gutter-mobile);
}

@media (min-width: 768px) {
	.nellca-pp-layout-advanced .nellca-env-images {
		padding-left: var(--nellca-pp-gutter);
		padding-right: var(--nellca-pp-gutter);
	}
}

/* ════════════════════════════════════════════════════════════
   RELATED PRODUCTS (Shoptimizer renderar dessa, vi justerar padding)
   ════════════════════════════════════════════════════════════ */

.nellca-pp-layout-advanced .related-content-wrapper {
	max-width: var(--nellca-pp-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--nellca-pp-gutter-mobile);
	padding-right: var(--nellca-pp-gutter-mobile);
}

@media (min-width: 768px) {
	.nellca-pp-layout-advanced .related-content-wrapper {
		padding-left: var(--nellca-pp-gutter);
		padding-right: var(--nellca-pp-gutter);
	}
}