/**
 * Coffeeness redesigned BUNDLE product pages - loaded on top of css/product.css.
 *
 * Ported from the approved mockups in "HTML Templates/Product Templates/Product
 * bundles/" (their own <style> block, "Bundle-Konfigurator" onwards). Sizes are
 * the mockup's rem values converted to px (1rem = 16px): Astra shrinks the root
 * font to 91.2% at <=921px, which would make rem-based sizes render smaller than
 * the mockup on tablet/mobile.
 *
 * The configurator is the REAL WooCommerce Product Bundles form. Its item
 * markup comes partly from our overrides (template-parts/product/bundle/:
 * .bundle-check/.bundle-thumb, .bundle-info, the .bundle-toggle label) and
 * partly from the plugin itself (div.bundled_product wrapper, .details,
 * div.cart with the quantity, .bundle_data with total/error/button). Three
 * other stylesheets style those same plugin elements, often with !important,
 * which is why the selectors below are long:
 *   - the plugin's own assets/css/frontend/single-product.css (floats, 20%/80%
 *     widths, clearfix pseudo-elements, a 1rem spacer above the quantity);
 *   - astra-child/style.css (old bundle layout: 15%/85% widths, 30px qty
 *     buttons, -5px qty margin, .save-label pill, del/ins floats, the sitewide
 *     .woocommerce-info card) - left untouched, the other bundles still use it;
 *   - WooCommerce/Astra core ("div.product div.images" is 48% wide and floated,
 *     and every bundled item wrapper carries the "product" class too).
 * Prefix for those fights: .woocommerce div.product.cn-pdp.cn-pdp--bundle
 *
 * Card layout: the plugin nests title/description/checkbox/qty inside a .details
 * div; .details is display:contents, so its children become grid items of the
 * card next to the image, matching the mockup's 3-column .bundle-item grid.
 *
 * Markup: template-parts/product/content-*-bundle.php + template-parts/product/bundle/
 * Behaviour: js/product-bundle.js | Enqueued in functions.php (child_enqueue_styles).
 */

/* ===== Gallery: discount pill over the main image ===== */
.cn-pdp--bundle .pdp-badge{position:absolute;top:12px;left:12px;z-index:2;background:#e05858;color:#fff;font-size:14.4px;font-weight:800;letter-spacing:.02em;padding:6px 14px;border-radius:30px;box-shadow:0 3px 8px rgba(3,41,54,.18);line-height:normal;}

/* Bundles: the configurator needs more width - single column from 1080px (simple products: 900px). */
@media (max-width:1080px){
	.cn-pdp--bundle .pdp-grid{grid-template-columns:1fr;gap:24px;}
	.cn-pdp--bundle .pdp-gallery{position:static;max-width:500px;}
}

/* ===== Buy box: price block (real markup: woocommerce/single-product/price.php,
   price HTML swapped for .bundle-from/.bundle-old/.bundle-badge by
   cn_pdp_render_bundle_price()) ===== */
.cn-pdp--bundle .bundle{padding:0;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle .bundle > p.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;padding:0;line-height:normal;font-size:16px;font-weight:400;color:#032936;}
.cn-pdp--bundle .bundle-from{font-family:var(--font-head);font-weight:700;font-size:27.2px;color:#032936;}
.cn-pdp--bundle .bundle-old{color:#9E9E9E;text-decoration:line-through;font-size:16px;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle .bundle > p.price .bundle-badge{display:inline;background:#e05858;color:#fff;font-weight:600;font-size:12.48px;line-height:normal;padding:4px 11px;margin:0;border-radius:999px;}

.woocommerce div.product.cn-pdp.cn-pdp--bundle .bundle .stock-and-shipping{margin:0;padding:0;background:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle .bundle .stock-and-shipping p{margin:10px 0 0;font-size:14.88px;line-height:normal;color:#032936;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle .bundle .stock-and-shipping p:first-child{margin:5px 0 0;font-size:13.6px;color:#8a857f;}
.cn-pdp--bundle .bundle .stock-and-shipping p a{color:#285bb8;}
/* Same dot as the simple-product buy box (css/product.css), keyed off price.php's
   .cn-stock-in/.cn-stock-out classes - but inline-flex here: price.php leaves a
   space between the (hidden) icon and "Verfügbar.", which as plain inline text
   pushed the word ~4px further from the dot than the mockup's 8px flex gap.
   vertical-align:top because an inline-flex box takes its baseline from its first
   item - the dot - which would sit the text 1px below the rest of the line. */
.cn-pdp--bundle .bundle .stock-and-shipping p > .cn-stock-status{display:inline-flex;align-items:center;vertical-align:top;font-weight:600;}
.cn-pdp--bundle .bundle .stock-and-shipping p > .cn-stock-status i{display:none;}
.cn-pdp--bundle .bundle .stock-and-shipping p > .cn-stock-status::before{content:"";display:block;flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:#21a54d;box-shadow:0 0 0 3px rgba(33,165,77,.18);margin-right:8px;}
.cn-pdp--bundle .bundle .stock-and-shipping p > .cn-stock-out::before{background:#e05858;box-shadow:0 0 0 3px rgba(224,88,88,.18);}
/* "Versandkostenfrei"/contact box - not part of the bundle mockup. */
.cn-pdp--bundle .bundle .limited{display:none;}

/* ===== Configurator: the plugin form ===== */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.cart.bundle_form{display:block;margin:16px 0 0 !important;padding:0;background:none;}

/* --- Item card (div.bundled_product, classes + "bundle-item" via cn_pdp_bundled_item_classes()) --- */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item{
	position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"thumb info toggle" "thumb info qty";column-gap:14px;row-gap:0;align-items:center;
	margin:0;padding:14px !important;border:1.5px solid #e4dfd9;border-radius:12px;background:#fff;cursor:pointer;overflow:visible;float:none;width:auto;
	transition:border-color .2s,background .2s,box-shadow .25s,transform .25s;
}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item + div.bundled_product.bundle-item{margin-top:12px;}
/* The plugin's clearfix pseudo-elements would otherwise become grid items. */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item::before,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item::after{content:none;display:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item:hover{box-shadow:0 3px 12px rgba(3,41,54,.06);}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item:has(input.bundled_product_checkbox:checked){border-color:#b9c6db;background:#f7f9fc;box-shadow:0 6px 18px rgba(3,41,54,.07);transform:translateY(-2px);}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item .details{display:contents;}

/* Image column (template-parts/product/bundle/bundled-item-image.php). position:static
   so the tick positions against the card, like the mockup's .bundle-check. */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item div.bundled_product_images{grid-area:thumb;position:static;float:none;width:auto !important;max-width:none;margin:0 !important;padding:0;opacity:1;}
.cn-pdp--bundle .bundle-item .bundle-check{position:absolute;top:-9px;left:-9px;width:24px;height:24px;border-radius:50%;background:#285bb8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.52px;line-height:normal;opacity:0;transform:scale(.2);transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .18s;pointer-events:none;box-shadow:0 2px 6px rgba(40,91,184,.3);z-index:1;}
.cn-pdp--bundle .bundle-item:has(input.bundled_product_checkbox:checked) .bundle-check{opacity:1;transform:scale(1);}
/* The live site's WebP delivery rewrites <img class="bundle-thumb"> into
   <picture class="bundle-thumb"><source><img></picture> (see js/product.js) -
   both shapes are covered. */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product_images .bundle-thumb{display:block;width:66px;height:66px;max-width:none;border-radius:8px;overflow:hidden;object-fit:cover;flex:0 0 auto;margin:0;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product_images picture.bundle-thumb img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;margin:0;}

/* Info column (template-parts/product/bundle/bundled-item-title.php). */
.cn-pdp--bundle .bundle-item .bundle-info{grid-area:info;min-width:0;}
.cn-pdp--bundle .bundle-item .bundle-name{font-family:var(--font-head);font-weight:700;font-size:16.32px;line-height:normal;color:#032936;margin:0 0 5px;display:flex;align-items:center;gap:7px;}
.cn-pdp--bundle .bundle-item .bundle-x{color:#032936;font-weight:700;white-space:nowrap;}
/* "× 2" / "· 4er-Set" after the name (js/product-bundle.js). The name|suffix flex
   row is the mockup's - but once the name wraps, the suffix gets squeezed into a
   narrow column and broke over two lines ("×"/"2", "2er-"/"Set"; Flo 2026-10-15).
   On narrower screens the name flows as plain text instead, and the suffix
   (unbreakable, see white-space above) is glued to the last word with a
   non-breaking space, so "300 ml · 4er" wraps as one piece - never a lone "× 2"
   on its own line. Phones get the short set size ("· 4er"). */
.cn-pdp--bundle .bundle-item .bundle-x-short{display:none;}
@media (max-width:767px){
	.cn-pdp--bundle .bundle-item .bundle-name{display:block;}
	.cn-pdp--bundle .bundle-item .bundle-x:not(:empty)::before{content:"\00a0";}
}
@media (max-width:520px){
	.cn-pdp--bundle .bundle-item .bundle-x-full{display:none;}
	.cn-pdp--bundle .bundle-item .bundle-x-short{display:inline;}
}
.cn-pdp--bundle .bundle-item .bundle-notes{list-style:none;margin:0 0 9px;padding:0;font-size:14.08px;line-height:normal;color:#57606a;display:flex;flex-direction:column;gap:2px;}
.cn-pdp--bundle .bundle-item .bundle-notes li{display:block;margin:0;padding:0;}
.cn-pdp--bundle .bundle-item .bundle-notes li::before{content:none;}
.cn-pdp--bundle .bundle-item .bundle-notes b{font-weight:600;color:#032936;}
.cn-pdp--bundle .bundle-item .bundle-priceline{font-size:14.4px;line-height:normal;color:#57606a;margin-top:6px;}
.cn-pdp--bundle .bundle-item .bundle-priceline .old{text-decoration:line-through;color:#9E9E9E;}
.cn-pdp--bundle .bundle-item .bundle-priceline .now{font-weight:700;color:#032936;}

/* Toggle pill = the real checkbox's label (template-parts/product/bundle/bundled-item-optional.php).
   Bottom of the "toggle" row, quantity at the top of the row below: together they
   stay one centred block, like the mockup's .bundle-action column, whether or not
   the quantity is showing. */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item label.bundled_product_optional_checkbox.bundle-toggle{
	grid-area:toggle;align-self:end;justify-self:end;position:relative;display:inline-block;margin:0;
	border:1.5px solid #d9d4cf;background:#fff;color:#032936;font-family:var(--font-head);font-weight:700;font-size:14.08px;line-height:normal;padding:9px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.2s;
}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item label.bundle-toggle input.bundled_product_checkbox{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item label.bundled_product_optional_checkbox.bundle-toggle:hover{border-color:#285bb8;color:#285bb8;background:#f4f7fd;}
.cn-pdp--bundle .bundle-item .bundle-toggle:has(input:focus-visible){outline:2px solid #285bb8;outline-offset:2px;}
.cn-pdp--bundle .bundle-item .bundle-toggle .t-sel,
.cn-pdp--bundle .bundle-item .bundle-toggle .t-rem{display:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item:has(input.bundled_product_checkbox:checked) label.bundle-toggle{border-color:#c3ccd8;background:#eef2f8;color:#3a4a63;}
.cn-pdp--bundle .bundle-item:has(input.bundled_product_checkbox:checked) .bundle-toggle .t-add{display:none;}
.cn-pdp--bundle .bundle-item:has(input.bundled_product_checkbox:checked) .bundle-toggle .t-sel{display:inline;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item:has(input.bundled_product_checkbox:checked) label.bundle-toggle:hover{border-color:#b8b2ab;background:#f2f0ed;color:#6b655e;}
.cn-pdp--bundle .bundle-item:has(input.bundled_product_checkbox:checked) .bundle-toggle:hover .t-sel{display:none;}
.cn-pdp--bundle .bundle-item:has(input.bundled_product_checkbox:checked) .bundle-toggle:hover .t-rem{display:inline;}

/* While "✕ Entfernen" updates the bundle in the cart (js/product-bundle.js). */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item.is-syncing{opacity:.6;pointer-events:none;cursor:progress;}

/* Sold-out item: no toggle, a "Nicht vorrätig" label in its place. */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item.soldout{opacity:.55;cursor:not-allowed;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item.soldout label.bundle-toggle{display:none;}
.cn-pdp--bundle .bundle-item.soldout .bundle-check{display:none;}
.cn-pdp--bundle .bundle-item .bundle-soldout{grid-area:toggle;grid-row:1 / span 2;align-self:center;justify-self:end;font-size:13.6px;font-weight:700;color:#9E9E9E;white-space:nowrap;}
/* The plugin's own "Nicht vorrätig" stock line (bundled-product-simple.php). */
.cn-pdp--bundle .bundle-item p.stock{display:none;}

/* Quantity (plugin div.cart -> .bundled_item_cart_content, shown/hidden by the
   plugin's slideDown/slideUp; stepper = Astra's own wired .minus/.plus). */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.cart{grid-area:qty;align-self:start;justify-self:end;margin:0;padding:0;background:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item .bundled_item_cart_content{margin-top:10px;padding:0;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item .bundled_item_cart_content--populated::before,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item .bundled_item_wrap::before,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item .bundled_item_wrap::after{content:none;display:none;}
.cn-pdp--bundle .bundle-item .bundled_item_cart_details{display:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity{display:inline-flex;align-items:center;float:none;width:max-content;height:auto !important;min-height:0 !important;margin:0 !important;padding:0;border:1.5px solid #d9d4cf;border-radius:8px;overflow:hidden;background:#fff;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity .minus,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity .plus{display:flex;align-items:center;justify-content:center;width:34px !important;height:34px;margin:0;padding:0;border:none !important;border-radius:0 !important;background:#fff;font-family:Arial,sans-serif;font-size:18.4px;line-height:normal;color:#032936 !important;text-decoration:none;cursor:pointer;transition:none;}
/* Astra prints a hyphen; the mockup shows an en dash. */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity .minus{font-size:0;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity .minus::before{content:"\2013";font-size:18.4px;line-height:normal;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity .minus:hover,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity .plus:hover{background:#f4f2f0;text-decoration:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity input.qty{width:38px;max-width:38px;height:34px !important;min-height:0 !important;line-height:34px;margin:0;padding:0;border:none !important;border-radius:0;box-shadow:none;background:#fff;text-align:center;font-family:Arial,sans-serif;font-size:15.2px;font-weight:600;color:#032936 !important;-moz-appearance:textfield;appearance:textfield;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.quantity input.qty:focus{outline:none;box-shadow:none;border:none !important;}

/* --- Total, rule, min-items hint, add-to-cart (plugin .bundle_data) --- */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundle_data{margin:18px 0 0;padding:0;background:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_price{margin:0 !important;padding:0 !important;}
/* hr.bundle-rule is printed by cn_pdp_bundle_total_rule() (functions.php). */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data hr.bundle-rule{display:block;height:2px;margin:14px 0;padding:0;border:none;border-radius:2px;background:#285bb8;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_price p.price{display:flex;align-items:baseline;gap:10px;margin:0;padding:0;line-height:normal;font-size:16px;font-weight:400;color:#032936;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_price p.price del{float:none;margin:0;opacity:1 !important;color:#9E9E9E;text-decoration:line-through;font-size:16.8px;font-weight:400;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_price p.price ins,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_price p.price > .woocommerce-Price-amount{float:none;margin:0;text-decoration:none;font-family:var(--font-head);font-weight:700;font-size:27.2px;color:#032936;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_price p.price del .woocommerce-Price-amount{color:inherit;font:inherit;}
/* The mockup's total row always holds an (empty while nothing is discounted)
   old-price slot before the total, so a lone total sits one 10px gap in. */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_price p.price:not(:has(del))::before{content:"";}
/* Germanized's "inkl. MwSt., zzgl. Versand" under the total - the mockup shows it
   once, under the "Ab" price. !important beats the inline show() of its own script. */
.cn-pdp--bundle .bundle_data .wc-gzd-bundle-total-shopmarks{display:none !important;}

.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_error{margin:0 0 14px !important;padding:0;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_error .woocommerce-info{display:block !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;border-radius:0;box-shadow:none;font-size:14.4px;line-height:normal;color:#8a857f;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_error .woocommerce-info::before,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_error .woocommerce-info::after{content:none !important;display:none !important;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_error ul.msg{list-style:none;margin:0;padding:0;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_error ul.msg li{margin:0 !important;padding:0;list-style:none;}
/* Plugin stock messages for the selection (e.g. not enough stock for the chosen
   quantity) - same place and size as the min-items hint, in the out-of-stock red. */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_availability p.stock{margin:0 0 14px;padding:0;font-size:14.4px;line-height:normal;font-weight:600;color:#e05858;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle_data .bundle_availability p.stock::before{content:none;}

/* Whole bundle out of stock (plugin adds .bundle_out_of_stock to the form and
   drops the button): like an out-of-stock simple product, only the red
   "Aktuell nicht verfügbar." line above says so - every card gets the sold-out
   look and can't be toggled, and the total/rule/hint/stock line go. */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form.bundle_out_of_stock div.bundled_product.bundle-item{opacity:.55;cursor:not-allowed;pointer-events:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form.bundle_out_of_stock div.bundle_data{margin-top:0;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form.bundle_out_of_stock .bundle-item label.bundle-toggle,
.cn-pdp--bundle form.bundle_form.bundle_out_of_stock .bundle-item .bundle-check,
.cn-pdp--bundle form.bundle_form.bundle_out_of_stock .bundle-item .bundled_item_cart_content,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form.bundle_out_of_stock .bundle_data .bundle_price,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form.bundle_out_of_stock .bundle_data hr.bundle-rule,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form.bundle_out_of_stock .bundle_data .bundle_error,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form.bundle_out_of_stock .bundle_data .bundle_availability{display:none !important;}

.woocommerce div.product.cn-pdp.cn-pdp--bundle form.cart.bundle_form .bundle_button .button.single_add_to_cart_button{
	width:100% !important;flex:none !important;height:auto !important;min-height:0 !important;margin:0 !important;padding:17px 24px !important;
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	background:#285bb8;color:#fff;border:none;border-radius:12px !important;opacity:1;
	font-family:inherit;font-weight:700 !important;font-size:18.56px;line-height:normal !important;cursor:pointer;transition:background .15s ease;
}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.cart.bundle_form .bundle_button .button.single_add_to_cart_button:hover{background:#284985;color:#fff;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.cart.bundle_form .bundle_button .button.single_add_to_cart_button.disabled,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.cart.bundle_form .bundle_button .button.single_add_to_cart_button.disabled:hover{background:#9db6df;color:#fff;opacity:1;cursor:not-allowed;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.cart.bundle_form .bundle_button .button.single_add_to_cart_button:focus,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.cart.bundle_form .bundle_button .button.single_add_to_cart_button:focus-visible{outline:none;box-shadow:none;}
.cn-pdp--bundle .bundle_button .single_add_to_cart_button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}
/* Third-party extras (PayPal Payments etc.) - hidden when nothing hooks in. */
.cn-pdp--bundle .bundle .pdp-extras{margin:12px 0 0;}
.cn-pdp--bundle .bundle .pdp-extras:empty{display:none;}

@media (max-width:520px){
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item{grid-template-columns:auto 1fr;grid-template-areas:"thumb info" "act act";row-gap:14px;}
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item label.bundled_product_optional_checkbox.bundle-toggle{grid-area:act;align-self:center;justify-self:start;}
	.cn-pdp--bundle .bundle-item .bundle-soldout{grid-area:act;grid-row:auto;justify-self:start;}
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item div.cart{grid-area:act;align-self:center;justify-self:end;}
	/* The stepper keeps its own top margin in the mockups' one-row mobile layout
	   (2px; 10px on Probierset/Reiniger/Sirup, below), shifting it slightly down. */
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item .bundled_item_cart_content{margin-top:2px;}
	.woocommerce div.product.cn-pdp.cn-pdp--probierset-bundle form.bundle_form .bundle-item .bundled_item_cart_content,
	.woocommerce div.product.cn-pdp.cn-pdp--reiniger-bundle form.bundle_form .bundle-item .bundled_item_cart_content,
	.woocommerce div.product.cn-pdp.cn-pdp--sirup-bundle form.bundle_form .bundle-item .bundled_item_cart_content{margin-top:10px;}
}

/* ===== Product cards ("Unsere Thermobecher" etc.) ===== */
.cn-pdp--bundle .fav-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:8px;}
.cn-pdp--bundle .fav-card{background:#fff;border:1px solid #e8e8e8;border-radius:14px;padding:28px 26px;display:flex;flex-direction:column;min-width:0;box-shadow:0 8px 26px rgba(3,41,54,.06);}
.cn-pdp--bundle .fav-card h3{font-size:24px;font-weight:800;line-height:normal;letter-spacing:.05em;color:#032936;margin:0 0 12px;}
.cn-pdp--bundle .fav-card > p{color:#032936;line-height:1.6;font-size:15.68px;margin:0 0 22px;}
.cn-pdp--bundle .fav-card .fav-facts{margin-bottom:0;}
.cn-pdp--bundle .fav-card .fav-facts span{display:inline-block;background:#efecea;color:#57606a;font-size:12.8px;font-weight:700;padding:6px 13px;border-radius:999px;}
/* Star-rated variant (Probierset) and the 4-column variant (Porzellantassen). */
.cn-pdp--bundle .fav-ratings{display:flex;gap:20px;margin-bottom:24px;}
.cn-pdp--bundle .fav-col{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;gap:9px 12px;align-items:center;}
.cn-pdp--bundle .fav-lbl{font-size:12.8px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#032936;line-height:1.2;}
.cn-pdp--bundle .fav-stars{display:inline-flex;gap:1px;font-size:15.2px;line-height:1;white-space:nowrap;}
.cn-pdp--bundle .fav-stars i{font-style:normal;color:#d9d9d3;}
.cn-pdp--bundle .fav-stars i.on{color:#FFBB1E;}
.cn-pdp--bundle .fav-grid.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.cn-pdp--bundle .fav-grid.four .fav-facts{display:flex;flex-wrap:wrap;gap:6px;}
.cn-pdp--bundle .fav-grid.four .fav-card h3{font-size:19.2px;letter-spacing:.04em;}
.cn-pdp--bundle .fav-grid.four .fav-size{display:block;font-size:.85em;color:#57606a;margin-top:4px;}
@media (max-width:1100px){
	.cn-pdp--bundle .fav-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
	.cn-pdp--bundle .fav-grid.four{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:780px){
	.cn-pdp--bundle .fav-grid,
	.cn-pdp--bundle .fav-grid.four{grid-template-columns:1fr;}
}
/* The 2-card grids set their columns inline (as in the mockup), which beats the
   780px rule above - fine on tablets, where the mockup itself shows two cards side
   by side, but on phones that leaves ~160px cards with 3-line headings (the mockup
   renders exactly that). One column there; !important is the only way past an
   inline style (same issue as .detail-split in css/product.css). */
@media (max-width:620px){
	.cn-pdp--bundle .fav-grid{grid-template-columns:1fr !important;}
}
@media (max-width:520px){ .cn-pdp--bundle .fav-ratings{flex-direction:column;gap:14px;} }

/* ===== Tip rows in the .set-card (Thermobecher, Gläser) ===== */
.cn-pdp--bundle .tip-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.cn-pdp--bundle .tip-row{display:flex;gap:18px;align-items:flex-start;padding:22px 0;margin:0;border-bottom:1px solid #efecea;}
.cn-pdp--bundle .tip-row:first-child{padding-top:4px;}
.cn-pdp--bundle .tip-row:last-child{border-bottom:none;padding-bottom:4px;}
.cn-pdp--bundle .tip-ic{width:48px;height:48px;border-radius:50%;background:#efecea;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.cn-pdp--bundle .tip-ic svg{width:24px;height:24px;stroke:#285bb8;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.cn-pdp--bundle .tip-row-title{font-size:17.6px;font-weight:700;line-height:normal;color:#032936;margin:2px 0 6px;}
.cn-pdp--bundle .tip-row-text{font-size:16px;line-height:1.55;color:#032936;margin:0;}
@media (max-width:620px){
	.cn-pdp--bundle .tip-row{gap:14px;padding:18px 0;}
	.cn-pdp--bundle .tip-ic{width:42px;height:42px;}
	.cn-pdp--bundle .tip-ic svg{width:21px;height:21px;}
	.cn-pdp--bundle .tips-card{padding:10px 20px;}
}

/* ===== Five-card promise grid, centred (Sirup) ===== */
.cn-pdp--bundle .promise-grid--five{display:flex;flex-wrap:wrap;justify-content:center;}
.cn-pdp--bundle .promise-grid--five > .promise{flex:0 1 calc((100% - 68px)/3);}
@media (max-width:760px){ .cn-pdp--bundle .promise-grid--five > .promise{flex-basis:100%;} }

/* ===== Tip box with icon (Probierset "Kaffee verkosten", Sirup "Barista-Tipp") -
   inline-styled in the mockups, here in px ===== */
.cn-pdp--bundle .bundle-note{display:flex;gap:12px;align-items:flex-start;background:#eaf7ee;border:1px solid #cdeed7;border-radius:12px;padding:16px 18px;margin-top:26px;}
.cn-pdp--bundle .bundle-note svg{width:22px;height:22px;flex:0 0 auto;margin-top:1px;stroke:#21a54d;stroke-width:2.2;fill:none;}
.cn-pdp--bundle .bundle-note p{margin:0;font-size:15.36px;line-height:1.55;color:#032936;}
.cn-pdp--bundle .bundle-note a{color:#285bb8;font-weight:600;}

/* Gläser: tip rows centred in their card (mockup's own variant). */
.cn-pdp--bundle .tip-rows.tip-rows--center{height:100%;justify-content:center;}

/* Probierset, Reiniger, Sirup: their mockups give the quantity stepper 10px of
   its own top margin (Thermobecher/Porzellan: 2px) on top of the 8px gap. */
@media (min-width:521px){
	.woocommerce div.product.cn-pdp.cn-pdp--probierset-bundle form.bundle_form .bundle-item .bundled_item_cart_content,
	.woocommerce div.product.cn-pdp.cn-pdp--reiniger-bundle form.bundle_form .bundle-item .bundled_item_cart_content,
	.woocommerce div.product.cn-pdp.cn-pdp--sirup-bundle form.bundle_form .bundle-item .bundled_item_cart_content{margin-top:18px;}
}

/* ===== Variable bundled items (Gläser: 2er/4er/6er-Set) =====
   The plugin's div.cart IS the .bundled_item_cart_content here (shown/hidden
   by its JS like the quantity elsewhere) and holds a variations table with
   one select. Only the select stays visible, as the mockup's .bundle-variant;
   there's no quantity (one set per glass type, Alex 2026-10-14) - the plugin's
   quantity input stays in the form at 1. The select's placeholder/class come
   from cn_pdp_bundle_variation_dropdown_args(). */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable table.variations,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable table.variations tbody,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable table.variations tr{display:block;width:auto;margin:0;padding:0;border:0;background:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable table.variations td.label{display:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable table.variations td.value{display:flex;justify-content:flex-end;width:auto !important;margin:0;padding:0;border:0;background:none;}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable .reset_bundled_variations_fixed,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable .reset_variations,
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable .single_variation_wrap{display:none !important;}
/* Here div.cart IS the cart content box, so the gap above it needs restating
   (the general "div.cart{margin:0}" rule above outranks the plain one). */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable div.cart.bundled_item_cart_content{margin-top:10px;}
/* With that box display:none (unselected) the second grid row is empty and the
   toggle would no longer sit centred - span it over both rows instead. */
@media (min-width:521px){
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable:not(:has(input.bundled_product_checkbox:checked)) label.bundled_product_optional_checkbox.bundle-toggle{grid-row:1 / span 2;align-self:center;}
}
/* Native select like the mockup (Astra strips the appearance and fixes the line-height). */
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable table.variations select.bundle-variant{
	display:block;width:auto;min-width:132px;max-width:100%;height:auto;min-height:0;margin:0 !important;
	-webkit-appearance:auto;-moz-appearance:auto;appearance:auto;background-image:none;
	border:1.5px solid #d9d4cf;background-color:#fff;color:#032936;border-radius:8px;box-shadow:none;
	padding:8px 30px 8px 10px;font-family:var(--font-head);font-weight:600;font-size:13.76px;line-height:normal;outline:none;cursor:pointer;
}
.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable table.variations select.bundle-variant:focus{border-color:#285bb8;box-shadow:0 0 0 3px rgba(40,91,184,.08);}
@media (max-width:520px){
	/* Toggle left, select filling the rest of the row (mockup: .bundle-config width:100%). */
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form div.bundled_product.bundle-item.bundle-item--variable{grid-template-columns:auto auto 1fr;grid-template-areas:"thumb info info" "act act sel";}
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable div.cart{grid-area:sel;justify-self:stretch;margin-left:-6px;}
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable div.cart.bundled_item_cart_content{margin-top:2px;}
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable table.variations td.value{justify-content:stretch;}
	.woocommerce div.product.cn-pdp.cn-pdp--bundle form.bundle_form .bundle-item--variable table.variations select.bundle-variant{width:100%;min-width:0;}
}

/* ===== Waitlist form while the Probierset is out of stock (WPForms 333626,
   printed by price.php's out-of-stock branch) - same box as the Deluxe waitlist
   (css/product.css .notify). Beats style.css's old ".stock-and-shipping
   .wpforms-*" !important rules for the pre-redesign layout. Not seen live yet:
   check it once the Probierset is actually out of stock. ===== */
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container{margin:16px 0 0 !important;padding:18px 18px 16px !important;background:#f3f0ec !important;border:1px solid #efecea !important;border-radius:12px !important;box-shadow:none !important;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container .wpforms-form{margin:0 !important;padding:0 !important;border:0 !important;border-radius:0 !important;background:none !important;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container .wpforms-title{font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;font-weight:700 !important;font-size:16.32px !important;line-height:normal !important;color:#032936 !important;margin:0 0 4px !important;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container .wpforms-description{font-size:14.72px !important;line-height:1.5 !important;color:#57606a !important;margin:0 0 12px !important;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container .wpforms-field-container{margin:0 !important;padding:0 !important;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container .wpforms-field{margin:0 0 10px !important;padding:0 !important;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container .wpforms-field-label{font-size:13.6px !important;font-weight:600 !important;color:#032936 !important;margin:0 0 4px !important;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container input.wpforms-field-small,
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container input.wpforms-field-medium,
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container input.wpforms-field-large{margin:0 !important;width:100% !important;max-width:100% !important;height:46px !important;padding:13px 14px !important;border:1px solid #dcd7d1 !important;border-radius:10px !important;background:#fff !important;font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;font-size:15.68px !important;line-height:normal !important;color:#032936 !important;box-sizing:border-box !important;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container .wpforms-submit-container{margin:0 !important;padding:0 !important;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container button.wpforms-submit{width:100% !important;display:flex !important;align-items:center !important;justify-content:center !important;margin:0 !important;padding:14px !important;border:none !important;border-radius:10px !important;background:#285bb8 !important;color:#fff !important;font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;font-weight:800 !important;font-size:16.8px !important;line-height:normal !important;cursor:pointer;}
.cn-pdp--bundle .bundle .stock-and-shipping .wpforms-container button.wpforms-submit:hover{background:#284985 !important;}

/* ===== Astra's sticky add-to-cart bar (Flo, 2026-10-15) =====
   Desktop/tablet: rounded thumbnail, name, "Ab [old price] [price]", button.
   Phones: only the price and the button. No "Du sparst" pill. Astra prints the
   bar at wp_footer, outside .cn-pdp - this file only loads on the bundle pages,
   so .cn-pdp-page scopes these rules to them. Astra itself hides the image at
   <=921px (when it's a plain <img>; live wraps it in <picture>) and the price at
   <=544px - both overridden. "Ab" comes from cn_pdp_bundle_price_from_text(). */
.cn-pdp-page .ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-price .save-label{display:none !important;}
.cn-pdp-page div.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content .ast-sticky-add-to-cart-title-wrap{min-width:0;}
.cn-pdp-page div.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content .ast-sticky-add-to-cart-title-wrap > img,
.cn-pdp-page div.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content .ast-sticky-add-to-cart-title-wrap > picture{display:block;flex:0 0 auto;border-radius:8px;overflow:hidden;}
.cn-pdp-page div.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content .ast-sticky-add-to-cart-title-wrap img{display:block;width:50px;height:50px;max-height:none;object-fit:cover;border-radius:8px;}
.cn-pdp-page div.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content .ast-sticky-add-to-cart-title-wrap .ast-sticky-add-to-cart-title{min-width:0;padding-left:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
@media (max-width:600px){
	.cn-pdp-page div.ast-sticky-add-to-cart .ast-sticky-add-to-cart-content div.ast-sticky-add-to-cart-title-wrap{display:none;}
	.cn-pdp-page div.ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-wrap{width:100%;justify-content:space-between;}
	.cn-pdp-page div.ast-sticky-add-to-cart .ast-sticky-add-to-cart-action-wrap .ast-sticky-add-to-cart-action-price{display:block;padding-right:12px;}
}

/* ===== Shared sections: values where the bundle mockups differ from css/product.css ===== */
/* Probierset, Sirup: three trust items in three columns. */
.cn-pdp--bundle .trust-grid.trust-grid--three{grid-template-columns:repeat(3,1fr);}
.cn-pdp--bundle .trust-item{justify-content:center;}
.cn-pdp--bundle .faq-q{font-weight:700;}
.cn-pdp--bundle .spec-table th,
.cn-pdp--bundle .spec-table td{overflow-wrap:anywhere;}
@media (max-width:820px){
	.cn-pdp--bundle .trust-grid,
	.cn-pdp--bundle .trust-grid.trust-grid--three{grid-template-columns:1fr;gap:18px;max-width:330px;margin:0 auto;}
	.cn-pdp--bundle .trust-item{justify-content:flex-start;}
}
@media (max-width:620px){
	.cn-pdp--bundle .spec-table th,
	.cn-pdp--bundle .spec-table td{overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto;padding:13px 14px;font-size:14.4px;}
	.cn-pdp--bundle .spec-table th{width:38%;}
}