/* AfterTouge — Home Categories: DRAG / ARROWS Carousel (WHITE)
   File: /styles/categories-panels.css
   Only affects #categories (NOT the category-view section)
*/

html.is-home #drops.section{
  padding-bottom: 8px !important;
}

/* =========================================================
   SECTION BASE (WHITE)
   ========================================================= */
#categories.section--darkcats{
  --cats-bg: #ffffff;
  --cats-ink: #0b0d10;
  --cats-muted: rgba(11,13,16,.62);

  --cats-gap: 14px;

  /* spacing requested */
  --cats-pad-left: 10px;
  --cats-pad-right: 8px;

  /* 3 full panels + ONLY 2px of the 4th (after normal gap) */
  --cats-full: 3;
  --cats-peek: 2px;

  /* arrow size (smaller + premium) */
  --cats-arrow-size: 38px;

  /* ✅ SMOOTH fade control (bottom -> top) */
  --cat-fade-px: 300px;                     /* 👈 control fade distance here */
  --cat-fade-black: rgba(0,0,0,.70);        /* normal strength */
  --cat-fade-black-hover: rgba(0,0,0,.88);  /* hover strength */

  background: var(--cats-bg) !important;
  color: var(--cats-ink) !important;

  /* remove section separator lines if you want (kept off by your HOME rule below) */
  border-top: 0 !important;
  border-bottom: 0 !important;

  padding: 10px 0 18px !important;
}

#categories.section--darkcats .muted{
  color: var(--cats-muted) !important;
}

/* Make categories use full width (remove container gutters) */
#categories.section--darkcats .container{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep heading aligned with panels */
#categories.section--darkcats .section__head{
  padding-left: var(--cats-pad-left) !important;
  padding-right: var(--cats-pad-right) !important;
}

/* If you were using this earlier, it can fight the above.
   Keep it if you WANT this layout; otherwise delete it. */
#categories.section--darkcats .cats-pin > .section__head{
  width: 100%;
  max-width: 1570px;
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================================================
   STAGE (anchors arrows)
   ========================================================= */
#categories.section--darkcats .cats-stage{
  position: relative;
  width: 100%;
}

/* =========================================================
   CAROUSEL
   ========================================================= */
#categories.section--darkcats .cats-carousel{
  overflow: hidden;
  width: 100%;
  touch-action: pan-y; /* allow vertical page scroll; we handle horizontal drag */
  -webkit-user-select: none;
  user-select: none;
}

/* Track moves; arrows do NOT */
#categories.section--darkcats .cats-track{
  display: flex;
  flex-wrap: nowrap;
  gap: var(--cats-gap);

  /* bring first card closer to screen edges */
  padding-left: var(--cats-pad-left);
  padding-right: var(--cats-pad-right);

  transform: translate3d(0,0,0);
  will-change: transform;
  backface-visibility: hidden;

  cursor: grab;
  user-select: none;
}
#categories.section--darkcats .cats-track.is-dragging{
  cursor: grabbing;
}

/* Remove old pointer line from categories.css */
#categories.section--darkcats .cat-card::before{
  content: none !important;
}

/* =========================================================
   PANEL SIZING
   - 3 full cards + gap-to-4th + 2px of 4th visible
   - total equation: 3w + 3gap + peek = viewport width
   ========================================================= */
#categories.section--darkcats .cat-panel{
  position: relative;
  overflow: hidden;

  flex: 0 0 calc(
    (100% - (var(--cats-gap) * var(--cats-full)) - var(--cats-peek))
    / var(--cats-full)
  );

  aspect-ratio: 1 / 1;
  padding: 0;

  /* ✅ NO borders ever */
  border: 0 !important;
  border-radius: 0;
  background: transparent;

  cursor: pointer;
  isolation: isolate;

  /* no hover animation */
  transition: none;
}

#categories.section--darkcats .cat-panel:hover,
#categories.section--darkcats .cat-panel:focus-visible{
  border: 0 !important;
  outline: none !important;
  transform: none !important;
}

/* =========================
   PANELS — IMAGE (NO EFFECTS)
   ========================= */
#categories.section--darkcats .cat-panel__media{
  position: absolute;
  inset: 0;

  background-image: var(--cat-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* remove ALL effects */
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;

  z-index: 0;
}

/* =========================
   SHADE — SMOOTH BLACK GRADIENT (BOTTOM -> TOP)
   You control thickness with: --cat-fade-px
   ========================= */
#categories.section--darkcats .cat-panel__shade{
  position: absolute;
  inset: 0;

  /* ✅ smoother fade (no abrupt cutoff) */
  background: linear-gradient(
    to top,
    var(--cat-fade-black) 0px,
    rgba(0,0,0,0.35) calc(var(--cat-fade-px) * 0.55),
    rgba(0,0,0,0) var(--cat-fade-px)
  );

  z-index: 1;
  pointer-events: none; /* never block clicks */
}

/* ✅ Hover: stronger gradient (same px) */
#categories.section--darkcats .cat-panel:hover{
  --cat-fade-black: var(--cat-fade-black-hover);
}

/* Text */
#categories.section--darkcats .cat-panel__content{
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(12px, 1.6vw, 16px);
  display: grid;
  gap: 6px;

  z-index: 2;
  color: rgba(255,255,255,.94);

  /* center title + sub + CTA */
  text-align: center;
  justify-items: center;
  align-items: center;
}

#categories.section--darkcats .cat-name{
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.1;
}

#categories.section--darkcats .cat-sub{
  color: rgba(255,255,255,.78);
  font-size: clamp(12px, 1vw, 12.5px);
  line-height: 1.2;
  max-width: 22ch;
  margin-inline: auto;
}

#categories.section--darkcats .cat-cta{
  margin-top: 2px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 12px;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

#categories.section--darkcats .cat-panel:hover .cat-cta,
#categories.section--darkcats .cat-panel:focus-visible .cat-cta{
  opacity: 1;
  transform: translateY(0);
}

/* Active (no borders) */
#categories.section--darkcats .cat-panel.is-active{
  border: 0 !important;
  box-shadow: none !important;
}

/* When active: hide Explore, show only "Selected" */
#categories.section--darkcats .cat-panel.is-active .cat-cta{
  font-size: 0 !important;   /* hides "Explore →" text */
  opacity: 1 !important;
  transform: none !important;
}
#categories.section--darkcats .cat-panel.is-active .cat-cta::after{
  content: "Selected";
  font-size: 12px;
  letter-spacing: .10em;
  opacity: .9;
}

/* =========================================================
   ARROWS (no hover, thin glyph, fixed position)
   Requires HTML buttons:
   .cats-arrow.cats-arrow--prev  and  .cats-arrow.cats-arrow--next
   ========================================================= */
#categories.section--darkcats .cats-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: var(--cats-arrow-size);
  height: var(--cats-arrow-size);

  display: grid;
  place-items: center;

  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  color: #000;

  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 26px;
  font-weight: 200;
  line-height: 1;

  padding: 0;
  margin: 0;

  cursor: pointer;
  user-select: none;

  transition: none;
  z-index: 10;
}

#categories.section--darkcats .cats-arrow--prev{ left: var(--cats-pad-left); }
#categories.section--darkcats .cats-arrow--next{ right: var(--cats-pad-right); }

/* remove ALL hover/active/focus visuals */
#categories.section--darkcats .cats-arrow:hover,
#categories.section--darkcats .cats-arrow:active{
  background: #fff;
  color: #000;
  transform: translateY(-50%);
}
#categories.section--darkcats .cats-arrow:focus,
#categories.section--darkcats .cats-arrow:focus-visible{
  outline: none;
  box-shadow: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
  #categories.section--darkcats{
    --cats-full: 2;
    --cats-peek: 10px;
  }
}

@media (max-width: 640px){
  #categories.section--darkcats{
    --cats-full: 1;
    --cats-peek: 28px;
    --cats-arrow-size: 34px;
  }
  #categories.section--darkcats .cats-arrow{
    font-size: 24px;
    font-weight: 200;
  }
}

/* HOME: remove thin separator lines between sections (your request) */
html.is-home #drops.section,
html.is-home #categories.section--darkcats,
html.is-home #about.section{
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

html.is-home #drops.section .container,
html.is-home #categories.section--darkcats .container{
  border: 0 !important;
  box-shadow: none !important;
}