:root{
  --glass-bg: rgba(255,255,255,.66);
  --glass-brd: rgba(255,255,255,.55);
  --ink-900: rgba(17,17,17,.88);
  --ink-700: rgba(17,17,17,.65);
  --brand: #304ffe;
  --hero-gutter: 16px;
  --hero-pad: 16px;
  --hero-vpad: 16px;
}
html, body { width:100%; }
body { overflow-x:hidden; }
.app-hero{
  position: relative;
  display: grid;
  align-items: end;
  padding: 0;
  overflow: visible;
  --hero-row-gap: 16px; 
}
.app-hero__container{
  position:relative;
  overflow: visible;
  display:grid;
  align-items:flex-end;
  width:100%;
  max-width:1300px;
  margin:0 auto;
  min-height:185px;
  border-radius:18px; 
  padding: var(--hero-vpad) 0;
  background:transparent;
  box-sizing:border-box;
}
.app-hero__card {
  position: relative;
  padding: 18px 18px;  
  border-radius: var(--gf-radius-xl, 18px);

  display: grid;
  row-gap: var(--hero-row-gap);
  column-gap: 14px;

  min-width: 0;
  width: 100%;
  margin: 0;
}

.app-hero__card--with-subcats{
  padding-bottom: 18px; 
}

.app-hero__divider{
  margin: 0;
  border-bottom: 1px solid rgba(199, 210, 254, 0.9);
}
.app-hero__filters-card {
  margin-top: 14px;
  padding: 12px 14px;
}
.app-subcats{
  margin: 0 auto; 
}
.app-hero__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  min-width:0;
}

.app-hero__main{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.app-hero__actions{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
}
.app-hero__icon{
  width:72px; height:72px; border-radius:16px; overflow:hidden;
  background:#f2f3f5; border:1px solid rgba(255,255,255,.7);
  box-shadow:0 6px 18px rgba(15,23,42,.2) inset;
  flex:0 0 auto;
}
.app-hero__icon img{ width:100%; height:100%; object-fit:cover; }
.app-hero__meta{
  display:grid; gap:4px;
  min-width:0;
}
.app-hero__title{
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  color: #111827;
  text-shadow: none;
  overflow-wrap: anywhere;
}
.app-hero__subtitle{
  color: #6b7280;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat-carousel {
  position: relative;
  min-width: 0;
}
.cat-carousel__track {
  display: flex;
  flex-wrap: wrap; 
  gap: 8px;
  padding: 0;
  overflow: visible; 
  scroll-snap-type: none;
  scrollbar-width: auto;
}
.cat-carousel__track::-webkit-scrollbar {
  display: none;
}
.cat-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;

  color: var(--ink-900);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e7ebf2;

  -webkit-backdrop-filter: saturate(120%) blur(4px);
  backdrop-filter: saturate(120%) blur(4px);

  transition: transform .12s, box-shadow .18s, background .2s, border-color .2s;
  max-width: 100%;
  box-shadow: none; 
}
.cat-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--gf-shadow-soft, 0 6px 16px rgba(148, 163, 253, 0.30));
  background: #fff;
}
.cat-pill.is-active{
  color:#fff;
  background:var(--brand);
  border-color:transparent;
  box-shadow:0 8px 20px rgba(48,79,254,0.26);
}
.cat-grid{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;
  min-width:0;
}
.cat-grid__pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:12px; font-weight:700; font-size:13px;
  color:#111827; text-decoration:none;
  background:rgba(255,255,255,.95); border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  backdrop-filter:saturate(140%) blur(6px);
  transition:transform .12s, box-shadow .18s, background .2s, border-color .2s;
  max-width:100%;
}
.cat-grid__pill:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(15,23,42,.12); background:#fff; }
.subcats-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px;
  padding:10px 14px 12px; 
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  box-sizing:border-box;
}

.subcat-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin: 0;
}
.subcat-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  border-radius:12px;
  font-weight:600;
  font-size:13px;
  color:var(--ink-900);
  text-decoration:none;
  background:rgba(255,255,255,0.96);
  border:1px solid #e7ebf2;
  -webkit-backdrop-filter:saturate(120%) blur(4px);
  backdrop-filter:saturate(120%) blur(4px);
  transition:transform .12s, box-shadow .18s, background .2s, border-color .2s;
  max-width:100%;
}

.subcat-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--gf-shadow-soft, 0 6px 16px rgba(148,163,253,0.45));
  background:#fff;
}

.subcat-btn.is-active{
  color:#fff;
  background:var(--brand);
  border-color:transparent;
  box-shadow:0 8px 20px rgba(48,79,254,0.26);
}
.app-hero__floating-filters{
  margin-top: 18px;
  width: 100%;
}

.app-hero__action-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.75);
  background:rgba(255,255,255,0.96);
  font-weight:600;
  font-size:13px;
  color:#0f172a;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(148,163,253,0.26);
  white-space:nowrap;
}

.app-hero__action-btn:hover{
  background:#ffffff;
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(148,163,253,0.32);
}
.toggle{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.toggle input{ display:none }
.toggle__slider{
  --w:44px; --h:24px; position:relative; width:var(--w); height:var(--h);
  background:#e7ebf2; border-radius:999px; border:1px solid #dae0ea; transition:background .2s, border-color .2s;
}
.toggle__slider::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.15); transition:transform .2s ease;
}
.toggle input:checked + .toggle__slider{ background:linear-gradient(90deg, var(--brand), var(--brand)); border-color:rgba(47,109,253,.4); }
.toggle input:checked + .toggle__slider::after{ transform:translateX(20px); }
.toggle__label{ font-weight:700; color:var(--ink-900); }
.glass-filters {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.cat-carousel + .glass-filters{ margin-top:10px; }
@media (max-width: 990px) and (min-width: 768px){
  .app-hero__card{
    padding: 16px;
  }
  .app-hero__card--with-subcats{
    padding-bottom: 16px;
  }

  .app-hero{
    --hero-row-gap: 16px;
  }
}

@media (max-width: 768px){
  .app-hero{
    --hero-gutter: 0;
    --hero-pad: 0;
    --hero-vpad: 12px;
    --hero-row-gap: 12px;
  }

  .app-hero__container{
    min-height: 184px;
    padding: var(--hero-vpad) 0;
    border-radius: 18px;
  }

  .app-hero__card{
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .app-hero__top{
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }
  .app-hero__actions{
    margin-left: auto;
  }
  .app-hero__action-btn{
    height: 32px;
    padding: 0 10px;
    font-size: 12.5px;
  }
  .app-hero__floating-filters{
    margin-top: 14px;
  }
  .app-hero__title{ font-size: 20px; }
  .cat-pill{ padding: 7px 10px; font-size: 12px; }
  .subcats-card{
    padding: 12px;
    border-radius: 14px;
  }
  .subcat-list{
    margin: 2px 0 3px;
  }

  .subcat-btn{
    padding: 7px 10px;
    font-size: 12px;
  }
}


@media (max-width: 479px){
  .app-hero{
    --hero-row-gap: 10px;
  }
  .app-hero__card{
    width:100%;
    margin:0;
    padding: 10px;
  }
  .app-hero__icon{ width:56px; height:56px; border-radius:14px; }
  .app-hero__title{ font-size:18px; }
  .app-hero__subtitle{ font-size:13px; }
  .subcats-card{ padding:10px; border-radius:12px; }
  .subcat-list{
    gap: 6px;
    margin: 0;
  }
  .subcat-btn{ padding:6px 9px; font-size:12px; }
  .app-hero__floating-filters{
    margin-top: 10px;
  }
  .app-hero__action-btn{
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }
  .app-hero{ --hero-pad:10px; --hero-vpad:10px; }
  .app-hero__container{ min-height:168px; padding: var(--hero-vpad) 0; }
  .subcats-card{ padding:10px; border-radius:12px; }
  .subcat-btn{ padding:6px 9px; font-size:12px; }
}
.sheet-open, .sheet-open body{ overflow:hidden; }
.gf-sheet{ position:fixed; inset:0; z-index:70; display:none; }
.gf-sheet.is-open{ display:block; }
.gf-sheet__overlay{ position:absolute; inset:0; background:rgba(15,23,42,.35); backdrop-filter:saturate(120%) blur(2px); }
.gf-sheet__panel{
  position:absolute; left:0; right:0; bottom:0;
  background:#fff; border-radius:16px 16px 0 0; box-shadow:0 -12px 32px rgba(15,23,42,.22);
  transform:translateY(100%); transition:transform .24s ease;
  max-height:78vh; display:flex; flex-direction:column;
}
.gf-sheet.is-open .gf-sheet__panel{ transform:translateY(0); }
.gf-sheet__bar{ display:flex; align-items:center; justify-content:center; padding:10px; position:relative; }
.gf-sheet__grab{ width:44px; height:4px; border-radius:999px; background:#E5E7EB; }
.gf-sheet__close{ position:absolute; right:8px; top:6px; width:32px; height:32px; border:0; background:#f6f8fc; border-radius:10px; cursor:pointer; }
.gf-sheet__body{ padding:12px; overflow:auto; }

.gf-sheet__grid{ display:flex; flex-wrap:wrap; gap:8px; }
.gf-sheet__grid .subcat-btn{ padding:10px 12px; border-radius:12px; font-size:14px; }

.filters-list{ display:grid; gap:12px; }
.gf-modal{ position:fixed; inset:0; z-index:90; display:none; }
.gf-modal.is-open{ display:block; }
.gf-modal__overlay{ position:absolute; inset:0; background:rgba(15,23,42,.38); backdrop-filter:saturate(120%) blur(2px); }
.gf-modal__panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(720px, 92vw); max-height:82vh; overflow:auto;
  background:#fff; border-radius:16px; box-shadow:0 18px 48px rgba(15,23,42,.28);
  display:flex; flex-direction:column;
}
.gf-modal__bar{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #eef2f7; }
.gf-modal__title{ font-weight:800; color:#0f172a; }
.gf-modal__close{ width:34px; height:34px; border:0; background:#f6f8fc; border-radius:10px; cursor:pointer; }
.gf-modal__body{ padding:14px; }

@media (max-width:768px){
  .subcat-btn.is-hidden-mobile{ display:none; }
  .app-hero__floating-inner{
    flex-direction: row;   
    align-items: center;
  }
  .toggle__label{ display:inline; }
  .toggle .toggle__slider{ margin-left:0; }
  .toggle::after{ content:none; }
}
@media (min-width: 769px){
  .app-hero{ --hero-gutter:16px; --hero-pad:16px; --hero-vpad:16px; }
  .app-hero__icon{ width:72px; height:72px; border-radius:16px; }
  .app-hero__title{ font-size:24px; }
  .app-hero__subtitle{ font-size:14px; }
  .cat-pill, .cat-grid__pill{ padding:10px 14px; font-size:13px; }
  .subcat-btn{ padding:8px 12px; font-size:13px; }
  .filters-btn{ height:38px; padding:0 12px; }
  .mini-search{ height:38px; }

  .app-hero__floating-inner{
    justify-content: center;
  }
}
@media (min-width: 1200px){
  .app-hero{ --hero-gutter:20px; --hero-pad:20px; --hero-vpad:18px; }
  .app-hero__card{
    width:100%;
    margin:0;
  }
}