/* ============================================
   GLAMGIRL.SK — vlastný CSS na vylepšenie vzhľadu
   Vložiť cez: Správa obsahu → Globálny HTML kód
   ============================================ */

/* --- Import moderného fontu pre nadpisy --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Poppins:wght@300;400;500;600&display=swap');

body {
  font-family: 'Poppins', sans-serif;
}

/* --- Hlavný nadpis sekcie (Najpredávanejšie NOVINKY) --- */
.pageTitle {
  font-family: 'Playfair Display', serif !important;
  font-size: 34px !important;
  letter-spacing: 0.5px;
  margin: 50px 0 30px 0 !important;
}

/* --- Pruh s výhodami (Tovar skladom / Doprava zdarma...) --- */
.page-width[style*="dfb8a6"] {
  padding: 25px 5px !important;
}
.page-width[style*="dfb8a6"] strong {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* --- PRODUKTOVÁ MRIEŽKA — viac vzduchu medzi kartami --- */
#mainPageProductsView {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px !important;
  padding: 0 10px;
}

/* --- PRODUKTOVÁ KARTA --- */
.c-product {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block;
  position: relative;
}
.c-product:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* --- Obrázok produktu --- */
.c-product .p-img {
  display: block;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  aspect-ratio: 3 / 4;
}
.c-product .p-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.c-product:hover .p-img img {
  transform: scale(1.05);
}

/* --- Názov produktu --- */
.c-product .p-subtitle {
  display: block;
  padding: 14px 14px 4px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

/* --- Cena --- */
.c-product .p-price {
  display: block;
  padding: 0 14px 16px 14px;
  font-size: 15px;
}
.c-product .p-price > span:first-child {
  font-weight: 600;
  font-size: 17px;
  margin-right: 8px;
}
.c-product .p-price .list-price {
  text-decoration: line-through;
  font-size: 13px;
  font-weight: 400;
}

/* --- Odznaky (badges: -40%, NOVINKA) --- */
.c-product .p-tags {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.p-discount.p-specialOffer {
  background: #855d4a !important;
  color: #fff !important;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  width: fit-content;
}
.tag_color2.p-specialOffer {
  background: #000 !important;
  color: #fff !important;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  width: fit-content;
}

/* --- Dostupnosť (Skladom / VYPREDANÉ) --- */
.p-availability {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.9);
  z-index: 2;
}

/* --- Quick actions (wishlist, quick view) --- */
.quick-container {
  position: absolute;
  bottom: 90px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}
.c-product:hover .quick-container {
  opacity: 1;
}
.quick-container span {
  background: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* --- Header / menu jemné doladenie --- */
.header {
  padding: 20px 0;
}
.shoppingCart .shoppingCartIn {
  transition: opacity 0.2s ease;
}
.shoppingCart .shoppingCartIn:hover {
  opacity: 0.7;
}

/* --- Nahradenie starého rozmazaného loga elegantným textovým logom --- */
#pageHeaderContent img {
  display: none !important;
}
#pageHeaderContent a {
  display: block;
  text-decoration: none;
}
#pageHeaderContent a:first-of-type {
  display: none;
}
#pageHeaderContent a:last-of-type::after {
  content: "GLAM GIRL";
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 46px;
  letter-spacing: 10px;
  color: #855d4a;
  text-align: center;
  padding: 45px 0 10px 0;
}
#pageHeaderContent::after {
  content: "DÁMSKA MÓDA & DOPLNKY";
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 4px;
  color: #999;
  text-align: center;
  padding-bottom: 35px;
}

/* --- Responzívne správanie na menších obrazovkách --- */
@media (max-width: 992px) {
  #mainPageProductsView {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  #mainPageProductsView {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px !important;
  }
  .pageTitle {
    font-size: 24px !important;
  }
}

/* ============================================
   OPRAVA VYBLEDNUTÉHO TEXTU (najsilnejšia verzia)
   Nastavuje farby priamo, bez opacity ako mostíka —
   niektoré staršie pravidlá tu boli zámerne vynechané
   (farba .p-subtitle a .p-price vyššie v súbore),
   aby toto bolo jediné miesto, ktoré ich určuje.
   ============================================ */
#mainPageProductsView .c-product,
#mainPageProductsView .c-product .p-subtitle,
#mainPageProductsView .c-product .p-price,
#mainPageProductsView .c-product .p-tags,
#mainPageProductsView .c-product .p-availability {
  opacity: 1 !important;
  filter: none !important;
}
#mainPageProductsView .c-product .p-subtitle {
  color: #333333 !important;
  -webkit-text-fill-color: #333333 !important;
}
#mainPageProductsView .c-product .p-price > span:first-child {
  color: #855d4a !important;
  -webkit-text-fill-color: #855d4a !important;
}
#mainPageProductsView .c-product .p-price .list-price {
  color: #aaaaaa !important;
  -webkit-text-fill-color: #aaaaaa !important;
}