/*
Theme Name: shinsockz.com (2025)
Theme URI: https://wordpress.org/themes/twentytwentyfour
Author: Louis Hagemann
Author URI: https://wordpress.org
Description: Theme für shinsockz.com (2025). 
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: sz

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* #################################################################################################### */

/* variables & colors */

:root {
	--orange: #FF7905;
	--orangehover: #ff9d01;
	--black: #0B0B0B;
	--lightblack: #636363;
	--white: #ffffff;
}

/* #################################################################################################### */


/* ##################### TYPO ###################### */

body {
	font-family: 'quicksand', sans-serif; 
	font-weight: 400;
	background-color: #0B0B0B;
	color: #ffffff;
	font-size: 1.2rem;
}
.woocommerce-cart #main,
.woocommerce-checkout #main{
  background-color: #ffffff !important;
  color: #0B0B0B !important;
  padding: 10px 20px;
}
.peckham-press {
	font-family: "peckham-press", "Alumni Sans Inline One", sans-serif;
	font-weight: 400;
}
.has-intro-font-size {
	font-size: 1.3rem;
	font-weight: 400 !important;
	line-height: 1.6;
}

.has-icon-font-size {
	font-size: 8rem !important;
	font-weight: 400 !important;
	line-height: 1.6;
	margin: 0;
}

.has-h-1-font-size,
.h1, h1 {
	color: var(--white);
	font-family: "peckham-press", "Alumni Sans Inline One", sans-serif;
	text-transform: uppercase;
	font-size: clamp(1.75rem, calc(1.375rem + 1.5vw), 3rem) !important;
	line-height: 1.2;
	margin: 0;
}
.has-h-2-font-size,
.h2, h2 {
	color: var(--white);
	font-family: "peckham-press", "Alumni Sans Inline One", sans-serif;
	text-transform: uppercase;
	font-size: clamp(1.5rem, calc(1.325rem + .9vw), 2.2rem) !important;
	line-height: 1.2;
	margin: 0;
}

.has-h-3-font-size,
.h3, h3 {
	color: var(--white);
	font-size: clamp(1.3rem, calc(1.3rem + .6vw), 1.8rem) !important;
	line-height: 1.2;
	margin: 0;
}

.has-h-4-font-size,
.h4, h4 {
	color: var(--white);
	font-size: clamp(1.275rem, calc(1.275rem + .3vw), 1.5rem) !important;
	line-height: 1.2;
	margin: 0;
}

.has-h-5-font-size,
.h5, h5 {
	color: var(--white);
	font-size: 1.25rem !important;
	line-height: 1.2;
	margin: 0;
}

.has-h-6-font-size,
.h6, h6 {
	color: var(--white);
	font-size: 1rem !important;
	line-height: 1.2;
	margin: 0;
}

.has-h-1-font-size > em, h1 > em, .h1 > em,
.has-h-2-font-size > em, h2 > em, .h2 > em,
.has-h-3-font-size > em, h3 > em, .h3 > em,
.has-h-4-font-size > em, h4 > em, .h4 > em,
.has-h-5-font-size > em, h5 > em, .h5 > em,
.has-h-6-font-size > em, h6 > em, .h6 > em {
	font-style: normal;
	padding: 0 .3rem;
	background: linear-gradient(
		to bottom,
		transparent 50%,
		var(--orange) 50%
	);
}
body.backup-font .has-h-1-font-size,
body.backup-font .h1, body.backup-font h1,
body.backup-font .has-h-2-font-size,
body.backup-font .h2, body.backup-font h2,
.woocommerce-variation-add-to-cart button{
  	font-size: clamp(3.5rem, calc(1.325rem + .9vw), 2.2rem) !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
body.backup-font .peckham-press {
	font-size: clamp(1.5rem, calc(1.325rem + .9vw), 2.2rem) !important;
	text-transform: uppercase;
}
#BorlabsCookieEntranceA11YHeadline {
	font-size: clamp(2.5rem, calc(1.325rem + .9vw), 2.2rem) !important;
}

a {
	color: var(--orange);
	text-decoration: none;
	transition: all ease .3s;
}
a:hover {
	color: var(--orangehover);
}
button {
	background-color: var(--orange)!important;
	color: var(--white)!important;
	font-size: 1.2rem;
	font-weight: 400;
	text-transform: uppercase;
	transition: all ease .3s;
}
button:hover {
	background-color: var(--orangehover);
	color: var(--white)!important;
}
/* WooCommerce Add to Cart Buttons global stylen */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
  background-color: var(--orange);
  color: white;
  border: solid 1px var(--orange);
  padding: 12px 18px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover-Effekt */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--white); /* dunkleres Orange */
  color: var(--orange);
}

/*.btn-card {
	background-color: var(--orange)!important;
	color: var(--white)!important;
	font-size: 1.2rem;
	font-weight: 400;
	text-transform: uppercase;
	transition: all ease .3s;
	padding: 10px 20px;
	border-radius: 5px;
	border: none;
}*/
.wp-block-button__link {
	background-color: var(--orange)!important;
	color: var(--white)!important;
	border: solid 2px var(--orange)!important;
	font-size: 1.2rem;
	text-transform: uppercase;
	transition: all ease .3s;
}
.wp-block-button__link:hover {
	background-color: var(--white)!important;
	color: var(--orange)!important;}
ul {
	list-style: none;
}
/* ##################### header ###################### */

/* ###################### BURGER HEADER + CART ###################### */

body.menu-open,
body.cart-open {
	overflow: hidden;
}

/* Sticky Header mit Shrink-Effekt beim Scrollen */
#header {
	position: sticky;
	top: 0;
	z-index: 1000;
	height: 100px;
	background-color: var(--black);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
}
.header-content {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-logo {
  position: relative;
  width: 200px; /* oder deine feste Breite */
  height: 50px; /* oder deine feste Höhe */
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-logo img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 200px;
  height: 52px;
  width: 100%;
  transition: opacity 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.site-logo .logo-main {
  opacity: 1;
  visibility: visible;
}
#header.shrink {
  height: 80px;}
#header.shrink .logo-main {
  opacity: 0;
  visibility: hidden;
}

#header.shrink .logo-small {
  opacity: 1;
  visibility: visible;
}

.btn-burger {
	background-color: var(--black)!important;
}

.burger-toggler {
	border: none;
	width: 30px;
	height: 24px;
	padding: 4px 0px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	z-index: 1101;
}

.burger-toggler .burger-line {
	height: 3px;
	background: var(--white);
	width: 100%;
	transition: all 0.3s ease;
}

.burger-toggler.active .top {
	transform: rotate(45deg) translate(5px, 5px);
}

.burger-toggler.active .bottom {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* Burger-Overlay */
.burger-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: var(--black);
	transform: translateX(-100%);
	transition: transform 0.4s ease;
	z-index: 1100;
	padding: 5rem 2rem;
	text-align: left;
}

.burger-menu.active {
	transform: translateX(0);
}

.burger-nav-list {
	list-style: none;
	padding: 10px 20px;
	margin: 0px;
}


.burger-nav-list li {
	margin-bottom: 1rem;
	text-decoration: none;
	
}

.burger-nav-list a {
	font-size: 1.6rem;
	color: var(--white);
	font-weight: 700;
	text-transform: uppercase;
}

/* Cart */
.cart-icon {
	position: relative;
	font-size: 1.4rem;
	color: var(--white);
	text-decoration: none;
}

.cart-icon:hover {
	color: var(--orange);
}

.cart-icon .cart-count {
	position: absolute;
	top: -6px;
	right: -10px;
	background: var(--orange);
	color: #fff;
	font-size: 0.7rem;
	padding: 2px 6px;
	border-radius: 50%;
	font-weight: bold;
}

/* Mini-Cart */
.mini-cart-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 300px;
	height: 100vh;
	background-color: var(--white);
	box-shadow: -2px 0 10px rgba(0,0,0,0.4);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	z-index: 1101;
	padding: 2rem;
	overflow-y: auto;
	color: var(--black);
}
.mini-cart-panel h2 {
	color: var(--black);
}

.mini-cart-panel.active {
	transform: translateX(0);
}

.mini-cart-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 1.2rem;
	cursor: pointer;
	color: var(--white);
	transition: all ease 0.3s;
}
.woocommerce-mini-cart {
	padding: 0!important;
}
.mini-cart-close:hover {
	color: var(--orange);
}
.woocommerce-mini-cart-item.woosb-cart-child {
    display: none;
}
.woocommerce-mini-cart__buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Dimmer-Hintergrund */
.overlay-dim {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: var(--lightblack);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 1099;
}

.overlay-dim.active {
	opacity: 1;
	visibility: visible;
}
.header-account {
  display: inline-block;
  position: relative;
}
.account-toggle {
	background-color: transparent !important;
	border: none !important;
}

.header-account .account-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--black);
  color: #fff;
  padding: 0.5rem 1rem;
  display: none;
  z-index: 999;
  border: 1px solid #333;
  min-width: 150px;
}

.header-account .account-dropdown a {
  /* color: #fff;
  text-decoration: none;*/
  display: block;
  padding: 0.25rem 0;
}

.header-account.show-dropdown .account-dropdown {
  display: block;
}

/* WPML-Flags im Menü nebeneinander */
.burger-nav-list {               /* deine UL-Klasse im Offcanvas */
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* normale Menüeinträge weiter als volle Zeile */
.burger-nav-list > li:not(.wpml-ls-item) {
  flex: 1 0 100%;
}

/* nur die WPML-Items (Flags) bekommen Auto-Breite und stehen in einer Reihe */
.burger-nav-list > li.wpml-ls-item {
  flex: 0 0 auto;
}

/* Flag-Größe (optional) */
.burger-nav-list .wpml-ls-flag { width: 24px; height: auto; display: block; }


/*############## Header text animation ################*/

.scroll-strip {
    position: relative;
    overflow: hidden;
    background: var(--lightblack);          /* Hintergrundfarbe */
    color: #fff;               /* Schriftfarbe */
    padding: 0.5em 0;
    font-size: 1rem;
}

.scroll-strip__inner {
    display: inline-block;
    white-space: nowrap;
	}

/* ################################################# */

/* ##################### FOOTER ###################### */
footer, #footer {
	background-color: var(--lightblack);
	padding: 2rem 0;
}
.footer-shop-nav > ul > li > a {
padding: 0 1rem;
}
.benefits-list li::before {
	font-family: "sz_iconfont"; /* oder dein benutzerdefinierter Fontname */
  content: "\e808";        /* Unicode deines Icons, z. B. das für "arrow" */
  margin-right: 5px;
  color: var(--white);
  font-size: 1rem;
  display: inline-block;
}
#legal-nav {
    text-align: right;
	padding-left: 0;
}
#legal-nav ul.nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
	align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

#legal-nav li {
    display: inline;
}


#legal-nav a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.9rem;
}

#legal-nav a:hover {
    text-decoration: underline;
}

#legal-nav .shipping a::before {
  font-family: 'sz_iconfont';
  content: '\e812'; /* z. B. LKW-Icon */
  margin-right: 5px;
  font-size: 1rem;
}

#legal-nav .payment a::before {
  font-family: 'sz_iconfont';
  content: '\e816'; /* Kreditkarte */
  margin-right: 5px;
  font-size: 1rem;	
}

#legal-nav .cancellation a::before {
  font-family: 'sz_iconfont';
  content: '\e810'; /* Storno-Icon */
  margin-right: 5px;
  font-size: 1rem;
}
#menu-footer-shop-nav .nav-link {
	padding: 5px 0px;
}
#mailpoet_form_1 {
	padding: 5px;
	background-color: var(--black);
	border-radius: 20px!important;
}
.wpml-ls-link {
	color: var(--white);
	background-color: var(--orange);
}

/*##################### Dashboard #######################*/
.woocommerce-account .woocommerce-MyAccount-navigation {
	background-color: var(--lightblack);
	border-radius: 5px;
	padding: 1rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
	color: var(--white);
	font-weight: 500;
	text-transform: uppercase;
	transition: all ease .3s;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	color: var(--orange);
}
.woocommerce{
	padding-top: 20px;
}

/*##################### archieve-Product #######################*/


.woocommerce span.onsale {
	top: 1.5em!important;
	left: -0.25em!important;
	background-color: var(--orange)!important;
	border-radius: 0%!important;
	width: 33%!important;
	min-height: 2.24em!important;
	line-height: 2.24em!important;
	text-transform: uppercase!important;
}

/*##################### Product-card.php #######################*/


.icon-card span {
  background-color: var(--orange);
  border-radius: 50%;
  padding: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  width: 40px;
  height: 40px;
}
.see-more-toggle {
    display: inline-flex;          /* Flexbox aktivieren */
    align-items: center;           /* Vertikal zentrieren */
    gap: 0.5rem;                   /* Abstand zwischen Icon und Text */
}

.see-more-toggle .icon-arrow-long-right {
    line-height: 1;                /* Verhindert, dass das Icon hoch-/runterhüpft */
    display: inline-block;         /* Stabilisiert die Ausrichtung */
}


/*##################### Single-Product #######################*/

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb {
	color: var(--orange)!important;
}
.woocommerce .woocommerce-breadcrumb {
	margin: 1rem 1rem !important;

}
.woocommerce-product-summary h1 {
	font-size: clamp(1.5rem, calc(1.325rem + .9vw), 2.2rem) !important;
}
.quantity {
	margin: 10px 0;
}
.woocommerce-product-summary .price {
	color: var(--orange);
}
.variations_form {
	margin: 20px 0;
}
.variations select {
	margin: 10px 5px;
}
.woocommerce-product-summary .product_meta {
	display: none;
}
.woocommerce-variation-add-to-cart{
	display: flex;
	gap: 8px;
	align-items: center;
}
.woocommerce-variation-add-to-cart button {
	font-size: 1.2rem;
	font-family: "peckham-press", "Alumni Sans Inline One", sans-serif;
	padding: 13px 15px 10px 15px!important;
}
.line {
	display: block;        /* Damit es wie ein <hr> eine eigene Zeile einnimmt */
	height: 2px;           /* Dicke der Linie */
	background: var(--orange);      /* Farbe der Linie, z.B. weiß */
	width: 100%;           /* Volle Breite des Containers */
	margin: 2rem 0;        /* Abstand oben/unten */
	border-radius: 2px;
}
.thumb-img {
    border: none;
    transition: border 0.2s;
}
.thumb-img:hover,
.thumb-img.active {
    border: 2px solid var(--orange);
}
#mainProductImg {
	max-height: 500px!important;
}
.in-stock {
	display: none;
}
.related {
	margin-top: 50px;
}
.woocommerce-Tabs-panel--additional_information {
display: none;
}
#tab-title-additional_information {
	display: none;
}
#tab-title-description {
	display: none;
}
/*.woocommerce-loop-product__title {
	font-size: .95rem !important;
	padding: 0px 5px;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
	border-style: solid;
	border-width: 1px;
	border-color: var(--lightblack);
	border-radius: 10px;
}
.woocommerce ul.products li.product a img {
	border-radius: 7px 7px 0 0;
}
ul.products li.product {
  text-align: center;
  min-height: 530px;
  max-height: 530px;
}

ul.products li.product a.button {
  display: inline-block;
  margin: 1rem auto 1rem auto;
  text-align: center;
}*/
.img-thumbnail {
  padding: 0 !important;
  background-color: transparent !important;
  border: solid 1px var(--lightblack) !important;
}


/*ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .a {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}*/



/*##################### Cart-Page #######################*/
.woocommerce-cart-form__cart-item.woosb-cart-child {
    display: none;
}
/* Widgets / Sidebars */
.woocommerce ul.cart_list li.woosb-cart-child,
.woocommerce ul.product_list_widget li.woosb-cart-child {
    display: none;
}
.wc-block-components-product-name {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--black);
}
.wc-block-components-order-summary {
	background-color: var(--lightblack)!important;
}
.wc-block-cart-item__remove-link {
	color: var(--lightblack)!important;
	background-color: transparent !important;
}
.wc-block-cart-item__remove-link:hover {
	color: var(--black)!important;
}	
body.woocommerce-cart .site-main {
    /* nur auf der Warenkorb-Seite */
    padding: 2rem;
	color: var(--black);
}
body.woocommerce-cart #footer p {
	/* nur auf der Warenkorb-Seite */
	color: var(--white);
}
.wc-block-components-sale-badge {
	border-color: var(--orange);
	background-color: var(--orange);
	color: var(--white);
}
.wc-block-components-sidebar {
	background-color: var(--lightblack);
	border-radius: 5px;
	padding-right: 2.2641509434%;
	color: var(--white);
}
.wc-block-cart__empty-cart__title {
	color: var(--black);
}
.wp-block-woocommerce-empty-cart-block > h2{
	color: var(--black);
}
.wp-block-woocommerce-product-news-block {
	margin-top: 20px;
}

/*##################### MyAccount Page #######################*/

.woocommerce-MyAccount-navigation li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.woocommerce-MyAccount-navigation-link a {
  display: block;
  line-height: 1.4;
}


.woocommerce-MyAccount-navigation-link::before {
  content: '\f1e3'; /* Ersetze das mit deinem Icon-Code aus Fontello */
  font-family: 'sz_iconfont'; /* Stelle sicher, dass die Fontello-Schriftart geladen ist */
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 1rem;
  color: var(--white);
  vertical-align: middle;
}
.woocommerce-MyAccount-content {
  background-color: var(--black);
  padding: 5px;
}

/*############ Checkout Page #######################*/
.Block {
  background-color: var(--white)!important;
}



/*############ Thumbnails #######################*/

.single-page .post-thumbnail,
.page .post-thumbnail,
.featured-image {
  display: none !important;
}

/*##################### MEDIA QUERIES #######################*/

/*############### max-widht ##############*/

@media (max-width: 700px) {
  .header-account:hover .account-dropdown {
    display: block;
  }
  /*padding in warenkorbseite mobile*/
  .wc-block-components-sidebar-layout .wc-block-components-main, .wc-block-components-sidebar-layout .wc-block-components-sidebar {
	padding: 0px 10px !important;
  }
  .filter-submit-btn {
    order: 1; /* sorgt dafür, dass er nach allen Selects kommt */
    flex-basis: 100%; /* nimmt volle Breite ein */
  }
  .slider-reverse {
	flex-direction: column-reverse; /* Stellt sicher, dass der Slider unten ist */
  }

  /* Optional: Selects und Button gleichmäßig einreihen */
  form.d-flex.flex-wrap .form-select {
    flex: 1 1 calc(33.333% - 1rem); /* 3 pro Zeile, mit Abstand */
    min-width: 120px;
  }
}

/*############### min-widht ##############*/

@media (min-width: 972px) {
.burger-nav-list {
	position: relative;
	margin: 0px 45px;
	padding: 0px;
}
.burger-nav-list::after {
	content: "";
	position: absolute;
	top: 0;
	right: 60px;
	width: 500px;
	height: 100%;
	transform: rotate(12deg);
	background-image: url("assets/images/be-fresh-slogan-shinsockz.png");
	background-repeat: no-repeat;
	background-position: center;
}
/* Mini-Cart */
.mini-cart-panel {
	width: 400px;
}
}