/**
 * Elucio Theme — Produktseiten-Stylesheet
 *
 * Produktdetailseite nach Figma „Desktop – Detailseite“ (70:365)
 * und „Mobile – Detailseite“ (70:597).
 */

:root {
	--pdp-gold:      #785A1A;
	--pdp-title:     #676767;
	--pdp-tab-line:  rgba(103, 103, 103, 0.2);
	/* 12px bei 390px Breite → 60px bei 1440px Breite (Figma-Raster) */
	--pdp-pad:       clamp(0.75rem, calc(4.5714vw - 5.83px), 3.75rem);
}

/* ── Shell ──────────────────────────────────────────────────────────── */
.elucio-pdp {
	background-color: var(--color-cream);
}

.elucio-pdp__stage-inner,
.elucio-pdp__details-inner,
.elucio-pdp__service-inner {
	max-width:      var(--section-max);
	margin-inline:  auto;
	padding-inline: var(--pdp-pad);
}

/* ── Zurück-Link ────────────────────────────────────────────────────── */
.elucio-pdp__back {
	display:        inline-flex;
	align-items:    center;
	gap:            0.5rem;
	margin-top:     74px;
	font-family:    var(--font-body);
	font-size:      0.875rem;
	font-weight:    500;
	letter-spacing: 1.5px;
	line-height:    14px;
	color:          var(--color-dark);
	text-decoration: none;
	transition:     opacity 0.2s ease;
}

.elucio-pdp__back:hover {
	opacity: 0.6;
}

/* ── Bühne: Summary + Galerie ───────────────────────────────────────── */
.elucio-pdp__layout {
	display:         flex;
	justify-content: space-between;
	align-items:     flex-start;
	gap:             clamp(2rem, 5vw, 4.5rem);
	margin-top:      40px;
	padding-bottom:  clamp(4rem, 15.5vw, 15.5rem);
}

.elucio-pdp__summary {
	flex:        0 0 312px;
	max-width:   312px;
	padding-top: 35px;
}

.elucio-pdp__topline {
	margin:         0;
	padding-left:   4px;
	font-family:    var(--font-body);
	font-size:      0.875rem;
	font-weight:    600;
	line-height:    16px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color:          var(--pdp-gold);
}

.elucio-pdp .elucio-pdp__title.product_title {
	margin:      13px 0 0 !important;
	font-family: var(--font-headline) !important;
	font-size:   3rem !important;
	font-weight: 400 !important;
	line-height: 62.29px !important;
	color:       var(--pdp-title) !important;
}

.elucio-pdp__rule {
	display:          block;
	width:            20px;
	height:           1px;
	margin-top:       19px;
	background-color: var(--pdp-gold);
}

.elucio-pdp .elucio-pdp__price.price {
	margin:         71px 0 0 !important;
	font-family:    var(--font-headline) !important;
	font-size:      2rem !important;
	font-weight:    400 !important;
	line-height:    42px !important;
	letter-spacing: 0 !important;
	color:          var(--pdp-title) !important;
}

/* ── CTAs ───────────────────────────────────────────────────────────── */
.elucio-pdp__actions {
	display:        flex;
	flex-direction: column;
	gap:            19px;
	margin-top:     29px;
}

.elucio-cta {
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          50px;
	width:           100%;
	border:          1px solid rgba(219, 209, 169, 0.3);
	font-family:     var(--font-body);
	font-size:       0.875rem;
	font-weight:     400;
	letter-spacing:  1.4px;
	text-transform:  uppercase;
	text-decoration: none;
	transition:      background-color 0.25s ease, color 0.25s ease;
}

.elucio-cta--locked {
	background-color: var(--color-dark);
	color:            var(--color-white);
}

.elucio-cta--locked:hover {
	background-color: rgba(39, 39, 39, 0.8);
	color:            var(--color-white);
}

.elucio-cta--waitlist {
	background-color: rgba(219, 209, 169, 0.3);
	color:            #000;
}

.elucio-cta--waitlist:hover {
	background-color: rgba(219, 209, 169, 0.55);
}

.elucio-cta__icon {
	position:  absolute;
	right:     16px;
	top:       50%;
	transform: translateY(-50%);
}

/* Add-to-Cart, sobald der Shop geöffnet ist */
.elucio-pdp__actions form.cart {
	display:        flex;
	flex-direction: column;
	gap:            19px;
	margin:         0;
}

.woocommerce .elucio-pdp__actions .single_add_to_cart_button,
.woocommerce .elucio-pdp__actions button.button {
	height:           50px !important;
	width:            100% !important;
	justify-content:  center !important;
	background-color: var(--color-dark) !important;
	color:            var(--color-white) !important;
	font-family:      var(--font-body) !important;
	font-size:        0.875rem !important;
	font-weight:      400 !important;
	letter-spacing:   1.4px !important;
	text-transform:   uppercase !important;
	border:           1px solid rgba(219, 209, 169, 0.3) !important;
	border-radius:    0 !important;
}

.elucio-pdp__actions form.cart .quantity input.qty {
	width:         72px !important;
	height:        50px !important;
	text-align:    center;
	border:        1px solid var(--color-border) !important;
	background:    transparent !important;
	border-radius: 0 !important;
	font-family:   var(--font-body);
}

/* ── Farbzeile ──────────────────────────────────────────────────────── */
.elucio-pdp__colors {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      80px;
	height:          24px;
}

.elucio-pdp__colors-label {
	font-family:    var(--font-body);
	font-size:      0.875rem;
	font-weight:    500;
	letter-spacing: 0.56px;
	color:          var(--color-dark);
}

.elucio-pdp__colors-value {
	display:     flex;
	align-items: center;
	gap:         19px;
}

.elucio-pdp__colors-name {
	font-family:    var(--font-body);
	font-size:      0.875rem;
	font-weight:    300;
	letter-spacing: 0.56px;
	color:          var(--color-dark);
}

.elucio-pdp__swatch {
	display:       block;
	width:         12px;
	height:        12px;
	border-radius: 50%;
}

.elucio-pdp__colors-chevron {
	display:             block;
	width:               8px;
	height:              18px;
	background-image:    url('../images/pdp-chevron.svg');
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     18px 8px;
	transform:           rotate(90deg);
}

/* ── Galerie ────────────────────────────────────────────────────────── */
.elucio-pdp__gallery {
	position: relative;
	flex:     0 1 648px;
	width:    100%;
	max-width: 648px;
}

.elucio-pdp__viewport {
	position:       relative;
	aspect-ratio:   1 / 1;
	overflow:       hidden;
}

.elucio-pdp__slides {
	list-style: none;
	margin:     0;
	padding:    0;
	height:     100%;
}

.elucio-pdp__slide {
	position: absolute;
	inset:    0;
	opacity:  0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.elucio-pdp__slide.is-active {
	opacity:        1;
	pointer-events: auto;
}

.elucio-pdp__slide img {
	width:           100%;
	height:          100%;
	object-fit:      contain;
	object-position: center;
	display:         block;
}

.elucio-pdp__badge-360 {
	position:            absolute;
	top:                 0;
	right:               0;
	width:               61px;
	height:              40px;
	z-index:             2;
	background-image:    url('../images/pdp-badge-360.svg');
	background-repeat:   no-repeat;
	background-size:     contain;
	background-position: center;
}

.elucio-pdp__arrow {
	position:            absolute;
	top:                 324px;
	transform:           translateY(-50%);
	width:               14px;
	height:              30px;
	padding:             0;
	border:              0;
	background-color:    transparent;
	background-image:    url('../images/pdp-slider-arrow.svg');
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     contain;
	cursor:              pointer;
	transition:          opacity 0.2s ease;
}

.elucio-pdp__arrow:hover {
	opacity: 0.6;
}

.elucio-pdp__arrow--prev {
	left: -56px;
}

.elucio-pdp__arrow--next {
	right:     -56px;
	transform: translateY(-50%) rotate(180deg);
}

.elucio-pdp__indicators {
	display:         flex;
	justify-content: center;
	gap:             12px;
	list-style:      none;
	margin:          56px auto 0;
	padding:         0;
	max-width:       424px;
}

.elucio-pdp__indicators li {
	flex: 1 1 0;
}

.elucio-pdp__indicator {
	display:          block;
	width:            100%;
	height:           2px;
	padding:          0;
	border:           0;
	background-color: rgba(103, 103, 103, 0.2);
	cursor:           pointer;
	transition:       background-color 0.25s ease;
}

.elucio-pdp__indicator.is-active {
	background-color: var(--pdp-gold);
}

/* ── Tabs / Akkordeon ───────────────────────────────────────────────── */
.elucio-pdp__details-inner {
	padding-top:    24px;
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.elucio-pdp__tabs {
	display: grid;
}

.elucio-pdp__tab {
	margin: 0;
}

.elucio-pdp__tab-btn {
	display:          flex;
	align-items:      center;
	width:            100%;
	padding:          0;
	background-color: transparent;
	border:           0;
	border-bottom:    1px solid transparent;
	font-family:      var(--font-body);
	font-size:        0.75rem;
	font-weight:      600;
	letter-spacing:   1.8px;
	line-height:      16.8px;
	text-transform:   uppercase;
	color:            var(--color-dark);
	cursor:           pointer;
	transition:       color 0.2s ease, border-color 0.2s ease;
}

.elucio-pdp__panel {
	display: block;
}

.elucio-pdp__panel[hidden] {
	display: none;
}

.elucio-pdp__headline {
	margin:      0;
	font-family: var(--font-headline);
	font-size:   2rem;
	font-weight: 400;
	line-height: 40px;
	color:       var(--color-dark);
}

.elucio-pdp__copy {
	font-family:    var(--font-headline);
	font-size:      1rem;
	font-weight:    400;
	line-height:    24px;
	letter-spacing: 0.48px;
	color:          var(--color-dark);
}

.elucio-pdp__copy p {
	margin: 0 0 24px;
}

.elucio-pdp__copy p:last-child {
	margin-bottom: 0;
}

/* Grösse & Passform */
.elucio-pdp__sizing-title {
	margin:         0;
	font-family:    var(--font-body);
	font-size:      0.75rem;
	font-weight:    600;
	letter-spacing: 1.8px;
	line-height:    18px;
	text-transform: uppercase;
	color:          var(--color-dark);
}

.elucio-pdp__sizing-list {
	margin:         48px 0 0;
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.elucio-pdp__sizing-row {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	height:          26px;
}

.elucio-pdp__sizing-row dt,
.elucio-pdp__sizing-row dd {
	margin:      0;
	font-family: var(--font-body);
	font-size:   1rem;
	font-weight: 400;
	line-height: 24px;
	color:       var(--color-dark);
}

.elucio-pdp__size-guide {
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             16px;
	height:          64px;
	margin-top:      43px;
	border:          1px solid var(--color-sand);
	font-family:     var(--font-body);
	font-size:       0.75rem;
	font-weight:     600;
	letter-spacing:  1.8px;
	line-height:     18px;
	text-transform:  uppercase;
	color:           #1B1C1C;
	text-decoration: none;
	transition:      background-color 0.2s ease;
}

.elucio-pdp__size-guide:hover {
	background-color: rgba(222, 199, 171, 0.18);
}

/* ── Service-Leiste ─────────────────────────────────────────────────── */
.elucio-pdp__service-inner {
	border-top:     1px solid var(--color-sand);
	border-bottom:  1px solid var(--color-sand);
	padding-block:  49px;
}

.elucio-pdp__service-title {
	margin:         0;
	font-family:    var(--font-body);
	font-size:      0.75rem;
	font-weight:    600;
	letter-spacing: 1.8px;
	line-height:    16.8px;
	text-transform: uppercase;
	color:          var(--color-dark);
}

.elucio-pdp__service-copy {
	margin:      8px 0 0;
	font-family: var(--font-headline);
	font-size:   0.875rem;
	font-weight: 400;
	line-height: 22px;
	color:       var(--color-dark);
}

.elucio-pdp__service-icon {
	display: block;
	height:  32px;
	width:   auto;
}

/* ── Desktop-Layout (≥ 900px) ───────────────────────────────────────── */
@media (min-width: 900px) {

	.elucio-pdp__tabs {
		grid-template-columns: repeat(3, max-content) 1fr;
		column-gap:            32px;
		row-gap:               64px;
	}

	/* Reiter in Zeile 1, Panels in Zeile 2 */
	.elucio-pdp__tab:nth-child(1) { grid-area: 1 / 1; }
	.elucio-pdp__tab:nth-child(3) { grid-area: 1 / 2; }
	.elucio-pdp__tab:nth-child(5) { grid-area: 1 / 3; }

	.elucio-pdp__panel {
		grid-row:    2;
		grid-column: 1 / -1;
	}

	/* Durchgehende Trennlinie unter der Reiterzeile */
	.elucio-pdp__tabs::after {
		content:          '';
		grid-area:        1 / 1 / 2 / -1;
		align-self:       end;
		height:           1px;
		background-color: var(--pdp-tab-line);
	}

	.elucio-pdp__tab-btn {
		height:          36px;
		justify-content: center;
		align-items:     flex-start;
	}

	.elucio-pdp__tab-btn.is-active {
		border-bottom-color: #000;
		color:               #000;
	}

	.elucio-pdp__panel.is-active {
		display:               grid;
		grid-template-columns: minmax(0, 838px) minmax(0, 397px);
		justify-content:       space-between;
	}

	.elucio-pdp__copy {
		margin-top: 14px;
	}

	.elucio-pdp__sizing {
		border-left:  1px solid var(--color-sand);
		padding-left: 84px;
		padding-top:  29px;
	}

	.elucio-pdp__service-inner {
		display:               grid;
		grid-template-columns: repeat(4, 1fr);
		gap:                   24px;
	}

	.elucio-pdp__service-icon {
		margin-bottom: 16px;
	}
}

/* ── Mobil / Tablet (≤ 899px) ───────────────────────────────────────── */
@media (max-width: 899px) {

	.elucio-pdp__back {
		display: none;
	}

	.elucio-pdp__layout {
		flex-direction: column;
		gap:            0;
		margin-top:     24px;
		padding-bottom: 48px;
	}

	.elucio-pdp__gallery {
		order:         -1;
		flex:          none;
		max-width:     none;
		width:         100vw;
		margin-inline: calc(-1 * var(--pdp-pad));
	}

	.elucio-pdp__badge-360 {
		right:  40px;
		width:  39px;
		height: 26px;
	}

	.elucio-pdp__arrow {
		top:    50%;
		width:  11px;
		height: 24px;
	}

	.elucio-pdp__arrow--prev { left: 12px; }
	.elucio-pdp__arrow--next { right: 12px; }

	.elucio-pdp__indicators {
		max-width:  270px;
		margin-top: 36px;
	}

	.elucio-pdp__summary {
		flex:        none;
		max-width:   none;
		width:       100%;
		padding-top: 68px;
	}

	.elucio-pdp__topline {
		font-size: 0.75rem;
	}

	.elucio-pdp .elucio-pdp__title.product_title {
		font-size: 2.625rem !important;
	}

	.elucio-pdp .elucio-pdp__price.price {
		margin-top: 59px !important;
	}

	.elucio-pdp__actions {
		margin-top: 40px;
	}

	.elucio-pdp__colors {
		margin-top: 48px;
	}

	.elucio-pdp__colors-label,
	.elucio-pdp__colors-name {
		font-size:      1rem;
		letter-spacing: 0.64px;
	}

	.elucio-pdp__colors-value {
		gap: 16px;
	}

	/* Akkordeon */
	.elucio-pdp__details-inner {
		padding-top: 0;
	}

	.elucio-pdp__tab-btn {
		height:          42px;
		justify-content: space-between;
		border-bottom:   1px solid var(--pdp-tab-line);
		font-size:       1rem;
		line-height:     32px;
	}

	.elucio-pdp__tab-btn::after {
		content:             '';
		width:               18px;
		height:              8px;
		background-image:    url('../images/pdp-chevron.svg');
		background-repeat:   no-repeat;
		background-position: center;
		background-size:     18px 8px;
		transform:           rotate(180deg);
		transition:          transform 0.25s ease;
	}

	.elucio-pdp__tab-btn.is-active::after {
		transform: rotate(0deg);
	}

	.elucio-pdp__panel.is-active {
		padding-block: 30px;
	}

	.elucio-pdp__copy {
		margin-top: 14px;
	}

	.elucio-pdp__sizing {
		margin-top:    30px;
		padding-top:   48px;
		border-top:    1px solid var(--color-sand);
	}

	.elucio-pdp__size-guide {
		width: 100%;
	}

	/* Service-Leiste: Icon links, Text rechts */
	.elucio-pdp__service-inner {
		display:        flex;
		flex-direction: column;
		gap:            70px;
		padding-block:  49px;
	}

	.elucio-pdp__service-item {
		position:    relative;
		display:     grid;
		grid-template-columns: 56px 1fr;
		gap:         34px;
		align-items: center;
		padding-left: 6px;
	}

	.elucio-pdp__service-item + .elucio-pdp__service-item::before {
		content:          '';
		position:         absolute;
		top:              -35px;
		left:             96px;
		width:            112px;
		height:           1px;
		background-color: var(--color-sand);
	}

	.elucio-pdp__service-icon {
		height:      auto;
		max-height:  45px;
		width:       100%;
		max-width:   56px;
		object-fit:  contain;
	}
}

/* ── WooCommerce-Hinweise ───────────────────────────────────────────── */
.woocommerce-notices-wrapper {
	max-width:      var(--section-max);
	margin-inline:  auto;
	padding-inline: var(--pdp-pad);
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	font-family:   var(--font-body);
	font-size:     0.875rem;
	border-top:    3px solid var(--color-sand) !important;
	border-radius: 0;
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--color-sand) !important;
}

/* ── Related / Upsells ──────────────────────────────────────────────── */
.elucio-pdp .related,
.elucio-pdp .up-sells {
	max-width:      var(--section-max);
	margin-inline:  auto;
	padding-inline: var(--pdp-pad);
	padding-block:  clamp(2rem, 3.5vw, 3.5rem) clamp(3rem, 5vw, 5rem);
}

.elucio-pdp .related > h2,
.elucio-pdp .up-sells > h2 {
	display:        flex;
	align-items:    center;
	gap:            1rem;
	margin-bottom:  2rem;
	font-family:    var(--font-body);
	font-size:      0.75rem;
	font-weight:    600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color:          var(--color-dark);
}

.elucio-pdp .related > h2::after,
.elucio-pdp .up-sells > h2::after {
	content:          '';
	display:          block;
	flex:             0 0 80px;
	height:           1px;
	background-color: var(--color-sand);
}

.elucio-pdp .related ul.products,
.elucio-pdp .up-sells ul.products {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   1.5rem;
	list-style:            none;
	padding:               0;
	margin:                0;
}

.elucio-pdp .related ul.products li.product a img,
.elucio-pdp .up-sells ul.products li.product a img {
	width:      100%;
	height:     240px;
	object-fit: cover;
	display:    block;
}

.elucio-pdp .related ul.products li.product .woocommerce-loop-product__title,
.elucio-pdp .up-sells ul.products li.product .woocommerce-loop-product__title {
	margin:      0.875rem 0 0.375rem;
	padding:     0;
	font-family: var(--font-headline);
	font-size:   1.0625rem;
	font-weight: 400;
	color:       var(--color-dark);
}

.woocommerce .elucio-pdp .related ul.products li.product .button,
.woocommerce .elucio-pdp .up-sells ul.products li.product .button {
	display: none !important;
}

@media (max-width: 899px) {
	.elucio-pdp .related ul.products,
	.elucio-pdp .up-sells ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.elucio-pdp .related ul.products li.product a img,
	.elucio-pdp .up-sells ul.products li.product a img {
		height: 180px;
	}
}