/* ==========================================================================
   Nayara Collections – Sticky Category Nav + Dynamic Product Grid
   Injected via wp-content/novamira-sandbox/nayara-home.php
   Assets: wp-content/themes/maia-child/nayara/
   ========================================================================== */

:root{
  --nayara-gold:#b8860b;
  --nayara-gold-soft:#f4ecd7;
  --nayara-ink:#2a2118;
  --nayara-muted:#8a8078;
  --nayara-line:#ece7df;
  --nayara-maroon:#7b1f2b;
}

/* ---------- Wrapper ---------- */
.nayara-shop{ margin:0 auto; max-width:1280px; padding:0 16px; }
.nayara-shop *{ box-sizing:border-box; }
/* Was an inline style on the <h2> until the dark variant needed to override it. */
.nayara-shop__heading{ text-align:center; margin:6px 0 18px; font-size:26px; }

/* ---------- Sticky category navigation ----------
   The bar is a normal in-flow block; the JS module pins it to the top of the
   viewport on scroll by applying inline position:fixed (class .is-fixed is used
   for the pinned visual treatment). Inline styles are used for positioning so
   they always win over theme/Elementor rules, and a broken native CSS sticky
   (defeated by an ancestor overflow:hidden) can never interfere. */
.nayara-catnav-wrap{
  position:relative;
  z-index:9999;
  background:#fff;
  border-bottom:1px solid var(--nayara-line);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  margin-bottom:20px;
}
/* `top` is deliberately NOT set here: the JS measures the theme's fixed chrome
   (on mobile that is .topbar-device-mobile, 126px) and writes the offset inline,
   so the bar pins below the header instead of over the logo.
   z-index sits just under the mobile header's 1002 — that hides the slide-down
   animation behind the header, and if the offset ever measured wrong the bar
   would tuck behind the header rather than cover it. */
.nayara-catnav-wrap.is-fixed{
  position:fixed;
  left:0;
  right:0;
  width:100%;
  z-index:1000;
  box-shadow:0 3px 14px rgba(0,0,0,.10);
  animation:nayara-slidedown .22s ease;
}
@keyframes nayara-slidedown{ from{ transform:translateY(-100%); } to{ transform:none; } }
/* placeholder reserves the bar's height while it is fixed, preventing a jump */
.nayara-catnav-ph{ display:none; }
.nayara-catnav{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  padding:12px 16px;
  max-width:1280px;
  margin:0 auto;
  scroll-snap-type:x proximity;
}
.nayara-catnav::-webkit-scrollbar{ height:6px; }
.nayara-catnav::-webkit-scrollbar-thumb{ background:var(--nayara-line); border-radius:6px; }

.nayara-pill{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:74px;
  padding:6px 10px 8px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  cursor:pointer;
  color:var(--nayara-ink);
  font-size:12px;
  line-height:1.2;
  text-align:center;
  transition:all .18s ease;
  scroll-snap-align:start;
}
.nayara-pill:hover{ background:var(--nayara-gold-soft); }
.nayara-pill.is-active{
  border-color:var(--nayara-gold);
  background:var(--nayara-gold-soft);
  font-weight:600;
}
.nayara-pill__icon{
  width:52px;height:52px;border-radius:50%;
  overflow:hidden;background:var(--nayara-gold-soft);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--nayara-line);
}
.nayara-pill__icon img{ width:100%;height:100%;object-fit:cover; }
.nayara-pill__icon svg{ width:26px;height:26px;fill:var(--nayara-gold); }
.nayara-pill__label{ max-width:82px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Product grid ---------- */
.nayara-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);   /* Desktop: 4 columns */
  gap:22px;
  position:relative;
  min-height:120px;
}
.nayara-grid.is-loading{ opacity:.45; pointer-events:none; }

.nayara-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--nayara-line);
  border-radius:14px;overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease;
}
.nayara-card:hover{ box-shadow:0 8px 26px rgba(0,0,0,.10); transform:translateY(-3px); }

.nayara-card__imgwrap{ position:relative;display:block;overflow:hidden;background:#faf8f4;aspect-ratio:1/1; }
.nayara-card__imgwrap img{ width:100%;height:100%;object-fit:cover;transition:transform .4s ease; }
.nayara-card:hover .nayara-card__imgwrap img{ transform:scale(1.06); }

.nayara-badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--nayara-maroon);color:#fff;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:20px;letter-spacing:.03em;
}
.nayara-badge--out{ background:#6b6b6b; }

/* Hover quick-actions */
.nayara-actions{
  position:absolute;right:10px;top:10px;z-index:3;
  display:flex;flex-direction:column;gap:8px;
  opacity:0;transform:translateX(10px);
  transition:opacity .2s ease, transform .2s ease;
}
.nayara-card:hover .nayara-actions{ opacity:1;transform:none; }
.nayara-actions a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.14);
  color:var(--nayara-ink);text-decoration:none;
}
.nayara-actions a:hover{ background:var(--nayara-gold);color:#fff; }
.nayara-actions svg{ width:18px;height:18px;fill:currentColor; }

.nayara-viewall-hover{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:rgba(42,33,24,.86);color:#fff;text-align:center;
  padding:11px;font-size:13px;font-weight:600;letter-spacing:.03em;
  text-decoration:none;transform:translateY(100%);transition:transform .22s ease;
}
.nayara-card:hover .nayara-viewall-hover{ transform:none; }

.nayara-card__body{ padding:12px 14px 16px;display:flex;flex-direction:column;gap:7px;flex:1; }
.nayara-card__title{
  color:var(--nayara-ink);font-size:14px;line-height:1.35;font-weight:500;
  text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:38px;
}
.nayara-card__title:hover{ color:var(--nayara-gold); }
.nayara-card__price{ font-size:15px;font-weight:700;color:var(--nayara-ink); }
.nayara-card__price del{ color:var(--nayara-muted);font-weight:400;font-size:13px;margin-right:6px; }
.nayara-card__price ins{ text-decoration:none;color:var(--nayara-maroon); }

/* Color swatches */
.nayara-swatches{ display:flex;gap:6px;align-items:center;margin-top:2px; }
.nayara-swatch{ width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block; }
.nayara-swatch--more{ font-size:11px;color:var(--nayara-muted); }

/* Footer controls */
.nayara-foot{ display:flex;justify-content:center;margin:26px 0 8px; }
.nayara-viewall-btn{
  display:inline-block;padding:12px 30px;border-radius:30px;
  background:var(--nayara-ink);color:#fff;text-decoration:none;font-weight:600;letter-spacing:.03em;
  transition:background .2s ease;
}
.nayara-viewall-btn:hover{ background:var(--nayara-gold);color:#fff; }

.nayara-empty{ grid-column:1/-1;text-align:center;color:var(--nayara-muted);padding:40px 0; }

.nayara-spinner{
  position:absolute;left:50%;top:40px;transform:translateX(-50%);z-index:5;
  width:34px;height:34px;border:3px solid var(--nayara-line);border-top-color:var(--nayara-gold);
  border-radius:50%;animation:nayara-spin .8s linear infinite;display:none;
}
.nayara-grid.is-loading .nayara-spinner{ display:block; }
@keyframes nayara-spin{ to{ transform:translateX(-50%) rotate(360deg); } }

/* ---------- Responsive: tablet 3-col, mobile 2-col ---------- */
@media (max-width:1024px){
  .nayara-grid{ grid-template-columns:repeat(3,1fr);gap:18px; }
}
@media (max-width:640px){
  .nayara-grid{ grid-template-columns:repeat(2,1fr);gap:12px; }   /* Mobile: 2 columns */
  .nayara-card__title{ font-size:13px;min-height:34px; }
  .nayara-pill__icon{ width:46px;height:46px; }
  .nayara-actions a{ width:34px;height:34px; }
}

/* ==========================================================================
   Dark placement — a grid dropped into a dark section band.
   Cards deliberately stay white: the product photography is shot on light
   backgrounds, and white cards on the dark green read as a lit shelf. Only the
   chrome around them (heading, button, empty state) needs inverting.
   ========================================================================== */
.nayara-shop--dark .nayara-shop__heading{ color:#fff; }
/* Ink on gold, not white on gold: white measures 3.25:1 here, which fails AA. */
.nayara-shop--dark .nayara-viewall-btn{ background:var(--nayara-gold); color:var(--nayara-ink); }
.nayara-shop--dark .nayara-viewall-btn:hover{ background:#fff; color:var(--nayara-ink); }
.nayara-shop--dark .nayara-empty{ color:rgba(255,255,255,.75); }
/* This instance has no sticky bar above it, so it needs its own top spacing. */
.nayara-shop--nonav{ padding-top:4px; }

/* ==========================================================================
   Homepage whitespace / density compaction (page 145 only)
   ========================================================================== */
.elementor-page-145 .elementor-section.elementor-section-boxed > .elementor-container{ }
.elementor-page-145 .elementor-widget:not(:last-child){ margin-bottom:0; }
.elementor-page-145 .elementor-top-section{ padding-top:22px !important; padding-bottom:22px !important; }
.elementor-page-145 .elementor-top-section:first-child{ padding-top:0 !important; }
.elementor-page-145 .tbay-heading{ margin-bottom:16px !important; }
.elementor-page-145 .elementor-widget-tbay-heading{ margin-bottom:8px; }
/* trim empty gaps left by removed widgets */
.elementor-page-145 .elementor-widget-empty{ display:none !important; }
@media (max-width:640px){
  .elementor-page-145 .elementor-top-section{ padding-top:14px !important; padding-bottom:14px !important; }
}