/* Catalog top bar, bottom category bar, category sections, product cards, footer. */
/* ---------------- STICKY NAV ---------------- */
.catalog-topbar{
  position:sticky; top:0; z-index:30; display:grid; grid-template-columns:36px 1fr 36px; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background:linear-gradient(180deg, var(--red-600), var(--red-700));
  box-shadow:0 8px 20px -12px rgba(60,10,10,.6);
}
.catalog-topbar .home-btn{background:none;}
.burger{display:flex; flex-direction:column; gap:5px; width:24px;}
.burger .line{
  display:block; height:2.5px; border-radius:2px; background:#fff;
  transition:transform .3s ease-in-out, opacity .3s ease-in-out;
}
.burger.is-active .line:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.burger.is-active .line:nth-child(2){opacity:0;}
.burger.is-active .line:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.top-logo{justify-self:center; width:min(100%, 210px); height:auto;}
.catalog-bottomnav{
  position:sticky; bottom:0; z-index:30; background:rgba(255,255,255,.97);
  border-top:1px solid var(--line); box-shadow:0 -10px 24px -14px rgba(60,10,10,.35);
  padding:0 0 var(--safe-b);
}
.home-btn{
  flex:none; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); display:flex; align-items:center; justify-content:center;
}
.home-btn svg{width:16px; height:16px; stroke:#fff;}
.catnav{
  display:flex; gap:0; overflow-x:auto; padding:0;
  scrollbar-width:none; flex:1; min-width:0;
}
.catnav::-webkit-scrollbar{display:none;}
.chip{
  flex:1 0 auto; min-width:76px; border:none; border-inline-end:1px solid var(--line); border-radius:0; background:#fff;
  color:var(--charcoal); font-weight:700; font-size:11.5px; line-height:1.3;
  padding:10px 12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.chip:last-child{border-inline-end:none;}
.chip.active{background:var(--red-500); color:#fff;}
.chip svg{width:20px; height:20px; flex:none;}

/* ---------------- SECTIONS ---------------- */
.cat-section{padding:30px 18px 6px;}
.cat-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.cat-head .ic{width:56px; height:44px; display:flex; align-items:center; justify-content:center; flex:none;}
.cat-head .ic svg{width:36px; height:36px; stroke:var(--ink);}
.cat-head h2{margin:0; font-size:19px; font-weight:800;}
.cat-head .en{margin:2px 0 0; font-size:12px; color:var(--muted); font-weight:600; direction:ltr; text-align:start; letter-spacing:.02em;}

.grid{display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:dense; gap:12px; padding-bottom:8px;}
.item-card.wide, .grid > .item-card:last-child:nth-child(odd){grid-column:1 / -1;}
.item-card.wide .item-media, .grid > .item-card:last-child:nth-child(odd) .item-media{aspect-ratio:4/3;}
.item-card{
  container-type:inline-size; display:flex; flex-direction:column; cursor:pointer; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:6px;
  box-shadow:0 14px 26px -20px rgba(60,10,10,.55);
  transition:transform .15s ease;
}
.item-card:active{transform:scale(.98);}
.item-card:focus-visible{outline-offset:3px;}
.item-media{position:relative; aspect-ratio:1/1; overflow:hidden; background:radial-gradient(circle at 50% 35%, #fff 0%, #ece5df 100%);}
.item-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.9,.3,1);}
.item-card:active .item-media img{transform:scale(1.05);}
.item-media::after{  /* red accent line that fades out, same motif as the section dividers */
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(to left, var(--red-500), rgba(200,26,26,0));
}
.item-model, .plate{  /* nameplate: the one recurring brand detail (cards and detail page) */
  position:absolute; top:8px; right:8px; z-index:1; display:flex; align-items:center; gap:6px; direction:ltr;
  background:var(--ink); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.1em;
  padding:4px 8px; border-radius:3px;
}
.item-model::before, .plate::before{content:""; width:5px; height:5px; background:var(--red-500);}
.item-body{padding:12px 12px 13px; display:flex; flex-direction:column; gap:5px;}
.item-title{
  margin:0; font-weight:700; line-height:1.5;
  font-size:12.5px; font-size:clamp(12px, 7.2cqw, 14px);   /* same size on every card, never below 12px */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;   /* full names, up to two lines */
}
.item-price{
  display:flex; align-items:baseline; gap:5px; font-weight:800; color:var(--red-600); line-height:1.6; min-height:1.6em;
  font-size:15px; font-size:clamp(14px, 8.4cqw, 17px);
}
.item-price small{font-size:11px; font-weight:600; color:var(--muted);}
.item-price.call{align-items:center; gap:6px; font-size:clamp(12.5px, 7.4cqw, 14px); font-weight:700; color:var(--charcoal);}
.item-price.call svg{width:13px; height:13px; flex:none; fill:none; stroke:var(--red-500); stroke-width:2;}
.empty-cat{
  font-size:13px; color:var(--muted); background:var(--card-2);
  border-radius:var(--radius-md); padding:22px; text-align:center;
}

/* ---------------- FOOTER ---------------- */
.site-foot{
  padding:38px 24px calc(90px + var(--safe-b)); text-align:center;
  color:var(--muted); font-size:12px; line-height:2;
}
.site-foot b{color:var(--charcoal); font-size:13px; letter-spacing:.06em;}

.chip img{height:20px; width:auto; flex:none; filter:brightness(0);}
.chip.active img{filter:none;}
.cat-head .ic img{width:100%; height:100%; object-fit:contain; filter:brightness(0);}
.sub-block{margin-top:18px;}
.sub-head{margin:0 0 10px; padding-inline-start:10px; border-inline-start:3px solid var(--red-500); font-size:15px; font-weight:800;}

.fav-btn{
  position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px -4px rgba(0,0,0,.4);
}
.fav-btn svg{width:17px; height:17px; fill:none; stroke:var(--red-500); stroke-width:2;}
.fav-btn.on svg{fill:var(--red-500);}

/* Soft color glows behind the glass cards (sticky layer, so scrolling never repaints it). */
.catalog-screen{isolation:isolate;}
.catalog-screen::before{
  content:""; position:sticky; top:0; z-index:-1; display:block; height:100dvh; margin-bottom:-100dvh;
  pointer-events:none; transform:translateZ(0);
  background:
    radial-gradient(70% 38% at 100% 8%, var(--glow-red), transparent 70%),
    radial-gradient(60% 34% at 0% 48%, var(--glow-gold), transparent 70%),
    radial-gradient(70% 38% at 100% 92%, var(--glow-red), transparent 70%);
}

/* Fading divider between category sections. */
.cat-section + .cat-section{position:relative; margin-top:14px;}
.cat-section + .cat-section::before{
  content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(165,22,22,.5), transparent);
}