/* ==================================================================
   Nutrixeal — extra styles added with the home page / reviews update
   Loaded after style.css and shop.css, so it only adds, never fights.
   ================================================================== */

/* ---------------- navbar: clickable "Products" + caret ------------- */
/* The menu is placed with plain CSS (no Popper), so it can never drift
   over the top bar or get clipped. */
.main-nav .nav-dd{ display:flex; align-items:center; position:relative; flex-wrap:wrap; }
.main-nav .nav-dd > .nav-link{ padding-right:.15rem; }

.main-nav .nav-caret{
  background:none; border:0; padding:.3rem .35rem; line-height:1;
  color:inherit; font-size:.7rem; opacity:.7; cursor:pointer;
}
.main-nav .nav-caret:hover,
.main-nav .nav-caret[aria-expanded="true"]{ opacity:1; }
.main-nav .nav-caret i{ display:inline-block; transition: transform .2s ease; }
.main-nav .nav-caret[aria-expanded="true"] i{ transform: rotate(180deg); }

.main-nav .nav-dd-menu{ display:none; }
.main-nav .nav-dd-menu.show{ display:block; }

/* desktop — hangs directly under the Products link */
@media (min-width: 992px){
  .main-nav .nav-dd-menu{
    position:absolute !important;
    top:100% !important; left:0 !important; right:auto !important; bottom:auto !important;
    transform:none !important; margin:.4rem 0 0 !important;
    min-width:232px; z-index:1050;
  }
  .main-nav .nav-dd:hover .nav-dd-menu{ display:block; }
}

/* mobile drawer — sits inline under the Products row */
@media (max-width: 991.98px){
  .main-nav .nav-dd{ width:100%; }
  .main-nav .nav-dd-menu{
    position:static !important; transform:none !important; float:none;
    width:100%; border:0; box-shadow:none; background:transparent;
    margin:.15rem 0 .4rem !important; padding-left:.35rem;
  }
}

/* ---------------- star ratings ------------------------------------ */
.rate-row{
  display:flex; align-items:center; gap:.35rem; flex-wrap:wrap;
  font-size:.78rem; color:#8A8F8C; margin:.15rem 0 .3rem;
}
.rate-stars{ color:#F5A623; letter-spacing:.5px; line-height:1; }
.rate-stars i{ font-size:.8rem; }
.rate-row b{ color: var(--ink-2, #22312B); font-weight:600; }

/* clickable star picker in the review form */
.star-pick{ display:inline-flex; gap:.2rem; }
.star-pick button{
  background:none; border:0; padding:0 .1rem; line-height:1;
  font-size:1.45rem; color:#D8DEDA; cursor:pointer; transition: color .15s ease, transform .15s ease;
}
.star-pick button:hover{ transform: scale(1.12); }
.star-pick button.on{ color:#F5A623; }

/* ---------------- review list inside the product popup ------------- */
.rv-box{ border-top:1px solid var(--line, #E6EDE9); margin-top:1.1rem; padding-top:1rem; }
.rv-box h6{
  font-family: var(--display, inherit); font-size:.95rem; margin-bottom:.65rem;
  display:flex; align-items:center; gap:.4rem;
}
.rv-list{ max-height:230px; overflow-y:auto; padding-right:.25rem; }
.rv-item{ padding:.6rem 0; border-bottom:1px dashed var(--line, #E6EDE9); }
.rv-item:last-child{ border-bottom:0; }
.rv-item .rv-top{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.rv-item b{ font-size:.88rem; }
.rv-item .rv-when{ font-size:.72rem; color:#9AA29E; }
.rv-item p{ margin:.25rem 0 0; font-size:.86rem; color: var(--ink-3, #5B6B64); }
.rv-empty{ font-size:.86rem; color:#8A8F8C; }
.rv-form .form-control{ font-size:.9rem; }
.rv-note{ font-size:.76rem; color:#8A8F8C; }
.rv-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* review button under a product card */
.p-rate-link{
  background:none; border:0; padding:0; font-size:.74rem;
  color: var(--green-700, #0B7A3E); text-decoration:none;
}

/* ---------------- home page: auto scrolling reviews ---------------- */
.rev-marquee{
  position:relative; overflow:hidden; padding:.35rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rev-track{
  display:flex; gap:1.25rem; width:max-content;
  animation: revScroll var(--rev-speed, 60s) linear infinite;
  will-change: transform;
}
.rev-marquee:hover .rev-track,
.rev-marquee:focus-within .rev-track{ animation-play-state: paused; }
.rev-track > .rev-item{ flex:0 0 auto; width:min(420px, 84vw); }
.rev-track > .rev-item .review-card{ height:100%; }
.rev-prod{
  display:inline-block; margin-top:.5rem; font-size:.74rem; font-weight:600;
  color: var(--green-700, #0B7A3E); background: var(--mint, #EAF6EF);
  padding:.16rem .55rem; border-radius:999px;
}
@keyframes revScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - .625rem)); }
}
@media (prefers-reduced-motion: reduce){
  .rev-track{ animation:none; }
  .rev-marquee{ overflow-x:auto; }
}

/* ---------------- home page: videos + gallery ---------------------- */
.video-card .video-meta h3{ margin-bottom:0; }
.gal-item img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.home-empty{
  border:1px dashed var(--line, #E6EDE9); border-radius:16px;
  padding:2rem 1rem; text-align:center; color:#8A8F8C; font-size:.9rem;
}

/* ---------------- admin: small helpers ----------------------------- */
.adm-thumb{ width:74px; height:56px; object-fit:cover; border-radius:8px; background:#F1F5F3; }
.adm-gal-card{ border:1px solid var(--line, #E6EDE9); border-radius:14px; overflow:hidden; background:#fff; }
.adm-gal-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.adm-gal-card .body{ padding:.7rem; }
.rating-chip{ color:#F5A623; font-size:.8rem; white-space:nowrap; }