/* frontend/categories/index.css */

/* ===================== VARIABLES ===================== */
:root{
  --brand: #f36b21;
  --brand-deep: #eb4d04;
  --brand-soft: rgba(243,107,33,.12);

  --bg: #f7f7f5;
  --card: #ffffff;
  --line: rgba(15, 23, 42, 0.08);

  --text: #0f172a;
  --muted: rgba(15, 23, 42, 0.72);
  --muted2: rgba(15, 23, 42, 0.52);

  --shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);

  --r-md: 14px;
  --r-sm: 12px;

  --head-h: 52px;

  --left-bg: #f1f1ee; /* ✅ slightly deeper off-white */
  --right-bg: #ffffff; /* ✅ pure white */

  --maxw: 1180px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===================== BASE ===================== */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; }

*{ scrollbar-width: none; }
*::-webkit-scrollbar{ width: 0; height: 0; }

/* ===================== HEADER ===================== */
.cHead{
  position: sticky;
  top: 0;
  z-index: 50;

  height: var(--head-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);

  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;

  padding: 0 10px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.backBtn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.backBtn i{ color: var(--text); }

.cHead__title{
  text-align: center;
  font-weight: 900;
  letter-spacing: -0.2px;
  font-size: 14.5px;
}
.cHead__spacer{ width: 44px; }

/* ===================== MAIN SPLIT ===================== */
.cMain{
  max-width: var(--maxw);
  margin: 0 auto;
  height: calc(100vh - var(--head-h));
  display: grid;
  grid-template-columns: 32% 68%;
  border-top: 0;
}

/* LEFT */
.cLeft{
  background: var(--left-bg);
  border-right: 0; /* ✅ borderless half */
  overflow: hidden; /* keeps internal scroll clean */
  display: flex;
  flex-direction: column;
}

/* ✅ keep structure, but style "For you" like a real category item */
.cLeft__top{
  padding: 0; /* ✅ no wasted space */
  border-bottom: 0; /* ✅ dividers handled by items */
}
.cLeft__kicker{
  margin: 0;
  padding: 12px 10px 12px 6px; /* ✅ match .cCat rhythm */
  width: 100%;
  text-align: left;
  font-weight: 900;
  font-size: 12.5px;
  color: rgba(15,23,42,0.86);
  letter-spacing: -0.1px;

  background: rgba(255,255,255,0.55); /* ✅ looks like other items */
  border-left: 0;
  cursor: pointer;

  /* ✅ divider */
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

/* ✅ makes "For you" look exactly like categories when JS adds this class */
.cLeft__kicker.cCatLike{
  background: rgba(255,255,255,0.55);
}
.cLeft__kicker.cCatLike.isActive{
  background: var(--right-bg);
  border-left: 4px solid var(--text);
  padding-left: 2px; /* compensate for border */
}

.cCats{
  padding: 0; /* ✅ closer to viewport */
  overflow-y: auto;  /* ✅ own scroll */
}

/* ✅ Categories become borderless list items + dividers */
.cCat{
  width: 100%;
  border: 0;
  background: rgba(255,255,255,0.55);
  border-radius: 0;
  padding: 12px 10px 12px 6px;
  margin-bottom: 0;

  text-align: left;
  font-weight: 900;
  font-size: 12.5px;
  color: rgba(15,23,42,0.86);
  cursor: pointer;

  display: block;
  position: relative;

  /* divider */
  border-bottom: 1px solid rgba(15,23,42,0.06);
}

/* Active category: same as right bg + thick left border */
.cCat.isActive{
  background: var(--right-bg);
  border-left: 4px solid var(--text);
  padding-left: 2px; /* compensate for border */
}

/* skeleton */
.cCat--skeleton{
  height: 44px;
  border: 0;
  background: rgba(15,23,42,0.06);
  position: relative;
  overflow: hidden;
}
.cCat--skeleton::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(15,23,42,0.06),
    rgba(15,23,42,0.10),
    rgba(15,23,42,0.06)
  );
  animation: shimmer 1.1s infinite linear;
}

/* RIGHT */
.cRight{
  background: var(--right-bg);
  overflow: hidden; /* internal scroll */
  display: flex;
  flex-direction: column;
}

.cRight__top{
  padding: 12px 12px 8px;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
.activeCatTitle{
  margin: 0;
  font-size: 14.5px;
  letter-spacing: -0.2px;
  font-weight: 950;
}

/* Content area inside right scrolls */
.subcats,
.products{
  padding: 10px 12px 0;
}

/* ✅ tighten gap so products sit closer to subcats */
.subcats{
  padding-bottom: 2px;
}
.pHead{
  padding: 8px 12px 0; /* ✅ tighter */
}
.products{
  padding: 6px 12px 0; /* ✅ tighter */
}

/* We want the RIGHT column to have its own scroll */
.cRight{
  overflow-y: auto; /* ✅ right scroll */
}

/* ===================== SUBCATEGORIES (3-column grid) ===================== */
.subGrid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;            /* ✅ closer */
  padding-bottom: 2px; /* ✅ closer */
}

/* subcategory card: image circle top + label under */
.subCard{
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 6px 2px;
  text-align: center;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

/* circle stays circle */
.subCircle{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: none;
  background: rgba(15,23,42,0.06);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 22px rgba(15,23,42,0.10);
}

.subLabel{
  font-size: 11px;
  font-weight: 900;
  color: rgba(15,23,42,0.85);
  line-height: 1.1;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ✅ active subcat: subtle shadow on whole card + slightly stronger circle shadow */
.subCard.isActive{
  box-shadow: 0 10px 18px rgba(15,23,42,0.07);
  border-radius: 10px; /* subtle container rounding (not wasteful) */
  background: rgba(15,23,42,0.02);
}
.subCard.isActive .subCircle{
  box-shadow: 0 12px 26px rgba(15,23,42,0.14);
}

/* skeleton */
.subCard--skeleton{
  height: 96px;
  border: 0;
  background: rgba(15,23,42,0.06);
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.subCard--skeleton::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(15,23,42,0.06),
    rgba(15,23,42,0.10),
    rgba(15,23,42,0.06)
  );
  animation: shimmer 1.1s infinite linear;
}

/* ===================== PRODUCT HEADING ===================== */
.pHead__title{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 13.5px;
}
.pHead__sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

/* ===================== PRODUCTS (2-column grid) ===================== */
.pGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;            /* ✅ a bit tighter */
  padding-bottom: 14px;
}

/* ✅ borderless, clean, 4px radius */
.pCard{
  border-radius: 4px;
  background: transparent; /* ✅ looks clean when borderless */
  border: 0;
  box-shadow: none;
  overflow: hidden;
  cursor: pointer;
  display: block;
}

/* ✅ keep image rounded (4px) */
.pImg{
  height: 130px; /* mobile-first */
  width: 100%;
  background: rgba(15,23,42,0.06);
  background-size: cover;
  background-position: center;

  margin: 0;            /* ✅ no wasted space */
  border-radius: 4px;   /* ✅ you requested */
}

.pBody{
  padding: 8px 2px 10px; /* ✅ tight, clean */
}

.pPrice{
  font-weight: 950;
  letter-spacing: -0.2px;
  font-size: 13.5px;
  color: var(--text);
}

.pMoq{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

/* skeleton */
.pCard--skeleton{
  height: 210px;
  position: relative;
  overflow: hidden;
}
.pCard--skeleton::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(15,23,42,0.06),
    rgba(15,23,42,0.10),
    rgba(15,23,42,0.06)
  );
  animation: shimmer 1.1s infinite linear;
}

/* loader */
.pLoader{
  padding: 4px 12px 16px;
}
.pLoader__bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(15,23,42,0.06);
  position: relative;
  overflow: hidden;
}
.pLoader__bar::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    90deg,
    rgba(15,23,42,0.06),
    rgba(15,23,42,0.10),
    rgba(15,23,42,0.06)
  );
  animation: shimmer 1.1s infinite linear;
}

/* ===================== ANIM ===================== */
@keyframes shimmer{
  0%{ transform: translateX(-60%); }
  100%{ transform: translateX(60%); }
}

/* ===================== RESPONSIVE UPGRADES ===================== */
/* Keep mobile-first rules, only improve sizing */
@media (min-width: 520px){
  .cHead{ padding: 0 14px; }
  .pImg{ height: 145px; }
}
@media (min-width: 820px){
  .cMain{ border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .pImg{ height: 160px; }
  .subCircle{ width: 62px; height: 62px; }
}
@media (min-width: 1024px){
  .pImg{ height: 175px; }
}