/* krabica-style.css */
/* Základný + finálny štýl pre náhľady variantov - krabica.eu, v.1.1 */
/* Používa Bootstrap 5 ako základ */

/* Import základného písma (Príklad - nahraď podľa potreby) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  /* === Základné Nastavenia Farieb (Používame Bootstrap predvolené) === */
  /* Môžeš ich tu prepísať vlastnými farbami pre značku krabica.eu */

  /* Príklad prepísania primárnej farby (odkomentuj a uprav hex kód): */
  /* --bs-primary: #E87B36; */ /* Napríklad nejaká oranžová? */
  /* --bs-primary-rgb: 232, 123, 54; */

  /* === Základné Nastavenia Písma === */
  --bs-font-sans-serif: 'Inter', sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: #212529;
  --bs-body-bg: #ffffff;
  --bs-link-color: var(--bs-primary, #0d6efd);
  --bs-link-hover-color: var(--bs-link-hover-color, #0a58ca);

  /* === Ostatné Premenné === */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem; /* Menšie zaoblenie */
  --bs-border-color: #dee2e6;
}

/* Globálne štýly pre telo a písma */
body {
  font-family: var(--bs-font-sans-serif);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
    flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

a {
  color: var(--bs-link-color);
  text-decoration: none;
}
a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}


/* --- Základné štýly pre šablónu --- */

/* Hlavička (Placeholder) */
header.navbar {
   border-bottom: 1px solid var(--bs-border-color);
}
header.navbar .navbar-brand img {
    max-height: 40px;
}

/* Pätička (Placeholder) */
footer.footer {
   background-color: #343a40; /* Tmavšia päta */
   color: #adb5bd;
   padding-top: 3rem;
   padding-bottom: 2rem;
   font-size: 0.9em;
}
footer.footer h5 { /* Nadpisy v päte */
    color: #fff;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
footer.footer a {
   color: #adb5bd;
}
footer.footer a:hover {
   color: #fff;
}
footer.footer .copyright a {
     color: #adb5bd;
}


/* Produktová stránka - Tabuľka variantov */
/* --- FINÁLNA VERZIA PRAVIDLA --- */
.variant-table img.variant-thumbnail-square {
  display: block;
  width: 60px;    /* Nastav požadovanú šírku štvorca */
  height: 60px;   /* Nastav rovnakú výšku */
  object-fit: contain; /* Zachová pomer strán, celý obrázok viditeľný */
  padding: 0.25rem; /* Malý vnútorný okraj ako mala trieda img-thumbnail */
  background-color: #fff; /* Biele pozadie pre 'contain' */
  border: 1px solid var(--bs-border-color, #dee2e6); /* Orámovanie ako img-thumbnail */
  border-radius: var(--bs-border-radius-sm, 0.25rem); /* Zaoblenie rohov */
  box-sizing: border-box; /* Aby padding a border boli zahrnuté v rozmeroch */
}

.variant-table .btn-buy {
  white-space: nowrap;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.variant-table td,
.variant-table th {
    vertical-align: middle;
}

/* Responzívne úpravy pre mobil */
@media (max-width: 767.98px) {
    .variant-table img.variant-thumbnail-square {
        width: 45px; /* Menšia veľkosť na mobile */
        height: 45px; /* Menšia veľkosť na mobile */
        padding: 0.15rem;
    }
    .variant-table td,
    .variant-table th {
        font-size: 0.85rem; /* Mierne menšie písmo */
    }
    .variant-table .btn-buy {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
}


/* Sidebar - navigačné menu kategórií */
.sidebar-categories ul {
    padding-left: 0;
    list-style: none;
}
.sidebar-categories ul li a {
    padding: 0.3rem 0;
    display: block;
    color: var(--bs-body-color);
    text-decoration: none;
    border-bottom: 1px solid #eee;
}
.sidebar-categories ul li:last-child a {
    border-bottom: none;
}
.sidebar-categories ul li a:hover,
.sidebar-categories ul li a.active {
    color: var(--bs-primary);
    font-weight: bold;
}

/* --- Sem pridávaj ďalšie vlastné CSS pravidlá pre krabica.eu --- */