/* Clubstylez Produktseite – Basis: abschlusspullis.shop (Live-Preis, Trust-Box, Plus, Slider, Warenkorb kompakt)
 * Farben kommen je Produktgruppe aus WooCommerce → Produktseite (CSS-Variablen auf body.csp-product). */

body.csp-product {
	--csp-accent: #c8102e;
	--csp-accent-text: #ffffff;
	--csp-head-font: inherit;
	--csp-dark: #111111;
}

/* ---------- Preis + Hinweis + MwSt. in einer Zeile ---------- */
.csp-product .summary p.price .csp-hint { display: inline; font-size: 13px; font-weight: 600; color: #555; line-height: 1.4; }
.csp-product .summary > p.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 14px 14px 14px 0; vertical-align: baseline; }
.csp-product .summary > .wc-gzd-single { display: inline-block; vertical-align: baseline; padding: 0; }
.csp-product .summary > .wc-gzd-single .legal-price-info,
.csp-product .summary > .wc-gzd-single p.wc-gzd-additional-info { margin: 0; }
.csp-product .summary > .wc-gzd-single .shipping-costs-info { display: inline; padding: 0; margin: 0; }
.csp-product .owp-floating-bar p.price .csp-hint { display: none; }
@media (max-width: 600px) {
	.csp-product .summary > p.price .csp-hint { flex-basis: 100%; }
	.csp-product .summary > p.price { margin-bottom: 4px; }
}

/* ---------- Hinweise unter dem Preis ---------- */
.csp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px !important; padding: 0 !important; list-style: none !important; clear: both; }
.csp-chips .csp-chip { margin: 0 !important; padding: 6px 12px; list-style: none; border-radius: 999px; background: #f4f4f4; color: #222; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.csp-chips .csp-chip::before { content: "●"; margin-right: 6px; color: var(--csp-accent); }
.csp-group-ringe .csp-chips .csp-chip::before { color: #8a6a10; }

/* ---------- Akkordeon-Köpfe (Gravity Forms Collapsible Sections) ---------- */
.csp-product .collapsible-sections-field .csp-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin-top: 4px; font-size: 13px; font-weight: 600; color: #555; }
.csp-pill { background: var(--csp-accent); color: var(--csp-accent-text); font-weight: 800; font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.csp-pill-zero { background: #eee; color: #444; }
.csp-product .gform_wrapper .gfield.collapsible-sections-field.csp-head { --cs-padding-h: 20px; --cs-icon-size: 16px; position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 64px 12px 16px !important; text-align: left !important; }
/* Pfeil rechtsbündig in einem hellen Kreis (wie abschlusspullis.shop) */
.csp-product .gform_wrapper .gfield.collapsible-sections-field.csp-head::before { content: ""; position: absolute; right: 10px; top: 50%; left: auto; width: 36px; height: 36px; margin: 0; transform: translateY(-50%); border-radius: 50%; background: #eef0f2; pointer-events: none; }
.csp-product .gform_wrapper .gfield.collapsible-sections-field.csp-head::after { right: 20px !important; width: 16px; height: 16px; }
/* Ältere Collapsible-Sections-Version: Pfeil hängt am Titel – an den Kopf binden, damit er im Kreis sitzt */
.csp-product .gform_wrapper .csp-head h3.gsection_title { position: static !important; }
.csp-product .gform_wrapper .csp-head h3.gsection_title::after { right: 20px !important; left: auto !important; top: 50% !important; width: 16px !important; height: 12px !important; margin: 0 !important; transform: translateY(-50%) !important; background-color: #111 !important; }
.csp-head .csp-ico { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 10px; background: var(--csp-accent); color: var(--csp-accent-text); display: flex; align-items: center; justify-content: center; }
.csp-head .csp-ico svg { width: 22px; height: 22px; display: block; }
.csp-product .gform_wrapper .csp-head h3.gsection_title { grid-column: 2; text-align: left !important; padding: 0 !important; margin: 0; align-self: end; font-family: var(--csp-head-font); text-transform: uppercase; }
.csp-product .gform_wrapper .csp-head .csp-sum { grid-column: 2; justify-content: flex-start; margin-top: 2px; align-self: start; }

/* ---------- OceanWP-Farben an die Gruppe anpassen ---------- */
.csp-product .woocommerce span.onsale, .csp-product span.onsale { background-color: var(--csp-accent) !important; color: var(--csp-accent-text) !important; }
.csp-product .summary .price, .csp-product .summary .price ins, .csp-product .summary .price .amount { color: var(--csp-dark) !important; }
.csp-product .summary .price del, .csp-product .summary .price del .amount { color: #999 !important; }
.csp-product .summary .single_add_to_cart_button { background-color: var(--csp-accent) !important; color: var(--csp-accent-text) !important; }
/* ---------- Mengenfeld raus (Menge kommt aus der Matrix), großer Warenkorb-Button ---------- */
body.csp-has-matrix .summary form.cart .quantity,
body.csp-has-matrix .owp-floating-bar form.cart .quantity { display: none !important; }
.csp-product .summary form.cart { display: block; }
.csp-product .summary form.cart .single_add_to_cart_button { display: flex !important; align-items: center; justify-content: center; gap: 10px; float: none !important; width: 100% !important; min-height: 58px; margin: 18px 0 0 !important; padding: 0 24px !important; border: 0 !important; border-radius: 10px !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: .04em; line-height: 1.2 !important; box-shadow: 0 6px 16px rgba(0,0,0,.14); transition: filter .15s, transform .15s; }
.csp-product .summary form.cart .single_add_to_cart_button::before { content: ""; width: 22px; height: 22px; flex: 0 0 22px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 13H5L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l1 13H5L6 7z'/%3E%3Cpath d='M9 7a3 3 0 0 1 6 0'/%3E%3C/svg%3E") center / contain no-repeat; }
.csp-product .summary form.cart .single_add_to_cart_button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---------- Größen-/Farbmatrix ---------- */
.csp-product .gfield--type-color_size_matrix > .gfield_label { display: none !important; }
.csp-product .gfa_matrix_table { width: 100%; margin: 4px 0 0; border: 0 !important; border-collapse: separate !important; border-spacing: 6px 6px; background: none; }
.csp-product .gfa_matrix_table th, .csp-product .gfa_matrix_table td { padding: 0 !important; border: 0 !important; background: none !important; vertical-align: middle; }
.csp-product .gfa_matrix_table.csp-mx-fixed { table-layout: fixed; }
.csp-product .csp-mx col.csp-mx-col-swatch { width: var(--csp-mx-size, 46px); }
.csp-product .csp-mx col.csp-mx-col-name { width: 0; }
.csp-product .csp-mx th.csp-mx-corner { font-size: 0 !important; line-height: 0; color: transparent; overflow: visible; text-align: left; }
.csp-product .csp-mx th.csp-mx-size { padding: 10px 0 !important; border-radius: 6px; background: #f3f3f3 !important; color: #111; font-family: var(--csp-head-font); font-size: 15px; font-weight: 400; line-height: 1.2; text-align: center; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.csp-product .gfa_matrix_table input.gfa_matrix_input { display: block; width: 100% !important; max-width: none !important; height: var(--csp-mx-size, 46px); min-height: 0; margin: 0; padding: 0 !important; box-sizing: border-box; border: 1px solid #d6d6d6 !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; color: #111; font-size: 16px; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; transition: border-color .15s, box-shadow .15s, background .15s; }
.csp-product .gfa_matrix_table input.gfa_matrix_input::-webkit-outer-spin-button,
.csp-product .gfa_matrix_table input.gfa_matrix_input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.csp-product .gfa_matrix_table input.gfa_matrix_input:hover { border-color: #9a9a9a !important; }
.csp-product .gfa_matrix_table input.gfa_matrix_input:focus { outline: none; border-color: var(--csp-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--csp-accent) 22%, transparent) !important; }
.csp-product .gfa_matrix_input.csp-filled { border: 2px solid var(--csp-accent) !important; background: color-mix(in srgb, var(--csp-accent) 7%, #fff) !important; font-weight: 800; }
.csp-product .csp-mx td.csp-mx-cell { position: relative; text-align: left; }
.csp-product .csp-mx-swatch { display: block; width: var(--csp-mx-size, 46px); height: var(--csp-mx-size, 46px); min-height: 0; margin: 0; padding: 0 !important; border: 1px solid rgba(0,0,0,.18) !important; border-radius: 6px !important; background: #f4f4f4 !important; box-shadow: none !important; overflow: hidden; cursor: zoom-in; transition: outline-color .15s; }
.csp-product .csp-mx-swatch img { display: block; width: 100% !important; height: 100% !important; max-width: none; margin: 0; object-fit: cover; }
.csp-product .csp-mx-swatch:hover, .csp-product .csp-mx-swatch:focus-visible { border-color: #111 !important; outline: 2px solid var(--csp-accent); outline-offset: 1px; }
.csp-mx-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.csp-product .csp-mx-ruler { display: flex; align-items: center; justify-content: center; width: var(--csp-mx-size, 46px); height: 40px; min-height: 0; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: var(--csp-accent) !important; color: var(--csp-accent-text) !important; box-shadow: none !important; line-height: 1; cursor: pointer; }
.csp-product .csp-mx-ruler:hover, .csp-product .csp-mx-ruler:focus-visible { background: #111 !important; color: #fff !important; }
.csp-product .csp-mx-ruler svg { display: block; }
@media (max-width: 639px) {
	.csp-product .gfa_matrix_table { border-spacing: 3px 4px; }
	.csp-product .gfa_matrix_table input.gfa_matrix_input { height: 40px; font-size: 15px; }
	.csp-product .csp-mx th.csp-mx-size { font-size: 12px; letter-spacing: 0; padding: 8px 0 !important; }
	.csp-product .csp-mx-swatch { width: 40px; height: 40px; }
	.csp-product .csp-mx col.csp-mx-col-swatch { width: 40px; }
	.csp-product .csp-mx-ruler { width: 40px; height: 36px; }
}

/* ---------- Dialog: Farbbild groß / Größentabelle ---------- */
html.csp-mx-lock { overflow: hidden; }
.csp-mx-box { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12,12,14,.84); }
.csp-mx-box[hidden] { display: none; }
.csp-mx-inner { display: contents; }
.csp-mx-figure { position: relative; max-width: min(680px, 100%); margin: 0; border-radius: 12px; background: #fff; overflow: hidden; }
.csp-mx-figure img { display: block; width: 100%; height: auto; max-height: calc(100vh - 140px); object-fit: contain; background: #fff; }
.csp-mx-figure img.is-small { width: min(360px, 80vw); padding: 24px; box-sizing: border-box; image-rendering: auto; }
.csp-mx-figure figcaption { padding: 12px 60px; color: #111; font-family: var(--csp-head-font, inherit); font-size: 18px; line-height: 1.3; text-align: center; text-transform: uppercase; }
.csp-mx-box button { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--csp-accent, #c8102e); color: var(--csp-accent-text, #fff); font-size: 26px; line-height: 1; letter-spacing: 0; cursor: pointer; }
.csp-mx-box button:hover, .csp-mx-box button:focus-visible { background: #111; color: #fff; }
.csp-mx-close { top: 8px; right: 8px; }
.csp-mx-prev, .csp-mx-next { bottom: 4px; }
.csp-mx-prev { left: 8px; }
.csp-mx-next { right: 8px; }
.csp-mx-sheet { position: relative; display: flex; flex-direction: column; width: min(820px, 100%); max-height: calc(100vh - 32px); border-radius: 12px; background: #fff; overflow: hidden; }
.csp-mx-title { margin: 0 !important; padding: 18px 64px 12px 20px; color: #111; font-family: var(--csp-head-font, inherit); font-size: 22px; line-height: 1.25; text-transform: uppercase; }
.csp-mx-sizes { padding: 0 20px 20px; overflow: auto; -webkit-overflow-scrolling: touch; }
.csp-mx-sizes table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; }
.csp-mx-sizes th, .csp-mx-sizes td { padding: 8px 10px; border: 1px solid #e3e3e3; text-align: center; white-space: nowrap; }
.csp-mx-sizes thead th, .csp-mx-sizes tr:first-child th { background: #111; color: #fff; }
.csp-mx-sizes td:first-child, .csp-mx-sizes th:first-child { text-align: left; font-weight: 700; }
.csp-mx-sizes img { max-width: 100%; height: auto; }

/* ---------- Aufpreis-Pillen in der Bildauswahl ---------- */
.image-choices-choice-price.is-free { display: none; }
.image-choices-choice-price.is-surcharge .ginput_price { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--csp-accent, #c8102e); color: var(--csp-accent-text, #fff); font-size: 1em; font-weight: 600; line-height: 1.4; }

/* ---------- Bildauswahl als Slider ---------- */
.csp-swipe-box { position: relative; }
.csp-swipe-box .gfield_radio { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 10px; padding-bottom: 4px; }
.csp-swipe-box .gfield_radio::-webkit-scrollbar { display: none; }
.csp-swipe-box .gfield_radio > * { flex: 0 0 auto; scroll-snap-align: start; }
.csp-swipe-box .gfield_radio.csp-fade-right { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
.csp-swipe-arrow { position: absolute; top: 50%; z-index: 2; width: 36px; height: 36px; margin-top: -18px; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #fff !important; color: #111 !important; box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: 24px !important; line-height: 34px !important; cursor: pointer; }
.csp-swipe-arrow--prev { left: -6px; }
.csp-swipe-arrow--next { right: -6px; }
.csp-swipe-arrow[hidden] { display: none; }

/* ---------- Box „Deine Konfiguration“ + mobile Leiste ---------- */
.csp-bar, .csp-box { display: none; }
.csp-box-lines div.csp-sub, .csp-bar-details div.csp-sub { padding-left: 14px; font-size: 13px; font-weight: 500; }
.csp-box-lines div.csp-sub { color: #555; }
.csp-bar-details div.csp-sub { color: #cfcfcf; }
.csp-box-lines div.csp-min, .csp-bar-details div.csp-min { padding-left: 14px; font-size: 13px; font-weight: 700; }
.csp-box-lines div.csp-min-no { color: #c62828; }
.csp-box-lines div.csp-min-ok { color: #1b7a34; }
.csp-bar-details div.csp-min-no { color: #ff8a80; }
.csp-bar-details div.csp-min-ok { color: #7ee2a0; }
.csp-sub span:last-child, .csp-count span:last-child { text-align: right; }

@media (min-width: 768px) {
	.csp-box { display: flex; flex-direction: column; gap: 14px; float: left; clear: left; width: 42%; box-sizing: border-box; margin: 24px 0 30px; padding: 20px; border: 2px solid var(--csp-dark); border-radius: 10px; background: #fff; color: #111; }
	.csp-group-ringe .csp-box { border-color: var(--csp-accent); }
	.csp-box-title { font-family: var(--csp-head-font); font-size: 17px; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
	.csp-box-lines { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
	.csp-box-lines div, .csp-box-total { display: flex; justify-content: space-between; gap: 16px; }
	.csp-box-total { align-items: baseline; border-top: 1px solid #d5dbe1; padding-top: 14px; font-size: 14px; font-weight: 700; }
	.csp-box-price { font-size: 28px; font-weight: 800; line-height: 1; }
	.csp-box-legal { font-size: 12px; color: #555; }
	.csp-box-go .csp-go-ico { display: inline-block; margin-right: 8px; font-weight: 800; }
	.csp-box-go, .csp-box-go:hover, .csp-box-go:focus { background: var(--csp-accent); color: var(--csp-accent-text); border: 0; border-radius: 8px; min-height: 50px; padding: 0 18px; font-family: inherit; font-size: 15px; font-weight: 800; text-transform: none; letter-spacing: 0; cursor: pointer; }
	.csp-box-go.csp-go-off, .csp-box-go.csp-go-off:hover, .csp-box-go.csp-go-off:focus { background: #e3e5e8; color: #6b7076; }
}

@media (max-width: 767px) {
	.csp-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #0b0b0b; color: #fff; padding: 8px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.25); }
	.csp-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
	.csp-bar button { font-family: inherit; cursor: pointer; border: 0; margin: 0; text-transform: none; letter-spacing: 0; }
	.csp-bar-toggle, .csp-bar-toggle:hover, .csp-bar-toggle:focus { background: none; color: #fff; padding: 0; min-height: 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; text-align: left; }
	.csp-bar-label { font-size: 11px; font-weight: 600; color: #cfcfcf; line-height: 1.2; }
	.csp-caret { display: inline-block; transition: transform .2s; }
	.csp-open .csp-caret { transform: rotate(180deg); }
	.csp-bar-price { font-size: 24px; font-weight: 800; line-height: 1; }
	.csp-bar-go, .csp-bar-go:hover, .csp-bar-go:focus { background: var(--csp-accent); color: var(--csp-accent-text); border-radius: 8px; min-height: 48px; padding: 0 18px; font-size: 14px; font-weight: 800; }
	.csp-bar-details { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 10px; margin-bottom: 8px; border-bottom: 1px solid #3a3a3a; font-size: 13px; font-weight: 600; }
	.csp-bar-details[hidden] { display: none; }
	.csp-bar-details div { display: flex; justify-content: space-between; gap: 12px; }
	body.csp-has-bar { padding-bottom: 76px; }
	body.csp-has-bar .owp-floating-bar { display: none !important; }
	body.csp-has-bar #scroll-top { bottom: 90px; }
}

/* ---------- Trust-Box ---------- */
.csp-trust { box-sizing: border-box; width: 100%; margin: 20px 0 0; font-family: inherit; line-height: 1.4; clear: both; }
.csp-trust *, .csp-trust *::before, .csp-trust *::after { box-sizing: border-box; }
.csp-trust .csp-badge { display: flex; align-items: center; gap: 12px; background: #f2f2f2; color: #14213d; border-radius: 10px; padding: 12px 16px; margin: 0 0 10px; font-size: 15px; }
.csp-trust .csp-avatars { display: flex; flex: 0 0 auto; align-items: center; width: 64px; }
.csp-trust .csp-avatars img { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #ddd; display: block; margin: 0; padding: 0; max-width: none; font-size: 0; }
.csp-trust .csp-avatars img + img { margin-left: -12px; }
.csp-trust .csp-badge p { margin: 0; }
.csp-trust .csp-badge strong { font-weight: 700; }
.csp-trust .csp-verified { display: inline-block; vertical-align: -2px; width: 16px; height: 16px; margin: 0 2px; fill: #1d9bf0; }
.csp-trust .csp-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.csp-trust .csp-grid li { flex: 1 1 240px; display: flex; align-items: flex-start; gap: 10px; background: #f7f7f7; color: #14213d; border-left: 4px solid var(--csp-accent); border-radius: 8px; padding: 13px 14px; margin: 0; font-size: 13.5px; font-weight: 700; list-style: none; }
.csp-trust .csp-grid li::marker { content: ""; }
.csp-trust .csp-check { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; fill: none; stroke: var(--csp-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.csp-group-ringe .csp-trust .csp-check { stroke: #8a6a10; }
@media (max-width: 480px) {
	.csp-trust .csp-badge { font-size: 14px; padding: 10px 12px; gap: 10px; }
	.csp-trust .csp-avatars { width: 56px; }
	.csp-trust .csp-avatars img { width: 32px; height: 32px; min-width: 32px; }
	.csp-trust .csp-grid li { font-size: 13px; padding: 12px 14px; }
}

/* ---------- Warenkorb kompakt ---------- */
.csp-longfield { display: inline-block; margin: 2px 0; }
.csp-longfield summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-weight: 700; }
.csp-longfield summary::-webkit-details-marker { display: none; }
.csp-longfield__toggle::after { content: "▾"; display: inline-block; transition: transform .2s; }
.csp-longfield[open] .csp-longfield__toggle::after { transform: rotate(180deg); }
.csp-longfield__intro { display: block; margin-top: 4px; font-size: 12px; color: #666; }
.csp-longfield__list { margin: 6px 0 0 18px; padding: 0; font-size: 13px; max-height: 220px; overflow: auto; }

/* ---------- Breadcrumb über dem Produkt (statt Seitentitel-Balken) ---------- */
.csp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 18px; font-size: 13px; color: #777; }
.csp-crumbs a { color: #555; text-decoration: none; }
.csp-crumbs a:hover { color: var(--csp-accent, #c8102e); }
.csp-crumbs__sep { color: #bbb; }