/* ==========================================================
   ПРОДУКТОВА НАВИГАЦИОННА ЛЕНТА
   Полупрозрачна лента, която стопля хартията под себе си, вместо
   да лежи като отделен панел върху нея. Вътре малки картички:
   линеарна икона отгоре, име отдолу. Стои веднага след основния
   продуктов блок, преди подробното съдържание.

   Обвивката (.aura-carousel, .aura-carousel__track,
   .aura-carousel__nav) е обща за сайта и живее в style.css;
   тук само се пренастройва. Нарочно не е обвързана с body.home —
   началната страница не се променя.

   Цветовете са същите като на останалия сайт: старо злато,
   мед, топло кафяво. Нова палитра не се въвежда.
   ========================================================== */

.aura-pnav {
  /* ширината на една карта — от нея тръгва всичко останало */
  --pcw: clamp(76px, 7.4vw, 96px);
  --pn-ink: #5C3D0E;          /* тъмнокафявото на надписите */
  --pn-line: rgba(166, 124, 32, .34);
  --pn-card: rgba(255, 250, 234, .66);
  --pn-card-hover: rgba(255, 245, 218, .86);
  --pn-gold: #A66B12;

  position: relative;
  /* Лентата стои между основния блок и подробното съдържание —
     еднакъв въздух от двете страни, за да не се залепи за нито едно. */
  margin: clamp(1.4rem, 3vw, 2.4rem) auto clamp(1.6rem, 3.4vw, 2.8rem);
  padding: clamp(.7rem, 1.5vw, 1rem) clamp(2.2rem, 3.4vw, 3rem);
  border: 1px solid var(--pn-line);
  border-radius: clamp(18px, 2.4vw, 28px);
  /* Панелът не носи свой фон — само леко стопля хартията под себе си,
     колкото да се разпознае като лента. Плътният кремав правоъгълник
     стоеше като чуждо тяло върху страницата. */
  background:
    linear-gradient(168deg, rgba(255, 246, 222, .30), rgba(240, 216, 164, .22));
  box-shadow: 0 1px 4px rgba(92, 60, 14, .07);
}

/* фин мотив на пчелна пита, колкото да не е плосък фонът */
.aura-pnav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='48' viewBox='0 0 42 48'%3E%3Cpath d='M21 1 40 12v24L21 47 2 36V12z' fill='none' stroke='%23A66B12' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 42px 48px;
}

/* дребният надпис над реда — казва какво е това, без да се налага */
.aura-pnav__caption {
  position: relative;
  z-index: 1;
  margin: 0 0 .5rem;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(.56rem, .66vw, .68rem);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(122, 82, 16, .8);
}

.aura-pnav__carousel {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

/* ---------- редът с картите ---------- */
.aura-pnav__track {
  grid-auto-columns: var(--pcw);
  gap: clamp(6px, .7vw, 10px);
  padding: 2px;
  align-items: stretch;
  /* лентата на скрола не е нужна — стрелките и подаващата се
     следваща карта вече подсказват, че редът продължава */
  scrollbar-width: none;
}
.aura-pnav__track::-webkit-scrollbar { height: 0; }

/* ---------- една карта ---------- */
.aura-pnav__cell {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .3rem;
  min-height: 44px;                 /* удобно за пръст */
  padding: .55rem .28rem .5rem;
  border: 1px solid rgba(166, 124, 32, .26);
  border-radius: 12px;
  background: var(--pn-card);
  color: var(--pn-ink);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(92, 60, 14, .06);
  transition: transform .2s ease, background-color .2s ease,
              box-shadow .2s ease, border-color .2s ease;
}

.aura-pnav__icon {
  display: block;
  color: var(--pn-gold);
  transition: color .2s ease;
}

.aura-pnav__svg {
  display: block;
  width: clamp(26px, 2.5vw, 32px);
  height: clamp(26px, 2.5vw, 32px);
}

.aura-pnav__label {
  display: block;
  text-align: center;
  font-family: "Manrope", sans-serif;
  font-size: clamp(.56rem, .62vw, .66rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: .01em;
  color: var(--pn-ink);
  transition: color .2s ease;
  hyphens: auto;
}

/* ---------- hover ---------- */
@media (hover: hover) {
  .aura-pnav__cell:hover {
    transform: translateY(-2px);
    background: var(--pn-card-hover);
    border-color: rgba(166, 124, 32, .45);
    box-shadow: 0 5px 12px rgba(92, 60, 14, .14);
  }
}
.aura-pnav__cell:focus-visible {
  outline: 2px solid var(--pn-gold);
  outline-offset: 2px;
}

/* ---------- текущият продукт ----------
   медено-златисто, но приглушено: разпознава се веднага,
   без да дърпа окото повече от самия продукт на страницата */
.aura-pnav__cell--active {
  background: linear-gradient(158deg, #C9922B 0%, #A66B12 62%, #8A5F16 100%);
  border-color: rgba(122, 82, 16, .6);
  box-shadow: 0 3px 9px rgba(92, 60, 14, .26);
}
.aura-pnav__cell--active .aura-pnav__icon { color: #FFF4DC; }
.aura-pnav__cell--active .aura-pnav__label { color: #FFF8EA; }
.aura-pnav__cell--active:hover {
  background: linear-gradient(158deg, #D19B33 0%, #AE7317 62%, #8A5F16 100%);
}

/* ---------- стрелките ---------- */
.aura-pnav__carousel .aura-carousel__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid rgba(122, 82, 16, .45);
  background: linear-gradient(158deg, #E7C579, #C9922B);
  color: #5C3D0E;
  box-shadow: 0 2px 6px rgba(92, 60, 14, .18);
}
.aura-pnav__carousel .aura-carousel__nav:hover {
  background: linear-gradient(158deg, #F0D294, #D19B33);
  transform: translateY(-50%) scale(1.06);
}
/* Стрелките стоят в отстъпа на панела, а не върху картите —
   иначе кръгчето скрива иконата на крайния продукт. Затова
   отместването е с цяла ширина на бутона. */
.aura-pnav__carousel .aura-carousel__nav--prev { left: -2.2rem; }
.aura-pnav__carousel .aura-carousel__nav--next { right: -2.2rem; }

/* когато всички карти се побират, стрелките нямат работа */
.aura-pnav__carousel.aura-carousel--fits .aura-carousel__nav { display: none; }

/* ---------- телефон ----------
   Картите НЕ се свиват, за да се поберат всички: лентата става
   хоризонтален скрол с 3–4 видими продукта. Стрелките отпадат —
   на телефон се плъзга с пръст. */
@media (max-width: 700px) {
  .aura-pnav {
    --pcw: 80px;
    padding: .65rem .55rem;
    border-radius: 16px;
  }
  .aura-pnav__cell { padding: .5rem .22rem .45rem; }
  .aura-pnav__label { font-size: .58rem; }
  .aura-pnav__carousel .aura-carousel__nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aura-pnav__cell,
  .aura-pnav__carousel .aura-carousel__nav { transition: none; }
}

/* ---------- долната лента ----------
   Стои след цялото съдържание, преди футъра. Има нужда от повече
   въздух отгоре, за да не изглежда залепена за последния текст,
   и отдолу, за да не опира във футъра. */
.aura-pnav--bottom {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}