@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500&display=swap');

element.style {
}
.product-page-price .product-price--regular, .product-page-price .product-price--special {
    font-size: 1.5rem;
}
.product-price--regular, .product-price--special {
    font-weight: 700; color: #ffd338 }

.active.tab-menu__item-button-desktop {
    background-color: var(--bs-primary);
    color: #ffd338 }


.product-card__details .product-card__details-button {
    background-color: #ffd338; /* Yellow background color */
    color: #000000; /* Optional: Set text color to black for contrast */
}

.product-card__addtocart .button-add-to-cart span {
    color: #ffd338; /* Yellow color */
}

.product_table_addtocartbtn .button-add-to-cart {
    background-color: #ffd338; /* Yellow background color */
    color: #000; /* Ensure text color is black for contrast */
    border: none; /* Remove border if it clashes with the new background color */
    padding: 10px 20px; /* Add padding for better appearance */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Ensure the element behaves like a button */
}

.location-wrapper-box-left {
    display: flex;
    justify-content: center; /* Vízszintes középre igazítás */
    align-items: center;     /* Függőleges középre igazítás */
    height: 100%;             /* Biztosítja, hogy a szülőelem rendelkezik magassággal */
}

img.location-pic {
    max-width: 100%; /* Biztosítja, hogy a kép ne lépje túl a szülőelem szélességét */
    height: auto;    /* Megőrzi a kép arányait */
}


/* Targeting all footer links for hover effect */
.footer-row .information-box__item-link:hover,
.footer-row .contact-box__item-link:hover,
.footer-row .social-link:hover {
    color: #ffd338; /* Change text color to yellow on hover */
    text-decoration-color: #ffd338; /* Change underline color to yellow on hover */
}

/* If you want to include the hover effect for the social icons as well */
.footer-row .social-link:hover svg path {
    fill: #ffd338; /* Change icon color to yellow on hover */
}

/* Modul wrapper */
.module-customcontent5-wrapper {
  display: flex;                /* Flexbox használata */
  justify-content: center;      /* Középre igazítás vízszintesen */
  width: 100%;                  /* Szélesség 100% */
  box-sizing: border-box;       /* Padding és border tartalmazása a szélességbe */
}

/* Modul */
.module-customcontent5-wrapper .module {
  max-width: 800px;             /* Maximális szélesség beállítása */
  width: 100%;                  /* Az egész rendelkezésre álló szélességet kitölti */
  padding: 20px;               /* Padding beállítása */
  box-sizing: border-box;      /* Padding és border tartalmazása a szélességbe */
}

/* Tábla beállításai */
.module-customcontent5-wrapper table {
  width: 100%;                  /* A tábla kitölti a szülőelemet */
  border-collapse: collapse;    /* Cellák közötti vonalak eltüntetése */
}

/* Képek reszponzív viselkedésének biztosítása */
.module-customcontent5-wrapper img {
  width: 100%;                  /* Kép reszponzivitásának biztosítása */
  height: auto;                 /* Arányok megőrzése */
  display: block;               /* Az inline spacing eltávolítása */
}

/* Reszponzív dizájn kisebb képernyőkre */
@media (max-width: 768px) {
  .module-customcontent5-wrapper .module {
    padding: 10px;              /* Kevesebb padding kisebb képernyőkön */
  }
}

.module-head-title{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.module-body span{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.news-card__link{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}

.subscribe-button .btn.btn-primary:hover {
    background-color: #ffd338;
}

.location-button.btn.btn-primary {
    color: #ffd338;
}

.product-card__manufacturer-sku{
	text-align:center;
}

.ext-sku {
	display:inline-block;
	background:none;
	text-align:center;
	color:#000;
	padding:2px 8px;
	margin-left:3px;
	margin-top:4px;
	font-size:12px;
	font-weight:bold;
	border:1px solid #4f4f4f;
}

.shipping-info {
	background:none;
	text-align:center;
	color:#000;
	padding:2px 8px;
	margin-top:5px;
	font-size:11px;
	font-weight:bold;
	border:1px solid #4f4f4f;
}

.ext_strip_yellow{
	background:#ffd200;
	margin-top:5px;
	padding:3px;

}
.ext_strip_orange{
	background:#ff8541;
	margin-top:5px;
	padding:3px;
	
}

.product-card__manufacturer{
 
    background:#000;
    padding:3px;
    color:#fff;
    text-align:center;
    
}

.product-card__manufacturer__link{
    
    color:#fff !important;
    font-family: Poppins,sans-serif;
    text-transform: uppercase;
    margin-top:0px;
    margin-bottom:0px;
}

.product-card__title-link{
    font-family: Poppins,sans-serif;
}

.product-card__item{
    margin-top:3px !important;
    margin-bottom:3px !important;
    
}

.product-card__addtocart{
	display:none;	
}

.product-desc{
	font-size:15px;

}
.product-desc p{

	font-weight: normal;
}

.subcategory__link{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
	text-transform: uppercase;
}
.product-page-product-name{
	font-family: Poppins,sans-serif;
	text-transform: uppercase;
}
.advantages-item__title{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.mosaic-item__title{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.module-head-title{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.product-card__details {
    display: flex;           /* Flexbox használata */
    justify-content: center; /* Középre igazítás vízszintesen */
    width: 100%;             /* Teljes szélesség kitöltése */
}
.page-head-title{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.coupon-title{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.tab-menu__item-button-desktop{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.product-option__title{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.footer-row .module-head-title{
	font-family: "Kanit", sans-serif;
	font-weight: 500;
	font-style: normal;
}
.product-card__details-button {
    width: auto;            /* Igény szerint lehet auto vagy 100% */
    text-align: center;     /* Szöveg középre igazítása */
    padding: 10px 20px;     /* Gomb méretének igazítása */
    box-sizing: border-box; /* Padding miatt ne lógjon ki */
    white-space: nowrap;    /* Ha hosszabb a szöveg, ne törjön sorba */
}

.product-card__details-button {
    display: block;               /* Blokkszintű elem, hogy a gomb a teljes szélességet felvegye */
    width: 100%;                  /* A gomb szélessége a szülő elem szélességéhez igazodik */
    max-width: 300px;             /* Maximális szélesség korlátozása, ha szükséges */
    padding: 12px 20px;           /* Elegendő hely a szövegnek */
    font-size: 12px;              /* A szöveg jól olvasható mérete */
    background-color: #f0f0f0;    /* Alap háttérszín */
    text-align: center;           /* Szöveg középre igazítása */
    white-space: nowrap;          /* A szöveg egy sorban maradjon */
    box-sizing: border-box;       /* A padding ne növelje a szélességet */
    border: none;                 /* Keret eltávolítása */
    overflow: hidden;             /* Biztosítjuk, hogy a tartalom ne lógjon ki */
    margin: 0 auto;               /* Középre igazítjuk a gombot a szülő elemben */
    color: #000;                  /* Alap szöveg szín */
    transition: all 0.3s ease;    /* Lágy átmenet a hover állapothoz */
}

.product-card__details-button:hover {
    background-color: #000;       /* Hover esetén fekete háttér */
    color: #ffcc00;               /* Hover esetén sárga szöveg */
    cursor: pointer;              /* Hover esetén mutató kéz ikon */
}

/* "Méret" felirat lecserélése "Veľkosť:"-ra, extra térközzel */
.product-option__name {
    visibility: hidden;
    position: relative;
    display: inline-block;
    width: 100%; /* hogy ne csússzon rá a dropdown */
}

.product-option__name::after {
    content: "Veľkosť:";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    padding-right: 8px; /* ez ad egy kis helyet a választó előtt */
}

/* "db" lecserélése "ks."-re */
.quantity-name-text {
    visibility: hidden;
    position: relative;
}

.quantity-name-text::after {
    content: "ks.";
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
}

label[for="city"] {
  visibility: hidden;
  position: relative;
}

label[for="city"]::after {
  content: "mesto";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

label[for="address_2"] {
  visibility: hidden;
  position: relative;
}

label[for="address_2"]::after {
  content: "Poschodie, dvere, iné";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

label[for="address_2"] {
  visibility: hidden !important;
  position: relative !important;
}

label[for="address_2"]::after {
  content: "Poschodie, dvere, iné" !important;
  visibility: visible !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-family: inherit !important;
}