/* ==============================================================
   HEAVEN TCG · the Trusted Seller / customer reviews band
   Sits between the header and the toolbar on the storefront, so a
   first-time visitor sees the KupujemProdajem record before they
   ever reach the Add to cart button.

   Loaded by shop-cart.js as a real stylesheet: the published shop
   runs under style-src 'self'.
   Added 2026-07-29.
   ============================================================== */

.hv-trust{margin:0 0 20px}
.hv-trust-in{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 20px;align-items:center;
  padding:16px 18px;border-radius:var(--radius,16px);
  border:1px solid var(--border-strong,rgba(232,163,77,.30));
  background:
    radial-gradient(600px 200px at 0% 0%, rgba(232,163,77,.10), transparent 70%),
    var(--surface-1,#2a1f19);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}

/* ---- the score block ---- */
.hv-trust .score{display:flex;align-items:center;gap:14px}
.hv-trust .ring{
  flex:0 0 auto;width:74px;height:74px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px solid var(--accent,#e8a34d);
  background:radial-gradient(circle at 50% 30%, rgba(232,163,77,.22), transparent 70%);
}
.hv-trust .ring b{font:800 21px/1 var(--head,'Quicksand',sans-serif);color:var(--accent,#e8a34d)}
.hv-trust .ring i{font-style:normal;font-size:9px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-secondary,#d8c4b0);margin-top:3px}
.hv-trust .meta{min-width:0}
.hv-trust .meta .stars{display:block;font-size:15px;letter-spacing:2px;color:var(--accent,#e8a34d);line-height:1}
.hv-trust .meta .n{display:block;margin-top:5px;font:800 15px/1.25 var(--head,'Quicksand',sans-serif);
  color:var(--text-primary,#f6ece0)}
.hv-trust .meta .n span{color:var(--accent,#e8a34d)}
.hv-trust .meta .sub{display:block;margin-top:3px;font-size:11.5px;line-height:1.45;color:var(--muted,#a08a78)}
.hv-trust .meta .sub b{color:var(--text-secondary,#d8c4b0);font-weight:800}

/* ---- the testimonial rail ---- */
.hv-trust .rail{
  display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:2px 2px 8px;scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:rgba(232,163,77,.35) transparent;
}
.hv-trust .rail::-webkit-scrollbar{height:6px}
.hv-trust .rail::-webkit-scrollbar-thumb{background:rgba(232,163,77,.30);border-radius:100px}
.hv-trust .rev{
  flex:0 0 236px;scroll-snap-align:start;
  padding:11px 13px;border-radius:12px;
  border:1px solid var(--border,rgba(232,163,77,.14));
  background:var(--bg2,#241a15);
}
.hv-trust .rev .q{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-primary,#f6ece0)}
.hv-trust .rev .who{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:8px;
  font-size:10.5px;letter-spacing:.4px;color:var(--muted,#a08a78);
}
.hv-trust .rev .who b{color:var(--text-secondary,#d8c4b0);font-weight:800;font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-trust .rev .ok{color:var(--good,#8fa85a);font-weight:800;white-space:nowrap}

/* ---- the call to action ---- */
.hv-trust .cta{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.hv-trust .all{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  padding:10px 18px;border-radius:100px;
  font:800 12px/1 var(--ui,'Nunito',sans-serif);letter-spacing:.7px;text-transform:uppercase;
  background:var(--accent,#e8a34d);color:#241a15;
  border:1px solid var(--accent,#e8a34d);
  transition:filter .15s ease,transform .15s ease;
}
.hv-trust .all:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hv-trust .fine{font-size:11px;line-height:1.5;color:var(--muted,#a08a78)}
.hv-trust .fine a{color:var(--text-secondary,#d8c4b0)}

@media (max-width:860px){
  .hv-trust-in{grid-template-columns:1fr;gap:12px;padding:14px}
  .hv-trust .ring{width:64px;height:64px}
  .hv-trust .ring b{font-size:18px}
  .hv-trust .rev{flex-basis:78%}
  .hv-trust .all{width:100%;justify-content:center}
}

/* ---- one line of it inside the product lightbox ---- */
.hv-lbtrust{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:12px 0 0;padding:9px 12px;border-radius:11px;
  border:1px solid var(--border,rgba(232,163,77,.16));background:rgba(232,163,77,.06);
  font-size:12px;line-height:1.45;color:var(--text-secondary,#d8c4b0);
}
.hv-lbtrust .s{color:var(--accent,#e8a34d);letter-spacing:1.5px}
.hv-lbtrust b{color:var(--text-primary,#f6ece0)}
.hv-lbtrust a{color:var(--accent,#e8a34d);text-decoration:none;font-weight:800;white-space:nowrap}
.hv-lbtrust a:hover{text-decoration:underline}


/* ---------- tighter band (asked for on 2026-07-31) ----------------------
   The first cut stood 190px tall and pushed the catalogue below the fold.
   Same content, smaller type and padding, so it reads as a ribbon. */
.hv-trust{margin:0 0 12px}
.hv-trust-in{gap:8px 14px;padding:10px 14px;border-radius:13px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.hv-trust .score{gap:10px}
.hv-trust .ring{width:54px;height:54px;border-width:1.5px}
.hv-trust .ring b{font-size:15px}
.hv-trust .ring i{font-size:7px;letter-spacing:.5px;margin-top:2px}
.hv-trust .meta .stars{font-size:12px;letter-spacing:1.5px}
.hv-trust .meta .n{margin-top:3px;font-size:13px}
.hv-trust .meta .sub{margin-top:2px;font-size:10px;line-height:1.4}
.hv-trust .rail{gap:8px;padding:0 2px 6px}
.hv-trust .rail::-webkit-scrollbar{height:4px}
.hv-trust .rev{flex:0 0 202px;padding:8px 10px;border-radius:10px}
.hv-trust .rev .q{font-size:11.5px;line-height:1.42}
.hv-trust .rev .who{margin-top:6px;font-size:9.5px}
.hv-trust .rev .who b{font-size:10px}
.hv-trust .cta{gap:10px;margin-top:2px}
.hv-trust .all{padding:7px 13px;font-size:11px}
.hv-trust .fine{font-size:10px;line-height:1.4}