/*--------------------------------------------------------------
# CUSTOM STYLES
--------------------------------------------------------------*/

/* Template Storefront */

a:focus,
.focus a {
  outline: none !important;
}
/* Logo – plne responzívne, transparent */
:root{
  --logo-color: #fff;
  --logo-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --logo-weight: 250;
  --tagline-weight: 250;
}

.btn-primary, a, .active {
    color: var(--heading-color);
}

/* Obal loga */
.logo-andan{
  /* FLUID premenné – upravíš raz a škáluje všetko */
  --box:   clamp(180px, 35vw, 320px);   /* veľkosť štvorca */
  --pad:   clamp(10px, 2.2vw, 20px);    /* vnútorné odsadenie */
  --gap:   clamp(6px,  1.2vw, 12px);    /* medzery medzi prvkami */
  --bdr:   clamp(1px,  0.35vw, 3px);    /* hrúbka borderu + liniek */

  inline-size: var(--box);              /* šírka (responzívna) */
  aspect-ratio: 1 / 1;                  /* udrž štvorcový tvar */
  border: var(--bdr) solid currentColor;/* responzívny border */
  color: var(--logo-color);
  background: transparent;

  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: var(--pad);
  margin: 0 auto;
}

.logo-andan:hover{
  opacity: 1 !important;
  color:#fff;
  border-color:#efefef; /* alebo nechaj currentColor */
}

/* Vodorovné linky – šírka sa prispôsobí vnútornému priestoru */
.logo-andan .logo-line{
  inline-size: calc(100% - (var(--pad) * 2));
  block-size: max(2px, var(--bdr));     /* hrúbka v súlade s borderom */
  background: currentColor;
  opacity:.9;
}

/* Brand text */
.logo-andan .logo-brand{
  font-family: var(--logo-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(18px, 5vw, 24px);
  white-space: nowrap;
  font-weight: var(--logo-weight);
}

/* Tagline */
.logo-andan .logo-tagline{
  font-family: var(--logo-font);
  letter-spacing: 0;
  text-transform: lowercase;
  opacity: 1;
  font-size: clamp(10px, 2.2vw, 14px);
  white-space: nowrap;
  font-weight: var(--tagline-weight);
}

/* Voliteľné: invert cez wrapper .dark */
.dark .logo-andan{ color:#fff; }

/* Čierna verzia loga do navbaru */
.logo-andan-navbar{
  --logo-color: #000;
  --logo-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: clamp(4px, 0.6vw, 6px);
  color: var(--logo-color);
  text-decoration:none;
  background: transparent;
  max-inline-size: 220px;   /* max šírka 150px */

}

/* Brand text */
.logo-andan-navbar .logo-brand{
  font-family: var(--logo-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: clamp(14px, 3vw, 22px);
  line-height:1.2;
  text-align:center;
  white-space: nowrap;
}

/* Horizontálna linka */
.logo-andan-navbar .logo-line{
  inline-size: 100%;
  block-size: 2px;
  background: currentColor;
  opacity: .9;
}

/* Tagline */
.logo-andan-navbar .logo-tagline{
  font-family: var(--logo-font);
  font-weight: 400;
  letter-spacing: .05em;
  font-size: clamp(8px, 2vw, 12px);
  opacity:.85;
  text-align:center;
  white-space: nowrap;
}



/* Fonts */

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */


/* Smooth scroll */


/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/

li.current-menu-item > a:before {
  content: "";
  position: absolute;
  min-width: 100%;
  height: 2px;
  top: 45px;
  left: 0;
  background-color: var(--accent-color);
  width: 0px;
  transition: all 0.3s 
  ease-in-out 0s;
}
li.current-menu-item > a:last-child {
    padding-right: 15px !important;
}

li.current-menu-parent > a:before {
  content: "";
  position: absolute;
  min-width: 100%;
  height: 2px;
  top: 45px;
  left: 0;
  background-color: var(--accent-color);
  width: 0px;
  transition: all 0.3s 
  ease-in-out 0s;
}


.about-2 .about-image img {border-radius:3px !important;}


.cards-2 .card::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.9) 75%) !important;
}

.cards-2 .card .card-body .card-content p {
  font-size: 15px;
  padding-top: 10px;
  margin-bottom: 0;
  overflow: hidden;
  color: var(--accent-color) !important;
}


.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 0px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 0px;
}

.cards-2 .card {border-radius: 0px !important;}
/*.card img.portfolio { border-radius: 0px !important; }*/


.contact-2 .contact-card .social-links a {
    width: 40px;
    height: 40px;
    padding-top: 3px;
}


.footer .social-links a {padding-top: 3px;}
.footer .copyright a {color: var(--accent-color);}

/*eshop*/
ul.category-tree , ol {
   margin: 0 0 1.41575em 0em;
  padding: 0;
}

/* PHP Email Form Messages
------------------------------*/


.contact-2 .contact-form-wrapper {
  background-color: var(--surface-color);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  padding: 20px 35px;
  position: relative;
  overflow: hidden;
}

.contact-2 .contact-form-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--accent-color);
}

.contact-2 .contact-form-wrapper .ar-email-form .form-group {
  margin-bottom: 15px;
}

.contact-2 .contact-form-wrapper .ar-email-form .form-group label {
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 8px;
  font-size: 14px;
  display: block;
}

.contact-2 .contact-form-wrapper .ar-email-form .form-group .form-control {
  height: auto;
  border-radius: 8px;
  padding: 12px 20px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  color: var(--default-color);
  background-color: var(--surface-color);
  font-size: 14px;
  box-shadow: inset 0 0px 0px rgba(0,0,0,.125);
}

.contact-2 .contact-form-wrapper .ar-email-form .form-group .form-control:focus {
  border-color: var(--accent-color);
  outline: none;
  box-shadow: none;
}

.contact-2 .contact-form-wrapper .ar-email-form .form-group .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact-2 .contact-form-wrapper .ar-email-form .form-group textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.contact-2 .contact-form-wrapper .ar-email-form .form-check {
  margin-bottom: 20px;
}

.contact-2 .contact-form-wrapper .ar-email-form .form-check .form-check-input {
  margin-top: 0.3em;
}

.contact-2 .contact-form-wrapper .ar-email-form .form-check .form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.contact-2 .contact-form-wrapper .ar-email-form .form-check .form-check-input:focus {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.contact-2 .contact-form-wrapper .ar-email-form .form-check .form-check-label {
  color: var(--default-color);
  font-size: 14px;
  padding-left: 5px;
}

.contact-2 .contact-form-wrapper .ar-email-form button {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 12px 30px;
  border-radius: 50px;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.contact-2 .contact-form-wrapper .ar-email-form button:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  transform: translateY(-3px);
}


.shop-container > .row:first-child #category-siblings {
  margin-top: .75rem;
  margin-bottom: 1rem;
}

/* === GRID pre kolečko hore + názov dole === */
#category-siblings .grid-circles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* mobile: 2 v riadku */
  gap: 1rem;
  align-items: start;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* breakpointy – ideál: 8 na veľkých desktopoch */
@media (min-width: 768px) {
  #category-siblings .grid-circles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  #category-siblings .grid-circles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  #category-siblings .grid-circles {
    /*grid-template-columns: repeat(8, minmax(0, 1fr)); /* desktop: 8 v riadku */
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* položka gridu */
/* GRID položky – rovnaká veľkosť bez min-height */
#category-siblings .grid-circles > li.cat-item {
  list-style: none;
  margin: 0;
  padding: 12px;                     /* vnútorný okraj k rámiku */
  border: 1px solid #efefef;         /* default border */
  border-radius: 8px;               /* jemne zaoblené karty (voliteľné) */
  display: flex;                     /* umožní vycentrovať obsah */
  align-items: stretch;
  /*aspect-ratio: 1 / 1.1;             /* rovnaké karty bez min-height */
  aspect-ratio: 1 / 0;
  background: #fff;
}

/* link vo vnútri nech vypĺňa celú kartu a centrovaný obsah */
#category-siblings .grid-circles > li.cat-item > .sibling-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;           /* pekné centrovanie kruhu + názvu */
  width: 100%;
  height: 100%;
  padding: .25rem;                   /* drobný dych vo vnútri karty */
  background: transparent;           /* pre istotu */
  border: 0;                         /* žiadny border na <a>, border je na <li> */
  box-shadow: none;                  /* tieň riešime hoverom */
}

/* hover efekt karty a konzistentný border pri hoveri */
#category-siblings .grid-circles > li.cat-item:hover {
  border-color: color-mix(in srgb, var(--default-color, #111), transparent 60%);
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* AKTÍVNA položka – iná farba borderu na <li> */
#category-siblings .grid-circles > li.cat-item.is-active {
  border-color: var(--accent-color, #212529);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color, #212529), transparent 90%);
  background-color: #F5F8FC;
}


/* „pilulka“ prerobíme na zvislý blok s centrovaním */
#category-siblings .sibling-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  background: transparent;
  border: 0;              /* zrušíme border z pôvodnej pilulky */
  padding: 0;             /* žiadna vnútorná medzera, nech to je kompaktné */
  color: var(--heading-color, #111);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
  white-space: normal;    /* dovolí zalamovať názov na viaceré riadky */
  text-align: center;
}

#category-siblings .sibling-pill:hover {
  transform: translateY(-1px);
  /*box-shadow: 0 4px 20px rgba(0,0,0,.07);*/
  color: var(--bs-primary, #0d6efd);
}

/* kruhový thumbnail hore – väčší kruh */
#category-siblings .pill-thumb {
  width: 98px;
  height: 98px;
  border-radius: 50%;
  /*object-fit: cover;*/
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--default-color, #111), transparent 80%);
  background: #f1f3f5;
}

#category-siblings .pill-thumb img{
  max-width: 58px;
  max-height: 58px;
}

#category-siblings .pill-thumb.placeholder { background: #e9ecef; }

/* názov pod kruhom */
#category-siblings .cat-label {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  margin-top: .25rem;
  /*max-width: 12ch;*/
  max-width: 17ch;        /* voliteľné: limit šírky textu */
}

/* aktívna položka – zvýrazníme rámik kruhu */
#category-siblings .cat-item.is-active .pill-thumb {
  border-color: color-mix(in srgb, var(--bs-primary, #0d6efd), transparent 30%);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bs-primary, #0d6efd), transparent 80%);
}

/* sekčná pilulka (rodič) nechaj tak, môže zostať nad gridom; prípadne pridať menší spodný margin */
#category-siblings .section-pill { margin-bottom: .75rem; }

/* === LIMIT: zobraz max. 16 (2 riadky po 8) – skry zvyšok === */
#category-siblings .grid-circles:not(.is-expanded) > li:nth-child(n+17) {
  display: none;
}

/* tlačidlo zobraz/ skry */
#category-siblings .siblings-actions {
  display: flex;
  justify-content: center;
}

#category-siblings .btn-show-all {
  display: inline-block;
  background-color: var(--accent-color);
  color: #fff;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 0px;
  font-weight: normal;
  text-align: center;
  transition: background 0.3s ease;
  border-radius: 999px;
}

#category-siblings .btn-show-all:hover {
  background-color: var(--default-color);
}

#category-siblings .sibling-pill:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--bs-primary, #0d6efd), transparent 50%);
  outline-offset: 3px;
  border-radius: 16px;
}
/* Mobil (default): skry od 7+ */
#category-siblings .grid-circles:not(.is-expanded) > li:nth-child(n+7){
  display: none;
}

#category-siblings .grid-circles .count {display: none;}

/* Desktop ≥992px: najprv reset, potom skry od 21+ */
@media (min-width: 992px){
  #category-siblings .grid-circles:not(.is-expanded) > li{ display:block !important; pointer-events: none;
  cursor: default; }
  #category-siblings .grid-circles:not(.is-expanded) > li:nth-child(n+17){ display:none !important; }
}

.left-sidebar .widget-area {
    display: none;
}


@media (max-width: 992px) {

  .contact-2 .contact-form-wrapper {
    padding: 25px;
  }
}

@media (max-width: 767.98px) {
    .section-title h2 {
        font-size: 36px !important;
    }
    .about-2 .content h2 {
        font-size: 1.5rem;
    }
    li.current-menu-item > a {
      color: var(--accent-color);
    }
    li.current-menu-parent > a {
      color: var(--accent-color);
    }
    li.current-menu-item > a:before {
      display: none;
      visibility: hidden;
    }

    li.current-menu-parent > a:before {
      display: none;
      visibility: hidden;
    }

}