:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --accent:#ff6a00;
  --muted:#6b7280;
  --dark:#3d3d3f;
  --radius:10px;
}

/* reset */
*{box-sizing:border-box}
body, .bf-body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* container */
.container{max-width:1280px;margin:0 auto;padding:0 8px;}

/* Search bar */
.search-wrap{display:flex;justify-content:center;margin:14px 0;}
.search{
  width:100%; max-width:980px;
  background:var(--card); border-radius:12px;
  padding:10px 12px; display:flex; align-items:center; gap:10px;
  border:1px solid rgba(15,23,42,0.04);
  box-shadow:0 6px 18px rgba(16,24,40,0.04);
}
.search svg{flex:0 0 20px; opacity:.65}
.search input{flex:1; border:0; outline:0; font-size:15px; background:transparent; color:var(--dark);}

/* Grid / breakpoints */
.product-container, .grid {
  display: grid;
  gap:3px;
  grid-template-columns: repeat(2, 1fr);
  padding: 6px;
  align-items:start;
}
@media (min-width:600px){ .product-container, .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width:900px){ .product-container, .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width:1200px){ .product-container, .grid { grid-template-columns: repeat(6, 1fr); } }

/* Card root */
.product-card{
  background:var(--card);
  border-radius:var(--radius);
  padding:6px;              /* reduced padding */
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(15,23,42,0.06);
  overflow:hidden;
  min-height:200px;        /* reduced card height */
  transition:transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  position: relative;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(2,6,23,0.06); }

/* clickable image + title area */
.card-link { display:block; color:inherit; text-decoration:none; }
.card-link:focus { outline: none; }

/* Thumb */
.thumb{
  background:transparent;
  margin:4px;
  height:150px;            /* slightly smaller to shrink card */
  border-radius: 8px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Meta title - allow wrapping up to 2 lines, readable on small devices */
.meta-top { padding:6px 8px 0 8px; }
.name {
  margin:2px 0;
  font-weight:700;
  font-size:8.5pt;            /* keep 9pt for title */
  color:var(--dark);
  line-height:1.1;
  display:-webkit-box;
  -webkit-line-clamp:2;     /* show up to 2 lines */
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break: break-word;
  text-align: left;
}

/* Prices + inline add button */
.meta { padding:6px 8px 8px 8px; }
.price-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
}

/* price block vertical */
.price-block {
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* Current price: bold, 9pt */
.price-current {
  font-weight:900;
  font-size:9pt;
  color:var(--dark);
  line-height:1;
}

/* Old price: faded black with double-strike */
.price-old {
  position:relative;
  color: rgba(0,0,0,0.65);
  font-size:11px;
  line-height:1;
  padding-top:2px;
}

/* first strikethrough */
.price-old.del-line {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0,0,0,0.7);
}

/* second strike */
.price-old.del-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(0,0,0,0.55);
  top: 60%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* action button inline on same row as prices */
.action-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:18px;
  font-weight:900;
  border:none;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(255,106,0,0.22);
}

/* Discount pill (top-left) */
.bf-percent {
  position:absolute;
  top:10px;
  left:10px;
  background:var(--accent);
  color:#fff;
  padding:5px 8px;
  border-radius:6px;
  font-weight:700;
  font-size:12px;
  z-index:3;
  box-shadow: 0 6px 14px rgba(255,106,0,0.12);
  white-space: nowrap;
}

/* Black Friday small badge (top-right) */
.bf-label {
  position:absolute;
  top:10px;
  right:10px;
  background:#000;
  color:#fff;
  padding:3px 6px;
  border-radius:5px;
  font-weight:700;
  font-size:10px;
  letter-spacing:.3px;
  z-index:4;
  white-space: nowrap;
}



/* Empty state */
.empty-state {
  grid-column: 1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:28px;
  background: #fff;
  border-radius:12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  text-align:center;
  color:var(--muted);
}
.empty-state img{
  max-width:220px;
  width:100%;
  height:auto;
  border-radius:8px;
  object-fit:contain;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* responsive tweaks */
@media (max-width:480px){
  .thumb{ height:140px; margin:4px; }
  .name { font-size:8.5pt; -webkit-line-clamp:2; }
  .price-current{ font-size:9pt; }
  .price-old{ font-size:10px; }
  .bf-percent{ padding:4px 7px; font-size:11px; }
  .bf-label{ padding:2px 5px; font-size:9px; color:#fff;}
}

/* utility */
.visually-hidden { position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }