/**
 * v99-additions.css
 * New styles for boolymon v99:
 *  1. Four-dot menu button
 *  2. Home product grid: square images, no text, uniform, compact
 *  3. Quick Add Product admin enhancements (image upload UI)
 */

/* ── 1. FOUR-DOT MENU BUTTON ─────────────────────────────────────── */
.cb-menu-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  background: var(--cb-right-pill-base, var(--cb-menu-green));
  border: none;
  border-radius: 4px;
  cursor: pointer;
  min-width: 44px;
  min-height: 36px;
  transition: background .2s;
}
.cb-menu-dots:hover {
  background: var(--cb-menu-green-hover, #d9ff66);
}
.cb-menu-dots .cb-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cb-right-link-color, #333);
  flex-shrink: 0;
  transition: transform .15s;
}
.cb-menu-dots:hover .cb-dot {
  transform: scale(1.25);
}

/* ── 2. HOME GRID — SQUARE, NO TEXT, COMPACT ─────────────────────── */

/* Override section padding so it feels tighter / gallery-like */
.cb-home-products {
  padding: 1.2rem 1rem 2rem;
  max-width: 100%;
}

/* Remove label row — kept in PHP but visually hidden in v99 */
.cb-home-products-header {
  margin-bottom: 0.8rem;
}

/* Grid: 6 equal columns of squares, zero gap — like a fashion lookbook */
.cb-home-products-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  background: #e8e8e8;
  border: none;
}

/* Each card is a pure square image, no info panel below */
.cb-hprod-card {
  display: block;
  position: relative;
  overflow: hidden;
  background: #f0f0f0;
  aspect-ratio: 1 / 1;
  text-decoration: none;
}

/* Force the image wrapper to fill the square */
.cb-hprod-img-wrap {
  position: absolute;
  inset: 0;
  aspect-ratio: unset;
  overflow: hidden;
  background: #f0f0f0;
}

/* Image fills square perfectly */
.cb-hprod-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, opacity 0.2s;
}
.cb-hprod-card:hover .cb-hprod-img {
  transform: scale(1.06);
}

/* Hide text info panel entirely on home grid */
.cb-home-products .cb-hprod-info {
  display: none !important;
}

/* Badges still show (optional — subtle overlay) */
.cb-home-products .cb-hprod-new-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.42rem;
  padding: 2px 5px;
  z-index: 2;
  letter-spacing: .08em;
}
.cb-home-products .cb-hprod-out-of-stock {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 0.42rem;
  padding: 2px 5px;
  z-index: 2;
  letter-spacing: .08em;
}

/* Responsive: 4 cols tablet, 3 cols mobile */
@media (max-width: 900px) {
  .cb-home-products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 540px) {
  .cb-home-products-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── 3. QUICK ADD PRODUCT — IMAGE UPLOAD AREA ────────────────────── */
/* Admin-side styles are injected inline via PHP, but these cover the
   front-end rendered image thumbnails if needed */
.cb-img-upload-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.cb-img-upload-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* ── 4. CATEGORY PAGES (men, women, etc.) ───────────────────────── */
.cb-category-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.6rem 1.2rem 4rem;
}
.cb-category-header {
  margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--cb-border-soft, #eee);
  padding-bottom: .6rem;
}
.cb-category-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cb-color-heading);
  margin: 0;
}
.cb-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #e8e8e8;
}
.cb-cat-card {
  display: block;
  background: #fff;
  text-decoration: none;
  transition: background .18s;
}
.cb-cat-card:hover { background: #f7f7f7; }
.cb-cat-img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #f0f0f0;
}
.cb-cat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.cb-cat-card:hover .cb-cat-img { transform: scale(1.04); }
.cb-cat-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #f0f0f0 0%, #e4e4e4 100%);
}
.cb-cat-badge {
  position: absolute;
  bottom: 6px; left: 6px;
  font-size: .42rem;
  padding: 2px 6px;
  border-radius: 2px;
  background: #222;
  color: #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cb-cat-info {
  padding: .7rem .8rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .4rem;
  border-top: 1px solid #eee;
}
.cb-cat-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: .54rem;
  font-weight: 600;
  color: var(--cb-color-heading);
  flex: 1;
}
.cb-cat-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: .54rem;
  font-weight: 500;
  color: var(--cb-right-pill-base);
  white-space: nowrap;
}
.cb-cat-empty {
  padding: 3rem 0;
  font-size: .58rem;
  color: #aaa;
  text-align: center;
}
.cb-cat-empty a { color: var(--cb-hamburger-pink); }

@media (max-width: 900px) {
  .cb-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .cb-cat-grid { grid-template-columns: repeat(2, 1fr); }
}