/**
 * SMIO Category Accordion — Styles
 *
 * Gold #C9A96E / Dark luxury theme matching SMIO brand.
 * Smooth height animation with cubic-bezier easing.
 * Responsive grid: 3 cols desktop → 2 cols tablet → 1 col mobile.
 *
 * @author SMIO Dev Team
 * @version 1.0.0
 */

/* ── Variables ──────────────────────────────────────────── */
:root {
  --smio-gold:        #C9A96E;
  --smio-gold-light:  #E8D5B0;
  --smio-gold-dark:   #A07B45;
  --smio-bg-dark:     #0E0E0E;
  --smio-bg-card:     #1A1A1A;
  --smio-bg-hover:    #242424;
  --smio-text:        #F5F0E8;
  --smio-text-muted:  #9A9080;
  --smio-radius:      8px;
  --smio-transition:  0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Section wrapper (position anchor) ───────────────────── */
#catAccordionRoot {
  position: relative;
  z-index: 10;
}

/* ── Summary / Toggle Button ─────────────────────────────── */
.cat-summary,
#catSummaryBtn {
  /* inherit existing button styles, add our accents */
  background: var(--smio-bg-card);
  border:    1px solid var(--smio-gold-dark);
  color:     var(--smio-gold);
  cursor:    pointer;
  font-size: 1rem;
  transition: background var(--smio-transition),
              border-color var(--smio-transition),
              color var(--smio-transition),
              box-shadow var(--smio-transition);
}

.cat-summary:hover,
#catSummaryBtn:hover {
  background:    var(--smio-bg-hover);
  border-color: var(--smio-gold);
  color:        var(--smio-gold-light);
  box-shadow:   0 0 12px rgba(201, 169, 110, 0.25);
}

/* Active/open state — when accordion is expanded */
.cat-summary.smio-cat-active,
#catSummaryBtn.smio-cat-active {
  background:    var(--smio-gold-dark);
  border-color: var(--smio-gold);
  color:         var(--smio-bg-dark);
}

/* ── Accordion Content Panel ─────────────────────────────── */
.smio-cat-content {
  overflow: hidden;
  height:   0;                   /* closed by default */
  opacity:  0;

  /* Smooth height transition — key part of accordion animation */
  transition: height var(--smio-transition),
              opacity calc(var(--smio-transition) * 0.6);

  background:    var(--smio-bg-card);
  border:        1px solid var(--smio-gold-dark);
  border-top:    none;
  border-radius: 0 0 var(--smio-radius) var(--smio-radius);

  position: relative;
  z-index:  9;
  margin-top: -1px; /* collapse border with button */

  /* Inner padding — revealed as height animates */
  padding: 0 16px;
  box-sizing: border-box;
}

/* When open: height is set by JS, fade in content */
.smio-cat-content:not([aria-hidden="true"]) {
  opacity: 1;
  padding: 20px 16px;
}

/* ── Category Grid ────────────────────────────────────────── */
.smio-cat-grid {
  display: grid;

  /* 3 columns desktop ≥ 900px */
  grid-template-columns: repeat(3, 1fr);

  gap: 12px;
}

/* 2 columns tablet 480px–899px */
@media (max-width: 899px) {
  .smio-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1 column mobile < 480px */
@media (max-width: 479px) {
  .smio-cat-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Category Card ────────────────────────────────────────── */
.smio-cat-card {
  display:         flex;
  align-items:     center;
  gap:             10px;

  background:    var(--smio-bg-hover);
  border:         1px solid transparent;
  border-radius: var(--smio-radius);
  padding:        12px 14px;

  color:           var(--smio-text);
  text-decoration: none;
  font-size:       0.9rem;
  line-height:     1.4;

  transition: background var(--smio-transition),
              border-color var(--smio-transition),
              color var(--smio-transition),
              box-shadow var(--smio-transition),
              transform var(--smio-transition);
}

.smio-cat-card:hover {
  background:    var(--smio-bg-dark);
  border-color: var(--smio-gold);
  color:        var(--smio-gold-light);
  box-shadow:   0 0 8px rgba(201, 169, 110, 0.2);
  transform:    translateY(-1px);
  text-decoration: none;
}

.smio-cat-card:focus-visible {
  outline:        2px solid var(--smio-gold);
  outline-offset: 2px;
}

/* ── Category Icon ────────────────────────────────────────── */
.smio-cat-icon {
  font-size:   1.1rem;
  color:       var(--smio-gold);
  flex-shrink: 0;
  line-height: 1;
}

/* ── Category Name ────────────────────────────────────────── */
.smio-cat-name {
  flex:       1;
  font-weight: 500;
  color:      inherit;
}

/* ── Product Count Badge ─────────────────────────────────── */
.smio-cat-count {
  font-size:  0.78rem;
  color:      var(--smio-text-muted);
  flex-shrink: 0;
  transition: color var(--smio-transition);
}

.smio-cat-card:hover .smio-cat-count {
  color: var(--smio-gold);
}