/* ── products.css — shared design system for product pages ── */

/* ── Keyframes ── */
@keyframes brand-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes ms-in { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes orb-drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(8%,-6%) scale(1.15); } 100% { transform: translate(-6%,4%) scale(.95); } }
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-pop { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── Reveal system ── */
.reveal { opacity:0; transform:translateY(28px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal.from-left { transform:translateX(-40px); } .reveal.from-left.in { transform:translateX(0); }
.reveal.from-right { transform:translateX(40px); } .reveal.from-right.in { transform:translateX(0); }
.reveal.scale-in { transform:scale(.92); } .reveal.scale-in.in { transform:scale(1); }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1 !important; transform:none !important; transition:none !important; } }

/* ── Arrow link ── */
.arrow-link { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; text-decoration:none; transition:gap .25s; color:var(--color-primary,#001DA5); }
.arrow-link:hover { gap:12px; }
.arrow-link svg { transition:transform .25s; }
.arrow-link:hover svg { transform:translateX(2px); }

/* ── Card hover ── */
.card-hover { transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s; will-change:transform; }
.card-hover:hover { transform:translateY(-6px); border-color:rgba(92,79,243,.45) !important; box-shadow:0 20px 50px rgba(0,21,90,.35) !important; }
html[data-theme="light"] .card-hover:hover { box-shadow:0 20px 50px rgba(0,21,90,.14) !important; }

/* ── Brands carousel (dual track marquee) ── */
.brands-carousel-outer { overflow:hidden; position:relative; padding:.75rem 0 1.25rem; display:flex; flex-direction:column; gap:1rem; mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%); -webkit-mask-image:linear-gradient(to right,transparent 0%,black 6%,black 94%,transparent 100%); }
.brands-track { display:flex; align-items:center; gap:1.25rem; width:max-content; will-change:transform; transform:translateZ(0); animation:brand-scroll 50s linear infinite; }
.brands-track--rev { animation-direction:reverse; animation-duration:44s; }
.brands-carousel-outer:hover .brands-track { animation-play-state:paused; }
.brand-item { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:156px; height:72px; padding:.65rem 1.2rem; background:#fff; border-radius:14px; border:1px solid rgba(0,0,0,.07); box-shadow:0 2px 10px rgba(0,0,0,.06); transition:box-shadow .25s, transform .25s cubic-bezier(.22,1,.36,1); }
.brand-item:hover { box-shadow:0 10px 28px rgba(92,79,243,.28); transform:translateY(-3px); }
html[data-theme="dark"] .brand-item { background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.15); box-shadow:0 2px 16px rgba(0,0,0,.5); }
.brand-logo-img { max-height:44px; max-width:120px; width:auto; height:auto; object-fit:contain; display:block; }

/* ── Cat-card system (product cards) ── */
.cat-card { position:relative; display:flex; flex-direction:column; background:var(--color-surface); border:1px solid var(--color-border); border-radius:16px; overflow:hidden; cursor:pointer; height:100%; }
.cat-card-art { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--color-border); background:linear-gradient(120deg,rgba(0,29,165,.05),rgba(92,79,243,.05)); min-height:52px; }
.cat-art-logo { height:26px; max-width:96px; object-fit:contain; object-position:left center; background:#fff; padding:3px 7px; border-radius:6px; }
.cat-art-brand { font-size:13px; font-weight:800; letter-spacing:.03em; color:var(--color-text); opacity:.65; text-transform:uppercase; }
.cat-art-emoji { font-size:22px; opacity:.5; }
.cat-card-img { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#f4f6fb; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--color-border); }
html[data-theme="dark"] .cat-card-img { background:#0e1430; }
.cat-card-img img { width:100%; height:100%; object-fit:contain; padding:10px; transition:transform .3s; }
.cat-card:hover .cat-card-img img { transform:scale(1.06); }
.cat-card-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:9px; }
.cat-badge { display:inline-flex; align-items:center; width:fit-content; padding:3px 9px; border-radius:6px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; border:1px solid transparent; }
.cat-card-title { font-size:14.5px; font-weight:700; color:var(--color-text); line-height:1.3; margin:0; }
.cat-card-desc { font-size:13px; color:var(--color-text-muted); line-height:1.5; margin:0; }
.cat-specs { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cat-spec { display:flex; flex-direction:column; gap:2px; background:var(--color-surface-muted,var(--color-surface)); border:1px solid var(--color-border); border-radius:8px; padding:7px 9px; }
.cat-spec--wide { grid-column:1/-1; }
.cat-spec-k { font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--color-text-muted); }
.cat-spec-v { font-size:12.5px; font-weight:700; color:var(--color-text); line-height:1.25; }
.cat-ref { font-size:12px; color:var(--color-text-muted); margin:0; }
.cat-ref code { font-family:"Segoe UI Mono","SF Mono",monospace; font-size:12px; background:var(--color-surface-muted,var(--color-surface)); padding:2px 6px; border-radius:4px; border:1px solid var(--color-border); color:var(--color-text); }
.cat-card-foot { padding:12px 16px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--color-border); }
.cat-detail { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--color-primary,#001DA5); text-decoration:none; }
.cat-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; border:1.5px solid transparent; }
.cat-pill-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.cat-pill--in { background:rgba(16,185,129,.14); color:#047857; border-color:rgba(16,185,129,.35); }
.cat-pill--in .cat-pill-dot { background:#10b981; box-shadow:0 0 8px #10b981; }
.cat-pill--ped { background:rgba(245,158,11,.13); color:#92400e; border-color:rgba(245,158,11,.35); }
.cat-pill--ped .cat-pill-dot { background:#f59e0b; box-shadow:0 0 8px #f59e0b; }
html[data-theme="dark"] .cat-pill--in { background:rgba(16,245,129,.16); color:#10f581; border-color:rgba(16,245,129,.4); }
html[data-theme="dark"] .cat-pill--ped { background:rgba(255,190,30,.16); color:#ffc030; border-color:rgba(255,190,30,.4); }

/* ── Cat-filterbar ── */
.cat-filterbar { position:sticky; top:var(--header-h,64px); z-index:50; background:var(--color-surface); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--color-border); padding:14px 0; box-shadow:0 2px 12px rgba(0,0,0,.07); }
html[data-theme="dark"] .cat-filterbar { box-shadow:0 2px 12px rgba(0,0,0,.3); }
.cat-tabs { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--color-border); }
.cat-tabs::-webkit-scrollbar { display:none; }
.cat-tab { flex-shrink:0; padding:8px 18px; border-radius:999px; border:1.5px solid var(--color-border); background:transparent; color:var(--color-text-muted); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:all .2s; }
.cat-tab:hover { border-color:var(--color-primary,#001DA5); color:var(--color-primary,#001DA5); }
.cat-tab.active { background:linear-gradient(135deg,#001DA5,#5C4FF3); border-color:transparent; color:#fff; box-shadow:0 6px 18px rgba(0,29,165,.3); }
.cat-filter-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cat-filter-row + .cat-filter-row { margin-top:10px; }

/* ── Cat-ms (multi-select dropdowns) — also alias old .ms-btn/.ms-panel/.ms-option ── */
.cat-ms, .ms-wrap { position:relative; }
.cat-ms-btn, .ms-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1.5px solid var(--color-border); border-radius:10px; background:var(--color-surface); color:var(--color-text); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:border-color .15s,color .15s; }
.cat-ms-btn:hover, .ms-btn:hover { border-color:var(--color-primary,#001DA5); }
.cat-ms-btn.has-sel, .ms-btn.has-sel { border-color:var(--color-primary,#001DA5); color:var(--color-primary,#001DA5); }
.cat-ms-btn svg, .ms-btn svg { transition:transform .18s; flex-shrink:0; }
.cat-ms-btn[aria-expanded="true"] svg, .ms-btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.cat-ms-panel, .ms-panel { position:absolute; top:calc(100% + 6px); left:0; z-index:60; min-width:200px; max-height:320px; overflow-y:auto; background:var(--color-surface); border:1.5px solid var(--color-border); border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.3); padding:6px; animation:ms-in .16s ease both; }
html[data-theme="dark"] .cat-ms-panel, html[data-theme="dark"] .ms-panel { box-shadow:0 14px 40px rgba(0,0,0,.5); }
.cat-ms-panel[hidden], .ms-panel[hidden] { display:none !important; }
.cat-ms-opt, .ms-option { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--color-text); transition:background .12s; user-select:none; }
.cat-ms-opt:hover, .ms-option:hover { background:var(--color-primary-soft,rgba(0,29,165,.08)); }
.cat-ms-opt input, .ms-option input[type="checkbox"] { width:15px; height:15px; accent-color:var(--color-primary,#001DA5); flex-shrink:0; cursor:pointer; }
.cat-ms-opt small, .ms-option small { color:var(--color-text-muted); }
.cat-ms-all, .ms-option--all { font-weight:700; border-bottom:1px solid var(--color-border); margin-bottom:4px; padding-bottom:9px; }

/* ── Cat-search (also alias old search classes) ── */
.cat-search { position:relative; flex:1; max-width:460px; }
.cat-search-ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--color-text-muted); pointer-events:none; }
.cat-search input { width:100%; padding:11px 14px 11px 36px; border:1.5px solid var(--color-border); border-radius:10px; background:var(--color-surface); color:var(--color-text); font-size:14px; font-family:inherit; transition:all .2s; }
.cat-search input:focus { outline:none; border-color:var(--color-primary,#001DA5); box-shadow:0 0 0 4px var(--color-primary-soft,rgba(0,29,165,.08)); }
.cat-search input::placeholder { color:var(--color-text-muted); }

/* ── Cat controls ── */
.cat-clear { font-size:13px; font-weight:600; color:var(--color-text-muted); background:none; border:none; cursor:pointer; padding:8px 10px; border-radius:8px; transition:all .15s; }
.cat-clear:hover { color:var(--color-primary,#001DA5); background:var(--color-primary-soft,rgba(0,29,165,.08)); }
.cat-count { font-size:13px; color:var(--color-text-muted); margin-left:auto; white-space:nowrap; }
.cat-count strong { color:var(--color-text); }
@media (max-width:600px) { .cat-count { display:none; } }

/* ── Product detail modal ── */
.pm-backdrop { position:fixed; inset:0; z-index:300; background:rgba(5,8,20,.62); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; animation:pm-fade .25s ease both; }
.pm-card { position:relative; width:min(880px,100%); max-height:90vh; overflow:hidden; background:var(--color-surface); border:1px solid rgba(91,130,255,.3); border-radius:24px; box-shadow:0 50px 120px rgba(0,0,0,.55); animation:pm-pop .4s cubic-bezier(.22,1,.36,1) both; }
.pm-close { position:absolute; top:16px; right:16px; z-index:5; width:38px; height:38px; border-radius:10px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .25s; }
.pm-close:hover { background:#ef4444; border-color:#ef4444; color:#fff; transform:rotate(90deg); }
.pm-grid { display:grid; grid-template-columns:1fr 1.1fr; max-height:90vh; }
.pm-visual { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; min-height:280px; background:#f4f6fb; }
html[data-theme="dark"] .pm-visual { background:#0e1430; }
.pm-info { padding:38px 34px 30px; overflow-y:auto; }
.pm-title { font-size:22px; font-weight:800; color:var(--color-text); letter-spacing:-0.02em; margin:0 0 8px; }
.pm-sub { font-size:13.5px; color:var(--color-text-muted); margin:0 0 24px; line-height:1.5; }
.pm-specs { display:flex; flex-direction:column; gap:1px; background:var(--color-border); border:1px solid var(--color-border); border-radius:12px; overflow:hidden; margin-bottom:22px; }
.pm-spec-row { display:flex; justify-content:space-between; gap:16px; padding:12px 16px; background:var(--color-surface); }
.pm-spec-k { font-size:12.5px; color:var(--color-text-muted); font-weight:600; }
.pm-spec-v { font-size:12.5px; color:var(--color-text); font-weight:700; text-align:right; }
.pm-actions { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:680px) { .pm-grid { grid-template-columns:1fr; max-height:88vh; overflow-y:auto; } .pm-visual { min-height:200px; } .pm-info { padding:28px 24px 26px; } }

/* ── Section title classes ── */
.pg-h1 { font-size:clamp(2.4rem,5vw,4rem); font-weight:900; letter-spacing:-0.035em; line-height:1.05; color:var(--color-text); }
.section-h2 { font-size:clamp(1.7rem,3.5vw,2.4rem); font-weight:800; letter-spacing:-0.025em; color:var(--color-text); line-height:1.15; }

/* ── Override page-specific filter bars with cat-filterbar style ── */
.lto-filters, .eq-filters, .mon-filters, .per-filters { background:var(--color-surface); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 2px 12px rgba(0,0,0,.07); }
html[data-theme="dark"] .lto-filters, html[data-theme="dark"] .eq-filters, html[data-theme="dark"] .mon-filters, html[data-theme="dark"] .per-filters { box-shadow:0 2px 12px rgba(0,0,0,.3); }

/* ── Override old filter search input styles ── */
.lto-search input, .eq-search input, .mon-search input, .per-search input { border:1.5px solid var(--color-border); border-radius:10px; background:var(--color-surface); font-size:14px; padding:11px 14px 11px 36px; }
.lto-search input:focus, .eq-search input:focus, .mon-search input:focus, .per-search input:focus { border-color:var(--color-primary,#001DA5); box-shadow:0 0 0 4px var(--color-primary-soft,rgba(0,29,165,.08)); outline:none; }

/* ── Reduced motion global override ── */
@media (prefers-reduced-motion:reduce) {
  .brands-track, .brands-track--rev { animation:none !important; }
  .cat-tab { transition:none !important; }
  .card-hover { transition:none !important; }
  .pm-backdrop { animation:none !important; }
  .pm-card { animation:none !important; }
}