/* ==========================================================================
   HELIOS LABS — THE ONE PRODUCT CARD (sitewide)
   --------------------------------------------------------------------------
   Loaded on EVERY page, not just the front page. The homepage rail, the shop
   archive, category archives and search all render through hl_product_card();
   if these internals lived in hl-home.css the card would collapse the moment
   it left the front page. The `.hl-card` shell itself lives in hl-tokens.css.
   ========================================================================== */

/* ---------- the ONE product card (internals) ------------------------------ */
.hl-card__arc{pointer-events:none;position:absolute;right:0;top:0;z-index:20;height:230px;width:150px;overflow:visible;
  filter:drop-shadow(0 0 3px rgba(252,85,1,.55))}
.hl-card__hit{position:absolute;inset:0;z-index:10;border-radius:var(--hl-r-2xl)}
.hl-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:1.1rem}
.hl-card__ref{
  display:flex;min-width:0;align-items:center;gap:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--hl-font-mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hl-faint);
}
.hl-card__ref .lbl{color:var(--hl-stone)}
.hl-card__ref .sep{color:var(--hl-glacier);margin:0 2px}
.hl-card__popular{
  display:flex;align-items:center;gap:6px;
  font-family:var(--hl-font-mono);font-weight:600;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--hl-glacier);
}
.hl-card__popular .dot{height:6px;width:6px;flex-shrink:0;border-radius:9999px;background:var(--hl-glacier)}
.hl-card__plate{position:relative;margin-top:12px;height:9rem;width:100%}
@media (min-width:640px){.hl-card__plate{margin-top:16px;height:13rem}}
.hl-card__imgwrap{position:absolute;inset:16px}
.hl-card__imgwrap img,.hl-card__img{position:absolute;inset:0;height:100%;width:100%;object-fit:contain;mix-blend-mode:screen}
.hl-card__deal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:16px 0 0}
@media (min-width:640px){.hl-card__deal{margin-top:20px}}
.hl-card__deal-note{font-family:var(--hl-font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hl-glacier)}
.hl-card__deal-note .amount,.hl-card__deal-note bdi{color:inherit}
.hl-card__title{
  margin:8px 0 0;min-height:2.5em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--hl-font-mono);font-weight:500;font-size:.92rem;line-height:1.25;
  letter-spacing:.01em;text-transform:uppercase;color:var(--hl-bone);
}
@media (min-width:640px){.hl-card__title{font-size:1.15rem}}
.hl-card__spec{margin:8px 0 0;font-family:var(--hl-font-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--hl-stone)}
.hl-card__spec .sep{color:var(--hl-glacier);margin:0 6px}
.hl-card__pills{position:relative;z-index:20;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;min-height:2.35rem}
.hl-card__pills--tier{align-items:center;gap:6px;margin-top:8px;min-height:2rem}
.hl-card__unitprice{margin-left:4px;font-family:var(--hl-font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--hl-faint)}
.hl-card__unitprice .amount,.hl-card__unitprice bdi{color:inherit}
.hl-card__price{
  margin:auto 0 0;padding-top:12px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  font-family:var(--hl-font-mono);font-weight:500;font-size:1.15rem;
  font-variant-numeric:tabular-nums;color:var(--hl-bone);
}
@media (min-width:640px){.hl-card__price{padding-top:16px;font-size:1.6rem}}
.hl-card__price del{color:var(--hl-faint);font-size:.7em;text-decoration:line-through}
.hl-card__price ins{text-decoration:none;color:var(--hl-bone)}
.hl-card__cta{position:relative;z-index:20;margin-top:16px}

/* ---------- WooCommerce interop ------------------------------------------
   1. Woo core ships
        .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button
      which computes at (0,2,1) and repaints our accent CTA as a grey pill on
      every page whose <body> carries `woocommerce`. Matched with an equal
      class count + an id-free (0,3,1) selector so ours wins on any surface.
   2. `ul.products::before` is Woo's float clearfix. On a `display:grid`
      container it becomes a REAL grid item, takes cell 1 and shifts the whole
      grid one cell right while the card COUNT stays correct. Kill both
      pseudo-elements wherever the grid is used.
   ------------------------------------------------------------------------ */
.woocommerce a.button.hl-btn.hl-btn-primary,
.woocommerce-page a.button.hl-btn.hl-btn-primary,
body.woocommerce a.hl-btn.hl-btn-primary,
.hl-card__cta a.button.hl-btn {
  background:var(--hl-glacier);
  color:#000;
  border:0;
  border-radius:0;
  font-family:var(--hl-font-condensed);
  text-transform:uppercase;
  text-decoration:none;
}
.woocommerce a.button.hl-btn.hl-btn-primary:hover,
.woocommerce-page a.button.hl-btn.hl-btn-primary:hover,
body.woocommerce a.hl-btn.hl-btn-primary:hover,
.hl-card__cta a.button.hl-btn:hover { background:var(--hl-glacier-hover); color:#000; }

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,
ul.products::after { content:none !important; display:none !important; }