/* ═══════════════════════════════════════════
   CATALOG — Compact Modern
═══════════════════════════════════════════ */

/* Hero */
.cat-hero { background:#fff; padding:72px 0 0; border-bottom:1px solid #f3f4f6; }
.cat-hero-inner { max-width:1200px; margin:0 auto; padding:16px 16px 0; }
.cat-hero-label { display:inline-flex; align-items:center; gap:5px; background:#f3f4f6; color:#6b7280; font-size:0.7rem; font-weight:700; padding:3px 9px; border-radius:50px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
.cat-hero h1 { font-size:clamp(1.2rem,3vw,1.7rem); font-weight:900; color:#111; letter-spacing:-0.3px; margin-bottom:3px; }
.cat-hero p { color:#9ca3af; font-size:0.82rem; margin-bottom:12px; }

/* Pills */
.cat-pills { display:flex; gap:6px; overflow-x:auto; padding:0 0 12px; scrollbar-width:none; }
.cat-pills::-webkit-scrollbar { display:none; }
.cat-pill { display:flex; align-items:center; gap:4px; padding:6px 12px; border-radius:50px; font-size:0.75rem; font-weight:600; white-space:nowrap; cursor:pointer; border:1.5px solid #e5e7eb; background:#fff; color:#6b7280; transition:all .15s; flex-shrink:0; }
.cat-pill:hover { border-color:#374151; color:#374151; }
.cat-pill.active { background:#111; color:#fff; border-color:#111; }
.cat-pill-count { background:rgba(255,255,255,0.2); padding:1px 5px; border-radius:50px; font-size:0.65rem; }
.cat-pill:not(.active) .cat-pill-count { background:#f3f4f6; color:#9ca3af; }

/* Layout — min-width:0 prevents grid children from forcing horizontal overflow */
.cat-layout { width:100%; max-width:1200px; margin:0 auto; padding:16px 16px 80px; display:grid; grid-template-columns:200px 1fr; gap:16px; align-items:start; box-sizing:border-box; }
.cat-layout > main { min-width:0; max-width:100%; }
@media(max-width:900px) {
  .cat-layout { grid-template-columns:1fr; padding:10px 10px 80px; }
  .cat-sidebar { display:none; }
  .cat-sidebar.open {
    display:block; position:fixed; top:0; left:0; bottom:0; width:min(300px,88vw); z-index:300;
    background:#fff; overflow-y:auto; padding:16px;
    box-shadow:8px 0 32px rgba(0,0,0,0.15);
  }
  .cat-sidebar-close { display:flex !important; }
}

/* Sidebar close btn (mobile) */
.cat-sidebar-close { display:none; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cat-sidebar-close-btn { background:none; border:none; cursor:pointer; padding:4px; }
.cat-sidebar-close-btn img { width:20px; height:20px; }

/* Sidebar */
.cat-sidebar { position:sticky; top:72px; }
.cat-filter-card { background:#fff; border-radius:12px; border:1.5px solid #f3f4f6; overflow:hidden; margin-bottom:8px; }
.cat-filter-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; font-size:0.72rem; font-weight:800; color:#111; text-transform:uppercase; letter-spacing:0.5px; cursor:pointer; user-select:none; }
.cat-filter-head img { width:12px; height:12px; opacity:0.4; transition:transform .2s; }
.cat-filter-head.collapsed img { transform:rotate(-90deg); }
.cat-filter-body { padding:0 6px 6px; }
.cat-filter-item { display:flex; align-items:center; justify-content:space-between; padding:7px 8px; border-radius:8px; font-size:0.8rem; font-weight:500; color:#374151; cursor:pointer; transition:all .12s; }
.cat-filter-item:hover { background:#f9fafb; }
.cat-filter-item.active { background:#111; color:#fff; }
.cat-filter-item.active .cat-filter-count { background:rgba(255,255,255,0.2); color:#fff; }
.cat-filter-count { font-size:0.65rem; font-weight:700; background:#f3f4f6; color:#9ca3af; padding:1px 6px; border-radius:50px; }
.cat-price-inputs { display:flex; gap:6px; padding:4px 6px 6px; }
.cat-price-input { flex:1; padding:7px 9px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:0.75rem; font-family:Inter,sans-serif; outline:none; transition:border-color .15s; }
.cat-price-input:focus { border-color:#111; }
.cat-apply-btn { width:calc(100% - 12px); margin:0 6px 6px; padding:8px; background:#111; color:#fff; border:none; border-radius:8px; font-size:0.75rem; font-weight:700; cursor:pointer; font-family:Inter,sans-serif; }
.cat-apply-btn:hover { background:#374151; }

/* Toolbar */
.cat-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:8px; flex-wrap:wrap; }
.cat-count { font-size:0.78rem; color:#9ca3af; font-weight:500; }
.cat-count strong { color:#111; font-weight:800; }
.cat-toolbar-right { display:flex; gap:5px; align-items:center; }
.cat-sort-select { padding:6px 10px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:0.75rem; font-family:Inter,sans-serif; color:#374151; outline:none; cursor:pointer; background:#fff; }
.cat-filter-btn { display:none; align-items:center; gap:5px; padding:6px 10px; border:1.5px solid #e5e7eb; border-radius:8px; font-size:0.75rem; font-weight:600; background:#fff; color:#374151; cursor:pointer; font-family:Inter,sans-serif; }
.cat-filter-btn img { width:13px; height:13px; }
@media(max-width:900px) { .cat-filter-btn { display:flex; } }
.cat-view-btns { display:flex; gap:3px; }
.cat-view-btn { width:30px; height:30px; border-radius:7px; border:1.5px solid #e5e7eb; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .12s; }
.cat-view-btn.active { background:#111; border-color:#111; }
.cat-view-btn.active img { filter:invert(1); }
.cat-view-btn img { width:13px; height:13px; }

/* Active filters */
.cat-active-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.cat-active-filter { display:flex; align-items:center; gap:4px; padding:4px 8px 4px 10px; background:#111; color:#fff; border-radius:50px; font-size:0.72rem; font-weight:600; }
.cat-active-filter button { background:none; border:none; cursor:pointer; padding:0; display:flex; align-items:center; }
.cat-active-filter button img { width:11px; height:11px; filter:invert(1); }

/* Grid */
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; width:100%; min-width:0; box-sizing:border-box; }
.cat-grid.list-view { grid-template-columns:1fr; }
@media(max-width:600px) { .cat-grid { grid-template-columns:repeat(2,1fr); gap:8px; } }

/* Card */
.cat-card { background:#fff; border-radius:12px; overflow:hidden; border:1.5px solid #f3f4f6; cursor:pointer; transition:transform .2s,box-shadow .2s,border-color .2s; position:relative; }
.cat-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.07); border-color:#e5e7eb; }
.cat-card-img-wrap { position:relative; aspect-ratio:1; overflow:hidden; background:#f9fafb; }
.cat-card-img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.cat-card:hover .cat-card-img { transform:scale(1.05); }
.cat-card-carousel { position:absolute; inset:0; width:100%; height:100%; }
.cat-card-carousel-track {
  display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; scroll-behavior:smooth;
}
.cat-card-carousel-track::-webkit-scrollbar { display:none; }
.cat-card-slide { flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always; }
.cat-card-slide img, .cat-card-slide video { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.cat-card-dots {
  position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:5px;
  z-index:3; pointer-events:none;
}
.cat-card-dot {
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.55);
  box-shadow:0 1px 3px rgba(0,0,0,0.25); pointer-events:auto; cursor:pointer;
  transition:transform .15s, background .15s;
}
.cat-card-dot.active { background:#fff; transform:scale(1.2); }
.cat-card-slide-count {
  position:absolute; top:8px; right:8px; z-index:3;
  background:rgba(0,0,0,0.45); color:#fff; font-size:0.62rem; font-weight:700;
  padding:2px 7px; border-radius:50px; pointer-events:none;
}
.cat-card:hover .cat-card-carousel-track img { transform:none; }
.cat-card-badge { z-index:4; }
.cat-card-img-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f3f4f6; }
.cat-card-img-ph img { width:28px; height:28px; opacity:0.2; }
.cat-card-badge { position:absolute; top:7px; left:7px; background:#111; color:#fff; font-size:0.58rem; font-weight:800; padding:2px 6px; border-radius:50px; z-index:1; }
.cat-card-badge.sale { background:#ef4444; }
.cat-card-badge.new { background:#3b82f6; }
.cat-card-badge.hit { background:#f59e0b; }
.cat-card-fav { position:absolute; top:7px; right:7px; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,0.9); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1; transition:transform .15s; }
.cat-card-fav:hover { transform:scale(1.1); }
.cat-card-fav img { width:12px; height:12px; }
.cat-card-fav.liked img { filter:invert(27%) sepia(90%) saturate(600%) hue-rotate(330deg); }
.cat-card-body { padding:9px 10px 11px; }
.cat-card-name { font-size:0.78rem; font-weight:700; color:#111; margin-bottom:3px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3; }
.cat-card-flowers { font-size:0.65rem; color:#9ca3af; margin-bottom:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cat-card-rating { display:flex; align-items:center; gap:3px; margin-bottom:7px; }
.cat-card-stars { color:#f59e0b; font-size:0.62rem; letter-spacing:1px; }
.cat-card-rating-num { font-size:0.65rem; font-weight:700; color:#374151; }
.cat-card-rating-cnt { font-size:0.62rem; color:#9ca3af; }
.cat-card-footer { display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:6px; }
.cat-card-footer > div:first-child { flex:1; min-width:0; }
.cat-card-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.cat-card-buynow {
  width:30px; height:30px; border-radius:8px;
  background:transparent;
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .1s, opacity .15s;
}
.cat-card-buynow:active { transform:scale(0.92); }
.cat-card-buynow img { width:16px; height:16px; }
.cat-card-price {
  font-size:0.9rem; font-weight:900; color:#111;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cat-card-old {
  font-size:0.68rem; color:#9ca3af; text-decoration:line-through;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cat-card-add { width:30px; height:30px; border-radius:8px; background:transparent; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .15s,transform .1s; }
.cat-card-add:active { transform:scale(0.9); }
.cat-card-add img { width:16px; height:16px; }

/* Mobile compact */
@media(max-width:480px) {
  .cat-card-body { padding:7px 8px 9px; }
  .cat-card-name { font-size:0.72rem; }
  .cat-card-footer { gap:6px; }
  .cat-card-price { font-size:0.82rem; }
  .cat-card-old { font-size:0.62rem; }
  .cat-card-flowers { display:none; }
  .cat-card-rating { display:none; }
  .cat-card-add, .cat-card-buynow { width:24px; height:24px; }
  .cat-card-buynow img, .cat-card-add img { width:14px; height:14px; }
}

/* List view */
.cat-grid.list-view .cat-card { display:flex; flex-direction:row; }
.cat-grid.list-view .cat-card-img-wrap { width:90px; min-width:90px; aspect-ratio:auto; height:90px; }
.cat-grid.list-view .cat-card-carousel { position:absolute; inset:0; }
.cat-grid.list-view .cat-card-slide-count { font-size:0.55rem; top:4px; right:4px; }
.cat-grid.list-view .cat-card-dots { bottom:4px; }
.cat-grid.list-view .cat-card-body { flex:1; display:flex; flex-direction:column; justify-content:space-between; padding:10px 12px; }
.cat-grid.list-view .cat-card-name { -webkit-line-clamp:1; }
.cat-grid.list-view .cat-card-flowers { display:block; }
.cat-grid.list-view .cat-card-rating { display:flex; }

/* Empty / Skeleton */
.cat-empty { text-align:center; padding:60px 20px; grid-column:1/-1; }
.cat-empty img { width:44px; height:44px; opacity:0.2; margin-bottom:12px; }
.cat-empty p { color:#9ca3af; font-size:0.82rem; }
.cat-skeleton { background:#f3f4f6; border-radius:12px; overflow:hidden; border:1.5px solid #f3f4f6; }
.cat-skeleton-img { aspect-ratio:1; background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
.cat-skeleton-body { padding:9px 10px; }
.cat-skeleton-line { height:10px; border-radius:5px; background:linear-gradient(90deg,#f3f4f6 25%,#e5e7eb 50%,#f3f4f6 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; margin-bottom:6px; }
.cat-skeleton-line.short { width:55%; }
@keyframes shimmer { to { background-position:-200% 0; } }

/* Mobile filter overlay backdrop */
@media(max-width:900px) {
  .cat-sidebar.open::before {
    content:'';
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.4);
    z-index:-1;
  }
  .cat-sidebar.open {
    max-width:280px;
    box-shadow:4px 0 24px rgba(0,0,0,0.15);
  }
}

/* mobile.css gives all buttons 44×44px — too wide for 2-column cards; keep price + icons on one row */
@media (max-width: 767px) {
  .cat-toolbar { min-width: 0; }
  .cat-toolbar-right {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
  }
  .cat-toolbar button.cat-view-btn {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 34px;
    height: 34px;
    padding: 0;
    box-sizing: border-box;
  }
  .cat-toolbar button.cat-filter-btn {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 6px 10px;
    box-sizing: border-box;
  }
  .cat-sort-select {
    min-width: 0;
    max-width: min(200px, 46vw);
    flex-shrink: 1;
  }
  .cat-card-footer button.cat-card-buynow,
  .cat-card-footer button.cat-card-add {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    box-sizing: border-box;
  }
  .cat-card-footer button.cat-card-buynow img,
  .cat-card-footer button.cat-card-add img {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .cat-card-footer button.cat-card-buynow,
  .cat-card-footer button.cat-card-add {
    width: 28px !important;
    height: 28px !important;
  }
  .cat-card-footer button.cat-card-buynow img,
  .cat-card-footer button.cat-card-add img {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Scroll-to-top FAB: avoid covering bottom-right catalog cards on narrow screens */
@media (max-width: 767px) {
  .page-catalog #scrollTopBtn.fab {
    left: max(14px, env(safe-area-inset-left, 0px));
    right: auto;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }
}