/* DiceWings Category Browser — Amazon-style, square thumbs, rounded cards, soft shadows */

:root{
  --dw-bg: #ffffff;
  --dw-bg-2: #f7f7f7;
  --dw-border: #e5e7eb;
  --dw-text: #61366E;      /* your purple */
  --dw-accent: #7C3AED;    /* subtle accent on hover/active */
  --dw-shadow: 0 8px 22px rgba(17,24,39,.08);
  --dw-radius: 14px;
}

/* Layout */
.dwcb-browser {
  display: flex;
  background: var(--dw-bg);
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  overflow: auto;
  box-shadow: var(--dw-shadow);
}

/* Left = Sidebar (main categories) */
.dwcb-left {
  width: 20%;             /* ✅ reduce from 28% to 20% */
  min-width: 100px;       /* optional: reduce min-width if needed */
  background: var(--dw-bg-2);
  border-right: 1px solid var(--dw-border);
  height: 380vh;
  overflow: auto;
  padding: 12px;
}


.dwcb-right {
  width: 80%; /* ✅ complement of sidebar width */
  padding: 16px;
  background: var(--dw-bg);
}


/* Sidebar list becomes a column of “cards” */
.dwcb-cat-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 2fr; /* one per row */
  gap: 2px;
}

.dwcb-cat-item{
  background: #fff;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  padding: 5px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  text-align: center;
    margin-bottom: 16px; /* ✅ adds vertical space between categories */
}

.dwcb-cat-item:hover{
  transform: translateY(-2px);
  border-color: var(--dw-accent);
}

.dwcb-cat-item.active{
  outline: 2px solid var(--dw-accent);
  outline-offset: 1px;
  background: #fff;
}

/* Square thumbnail + name below */
.dwcb-card-thumb{
  width: 50%;
  aspect-ratio: 1 / 1;   /* square */
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--dw-border);
  background: #eee;
}

.dwcb-card-name{
  display: block;
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.25;
  color: var(--dw-text);
  word-break: break-word;
}

/* Subcategory grid — same visual style */
#dwcb-subcats{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.dwcb-subcat{
  display: block;
  background: #fff;
  border: 1px solid var(--dw-border);
  border-radius: var(--dw-radius);
  box-shadow: var(--dw-shadow);
  padding: 15px;
  text-decoration: none;
  color: var(--dw-text);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  text-align: center;
}

.dwcb-subcat:hover{
  transform: translateY(-2px);
  border-color: var(--dw-accent);
}

.dwcb-subcat-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;   /* square */
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--dw-border);
  background: #eee;
}

.dwcb-subcat-name{
  display: block;
  margin-top: 8px;
  font-size: 9px;
  line-height: 1.25;
  color: var(--dw-text);
  word-break: break-word;
}

/* Responsive notes:
   You asked to always keep sidebar visible (like Amazon), so we keep two columns at all widths.
   If it ever feels cramped on very small screens, increase min-width above or reduce font/spacing a bit. */
@media (max-width: 480px){
  .dwcb-left{ min-width: 120px; }
  #dwcb-subcats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Force sidebar visible and disable any hamburger/mobile toggle */
.dwcb-left, 
.dwcb-cat-list {
  display: block !important;
  visibility: visible !important;
}

.dwcb-left button,
.dwcb-left .menu-toggle,
.dwcb-left .hamburger {
  display: none !important;
}

@media (max-width: 480px) {
  #dwcb-subcats {
    grid-template-columns: 5fr; /* 📱 Stack vertically on small screens */
  }
}

@media (max-width: 600px) {
  #dwcb-subcats {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 per row */
  }
}