/* Webdeals Hub – Produkt-Konfigurator (einfache & Varianten-Produkte).
   Baut auf bundleconfig.css auf (Kacheln, Zusammenfassung, Variablen). */

/* Kacheln ersetzen die Auswahlliste – das Formular bleibt im Hintergrund. */
form.variations_form:has(.whub-pc-root.has-tiles) table.variations,
form.variations_form:has(.whub-pc-root.has-tiles) .reset_variations {
	display: none !important;
}
/* Preis der gewählten Variante steht in „Deine Auswahl." – nicht doppelt. */
form.variations_form:has(.whub-pc-summary) .woocommerce-variation-price {
	display: none !important;
}

/* Fester Abstand zur Kurzbeschreibung darüber – auf PC, Tablet und Handy. */
.whub-pc-root { margin-top: 36px; margin-bottom: 24px; }
@media (max-width: 549px) { .whub-pc-root { margin-top: 30px; } }
.whub-pc-root .whub-bc-step + .whub-bc-step { margin-top: 30px; }

.whub-pc-tile-r,
.whub-pc-tile-u {
	display: block;
	font-size: 0.82em;
	opacity: 0.75;
	font-weight: 400;
}
.whub-pc-tile-r s { opacity: 1; }

/* Kurzfakten: gemeinsam mit dem Bundle-Konfigurator in bundleconfig.css. */

.whub-pc-summary { margin: 0 0 18px; }
.whub-pc-sum-hint {
	margin: 8px 0 0;
	font-size: 0.85em;
	opacity: 0.75;
}

/* Staffelpreise („Mehr kaufen, mehr sparen.") – aktuelle Menge hervorgehoben. */
.whub-pc-tgrid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	padding: 14px;
	border-radius: var(--whub-bc-radius);
	background: var(--whub-bc-fill);
}
.whub-pc-tier {
	flex: 1 1 110px;
	min-width: 0;
	padding: 9px 6px;
	text-align: center;
	border: 1px solid transparent;
	border-radius: calc(var(--whub-bc-radius) * .66);
	background: var(--whub-bc-fill-strong);
}
.whub-pc-tier.is-on {
	border-color: var(--whub-bc-accent);
	background: color-mix(in srgb, var(--whub-bc-accent) 16%, transparent);
}
.whub-pc-tq { display: block; margin-bottom: 2px; font-size: 0.8em; opacity: 0.85; white-space: nowrap; }
.whub-pc-tp { display: block; font-weight: 700; white-space: nowrap; }
.whub-pc-tnote { margin: 8px 0 0; font-size: 0.82em; opacity: 0.7; }

/* Ampelpunkt, „inkl. MwSt."/netto, Ausblenden oben und Preisgröße: gemeinsam mit dem Bundle-Konfigurator in bundleconfig.css. */

/* Mengenbalken statt Foto (alle Varianten mit demselben Bild, Werte sind
   Mengen): Länge im Verhältnis, bei großen Spannen logarithmisch. Rechts
   Platz für den Haken. */
.whub-pc-bar {
	position: relative;
	display: block;
	width: calc(100% - 30px);
	height: 10px;
	margin: 6px 0 12px;
	border-radius: 5px;
	background: var(--whub-bc-line);
	overflow: hidden;
}
.whub-pc-bar-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	border-radius: 5px;
	background: currentColor;
	opacity: 0.55;
	transition: background-color 0.15s, opacity 0.15s;
}
.whub-bc-tile.is-on .whub-pc-bar-fill {
	background: var(--whub-bc-accent);
	opacity: 1;
}

/* Mehrere Merkmale: weitere Merkmale als Knöpfe; Kombination, die es zur
   übrigen Wahl nicht (lagernd) gibt, grau – Klick setzt die übrige Wahl zurück. */
.whub-pc-more .whub-bc-pills { margin-top: 14px; }
.whub-pc-more .whub-pc-dd { margin-top: 14px; }
/* Auswahl zu Auswahl halb so viel Abstand wie sonst zwischen den Blöcken:
   Wurzelblock-Abstand 40 px (Handy 32 px) – 5 px (–1 px) = 35 px (31 px)
   statt 70 px (62 px). */
.whub-pc-root .whub-pc-choose + .whub-pc-choose { margin-top: -5px; }
@media (max-width: 549px) {
	.whub-pc-root .whub-pc-choose + .whub-pc-choose { margin-top: -1px; }
}
.whub-pc-root .whub-bc-tile.is-na:not(.is-on),
.whub-pc-root .whub-bc-pill.is-na:not(.is-on) {
	opacity: 0.45;
}

/* Knöpfe der weiteren Merkmale: groß wie die Kacheln (Entwurf), Text fett. */
.whub-pc-more .whub-bc-pill,
.whub-pc-more .whub-bc-pill.is-on {
	min-height: 52px;
	padding: 12px 28px;
	border-width: 2px;
	border-radius: var(--whub-bc-radius);
	font-size: 1.05em;
	font-weight: 700;
}
.whub-pc-more .whub-bc-pill.is-on { border-color: var(--whub-bc-accent); }
@media (max-width: 549px) {
	.whub-pc-more .whub-bc-pill,
	.whub-pc-more .whub-bc-pill.is-on { flex: 1 1 auto; padding: 12px 18px; }
}
/* „Bitte wähle hier noch aus." als Hinweis in der Akzentfarbe (wie Haken
   und Rahmen der Auswahl); rot erst beim Kaufen ohne Auswahl. Theme färbt
   Absätze in dunklen Spalten selbst – daher !important. */
.whub-pc-root .whub-pc-next {
	margin: 10px 0 0;
	font-size: 0.92em;
	font-weight: 600;
	color: var(--whub-bc-accent) !important;
}
.whub-pc-next[hidden] { display: none; }