/* HandBuilt Materials Tables (front-end)
   Button styling is driven by CSS variables. You can override via:
   - HB Materials → Styles
   - or Appearance → Customize → Additional CSS
*/

.hbmt{
  --hbmt-btn-radius: 999px;
  --hbmt-btn-pad-y: 10px;
  --hbmt-btn-pad-x: 12px;
  --hbmt-btn-font-size: 13px;
  --hbmt-btn-font-weight: 800;
  --hbmt-btn-border-w: 0px;
  --hbmt-btn-shadow: none;
  --hbmt-hover-lift: 1;
  --hbmt-outline-fill-hover: 1;
  --hbmt-card-bg: #fff;
--hbmt-card-border: #e6e6e6;
--hbmt-card-text: #111;
--hbmt-card-muted: #555;
--hbmt-card-radius: 18px;
--hbmt-card-pad: 12px;
--hbmt-cards-gap: 12px;
--hbmt-card-gap: 12px;
--hbmt-img-size: 110px;
--hbmt-img-radius: 14px;
--hbmt-table-border: #e6e6e6;
--hbmt-table-text: #111;
--hbmt-table-muted: #555;
--hbmt-table-radius: 16px;
--hbmt-table-img-size: 90px;
--hbmt-table-img-radius: 12px;
--hbmt-table-head-text: #333;
  --hbmt-table-bg: #fff;
  --hbmt-table-head-bg: #fafafa;
  --hbmt-table-zebra-bg: #f6f6f6;
}

/* Store defaults (can be overridden by inline settings) */
.hbmt .hbmt-amazon{ --hbmt-store-solid:#FF9900; --hbmt-store-text:#111; --hbmt-store-border:#FF9900; --hbmt-store-grad:linear-gradient(135deg,#FF9900,#FFC266); }
.hbmt .hbmt-walmart{ --hbmt-store-solid:#0071CE; --hbmt-store-text:#fff; --hbmt-store-border:#0071CE; --hbmt-store-grad:linear-gradient(135deg,#0071CE,#2EA0FF); }
.hbmt .hbmt-lowes{ --hbmt-store-solid:#004990; --hbmt-store-text:#fff; --hbmt-store-border:#004990; --hbmt-store-grad:linear-gradient(135deg,#004990,#1E6FC0); }
.hbmt .hbmt-tractorsupply{ --hbmt-store-solid:#D4002A; --hbmt-store-text:#fff; --hbmt-store-border:#D4002A; --hbmt-store-grad:linear-gradient(135deg,#D4002A,#FF2A4F); }
.hbmt .hbmt-custom{ --hbmt-store-solid:#222; --hbmt-store-text:#fff; --hbmt-store-border:#222; --hbmt-store-grad:linear-gradient(135deg,#222,#444); }
.hbmt-cards{display:grid;gap:var(--hbmt-cards-gap, 12px)}
.hbmt-card{border:1px solid var(--hbmt-card-border, #e6e6e6);border-radius:var(--hbmt-card-radius, 18px);padding:var(--hbmt-card-pad, 12px);display:grid;gap:var(--hbmt-card-gap, 12px);grid-template-columns:var(--hbmt-img-size, 110px) 1fr;align-items:start;background:var(--hbmt-card-bg, #fff);color:var(--hbmt-card-text, #111)}
.hbmt-img{width:var(--hbmt-img-size, 110px);height:var(--hbmt-img-size, 110px);border-radius:var(--hbmt-img-radius, 14px);overflow:hidden;background:#f5f5f5;border:1px solid #eee}
.hbmt-img img{width:100%;height:100%;object-fit:cover;display:block}
.hbmt-title{margin:0;font-size:16px;line-height:1.2}
.hbmt-desc{margin:6px 0 0;color:var(--hbmt-card-muted, #555);font-size:14px;line-height:1.35}
.hbmt-buy{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hbmt-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: var(--hbmt-btn-pad-y) var(--hbmt-btn-pad-x);
  border-radius: var(--hbmt-btn-radius);
  font-weight: var(--hbmt-btn-font-weight);
  font-size: var(--hbmt-btn-font-size);
  line-height:1;
  text-decoration:none;
  border: var(--hbmt-btn-border-w) solid transparent;
  box-shadow: var(--hbmt-btn-shadow);
  transition: transform .08s ease, opacity .12s ease;
}

.hbmt-btn:hover{
  opacity:.92;
  transform: translateY(calc(var(--hbmt-hover-lift) * -1px));
}

/* Modes */
.hbmt-mode-solid .hbmt-btn{
  background: var(--hbmt-store-solid, #222);
  color: var(--hbmt-store-text, #fff);
  border-color: var(--hbmt-store-border, transparent);
}

.hbmt-mode-gradient .hbmt-btn{
  background: var(--hbmt-store-grad, var(--hbmt-store-solid, #222));
  color: var(--hbmt-store-text, #fff);
  border-color: var(--hbmt-store-border, transparent);
}

.hbmt-mode-outline .hbmt-btn{
  background: transparent;
  color: var(--hbmt-store-border, var(--hbmt-store-solid, #111));
  border-color: var(--hbmt-store-border, var(--hbmt-store-solid, #111));
}

.hbmt-mode-outline.hbmt-outline-fill .hbmt-btn:hover{
  background: var(--hbmt-store-solid, #222);
  color: var(--hbmt-store-text, #fff);
}

@media (max-width:700px){.hbmt-card{grid-template-columns:1fr}.hbmt-img{width:100%;height:180px}}

.hbmt-table{width:100%;color:var(--hbmt-table-text, #111);border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--hbmt-card-border, #e6e6e6);border-radius:16px;background:var(--hbmt-table-bg, #fff)}
.hbmt-table th,.hbmt-table td{padding:12px;border-bottom:1px solid #eee;vertical-align:top}
.hbmt-table th{background:var(--hbmt-table-head-bg, #fafafa);text-align:left;font-size:13px;color:var(--hbmt-table-head-text, #333)}
.hbmt-timg{width:var(--hbmt-table-img-size, 90px)}
.hbmt-timg img{width:var(--hbmt-table-img-size, 90px);height:var(--hbmt-table-img-size, 90px);object-fit:cover;border-radius:var(--hbmt-table-img-radius, 12px);border:1px solid #eee;background:#f5f5f5}
.hbmt-tname{font-weight:800}
.hbmt-tdesc{color:var(--hbmt-table-muted, #555);font-size:14px;line-height:1.35}

/* Zebra rows (enabled by adding .hbmt-zebra on wrapper) */
.hbmt.hbmt-zebra .hbmt-table tbody tr:nth-child(even) td{background:var(--hbmt-table-zebra-bg, #f6f6f6)}