/* AFTERTOUGE — Categories
   File: /styles/categories.css
*/

/* ===== Categories band (text-only cards with gradient pointers) ===== */
.section--darkcats{
  --cats-bg: #0b0d10;
  --cats-ink: #f2f4f7;
  --cats-muted: #b8bec8;
  --cats-bd: rgba(255,255,255,.14);
  --cats-bd-hover: rgba(255,255,255,.26);

  color: var(--cats-ink);
  background:
    radial-gradient(120% 80% at 20% -10%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent),
    var(--cats-bg);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: clamp(28px, 6vw, 44px) 0;
}
.section--darkcats .muted{ color: var(--cats-muted); }

/* Grid (scoped to the band so other views are unaffected) */
.section--darkcats .cats-grid{
  --cols: 5;
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(var(--cols), minmax(0,1fr));
  position: relative;
}
@media (max-width: 1000px){ .section--darkcats .cats-grid{ --cols: 3; } }
@media (max-width: 640px){  .section--darkcats .cats-grid{ --cols: 2; } }

/* Card (text-only) */
.section--darkcats .cats-grid .cat-card{
  position: relative;
  appearance: none;
  background: transparent;
  border: 1px solid var(--cats-bd);
  border-radius: 0; /* square corners */
  color: var(--cats-ink);
  padding: clamp(12px, 2.6vw, 16px) clamp(10px, 2.4vw, 14px);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
  isolation: isolate;
}
.section--darkcats .cats-grid .cat-card:hover,
.section--darkcats .cats-grid .cat-card:focus-visible{
  border-color: var(--cats-bd-hover);
  background: rgba(255,255,255,.03);
  transform: translateY(-2px);
  outline: none;
}

/* Hide legacy emoji/icon only in this band */
.section--darkcats .cats-grid .cat-emoji{ display:none !important; }

/* Label */
.section--darkcats .cats-grid .cat-name{
  display:block;
  font-weight:800;
  letter-spacing:.26px;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height:1.1;
  text-transform: uppercase;
}

/* Gradient pointer line for each card */
.section--darkcats .cats-grid .cat-card::before{
  content:"";
  position:absolute;
  left:50%;
  top:-22px;
  width:2px;
  height:20px;
  transform:translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.35) 65%,
    rgba(0,0,0,.6) 100%
  );
  opacity:.9;
  transition: height .18s ease, opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.section--darkcats .cats-grid .cat-card:hover::before,
.section--darkcats .cats-grid .cat-card:focus-visible::before{
  height:26px; opacity:1;
}

/* Gentle angle variety on wide screens */
@media (min-width: 961px){
  .section--darkcats .cats-grid .cat-card:nth-child(5n+1)::before{ transform: translateX(-50%) rotate(-10deg); }
  .section--darkcats .cats-grid .cat-card:nth-child(5n+2)::before{ transform: translateX(-50%) rotate(-5deg);  }
  .section--darkcats .cats-grid .cat-card:nth-child(5n+3)::before{ transform: translateX(-50%) rotate(0deg);   }
  .section--darkcats .cats-grid .cat-card:nth-child(5n+4)::before{ transform: translateX(-50%) rotate(5deg);   }
  .section--darkcats .cats-grid .cat-card:nth-child(5n+5)::before{ transform: translateX(-50%) rotate(10deg);  }
}

/* Keep lines straight & tighter on phones */
@media (max-width: 640px){
  .section--darkcats .cats-grid .cat-card::before{
    top:-18px; height:16px; transform: translateX(-50%) rotate(0deg);
  }
}

/* Disabled “COMING SOON” look — only for categories band */
.section--darkcats .cats-grid .cat-card[disabled],
.section--darkcats .cats-grid .cat-card[aria-disabled="true"]{
  pointer-events:none;
  opacity:.55;
  border-style:dashed;
  background:transparent;
  transform:none;
}
.section--darkcats .cats-grid .cat-card[disabled]::before,
.section--darkcats .cats-grid .cat-card[aria-disabled="true"]::before{
  height:14px; opacity:.55;
}

/* =====================================================================
   Category View (filters/sidebar + results) — unchanged
===================================================================== */

/* ===== Category View layout ===== */
.category-view{
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 48px 0;
}
.cat-layout{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}
@media (max-width: 960px){
  .cat-layout{ grid-template-columns: 1fr; }
}

/* Sidebar */
.cat-aside{
  position: sticky;
  top: calc(var(--chrome-h) + 10px);
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px;
}
.cat-aside__head{
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  margin-bottom: 8px;
}
.cat-aside__label{ font-weight: 800; letter-spacing: .2px; }
.cat-aside__panel{ display: grid; gap: 12px; }
.cat-current{ font-size: 14px; color: var(--muted); }
.cat-branches__title{ font-weight: 700; margin-bottom: 6px; }
.branch-form{ display: grid; gap: 8px; }
.branch{
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: center;
  font-size: 14px;
}
.branch input[type="checkbox"]{
  width: 18px; height: 18px; accent-color: #f59e0b;
}

/* Main area */
.cat-main__head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px;
}
.cat-title{ margin: 0; }
.cat-count{ font-size: 14px; }

/* Make product grid feel roomy */
#category-grid.grid{ gap: 20px; }