/* GARAN-Label aus wpShopGermany 4.6.3 (views/css/frontend.css), weil ShopThemeOne die frontend.css nicht lädt */

/* GARAN Label */
.wpsg_product_garan_wrap { all:revert; padding:5px 0; margin-bottom:2rem; font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; 
	* { all:revert; }
	.wpsg_product_garan { border:1px solid black; display:inline-block; padding:5px 50px 5px 5px; position:relative; height:30px; white-space:nowrap; cursor:pointer; text-decoration:none; color:black;
		& > .years { font-size:30px; height:30px; line-height:30px; font-weight:bold; padding-right:35px; position:relative; border-right:1px solid black;
			&:after { position:absolute; right:10px; bottom:8px; content:' '; width:16px; height:16px; background-image:url('/wp-content/plugins/wpshopgermany-free/views/gfx/garan/garan_year.svg'); background-size:contain; background-repeat:no-repeat; }
		}
		& > .title { padding-left:5px; font-size:22px; font-weight:bold; padding-right:20px; position:relative;
			&:after { position:absolute; right:0; bottom:2px; content:' '; width:16px; height:16px; background-image:url('/wp-content/plugins/wpshopgermany-free/views/gfx/garan/garan_checkmark.svg'); background-size:contain; background-repeat:no-repeat; }
		}
		&:after { position:absolute; right:5px; top:0; content:' '; width:28px; height:40px; background-image:url('/wp-content/plugins/wpshopgermany-free/views/gfx/garan/garan_eu.svg'); background-size:contain; background-repeat:no-repeat; }
		& > .tooltip { position:absolute; opacity:0; pointer-events:none; top:40px; left:-1px; padding:5px 5px 5px 0; transition:opacity 0.5s;
			& > .inner { width:300px; min-height:300px; display:flex; flex-direction:column; gap:5px; background-color:white; padding:5px; border:1px solid black;
					& > .border { border:1px solid black; display:flex; flex-direction:column; padding:5px;
					.top { width:100%; border-bottom:2px solid black; padding-bottom:5px; position:relative;
						& > .title { font-size:50px; font-weight:bold; padding-right:40px; position:relative; display:inline-block; line-height:50px; letter-spacing:1px;
							&:after { position:absolute; right:0; bottom:5px; content:' '; width:32px; height:32px; background-image:url('/wp-content/plugins/wpshopgermany-free/views/gfx/garan/garan_checkmark.svg'); background-size:contain; background-position:right bottom; background-repeat:no-repeat; }
						}
						&:after { position:absolute; right:0; top:-11px; content:' '; width:36px; height:51px; background-image:url('/wp-content/plugins/wpshopgermany-free/views/gfx/garan/garan_eu.svg'); background-size:contain; background-repeat:no-repeat; }
					}
					& > .flexline { display:flex; justify-content:space-between; gap:5px; align-items:flex-start; padding:5px 0; font-size:16px; }
					& > .line { display:flex; justify-content:space-between; gap:5px; align-items:flex-end; padding:5px 0;
						& > .years { font-size:85px; height:85px; line-height:85px; font-weight:bold; padding-right:60px; position:relative;
							&:after { position:absolute; right:10px; bottom:8px; content:' '; width:35px; height:35px; background-image:url('/wp-content/plugins/wpshopgermany-free/views/gfx/garan/garan_year.svg'); background-size:contain; background-repeat:no-repeat; }
						}
						& > img { transform:translateY(-8px); }
					}
					& > .trans_wrap { display:block; white-space:normal; text-align:justify; hyphens:auto; font-size:8px; line-height:1.4;
						& > span + span:before { content:'|'; padding-right:1px; }
						strong { font-weight:bold; }
					}
				}
			}
		}
		&:hover > .tooltip { opacity:1; pointer-events:all; z-index:1; }
		/* Auch per Tastaturfokus und nach dem ersten Tipp (K69, frontend.js); Escape blendet aus */
		&:focus-visible > .tooltip, &.is-open > .tooltip { opacity:1; pointer-events:all; z-index:1; }
		&.is-dismissed > .tooltip { opacity:0; pointer-events:none; }
	}
}

/*
 * GARAN Label: Absicherung gegen Theme-Regeln
 *
 * Das Label ist auf feste Pixelmaße mit content-box gebaut. Viele Themes setzen global
 * box-sizing:border-box (auch für ::before/::after), eigene Zeilenhöhen sowie Farbe und
 * Unterstreichung für Links im Inhaltsbereich (z.B. Astra: ".ast-single-post .entry-content a").
 * "html body" hebt die Spezifität über solche Theme-Selektoren, ohne !important zu brauchen.
 */
html body .wpsg_product_garan_wrap,
html body .wpsg_product_garan_wrap *,
html body .wpsg_product_garan_wrap *::before,
html body .wpsg_product_garan_wrap *::after { box-sizing:content-box; }
html body .wpsg_product_garan_wrap { line-height:1; }
html body .wpsg_product_garan_wrap a.wpsg_product_garan,
html body .wpsg_product_garan_wrap a.wpsg_product_garan:hover,
html body .wpsg_product_garan_wrap a.wpsg_product_garan:focus,
html body .wpsg_product_garan_wrap a.wpsg_product_garan:visited { color:#000000; background-color:#FFFFFF; text-decoration:none; line-height:30px; box-shadow:none; }
html body .wpsg_product_garan_wrap a.wpsg_product_garan * { color:inherit; text-decoration:none; letter-spacing:normal; text-transform:none; }
html body .wpsg_product_garan_wrap a.wpsg_product_garan > .years,
html body .wpsg_product_garan_wrap a.wpsg_product_garan > .title { display:inline-block; height:30px; line-height:30px; vertical-align:top; }
html body .wpsg_product_garan_wrap a.wpsg_product_garan .tooltip,
html body .wpsg_product_garan_wrap a.wpsg_product_garan .tooltip .inner,
html body .wpsg_product_garan_wrap a.wpsg_product_garan .tooltip .flexline { line-height:1.2; }
html body .wpsg_product_garan_wrap a.wpsg_product_garan .tooltip .trans_wrap { line-height:1.4; }
html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max-width:none; height:auto; margin:0; border:0; box-shadow:none; }


/* Gewährleistungslabel in der Bestellübersicht, ohne .wpsg_overview, das die Übersicht von ShopThemeOne nicht trägt */
.garan_label_wrap { text-align:center; padding:1rem 0; }
.garan_label_wrap img { max-width:100%; height:auto; }
.garan_label_popup { position:fixed; top:0; left:0; right:0; bottom:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:1rem; background-color:rgba(0, 0, 0, 0.6); }
.garan_label_popup .garan_label_popup_inner { display:flex; flex-direction:column; max-width:600px; max-height:100%; text-align:center; padding:1rem; background-color:#FFFFFF; }
.garan_label_popup .garan_label_popup_image { min-height:0; overflow-y:auto; }
.garan_label_popup .garan_label_popup_image img { max-width:100%; height:auto; }
.garan_label_popup .garan_label_popup_confirm { flex:0 0 auto; margin-top:1rem; }