/* hc_price_per_unity.css — styles for the HomeCenter price-per-unit display module.
   Three variants: tile (listings), pdp (product detail), cart (cart row).
   Loaded globally via header.twig. */

/* ============================================================
   Shared base
   ============================================================ */
.hc-ppu { color: var(--cc-text-primary); }

/* ============================================================
   Variant: tile (category cards, listings, modules)
   Main: large bold per-unit price. Secondary: small yellow pill with box price.
   ============================================================ */
.hc-ppu--tile {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-1);
  align-items: flex-start;
  margin-top: var(--cc-space-2);
}
.hc-ppu--tile .hc-ppu__main {
  color: var(--cc-text-primary);
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  line-height: 1.2;
}
.hc-ppu--tile .hc-ppu__box {
  display: inline-block;
  background: var(--cc-color-accent-400, #f5b82e);
  color: var(--cc-color-gray-1000);
  padding: 4px 10px;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-medium);
  letter-spacing: var(--cc-tracking-wide);
}

/* ============================================================
   Variant: pdp (product detail page)
   3 stacked lines with the per-unit, box content, and box price info.
   ============================================================ */
.hc-ppu--pdp {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-1);
  margin-top: var(--cc-space-3);
}
.hc-ppu--pdp .hc-ppu__line {
  margin: 0;
  font-size: var(--cc-text-body);
  color: var(--cc-text-primary);
  line-height: 1.45;
}
.hc-ppu--pdp .hc-ppu__line strong {
  color: var(--cc-text-primary);
  font-weight: var(--cc-font-bold);
}

/* ============================================================
   Variant: cart (single-line, compact)
   Used inside the product-name cell of the cart table.
   ============================================================ */
.hc-ppu--cart {
  display: block;
  margin-top: var(--cc-space-1);
  color: var(--cc-text-secondary);
  font-size: var(--cc-text-sm);
  line-height: 1.4;
}
.hc-ppu--cart strong {
  color: var(--cc-text-primary);
  font-weight: var(--cc-font-bold);
}

/* ============================================================
   Variant: badge — absolute-positioned overlay chip (top-left of product image)
   Inspired by flooring store "Under $X sqft" tabs; uses theme red.
   Container must have position: relative (cc-tile__figure etc. get it via cc-tile rules).
   ============================================================ */
.hc-ppu-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background: var(--cc-color-red-500);
  color: #fff;
  padding: 14px 20px 16px 14px;
  border-radius: 0 0 28px 0;
  min-width: 90px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  pointer-events: none; /* so clicks pass through to the underlying link */
}
.hc-ppu-badge__price {
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-font-bold);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.hc-ppu-badge__unit {
  font-size: var(--cc-text-xs);
  opacity: 0.9;
  margin-top: 1px;
  letter-spacing: var(--cc-tracking-wide);
  line-height: 1.2;
}
.hc-ppu-badge__pct {
  margin-top: 4px;
  background: #000;
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: var(--cc-font-bold);
  letter-spacing: var(--cc-tracking-wide);
}
/* Subtle tilt/hover — when the parent tile is hovered, badge nudges to emphasize */
.cc-tile:hover .hc-ppu-badge,
.j-rank-card:hover .hc-ppu-badge {
  transform: translateY(-2px);
  transition: transform 200ms var(--cc-ease-out);
}

/* ============================================================
   Variant: mini (ranking #04-#10 cards, narrow ~150px tiles)
   Single line: "$40,00/m²  $53,33  -25%"  (no box pill — space-critical)
   ============================================================ */
.hc-ppu--mini {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: var(--cc-text-sm);
  line-height: 1.2;
}
.hc-ppu--mini .hc-ppu__main {
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
}
.hc-ppu--mini.hc-ppu--sale .hc-ppu__main {
  color: var(--cc-color-red-500);
}
.hc-ppu__was-inline {
  font-size: var(--cc-text-xs);
  color: var(--cc-text-secondary);
  text-decoration: line-through;
  opacity: 0.7;
  font-weight: var(--cc-font-regular);
}

/* ============================================================
   Sale state — applied to any variant when has_special=true
   Strikethrough on old value + discount % badge + accent color
   ============================================================ */
.hc-ppu--sale .hc-ppu__main {
  color: var(--cc-color-red-500);
}
.hc-ppu__was {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--cc-text-secondary);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-regular);
  margin-left: 8px;
}
.hc-ppu__was s {
  text-decoration: line-through;
  opacity: 0.7;
}
.hc-ppu__pct {
  background: var(--cc-color-red-500);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: var(--cc-font-bold);
  letter-spacing: var(--cc-tracking-wide);
}
.hc-ppu__box-was {
  margin-left: 6px;
  opacity: 0.7;
  font-weight: var(--cc-font-regular);
}

/* Tile variant sale: put "was" and pct on a second line below main */
.hc-ppu--tile.hc-ppu--sale {
  gap: 4px;
}
.hc-ppu--tile .hc-ppu__was {
  margin-left: 0;
}

/* PDP variant: badge as a standalone block below the 3 lines */
.hc-ppu--pdp .hc-ppu__sale-badge {
  margin: var(--cc-space-2) 0 0;
  display: inline-block;
  background: var(--cc-color-red-500);
  color: #fff;
  padding: 4px 10px;
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
}