@charset "UTF-8";
/* ==========================================================================
   FOOTER STYLES — Kosmatinčki.si
   MINIMAL: Only colors, typography, hover effects.
   Layout controlled in Bricks, EXCEPT footer categories — 
   PHP-rendered via [kosm_footer_categories], layout in SCSS below.
   ========================================================================== */
/* ---------- BACKGROUNDS ---------- */
.footer__newsletter {
  background: var(--shade-light-trans-30);
}
.footer__categories {
  background: var(--shade-light-trans-30);
  border-top: 1px solid var(--neutral-trans-10);
}
.footer__bottom {
  color: var(--neutral);
  border-top: 1px solid var(--neutral-trans-10);
}
/* ---------- COLUMN TITLES (Informacije, Dodatki, Trgovine) ---------- */
.footer__col-title {
  color: var(--primary);
  border-bottom: 2px solid var(--action);
  padding-bottom: var(--space-2xs);
  align-self: flex-start;
}
/* ---------- BRAND TEXT ---------- */
.footer__brand-text h1, .footer__brand-text h2, .footer__brand-text h3, .footer__brand-text h4, .footer__brand-text h5, .footer__brand-text h6 {
  color: var(--primary);
}
.footer__brand-text p {
  color: var(--action);
  letter-spacing: 0.06em;
  font-weight: 500;
  text-transform: uppercase;
}
/* ---------- CONTACT ITEMS ---------- */
.footer__contact-item > i, .footer__contact-item > svg {
  color: var(--action);
}
.footer__contact-item > a {
  color: var(--neutral);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__contact-item > a:hover {
  color: var(--action);
}
/* ---------- SOCIAL CIRCLES ---------- */
.footer__social > a {
  background: var(--white);
  border: 1px solid var(--neutral-trans-10);
  border-radius: 50%;
  color: var(--primary);
  text-decoration: none;
  transition: all 0.25s ease;
}
.footer__social > a > i, .footer__social > a > svg {
  color: var(--primary);
}
.footer__social > a:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-2px);
}
.footer__social > a:hover > i, .footer__social > a:hover > svg {
  color: var(--white);
}
/* ---------- LINKS WITH HOVER DOT ---------- */
.footer__links > a {
  position: relative;
  color: var(--neutral);
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.footer__links > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 6px;
  background: var(--action);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.25s ease, width 0.25s ease;
}
.footer__links > a:hover {
  color: var(--primary);
  padding-left: 1.4rem;
}
.footer__links > a:hover::before {
  width: 6px;
  opacity: 1;
}
/* ---------- SHOP CARDS ---------- */
.footer__shop-card {
  background: var(--sand);
  border: 1px solid var(--neutral-trans-10);
  border-radius: var(--radius-xxl);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.footer__shop-card:hover {
  box-shadow: var(--box-shadow-m);
  transform: translateY(-2px);
}
.footer__shop-header h1, .footer__shop-header h2, .footer__shop-header h3, .footer__shop-header h4, .footer__shop-header h5, .footer__shop-header h6 {
  color: var(--primary);
}
.footer__shop-header > i, .footer__shop-header > svg {
  color: var(--action);
}
.footer__shop-address {
  color: var(--neutral);
}
.footer__shop-hours {
  color: var(--action);
  font-weight: 500;
}
/* ---------- CATEGORIES TITLE ---------- */
.footer__categories-title {
  color: var(--primary);
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* ---------- CATEGORY ITEMS ---------- */
.footer__categories-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: var(--grid-5);
}
@media (max-width: 991px) {
  .footer__categories-grid {
    gap: var(--space-m);
    grid-template-columns: var(--grid-auto-6);
  }
}
@media (max-width: 478px) {
  .footer__categories-grid {
    grid-template-columns: 1fr;
  }
}
.footer__category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-xs);
}
.footer__category > a, .footer__category > h1, .footer__category > h2, .footer__category > h3, .footer__category > h4, .footer__category > h5, .footer__category > h6 {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__category > a:hover, .footer__category > h1:hover, .footer__category > h2:hover, .footer__category > h3:hover, .footer__category > h4:hover, .footer__category > h5:hover, .footer__category > h6:hover {
  color: var(--action);
}
.footer__category > h1 a, .footer__category > h2 a, .footer__category > h3 a, .footer__category > h4 a, .footer__category > h5 a, .footer__category > h6 a {
  color: inherit;
  text-decoration: none;
}
.footer__category-children {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-xs);
  font-size: var(--text-s);
}
.footer__category-children a {
  color: var(--neutral);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer__category-children a:hover {
  color: var(--primary);
  transform: translateX(4px);
}
/* ---------- BOTTOM BAR ---------- */
.footer__bottom-left > p, .footer__bottom-left > a, .footer__bottom-left > span {
  /* Uporabimo standardno barvo besedila (ali var(--base-dark)) */
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer__bottom-left > a:hover {
  /* Uporabimo vašo akcijsko barvo za hover učinek */
  color: var(--action);
}
.footer__divider {
  /* Uporabimo 20% prosojno temno osnovno barvo za komaj opazno ločnico */
  color: var(--base-dark-trans-20);
}
/* ---------- BADGE (Naturavetal uradni zastopnik) ---------- */
.footer__badge {
  /* Predvidevam, da je vaša zelena barva nastavljena kot 'primary' ali 'action' v ACSS */
  background: var(--sand-dark-l-5);
  border: 1px solid var(--sand-dark);
  border-radius: var(--radius-l);
}
.footer__badge > i, .footer__badge > svg {
  color: var(--base-medium, #555555);
  flex-shrink: 0;
}
.footer__badge > span {
  color: var(--base-dark);
  font-weight: 500;
  white-space: nowrap;
  line-height: 1;
}
/* Footer kategorije – layout (prej Bricks global classi) */
.footer__categories-grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: var(--grid-5);
}
@media (max-width: 991px) {
  .footer__categories-grid {
    gap: var(--space-m);
    grid-template-columns: var(--grid-auto-6);
  }
}
@media (max-width: 767px) {
  .footer__categories-grid {
    grid-template-columns: var(--grid-5);
  }
}
@media (max-width: 478px) {
  .footer__categories-grid {
    grid-template-columns: 1fr;
  }
}