/* ===========================================================================
   HOMESARA THEME — page-product-fabric.css
   Layers on top of page-product-normal.css (see inc/enqueue.php) — this
   file is deliberately NOT a copy of legacy/product-fabric.css: that file
   is the behavior-spec mockup (crude inline styles, demo-only classes like
   .cpt-tag/.page-hero/.stats-card2), not the design source (plan §5).

   This is the real delta: just the "Homesara Catalogue Buttons" (hcb_)
   row, rebuilt as proper classes from the exact inline-style values the
   mockup specified, so it inherits page-product-normal's layout/spacing
   instead of duplicating it.
   =========================================================================== */

.hcb-usage-icons {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.hcb-usage-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color .2s ease;
}
.hcb-usage-icon:hover {
  color: var(--gold-dark, #d3a25c);
}
.hcb-usage-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: transform .2s ease;
}
.hcb-usage-icon:hover img {
  transform: translateY(-2px);
}

.hcb-buttons-wrapper {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.hcb-buttons-wrapper a {
  /* flex:1 1 0 + min-width:0 splits the row evenly and lets each button
     shrink below its text's natural width - without min-width:0 a long
     collection name (e.g. "Back to ESSENTIALS 43") forced this row wider
     than the viewport, and without nowrap+ellipsis the text just wrapped
     to 2 lines instead, making the two buttons uneven, oversized heights. */
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--white, #fff);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hcb-buttons-wrapper .hcb-btn-catalogue {
  background: #c8a96e; /* exact value from the product-fabric.html mockup */
}
.hcb-buttons-wrapper .hcb-btn-collection {
  background: #2c2c2c; /* exact value from the product-fabric.html mockup */
}
@media (max-width:400px) {
  .hcb-buttons-wrapper { gap: 8px; }
  .hcb-buttons-wrapper a { font-size: 10px; padding: 9px 8px; }
}