/* =========================================================
   HB — Archive App UI (CLEAN + COMPACT)
   Keep ONLY this CSS (remove the old duplicates)
========================================================= */

:root{
  --hb-ink:#0B0B0F;
  --hb-muted:rgba(11,11,15,.62);
  --hb-line:rgba(15,23,42,.10);
  --hb-card:#ffffff;
  --hb-radius:16px;
  --hb-wrap:1240px;
  --hb-yellow:#FEF926;

  /* ✅ IMPORTANT: set this to your fixed header height */
  --hb-stickyTop: 84px;
}

/* Kill OceanWP breadcrumb/header if any remains */
.woocommerce .woocommerce-breadcrumb,
.oceanwp-breadcrumb,
.page-header{ display:none !important; }

body.post-type-archive-product,
body.tax-product_cat{
  background:#fff;
}

/* ⚠️ Sticky can break if any parent has overflow hidden/auto.
   These are safe guards for common theme wrappers. */
body.post-type-archive-product #wrap,
body.tax-product_cat #wrap,
body.post-type-archive-product #main,
body.tax-product_cat #main,
body.post-type-archive-product .content-area,
body.tax-product_cat .content-area{
  overflow: visible !important;
}

/* =========================
   HERO
========================= */
.hbHero{
  position:relative;
  height:320px;
  overflow:hidden;
}
.hbHero__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}
.hbHero__bg--fallback{
  background:linear-gradient(135deg,#0B0B0F 0%, #1b1b22 60%, #0B0B0F 100%);
}
.hbHero__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.60) 75%, rgba(0,0,0,.78) 100%);
}

@media (max-width:767px){
  .hbHero{ height:240px; }
}

/* =========================
   STICKY FILTER / APP BAR (FIXED)
========================= */
.hbBar{
  
  background:#fff;
  border-bottom:1px solid var(--hb-line);
}

.hbBar__inner{
  width:min(var(--hb-wrap), calc(100% - 32px));
  margin:0 auto;
  padding:10px 0; /* more compact */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.woocommerce .woocommerce-result-count{
  margin:0 !important;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(11,11,15,.55);
}

.woocommerce .woocommerce-ordering{ margin:0 !important; }
.woocommerce .woocommerce-ordering select{
  border:1px solid #E6E7EB;
  border-radius:12px;
  padding:9px 10px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:600;
  font-size:12px;
  background:#fff;
}

/* MAIN WRAP */
.hbMain{ padding:14px 0 40px; }
.hbWrap{
  width:min(var(--hb-wrap), calc(100% - 32px));
  margin:0 auto;
}

/* =========================
   FORCE GRID (overrides Woo/OceanWP floats/widths)
========================= */
.woocommerce ul.products{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;

  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:14px !important;

  width:100% !important;
  float:none !important;
}
.woocommerce ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  max-width:none !important;
}
@media (max-width:1024px){
  .woocommerce ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:640px){
  .woocommerce ul.products{ grid-template-columns:1fr !important; gap:12px !important; }
}

/* =========================================================
   COMPACT PRODUCT CARD (use ONE system: hbCard2)
   Your markup should wrap each product as .hbCard2
========================================================= */

/* Card shell: subtle border, compact, minimal shadow */
.hbCard2{
  position:relative;
  border:1px solid #E8E9EE;            /* ✅ little border */
  border-radius:18px;                  /* slightly tighter */
  background:#fff;
  overflow:hidden;
  box-shadow:none;                     /* ✅ keep compact/clean */
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
@media (hover:hover){
  .hbCard2:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 26px rgba(0,0,0,.06); /* light only on hover */
    border-color:rgba(15,23,42,.14);
  }
}

/* Top row */
.hbCard2__top{
  position:absolute;
  top:13px; left:20px; right:20px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  pointer-events:none;
}
.hbCard2__badge{
  pointer-events:auto;
  background:var(--hb-yellow);
  color:#000;
  padding:7px 10px;                    /* ✅ smaller */
  border-radius:999px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:10px;
  font-weight:750;
  letter-spacing:.10em;
  text-transform:uppercase;
  line-height:1;
}
.hbShareBtn{
  pointer-events:auto;
  width:24px; height:24px;             /* ✅ smaller */
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:rgba(255,255,255,.78);
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--hb-ink);
}
.hbShareBtn span{ font-size:12px; line-height:1; }

/* Image */
.hbCard2__media{ display:block; padding:10px; }  /* ✅ tighter */
.hbCard2__img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}

/* Body */
.hbCard2__body{
  padding:0 12px 12px;                 /* ✅ tighter */
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.hbCard2__title{
  display:block;
  margin:8px 0 4px;
  color:var(--hb-ink);
  text-decoration:none !important;
  font-size:14px;                      /* ✅ compact */
  line-height:1.28;
  font-weight:650;
  letter-spacing:-0.01em;
}
.hbCard2__sub{
  margin:0 0 10px;
  color:var(--hb-muted);
  font-size:12px;
  font-weight:500;
  line-height:1.45;
}

/* Price row */
.hbCard2__priceRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin:8px 0 10px;
  flex-wrap:wrap;
}
.hbCard2__prices{
  display:flex;
  align-items:baseline;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}
.hbCard2__now,
.hbCard2__now *{ color:var(--hb-ink) !important; }
.hbCard2__now{
  font-size:15px;                      /* ✅ smaller */
  font-weight:800;
  letter-spacing:-0.01em;
  line-height:1.05;
}

.hbCard2__was,
.hbCard2__was *{ color:rgba(11,11,15,.38) !important; }
.hbCard2__was{
  font-size:12px;
  font-weight:650;
  text-decoration:line-through;
  white-space:nowrap;
}

.hbCard2__offPill{
  flex:0 0 auto;
  white-space:nowrap;
  padding:6px 8px;                     /* ✅ smaller */
  border-radius:999px;
  background:rgba(254,249,38,.14);
  border:1px solid rgba(254,249,38,.45);
  color:var(--hb-ink);
  font-size:10px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}

/* Chips (optional) */
.hbCard2__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 10px;
}
.hbChip{
  padding:7px 9px;                     /* ✅ smaller */
  border-radius:12px;
  background:#F3F5F9;
  border:1px solid rgba(15,23,42,.08);
  color:rgba(11,11,15,.72);
  font-size:11px;
  font-weight:650;
}
.hbChip--accent{
  background:rgba(254,249,38,.12);
  border-color:rgba(254,249,38,.50);
  color:var(--hb-ink);
}

/* CTA */
.hbCard2__cta a.button,
.hbCard2__cta .button{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:12px 12px !important;        /* ✅ compact */
  border-radius:999px !important;
  background:var(--hb-ink) !important;
  color:#fff !important;
  border:0 !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}
.hbCard2__cta a.button::before,
.hbCard2__cta .button::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hb-yellow);
  transform:translateX(-105%);
  transition:transform .28s ease;
  z-index:-1;
}
@media (hover:hover){
  .hbCard2__cta a.button:hover::before,
  .hbCard2__cta .button:hover::before{ transform:translateX(0); }
  .hbCard2__cta a.button:hover,
  .hbCard2__cta .button:hover{ color:#000 !important; }
}

/* Pagination (compact) */
.woocommerce nav.woocommerce-pagination{ margin-top:22px; }
.woocommerce nav.woocommerce-pagination ul{ border:0 !important; }
.woocommerce nav.woocommerce-pagination li{ border:0 !important; }
.woocommerce nav.woocommerce-pagination a,
.woocommerce nav.woocommerce-pagination span{
  border:1px solid #E6E7EB !important;
  border-radius:12px !important;
  padding:9px 12px !important;
  margin:0 5px !important;
  font-weight:700;
  color:var(--hb-ink) !important;
}
.woocommerce nav.woocommerce-pagination span.current{
  background:var(--hb-ink) !important;
  color:#fff !important;
  border-color:var(--hb-ink) !important;
}

/* Safety: kill Woo default green sale/ins */
.woocommerce .price ins,
.woocommerce .price ins .amount{
  color:var(--hb-ink) !important;
  text-decoration:none !important;
}
/* =========================
   REVIEW (replaces % pill)
========================= */
.hbCard2__review{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.hbCard2__review .star-rating{
  font-size:10px;
  margin:0;
}

.hbCard2__reviewCount{
  font-size:11px;
  font-weight:600;
  color:rgba(11,11,15,.55);
}
/* ===== Chips Row ===== */
.hbCard2__chips{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}

/* push engraving chip to extreme right */
.hbCard2__chips .hbChip--accent{
  margin-left:auto;
}
/* =========================
   HB — Overflow Guard (mobile)
   No UI change, just prevents horizontal scroll
========================= */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

/* Ensure grid + cards can shrink properly */
.woocommerce ul.products,
.woocommerce ul.products li.product,
.hbWrap,
.hbBar__inner,
.hbCard2{
  min-width:0;
}

/* Break long titles/attributes that can force overflow */
.hbCard2__title,
.hbCard2__sub,
.hbChip,
.hbCard2__now,
.hbCard2__prices{
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* Share icon sizing (same button size, only icon changes) */
.hbShareBtn svg{
  width:14px;
  height:14px;
  display:block;
  fill:currentColor;
}

/* Tiny feedback (only on click) */
.hbShareBtn{ position:relative; }
.hbShareBtn.is-copied::after{
  content:"Copied";
  position:absolute;
  top:-34px;
  right:0;
  background:rgba(11,11,15,.92);
  color:#fff;
  font-size:10px;
  font-weight:700;
  padding:6px 8px;
  border-radius:10px;
  white-space:nowrap;
}
.hbShareBtn.is-copied::before{
  content:"";
  position:absolute;
  top:-10px;
  right:10px;
  border:6px solid transparent;
  border-top-color:rgba(11,11,15,.92);
}
.hbResultCount{
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(11,11,15,.55);
}
/* =========================
   HB BAR — PERFECT VERTICAL ALIGN
   (non-sticky)
========================= */

/* make both sides flex containers */
.hbBar__left,
.hbBar__right{
  display:flex;
  align-items:center;
}

/* remove Woo default spacing causing vertical shift */
.woocommerce .woocommerce-ordering{
  margin:0 !important;
  display:flex;
  align-items:center;
}

/* align the form itself */
.woocommerce .woocommerce-ordering form{
  display:flex;
  align-items:center;
  margin:0;
}

/* normalize select vertical metrics */
.woocommerce .woocommerce-ordering select{
  height:34px;          /* matches visual height */
  line-height:34px;
  margin:0;
  vertical-align:middle;
}

/* ensure result text sits perfectly centered */
.hbResultCount{
  display:flex;
  align-items:center;
  height:34px;
}