/* ————— Clean Storefront Theme ————— */

/* Design tokens */
:root{
  --bg:#F4F5F6;
  --surface:#FFFFFF;
  --ink:#111213;
  --muted:#6B7280;
  --brand:#111213;
  --ring:#111213;
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --shadow-md:0 8px 28px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:
    linear-gradient(#eceff1 1px, transparent 1px) 0 0/100% 52px,
    var(--bg);
}

/* Top pagination dots */
.nav-bar{ display:flex; justify-content:center; padding:10px 0 0 }
.pagination{ display:flex; gap:8px }
.dot{
  width:8px; height:8px; border-radius:999px;
  background:#cfd4da; opacity:.9; transition:transform .12s ease, background .12s
}
.dot.active{ background:#2b2f33; transform:scale(1.1) }

/* Floating nav arrows — keep your current look & animation */
.nav-buttons{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:10; display:flex; flex-direction:column; gap:12px
}
.nav-btn{
  position:relative; width:48px; height:48px; border-radius:999px;
  background:rgba(0,0,0,.38); border:0; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  padding:0; line-height:1;
  backdrop-filter:saturate(115%) blur(2px);
  transition:transform 120ms ease, opacity 150ms ease, background-color 150ms ease
}
.nav-btn:hover:not(:disabled){ transform:scale(1.04) }
.nav-btn.pressed:not(:disabled){ transform:scale(.96) }
.nav-btn:disabled{ opacity:.35; cursor:not-allowed }
.nav-btn::before{
  content:""; width:24px; height:24px; display:block;
  background-repeat:no-repeat; background-position:center; background-size:24px 24px;
  transition: transform 140ms ease
}
.nav-btn.next:hover::before{ transform: translateX(1px) }
.nav-btn.prev:hover::before{ transform: translateX(-1px) }
.nav-btn.prev::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path d='M17 21L7 12l10-9' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.nav-btn.next::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path d='M7 3l10 9-10 9' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.chev{display:none} /* hide any legacy chevrons */

/* Layout container */
.container{ width:min(1000px, 92%); margin-inline:auto }

/* Slider shell */
.slider{ overflow:hidden; position:relative }
.slide{ min-height:80vh; padding-bottom:28px }
.slide{ display:none } .slide.active{ display:block }

/* ——— Hero (slide 1) ——— */
.hero{ position:relative; padding-top:0; margin-bottom:0 }
.hero__image{
  height:320px;
  background:
    url('https://images.msha.ke/31731345-2b27-428a-b3f7-b8bf6f37ddcf?auto=format,compress&cs=tinysrgb&q=30&w=1200')
    center/cover no-repeat;
  width:min(1000px, 92%); margin:18px auto 18px;
  border-radius:var(--radius); box-shadow:var(--shadow-md)
}
.hero__content{ padding:20px 0 8px }
.hero__title{
  font-size:clamp(28px, 3.6vw, 42px);
  margin:0 0 14px; font-weight:800; letter-spacing:-0.02em
}
.divider{ width:100%; border:0; border-top:1px solid #000; margin:0 0 14px; opacity:.25 }
.hero__subtitle{ margin:0 0 18px; color:var(--muted); font-weight:600 }

/* Hero link buttons (to groups) */
.links{ list-style:none; padding:0; margin:0; display:grid; gap:14px }
.link-card{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; color:var(--ink); text-decoration:none;
  background:var(--surface); border-radius:var(--radius-sm);
  border:1.5px solid #1f2328; box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  font-weight:700; /* << make Katalog buttons bold again */
}
.link-card:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md) }

/* ——— Catalog slides (dynamic) ——— */
.catalog-hero{
  height:300px; background: center/cover no-repeat;
  background-image:url('https://images.msha.ke/5e0aa7fc-9c3b-4cbb-8fd4-d0b2dc07d957?auto=format%2Ccompress&cs=tinysrgb&q=30&w=828');
  width:min(1000px, 92%); margin:18px auto; border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
@media (max-width:600px){ .catalog-hero, .hero__image{ height:220px } }

.catalog-header{
  position:sticky; top:0; z-index:5;
  background:linear-gradient(var(--bg) 0 40%, rgba(244,245,246,0.75) 75%, rgba(244,245,246,0));
  -webkit-backdrop-filter:saturate(110%) blur(3px);
  backdrop-filter:saturate(110%) blur(3px);
  padding-top:10px; margin-bottom:8px
}
.catalog-header h1{
  font-size:clamp(24px, 2.8vw, 32px);
  margin:6px 0 6px; font-weight:800; letter-spacing:-.01em; color:var(--ink);
  position:relative; padding-bottom:8px
}
.catalog-header h1::after{
  content:""; display:block; height:1px; background:#000; opacity:.25; margin-top:8px
}
.catalog-header .lead{ margin:4px 0 10px; color:var(--muted); font-weight:600 }

/* Search */
.search-wrap{ margin:0 0 14px }
.search-box{
  width:100%; padding:12px 14px; font-size:16px; color:var(--ink);
  background:var(--surface); border:1.5px solid #d1d5db; border-radius:12px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease
}
.search-box:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 3px rgba(17,18,19,.12)
}

/* Catalog product list */
.link-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.link-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; background:var(--surface); color:var(--ink);
  border-radius:14px; text-decoration:none; font-weight:600;
  border:1px solid #e5e7eb; box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease
}
.link-row:hover{
  transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:#d5dae0
}
.link-row .text{ line-height:1.35 }

/* Right-end ↗ icon */
.link-card .arrow,
.link-row .arrow{
  position:relative; display:inline-block;
  width:1.25em; height:1.25em; text-align:center;
  font-size:0 !important
}
.link-card .arrow::before,
.link-row .arrow::before{
  content:"↗"; font-size:22px; font-weight:900; line-height:1; color:currentColor;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center
}

/* Footer */
.footer{ padding:48px 0 72px; color:var(--muted); text-align:center }

/* Touch: no hover scale */
@media (hover:none){ .nav-btn:hover{ transform:none } }