/*
	Theme Name:   Storefront Child 
	Description:  Storefront Child Theme	
	Author:       Rainer Cesinger
	Author URI:   httpw://cesinger.com
	Template:     storefront
	Version:      1.0	
	Text Domain:  storefront-child
*/




/*--------------------------------------------------------------
	Farbdefinitionen
--------------------------------------------------------------*/

/*

	
*/





/*--------------------------------------------------------------
	Fonts
--------------------------------------------------------------*/









/*--------------------------------------------------------------
# 	Allgemein
--------------------------------------------------------------*/

body, p, a, span, td {
	color: #222;
	}

button,
a.button,
input[type=submit],
.woocommerce .single_add_to_cart_button,
.woocommerce-page .wc-block-components-button {
	background-color: #87837D;
	text-decoration: none !important;
	}
button:hover,
a.button:hover,
input[type=submit]:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-page .wc-block-components-button:hover {
	background-color: #5b5752;
	}
	
	
/* Breadcrumbs ausblenden */
#page .storefront-breadcrumb {
	display: none;
	}

#page .col-full {
	max-width: unset;
	}

#primary #main h1.entry-title {
	text-align: left;
	}






/*--------------------------------------------------------------
# 	Header
--------------------------------------------------------------*/

header#masthead {
	background-color: transparent;
	margin-bottom: 2em;
	}


.home #primary #main .entry-header {
	display: none;
	}
	
header#masthead .site-branding,
header#masthead nav.secondary-navigation,
header#masthead .site-search {
	margin-bottom: 10px;
	}



#page #masthead .site-branding img {
	max-width: 120px;
	}

header#masthead #site-header-cart a.cart-contents {
	padding: 0;
	}



/* Produktsuche ausblenden */
#page #masthead .site-search {
	/*display: none;*/
	}
.site-header .storefront-primary-navigation {
    /* Passt das Layout an, um die Lücke zu schließen */
    /*justify-content: flex-end; /* Oder eine andere passende Eigenschaft */
}






/* Main Menu wird nur für die Darstellung des Titels "T-SHIRT STORE" verwendet !!! */
header#masthead  #site-navigation ul#menu-main-menu li a {	
	font-size: 1.5em;
	font-weight: 300;
    padding: 0 0 7px 17px;
	}









/*--------------------------------------------------------------
# 	Navigation (Top Menu)
--------------------------------------------------------------*/



header#masthead .secondary-navigation ul.menu a {
	color: #222;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 0.05em;
    }



/*--------------------------------------------------------------
# 	Navigation - MOBILE
--------------------------------------------------------------*/


#site-navigation-menu-toggle {
	color: #222;
	background-color: #cec8c0;
	border: none;
	}











/*--------------------------------------------------------------
# 	Startseite
--------------------------------------------------------------*/

.home .entry-content #godzilla-kreis {
	/*position: absolute;
	z-index: 99;
	left: 50%;                    
	transform: translateX(-50%);  
	top: 400px;                   
	max-width: 100%;              
	height: auto;
	*/
	}
.home .entry-content #kakoii {
	
	}


/* Bild-Ticker */
.infinite-image-ticker {
  overflow: hidden;
  width: calc(100vw + 42px);
  background: transparent;
  margin: 0 0 0 -42px;
  white-space: nowrap;
}

.ticker-wrapper {
  display: flex;
  animation: scroll-left 20s linear infinite;
}

.ticker-image {
  max-height: 800px;
  width: auto;
  flex-shrink: 0;
  user-drag: none;
  -webkit-user-drag: none;
}

/* Animation */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Pause bei Hover */
.infinite-image-ticker:hover .ticker-wrapper {
  animation-play-state: paused;
}





/* T-Shirt Motive */

.home .wp-block-woocommerce-product-collection ul.wc-block-product-template {
	margin: 0 0 30px 0;
	}
.home .wp-block-woocommerce-product-collection ul.wc-block-product-template li.wc-block-product {
	border: 1px solid #79736b;
	border-radius: 3%;
	background-color: #e4e4e4;
	}
.home .wp-block-woocommerce-product-collection ul.wc-block-product-template li.wc-block-product.post-220 {
	background-color: #373430;
	}








/*--------------------------------------------------------------
----------------------------------------------------------------

# 							WOOCOMMERCE

----------------------------------------------------------------
--------------------------------------------------------------*/



#page .woocommerce-products-header {
	padding-bottom: 3em
	}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	background-color: #625c54;
	}
.woocommerce-info a.button,
.woocommerce-message a.button,
.woocommerce-error a.button {
	display:block;
	float: none;
	padding-left: 0;
	margin-left: 0;
	border-left: 0;
	}

.woocommerce .wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
	background-color: #625c54;
	}






/*--------------------------------------------------------------
# 	Shop Page
--------------------------------------------------------------*/

.woocommerce.archive #main .storefront-sorting {
	display: none;
	}
.woocommerce.archive #main .storefront-sorting {
	display: none;
	}
.woocommerce.archive #main ul.products li.product .add_to_cart_button {
	display: block;
	margin-top: 10px;
	}
.woocommerce.archive #main ul.products li.product p.delivery-time-info {
	display: none;
	}
.woocommerce.archive #main ul.products li.product a.add_to_cart_button {
	display: none;
	}
.woocommerce.archive #main ul.products li.product ul.variations {
	align-items: center;
	}


.woocommerce.archive #main ul.products {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 20px;
	}
.woocommerce.archive #main ul.products:before {
	display: none;
	}
.woocommerce.archive #main ul.products > li.product {
	width: 100%;
	}


@media (max-width: 2000px) {
	.woocommerce.archive #main ul.products { 
		grid-template-columns: repeat(6, 1fr); 
		}
}
@media (max-width: 1600px) {
	.woocommerce.archive #main ul.products { 
		grid-template-columns: repeat(5, 1fr); 
		}
}
@media (max-width: 1200px) {
	.woocommerce.archive #main ul.products { 
		grid-template-columns: repeat(4, 1fr); 
		}
}
@media (max-width: 1024px) {
	.woocommerce.archive #main ul.products { 
		grid-template-columns: repeat(3, 1fr); 
		}
}
@media (max-width: 768px) {
	.woocommerce.archive #main ul.products { 
		grid-template-columns: repeat(2, 1fr); 
		}
}
@media (max-width: 480px) {
	.woocommerce.archive #main ul.products { 
		grid-template-columns: 1fr; 
		}
}










/*--------------------------------------------------------------
# 	Product Page
--------------------------------------------------------------*/


/* Produktbild */
.woocommerce.single-product .product .woocommerce-product-gallery img {
	width: 100%;
	}
.woocommerce-product-gallery__image {
	position: relative;
    overflow: hidden;           /* verhindert Layout-Shifts beim Opacity-Wechsel */
}

.variation-hover-preview {
    backface-visibility: hidden; /* GPU-Beschleunigung = 0 Ruckler */
    transform: translateZ(0);    /* zwingt Hardware-Beschleunigung */
}




/* Produktbeschreibung */
.woocommerce.single-product .product .woocommerce-tabs #tab-description {
	max-width: 768px;
	}
.woocommerce.single-product .product .woocommerce-tabs #tab-description span.copyright {	
    display: block;
    margin: 50px 0 -25px 0;
    border-top: 1px solid #bebebe;
    padding-top: 30px;
    clear: both;
	}



/* Produktvariationen */
.woocommerce.single-product .product form.variations_form {
	margin: 0;
	padding: 0;
	}
.woocommerce.single-product .product form.variations_form ul.radio-variable-items-wrapper {
	flex-direction: row;
	justify-content: flex-start !important;
	align-items: flex-start !important;	
	padding: 0;
	margin: 0;
	}
	
.woocommerce.single-product .product form.variations_form ul.radio-variable-items-wrapper li.radio-variable-item.selected label {
	background: #87837D;
	color: #fff;
	}
.woocommerce.single-product .product form.variations_form ul.radio-variable-items-wrapper li.radio-variable-item.selected label .variable-item-radio-value-wrapper {
	background: transparent;
	color: #fff;
	}
.woocommerce.single-product .product form.variations_form ul.radio-variable-items-wrapper li.radio-variable-item.disabled {
	display: none; /* Versteckte/Disabled-Elemente ausblenden */
	}	
.woocommerce.single-product .product form.variations_form .thwvsf_fields .thwvsf-rad-li {
	width: 100%;
	}
.woocommerce.single-product .product form.variations_form .thwvsf_fields .thwvsf-rad-li .th-label-radio {
	display: inline-flex;
	padding: 3px 10px 3px 28px;
	}	
	
/* Container für Radiobuttons */
.woocommerce.single-product .product form.variations_form ul.radio-variable-items-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0;
}

/* Styling für jedes Listenelement */
.woocommerce.single-product .product form.variations_form ul.radio-variable-items-wrapper li.radio-variable-item {
  margin: 0;
  padding: 0;
}

/* Verstecke das originale Radiobutton */
.variable-item-radio-input {
  display: none;
}

/* Styling für das Label, das den rechteckigen Rahmen bildet */
.variable-item-radio-input-wrapper {
  display: block;
  padding: 10px 15px;
  border: 2px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
  text-align: center;
  user-select: none;
}

/* Text innerhalb des Labels */
.variable-item-radio-value-wrapper {
  font-size: 14px;
  color: #222;
}

/* Hover-Effekt */
.variable-item-radio-input-wrapper:hover {
  border-color: #666;
  background-color: #f9f9f9;
}

/* Styling für ausgewählten Zustand */
.variable-item-radio-input:checked + .variable-item-radio-value-wrapper {
  border-color: #007bff;
  background-color: #e7f1ff;
  color: #007bff;
  font-weight: bold;
}

/* Styling für deaktivierte Optionen */
.variable-item.disabled .variable-item-radio-input-wrapper {
  border-color: #e0e0e0;
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Hover-Effekt für deaktivierte Optionen deaktivieren */
.variable-item.disabled .variable-item-radio-input-wrapper:hover {
  border-color: #e0e0e0;
  background-color: #f5f5f5;
}




/* Link "Zurücksetzen" */
.reset_variations {
	margin-top: 5px;
	}


.woocommerce.single-product table.variations tr {
	padding-bottom: 20px;
	}

/* Link zur Größentabelle */
.woocommerce.single-product table.variations tr.link-groessentabelle td a {
	font-weight: 500;
	}

.woocommerce.single-product table.variations .woo-variation-items-wrapper {
	margin-bottom: 0 !important;
	}

.woocommerce.single-product table.variations .woo-variation-items-wrapper .image-variable-items-wrapper {
	margin-bottom: 20px;
	}









/* Produkt-Beschreibung ausblenden */	
.woocommerce.single-product .product .woocommerce-tabs ul.tabs {
	display: none;
	}
.woocommerce.single-product .product .woocommerce-tabs .woocommerce-Tabs-panel--description {
	width: 100%;
	float: none;
	}	


/* Ähnliche Produkte (geändert in "Weitere T-Shirt-Motive") */
.woocommerce #content .woo-related-products-container > h2 {
	margin-bottom: 50px;
	} 
.woocommerce #content .woo-related-products-container ul.products {
	display: flex;
	justify-content: center;
	}
.woocommerce #content .woo-related-products-container ul.products li.product {
	width: 15%;
	float: none;
	margin: 0 10px;
	}
.woocommerce #content .woo-related-products-container ul.products li.product.last {
	margin-right: 10px !important;
	}
.woocommerce #content .woo-related-products-container ul.products li.product p,
.woocommerce #content .woo-related-products-container ul.products li.product a,
.woocommerce #content .woo-related-products-container ul.products li.product span.price {
	display: none;
	}
.woocommerce #content .woo-related-products-container ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	}
.woocommerce #content .woo-related-products-container ul.products li.product ul.variations li.woo-variation-items-wrapper {
	justify-content: center;
	}
.woocommerce #content .woo-related-products-container ul.products li.product ul.variations li.woo-variation-items-wrapper ul.archive-variable-items {
	justify-content: center;
	}






/* Hintergrund von Produktbild-Zoomansicht (fullscreen) */

#photoswipe-fullscreen-dialog .pswp__bg {
	background-color: #dbd7d2;
	}
#photoswipe-fullscreen-dialog .pswp__caption__center {
	color: #333;
	text-align: center;
	}


@media only screen and (max-width: 1168px) {

	.woocommerce #content .woo-related-products-container ul.products:before {
		display: none;
		}
	.woocommerce #content .woo-related-products-container ul.products {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		grid-gap: 20px;
		}
	.woocommerce #content .woo-related-products-container ul.products li.product {
		width: 100% !important;
		}
		
}	
	


/* Storefront Product Pagination: Button für vorheriges/nächstes Produkt */
.woocommerce #content .storefront-product-pagination > a[rel=prev] {
	box-shadow: 5px 5px 10px 2px #b3ada3;
    border-radius: 0 15px 15px 0;
	}
.woocommerce #content .storefront-product-pagination > a[rel=next] {
	box-shadow: -5px 5px 10px 2px #b3ada3;
	border-radius: 15px 0 0 15px;
	}
.woocommerce #content .storefront-product-pagination > a[rel=prev] img {
    border-radius: 0 15px 15px 0;
	}
.woocommerce #content .storefront-product-pagination > a[rel=next] img {
	border-radius: 15px 0 0 15px;
	}


















/*--------------------------------------------------------------
# 	Cart / Warenkorb
--------------------------------------------------------------*/

.woocommerce-cart {
        
    	}






/*--------------------------------------------------------------
# 	Checkout / Kasse
--------------------------------------------------------------*/


.woocommerce-checkout .wc-block-components-button__text {
	color: #fff;
	}
















/*--------------------------------------------------------------
# 	KONTAKTFORMULAR auf der Seite KONTAKT
--------------------------------------------------------------*/

.kontakt .nf-form-cont {
	max-width: 400px;
	}
.kontakt .nf-form-cont .nf-form-content nf-field .nf-field-container {
	margin-bottom: 10px;
	}
.kontakt .nf-form-cont .nf-form-content nf-field .nf-field-container .nf-field .nf-field-element input,
.kontakt .nf-form-cont .nf-form-content nf-field .nf-field-container .nf-field .nf-field-element textarea {
	font-size: 15px;
	color: #605e5b;
	background-color: #f2f2f2; 
	padding: 5px 7px;
	}
.kontakt .nf-form-cont .nf-form-content nf-field .textarea-container {
	margin-bottom: 10px;
	}
.kontakt .nf-form-cont .nf-form-content nf-field .textarea-container .nf-field .nf-field-element textarea {
	max-height: 120px;
	}	
.kontakt .nf-form-cont .nf-form-content nf-field .textarea-container .nf-input-limit {
	margin-top: 0;
	}	
.kontakt .nf-form-cont .nf-form-content nf-field .submit-container .nf-field .nf-field-element input[type=submit] {
	color: #fff;
	background-color: #87837D;
	width: 100%;
	}













/*--------------------------------------------------------------
# 	KONTAKTFORMULAR / NINJA FORMS im FOOTER
--------------------------------------------------------------*/

footer#colophon .nf-form-cont .nf-form-content nf-field .nf-field-container {
	margin-bottom: 5px;
	}
footer#colophon .nf-form-cont .nf-form-content nf-field .nf-field-container .nf-field .nf-field-element input,
footer#colophon .nf-form-cont .nf-form-content nf-field .nf-field-container .nf-field .nf-field-element textarea {
	font-size: 15px;
	color: #605e5b;
	background-color: #d6d3cf; 
	padding: 5px 7px;
	}
footer#colophon .nf-form-cont .nf-form-content nf-field .textarea-container {
	margin-bottom: 10px;
	}
footer#colophon .nf-form-cont .nf-form-content nf-field .textarea-container .nf-field .nf-field-element textarea {
	max-height: 80px;
	}	
footer#colophon .nf-form-cont .nf-form-content nf-field .textarea-container .nf-input-limit {
	margin-top: 0;
	}	
footer#colophon .nf-form-cont .nf-form-content nf-field .submit-container .nf-field .nf-field-element input[type=submit] {
	color: #fff;
	background-color: #87837D;
	width: 100%;
	}





/*--------------------------------------------------------------
# 	SEITEN MIT SCHMALEM CONTENT
--------------------------------------------------------------*/


@media (min-width: 768px) {
	
    .woocommerce-cart .wc-block-cart,
    .woocommerce-checkout  .wp-block-woocommerce-germanized-pro-multilevel-checkout {
        max-width: 1000px;
        margin: 0;
    	}
	.woocommerce-order-received .woocommerce-order {
		max-width: 600px;
		margin: 0;
		} 
	.kontakt #primary,
	.versandkonditionen #primary,
	.umtausch-rueckgabe #primary {
		max-width: 768px;
		}	   	
}




/*--------------------------------------------------------------
# 	SEITEN MIT SEHR SCHMALEM CONTENT
--------------------------------------------------------------*/

.woocommerce-form-login,
.woocommerce-ResetPassword {
	max-width: 400px;
	}




/*--------------------------------------------------------------
# 	SEITEN MIT SEHR SCHMALEM CONTENT
--------------------------------------------------------------*/

.groessentabelle table#groessentabelle {
	max-width: 400px;
	}







/*--------------------------------------------------------------
# 	FOOTER
--------------------------------------------------------------*/

footer#colophon {
	background-color: #cec8c0;
	/*border-bottom: 30px solid #BDB5A6;*/
	position: relative;
	}
footer#colophon p,
footer#colophon a {
	font-size: 15px;
	text-decoration: none;
	}
footer#colophon .site-info {
	display: none;
    position: absolute;
    bottom: -33px;
    left: 10px;
    height: 30px;
    padding: 0;
    color: #ddd;
	}	
footer#colophon .site-info a,
footer#colophon .site-info span {
	display: none;
	}
footer#colophon .footer-widgets {
	padding-bottom: 150px;
	}
footer#colophon .footer-widgets .widget-title,
footer#colophon .footer-widgets #block-10,
footer#colophon .footer-widgets #block-15 {
	margin-bottom: 0;
	padding-bottom: 0.5em;
	}
footer#colophon .footer-widgets .widget_nav_menu ul li {
	margin-bottom: 0.1em;
	}

footer#colophon .footer-widgets #block-7 {
	margin-bottom: 0;
	}
footer#colophon .footer-widgets #block-7 p {
	margin-bottom: 10px;
	}
footer#colophon .footer-widgets #block-14 img {
	max-width: 200px;
	border-radius: 0 0 10% 10%;
	}
footer#colophon .footer-widgets #nav_menu-6 {
	margin-bottom: 40px;
	}





/* Newsletter-Anmeldung (Shortcode aus functions.php) */
footer#colophon .footer-widgets #block-18 {
	margin-bottom: 0;
	}	
footer#colophon .footer-widgets #block-20 .tnp-subscription {
	margin-top: -30px;
	}
footer#colophon .footer-widgets #block-20 .tnp-subscription .tnp-field {
	margin-bottom: 5px;
	}
footer#colophon .footer-widgets #block-20 .tnp-subscription .tnp-field input {
	font-size: 15px;
    color: #605e5b;
    background-color: #d6d3cf;
    padding: 5px 7px;
    width: 100%;
	}
footer#colophon .footer-widgets #block-20 .tnp-subscription .tnp-field input[type=checkbox] {
	width: auto;
	}
footer#colophon .footer-widgets #block-20 .tnp-subscription .tnp-field input[type=submit] {
    color: #fff;
    background-color: #87837D;
    }



@media only screen and (max-width: 768px) {
	
	footer#colophon {
		/*border-bottom-width: 80px;*/
		}
	footer#colophon .footer-widgets {
		padding-bottom: 240px;
		}	
	/*
	footer#colophon .footer-widgets #block-14 img {
		margin: 0 auto;
		}
	footer#colophon .footer-widgets #block-15 {
		text-align: center;
		}
	*/					
}



/* Payment Icons */

footer#colophon .footer-widgets .wp-block-gallery {
  justify-content: flex-start;  /* Optional: Gleichmäßiger Abstand */
}
footer#colophon .footer-widgets .wp-block-gallery .wp-block-image {
  max-width: 50px;
}




/* Rothenburg Skyline */
footer#colophon #rotheburg-skyline {
	position: absolute;
	bottom: 50px;
	right: 0;
	max-width: 600px;
	margin: 0 20px;
	}

footer#colophon #new-site-info {
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #BDB5A6;
	color: #222;
	font-weight: 300;
	text-align: center;
	width: 100%;
	height: 50px;
	padding: 15px 20px 13px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	}
footer#colophon #new-site-info a {	
	color: #222;
	}	
footer#colophon #new-site-info #new-site-info-right {
	display: flex;
	align-items: flex-end;	
	}	
footer#colophon #new-site-info #new-site-info-right img {
	max-width: 33px;
	float: left;
	margin: 0 20px;
	}



@media only screen and (max-width: 768px) {
		
	footer#colophon #rotheburg-skyline {
		right: unset;
		bottom: 120px;
		}
	footer#colophon #new-site-info {	
		flex-direction: column;
		align-items: center;
		height: auto;
		}
	footer#colophon #new-site-info #new-site-info-right {
		flex-direction: column;
		align-items: center;
		}
	footer#colophon #new-site-info #new-site-info-right img {
		margin-top: 10px;
		}
			
}





/* Storefront Footer-Bar auf Mobile ausblenden */

.storefront-handheld-footer-bar {
	display: none;
	}