/* ============================================================
   Newww · JetEngine listings — shared styles
   Covers: products, categories, conditions, guides, reviews
   + reveal animation + skeleton loading
   All classes prefixed .nw- to avoid theme collisions.
   Requires Tabler Icons webfont enqueued on the front end.
   ============================================================ */

:root{
  --nw-g:#0FA678; --nw-g-h:#0c916a; --nw-g-dark:#0A6E50; --nw-g-darkest:#0A4838;
  --nw-g-tint:#EAF7F2; --nw-g-tint2:#DCF0E8; --nw-g-line:#d6ece2;
  --nw-card:#fff; --nw-txt:#1c2128; --nw-txt2:#646b75; --nw-muted:#9aa0aa;
  --nw-line:#edefee; --nw-amber:#e8920c;
  --nw-sh:0 1px 2px rgba(16,24,40,.05),0 6px 18px rgba(16,24,40,.05);
  --nw-sh-soft:0 1px 2px rgba(16,24,40,.04),0 3px 8px rgba(16,24,40,.04);
  --nw-sh-lift:0 3px 6px rgba(13,90,66,.06),0 20px 40px rgba(13,90,66,.13);
  --nw-r:18px; --nw-rp:999px;
}

/* ---- shared bits ---- */
.nw-item{font-family:'Onest',system-ui,sans-serif;color:var(--nw-txt);box-sizing:border-box}
.nw-item *{box-sizing:border-box}
.nw-item a{text-decoration:none;color:inherit}
.nw-card,.nw-cat,.nw-prod,.nw-guide,.nw-review{
  background:var(--nw-card);border:1px solid var(--nw-line);border-radius:var(--nw-r);
  box-shadow:var(--nw-sh);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease,border-color .26s ease;
}
.nw-ic{
  width:50px;height:50px;border-radius:14px;background:var(--nw-g-tint);
  display:flex;align-items:center;justify-content:center;color:var(--nw-g);font-size:25px;
  flex-shrink:0;transition:.26s cubic-bezier(.2,.7,.3,1);
}
.nw-tag{font-size:12px;font-weight:500;color:var(--nw-g-dark);background:var(--nw-g-tint);
  display:inline-block;padding:4px 11px;border-radius:var(--nw-rp)}
.nw-tag--new{color:#fff;background:linear-gradient(180deg,#13b483,#0e9a70);
  box-shadow:0 3px 8px rgba(15,166,120,.30)}
.nw-more{font-size:14px;color:var(--nw-g);display:inline-flex;align-items:center;gap:6px;font-weight:500}
.nw-more .nw-i{transition:transform .2s}
/* inline SVG icon base (sprite via <use>) */
.nw-i{width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex-shrink:0}
.nw-ico-img{width:26px;height:26px;object-fit:contain;display:block;transition:filter .22s}
/* <img> иконките не се боядисват през color -> на hover ги правим бели с filter */
.nw-cat:hover .nw-ico-img,.nw-cond__link:hover .nw-ico-img{filter:brightness(0) invert(1)}
.nw-add .nw-i{width:18px;height:18px}
.nw-cat__foot .nw-i,.nw-more .nw-i{width:16px;height:16px}
.nw-ic .nw-i{width:25px;height:25px}
/* fractional star rating (grey base + amber clipped fill) */
.nw-stars{display:inline-flex;align-items:center;gap:2px;color:#dfe3e1}
.nw-star{position:relative;width:15px;height:15px;display:inline-block;line-height:0}
.nw-star .nw-i{width:15px;height:15px;display:block}
.nw-star-f{position:absolute;inset:0;overflow:hidden;color:var(--nw-amber);line-height:0}
.nw-star-f .nw-i{width:15px;height:15px;display:block}
.nw-stars__count{color:var(--nw-muted);margin-left:5px;font-size:13px}
.nw-price{font-weight:600;color:var(--nw-g-dark);font-size:18px}
.nw-price del{color:var(--nw-muted);font-weight:400;font-size:14px;margin-right:6px}

/* ============================================================
   1) PRODUCT CARD
   ============================================================ */
.nw-prod{overflow:hidden;display:flex;flex-direction:column}
.nw-prod__media{position:relative;overflow:hidden;aspect-ratio:4/3;background:#f3f5f4}
.nw-prod__img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.nw-prod:hover .nw-prod__img{transform:scale(1.07)}
.nw-prod__media .nw-tag{position:absolute;top:12px;left:12px}
/* wishlist — JetEngine Data Store button. Иконите идват от самия бутон (inline SVG,
   с вградени цветове: сиво контурно / зелено плътно при добавяне). Тук само кръга и hover. */
.nw-wish-wrap{position:absolute;top:11px;right:11px;z-index:2}
.nw-wish-wrap .jet-data-store-link-wrapper{display:inline-block;line-height:0}
.nw-wish-wrap .jet-data-store-link{width:36px;height:36px;border-radius:var(--nw-rp);
  background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:var(--nw-sh-soft);transition:.18s;backdrop-filter:blur(4px);cursor:pointer}
.nw-wish-wrap .jet-data-store-link:hover{background:#fff;transform:scale(1.08)}
.nw-wish-wrap .jet-data-store-link__icon{display:flex;line-height:0}
.nw-wish-wrap .jet-data-store-link svg{width:18px;height:18px;display:block}
.nw-prod__body{padding:17px;display:flex;flex-direction:column;gap:7px;flex:1}
.nw-prod__title{font-size:15.5px;line-height:1.4;color:var(--nw-txt)}
.nw-prod__title:hover{color:var(--nw-g-dark)}
.nw-prod__spec{font-size:12.5px;color:var(--nw-muted);display:flex;align-items:center;gap:5px}
.nw-prod__foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px}
.nw-add{width:38px;height:38px;border-radius:var(--nw-rp);border:0;background:var(--nw-g-tint);
  color:var(--nw-g);display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:18px;transition:.2s;text-decoration:none}
.nw-prod:hover .nw-add{background:var(--nw-g);color:#fff;box-shadow:0 6px 14px rgba(15,166,120,.32)}

/* ============================================================
   2) CATEGORY CARD  (product_cat term)
   ============================================================ */
.nw-cat{cursor:pointer}
.nw-cat__link{padding:24px 20px;display:flex;flex-direction:column;gap:13px;height:100%}
.nw-cat__name{font-weight:500;font-size:17px}
.nw-cat__desc{font-size:13.5px;color:var(--nw-txt2);line-height:1.5}
.nw-cat__foot{display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--nw-muted);margin-top:auto;padding-top:4px}
.nw-cat__foot .nw-i{color:var(--nw-g);transition:transform .22s}
.nw-cat:hover{transform:translateY(-5px);box-shadow:var(--nw-sh-lift);border-color:var(--nw-g-line)}
.nw-cat:hover .nw-ic{background:var(--nw-g);color:#fff;transform:scale(1.06) rotate(-4deg)}
.nw-cat:hover .nw-cat__foot .nw-i{transform:translateX(5px)}

/* ============================================================
   3) CONDITION CARD  (product_tag term) — pill
   ============================================================ */
.nw-cond{display:inline-flex;border:0;background:none;box-shadow:none}
.nw-cond__link{display:inline-flex;align-items:center;gap:10px;background:#fff;
  color:var(--nw-g-dark);border:1px solid var(--nw-line);border-radius:var(--nw-rp);
  padding:9px 18px 9px 9px;font-size:15px;font-weight:500;transition:.2s}
.nw-cond .nw-cond__link,.nw-cond .nw-cond__link span{color:var(--nw-g-dark)}
.nw-cond__link:hover{transform:translateY(-3px);border-color:var(--nw-g-line);box-shadow:var(--nw-sh)}
.nw-cond__ic{width:32px;height:32px;border-radius:var(--nw-rp);background:var(--nw-g-tint);
  color:var(--nw-g);display:flex;align-items:center;justify-content:center;font-size:17px;transition:.2s}
.nw-cond__link:hover .nw-cond__ic{background:var(--nw-g);color:#fff;transform:rotate(-6deg)}

/* ============================================================
   4) GUIDE CARD  (post)
   ============================================================ */
.nw-guide{cursor:pointer}
.nw-guide__link{padding:24px;display:flex;flex-direction:column;height:100%}
.nw-guide__thumb{width:56px;height:56px;border-radius:14px;object-fit:cover;display:block;
  transition:transform .26s cubic-bezier(.2,.7,.3,1)}
.nw-guide:hover .nw-guide__thumb{transform:scale(1.05)}
.nw-guide__title{font-weight:500;font-size:17px;margin:14px 0 7px;line-height:1.4}
.nw-guide__excerpt{font-size:14px;color:var(--nw-txt2);margin-bottom:14px;flex:1}
.nw-guide:hover{transform:translateY(-5px);box-shadow:var(--nw-sh-lift);border-color:var(--nw-g-line)}
.nw-guide:hover .nw-ic{background:var(--nw-g);color:#fff;transform:scale(1.06)}
.nw-guide:hover .nw-more .nw-i{transform:translateX(4px)}

/* ============================================================
   5) REVIEW CARD  (CPT)
   ============================================================ */
.nw-review{padding:26px;position:relative}
.nw-review__q{position:absolute;top:20px;right:22px;width:34px;height:34px;color:var(--nw-g-tint)}
.nw-review .nw-stars{font-size:15px;margin-bottom:14px}
.nw-review__text{font-size:16px;color:#3a4150;margin:0 0 20px;line-height:1.65;position:relative}
.nw-review__who{display:flex;align-items:center;gap:12px}
.nw-review__who .nw-review__avatar{width:40px;height:40px;min-width:40px;aspect-ratio:1;border-radius:50%;object-fit:cover;flex-shrink:0}
.nw-review__avatar--initials{background:var(--nw-g-tint);color:var(--nw-g-dark);
  display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px}
.nw-review__name{font-size:15px;font-weight:500;display:block}
.nw-review__role{font-size:13px;color:var(--nw-muted)}

/* ============================================================
   REVEAL ANIMATION  (item enters as it scrolls in)
   JS adds .is-in; delay is set inline per index by listings.js
   ============================================================ */
/* Hidden state is gated behind .nw-anim, which JS adds at runtime.
   => if JS is delayed/blocked (e.g. FlyingPress "Delay JS"), items stay
   visible instead of blanking the listing / hurting LCP. */
.nw-reveal-grid.nw-anim .nw-item{opacity:0;transform:translateY(22px);
  transition:opacity .65s cubic-bezier(.2,.7,.3,1),transform .65s cubic-bezier(.2,.7,.3,1)}
.nw-reveal-grid.nw-anim .nw-item.is-in{opacity:1;transform:none}

/* Slider mode (JetEngine Swiper): viewport reveal can't work in a horizontal
   track, so off-screen slides would stay hidden. Force items visible inside
   any slider/slide, whatever the JS timing. */
.jet-listing-grid__slider .nw-item,
.swiper-slide .nw-item{opacity:1!important;transform:none!important}

@media (prefers-reduced-motion:reduce){
  .nw-reveal-grid .nw-item{opacity:1!important;transform:none!important;transition:none!important}
  .nw-prod__img,.nw-ic,.nw-cat,.nw-guide,.nw-review,.nw-card{transition:none!important}
}

/* ============================================================
   SKELETON  (shown only during JetSmartFilters / AJAX loading)
   listings.js injects .nw-sk cards and toggles .is-loading
   ============================================================ */
.nw-reveal-grid.is-loading .nw-item{opacity:.0;pointer-events:none}
.nw-sk{border:1px solid var(--nw-line);border-radius:var(--nw-r);background:#fff;
  box-shadow:var(--nw-sh-soft);overflow:hidden}
.nw-sk__media{aspect-ratio:4/3;background:#eef1f0}
.nw-sk__body{padding:17px;display:flex;flex-direction:column;gap:11px}
.nw-sk__l{height:12px;border-radius:6px;background:#eceeed;display:block}
.nw-sk__l.w70{width:70%}.nw-sk__l.w50{width:50%}.nw-sk__l.w40{width:40%}.nw-sk__l.w30{width:30%}
.nw-sk--cat{padding:24px 20px;display:flex;flex-direction:column;gap:13px}
.nw-sk--cat .nw-sk__chip{width:50px;height:50px;border-radius:14px;background:#eceeed}
.nw-sk--cond{display:inline-flex;align-items:center;gap:10px;border-radius:var(--nw-rp);
  padding:9px 22px 9px 9px;width:160px}
.nw-sk--cond .nw-sk__chip{width:32px;height:32px;border-radius:var(--nw-rp);background:#eceeed;flex-shrink:0}
.nw-sk--review{padding:26px;display:flex;flex-direction:column;gap:11px}
/* shimmer sweep */
.nw-sk__media,.nw-sk__l,.nw-sk__chip{position:relative;overflow:hidden}
.nw-sk__media::after,.nw-sk__l::after,.nw-sk__chip::after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  animation:nw-shimmer 1.25s infinite}
@keyframes nw-shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .nw-sk__media::after,.nw-sk__l::after,.nw-sk__chip::after{animation:none}
}