/* ============================================================
   TIME'LESS PIECES — styles.css
   ============================================================ */
:root{
  --bg:        #FFFFFF;
  --surface:   #FFFFFF;
  --ink:       #161616;
  --black:     #000000;
  --muted:     #686868;
  --placeholder:#999999;
  --border:    #D4D5D6;
  --icon-bg:   #F4F5F6;
  --dot:       #FF6565;
  --icon-stroke:#444F5C;
  --maxw: 1400px;
  --gutter: 56px;
  --gap-grid: 24px;
  --r-card: 16px;
  --font-display: "Playfair Display", Georgia, serif;
  --font-sans: "Geist", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ transition:none !important; animation:none !important; } }
body{ background:var(--bg); color:var(--ink); font-family:var(--font-mono); font-weight:500; font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img,svg{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; border-radius:4px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
@media (max-width:900px){ .wrap{ padding:0 24px; } }
@media (max-width:560px){ .wrap{ padding:0 18px; } }
.site-header{ padding:28px 0 27px; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--black); letter-spacing:0; line-height:1.1; }
.nav{ display:flex; align-items:center; gap:80px; font-family:var(--font-sans); font-weight:500; font-size:16px; }
.nav a{ color:#444F5C; }
.nav a.is-current{ color:var(--black); font-weight:700; }
.nav a:hover{ opacity:.6; }
.hand-btn{ position:relative; width:40px; height:40px; border-radius:32px; background:var(--surface); display:grid; place-items:center; margin-right:-40px; }
.hand-btn .dot{ position:absolute; top:-5px; right:-9px; background:var(--dot); color:#fff; font-family:var(--font-sans); font-weight:400; font-size:14px; line-height:16px; padding:0 5px; border-radius:31px; }
@media (max-width:1080px){ .nav{ gap:40px; } .hand-btn{ margin-right:-16px; } }
.header-actions{ display:none; align-items:center; gap:6px; }
.hand-btn--mobile{ margin-right:0; }
.hamburger{ display:none; width:42px; height:42px; position:relative; flex:0 0 auto; }
.hamburger span{ position:absolute; left:9px; right:9px; height:2px; background:var(--black); border-radius:2px; transition:transform .25s ease, opacity .2s ease; transform-origin:center; }
.hamburger span:nth-child(1){ top:14px; }
.hamburger span:nth-child(2){ top:20px; }
.hamburger span:nth-child(3){ top:26px; }
.hamburger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg); }
.mobile-menu-overlay{ position:fixed; inset:0; z-index:60; background:rgba(22,22,22,.28); }
.mobile-menu{ position:absolute; top:0; left:0; right:0; background:var(--bg); padding:80px 24px 28px; display:flex; flex-direction:column; gap:6px; box-shadow:0 18px 40px rgba(22,22,22,.16); animation:menu-drop .22s ease; }
.mobile-menu-close{ position:absolute; top:22px; right:20px; width:40px; height:40px; border-radius:99px; background:var(--surface); font-size:26px; line-height:1; color:var(--ink); display:grid; place-items:center; }
.mobile-menu-close:hover{ background:var(--ink); color:#fff; }
@keyframes menu-drop{ from{ transform:translateY(-12px); opacity:.4; } to{ transform:none; opacity:1; } }
.mobile-menu a{ font-family:var(--font-sans); font-weight:500; font-size:22px; color:var(--black); padding:12px 0; border-bottom:1px solid var(--border); }
.mobile-menu a.is-current{ font-weight:700; }
.mobile-menu .mm-wish{ display:flex; align-items:center; gap:10px; border-bottom:none; margin-top:6px; }
.mobile-menu .mm-wish-ico{ width:26px; height:26px; display:inline-grid; place-items:center; }
.mobile-menu .mm-count{ margin-left:auto; background:var(--ink); color:#fff; font-family:var(--font-mono); font-size:13px; min-width:24px; height:24px; padding:0 7px; border-radius:99px; display:inline-grid; place-items:center; }
body.no-scroll{ overflow:hidden; }
@media (max-width:760px){ .nav{ display:none; } .header-actions{ display:flex; } .hamburger{ display:block; } }
@media (max-width:640px){ .brand{ font-size:26px; } }
.hero{ padding-top:32px; }
.hero h1{ font-family:var(--font-sans); font-weight:500; font-size:32px; line-height:1.3; color:var(--ink); max-width:577px; letter-spacing:0; }
.hero .sub{ margin-top:16px; font-family:var(--font-sans); font-weight:400; font-size:14px; line-height:16px; color:var(--muted); }
.subscribe{ margin-top:8px; display:flex; align-items:center; max-width:577px; height:40px; background:#FBFBFB; border-radius:40px; border:1px solid #E8E9EB; overflow:hidden; padding:0 16px; }
.subscribe input{ flex:1; min-width:0; border:none; background:transparent; font-family:var(--font-sans); font-weight:400; font-size:14px; line-height:16px; color:var(--ink); }
.subscribe input::placeholder{ color:var(--placeholder); }
.subscribe input:focus{ outline:none; }
.subscribe button{ font-family:var(--font-sans); font-weight:400; font-size:14px; line-height:16px; color:var(--ink); padding-left:16px; }
.subscribe button:hover{ opacity:.6; }
.subscribe.done{ border-color:var(--ink); }
.sub-msg{ margin-top:8px; font-size:13px; color:var(--muted); min-height:18px; }
@media (max-width:640px){ .hero h1{ font-size:25px; } }
.lineup{ padding-top:64px; }
.lineup-head{ display:flex; align-items:flex-end; gap:8px; }
.lineup-head h2{ font-family:var(--font-display); font-weight:700; font-size:24px; line-height:1.15; color:var(--black); }
.lineup-count{ font-size:14px; line-height:16px; color:var(--muted); padding-bottom:4px; }
.toolbar{ margin-top:24px; display:flex; align-items:flex-start; gap:16px 24px; }
.chips{ display:flex; flex-wrap:wrap; gap:16px; flex:1 1 auto; min-width:0; }
.sort-wrap{ flex:0 0 auto; margin-left:auto; }
.chip-wrap{ position:relative; flex:0 0 auto; }
.chip{ display:inline-flex; align-items:center; gap:8px; height:34px; padding:8px 14px; border-radius:17px; background:transparent; border:1px solid var(--border); font-family:var(--font-mono); font-weight:500; font-size:15px; line-height:17px; color:var(--ink); white-space:nowrap; transition:border-color .15s ease; }
.chip:hover{ border-color:var(--ink); }
.chip .caret{ width:16px; height:16px; display:inline-grid; place-items:center; transition:transform .15s ease; flex:0 0 auto; }
.chip .caret svg{ width:16px; height:16px; display:block; }
.chip[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.chip.is-active{ border-color:var(--ink); }
.chip .count{ background:var(--ink); color:#fff; border-radius:99px; font-size:11px; line-height:1; padding:3px 6px; }
.chip--solid{ background:var(--black); color:#fff; border-color:var(--black); }
.chip--toggle.is-on{ background:var(--black); color:#fff; border-color:var(--black); }
.chip--clear{ color:var(--muted); }
.chip--clear:hover{ color:var(--ink); border-color:var(--ink); }
.filters-btn{ display:none; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:20px; border:1px solid var(--ink); background:var(--surface); font-family:var(--font-mono); font-weight:500; font-size:14px; line-height:16px; }
.filters-btn .count{ background:var(--ink); color:#fff; border-radius:99px; font-size:11px; line-height:1; padding:3px 6px; }
.panel{ position:absolute; z-index:40; top:calc(100% + 10px); left:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 36px rgba(22,22,22,.10); padding:18px 20px; min-width:250px; display:none; }
.panel.open{ display:block; }
.panel label{ display:flex; align-items:center; gap:12px; padding:8px 0; font-size:14px; line-height:16px; cursor:pointer; white-space:nowrap; }
.panel input[type="checkbox"], .panel input[type="radio"]{ appearance:none; width:16px; height:16px; border:1.5px solid var(--border); border-radius:4px; display:grid; place-content:center; cursor:pointer; flex:0 0 auto; background:#fff; }
.panel input[type="radio"]{ border-radius:99px; }
.panel input:checked{ background:var(--ink); border-color:var(--ink); }
.panel input[type="checkbox"]:checked::after{ content:"✓"; color:#fff; font-size:10px; line-height:1; }
.panel input[type="radio"]:checked::after{ content:""; width:6px; height:6px; border-radius:99px; background:#fff; }
.panel .panel-link{ display:inline-flex; gap:6px; margin-top:10px; font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.panel .panel-link--bottom{ margin-top:14px; padding-top:14px; border-top:1px solid var(--border); width:100%; }
.panel-clear{ display:block; margin-top:12px; font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.sort-wrap .panel{ left:auto; right:0; }
@media (max-width:560px){ .panel{ max-width:86vw; } }
.grid{ margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-grid); }
@media (max-width:1080px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .18s ease, box-shadow .18s ease; }
.card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(22,22,22,.08); }
.card .img{ aspect-ratio:413/362; padding:40px 56px 16px; display:grid; place-items:center; cursor:pointer; position:relative; overflow:hidden; }
.card .img img{ width:100%; height:100%; object-fit:contain; }
.card-whisper{ position:absolute; bottom:0; left:0; right:0; background:var(--ink); color:#fff; padding:11px 16px 13px; transform:translateY(calc(100% + 1px)); transition:transform .22s cubic-bezier(.22,.68,0,1.2); pointer-events:none; }
.card:hover .card-whisper{ transform:translateY(0); }
.card-whisper-label{ display:block; font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:4px; }
.card-whisper-text{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; line-height:1.55; color:#fff; }
html[data-theme="dark"] .card-whisper{ background:#fff; }
html[data-theme="dark"] .card-whisper-label{ color:rgba(0,0,0,.4); }
html[data-theme="dark"] .card-whisper-text{ color:var(--ink); }
.card-actions{ position:absolute; top:16px; right:16px; display:flex; gap:16px; }
.icon-btn{ width:40px; height:40px; border-radius:32px; background:var(--icon-bg); display:grid; place-items:center; color:var(--icon-stroke); transition:background .15s ease, color .15s ease; }
.icon-btn:hover{ background:var(--ink); color:#fff; }
.icon-btn.liked{ background:var(--ink); color:#fff; }
.badge-rec{ position:absolute; top:20px; left:20px; z-index:2; display:inline-flex; align-items:center; gap:4px; background:linear-gradient(180deg,#D3C29F,#E2CBA4); color:#000; font-family:var(--font-mono); font-weight:500; font-size:12px; line-height:1; letter-spacing:.2px; padding:5px 10px 5px 8px; border-radius:1000px; }
.badge-rec svg{ width:12px; height:12px; flex:0 0 auto; }
.card-meta{ padding:0 20px 16px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; cursor:pointer; }
.card-meta .meta-text{ min-width:0; }
.card-meta .brand-line{ font-size:15px; line-height:17px; color:var(--muted); }
.card-meta .name{ margin-top:4px; font-size:18px; line-height:20px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-meta .price{ flex:0 0 auto; font-weight:700; font-size:18px; line-height:20px; }
.empty{ margin-top:24px; padding:64px 24px; text-align:center; color:var(--muted); background:var(--surface); border-radius:var(--r-card); font-size:14px; }
.empty button{ margin-top:12px; text-decoration:underline; text-underline-offset:3px; color:var(--ink); }
.show-more-row{ display:flex; justify-content:center; padding:40px 0 0; }
.show-more{ height:40px; padding:0 24px; border-radius:20px; background:var(--surface); border:1px solid var(--border); font-size:14px; line-height:16px; transition:border-color .15s ease; }
.show-more:hover{ border-color:var(--ink); }
.detail{ padding-top:8px; }
.back-link{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; margin-bottom:32px; }
.back-link:hover{ color:var(--ink); }
.detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:32px; }
.detail-head .brand-line{ font-size:18px; line-height:1; color:var(--muted); }
.detail-head h1{ margin-top:16px; font-family:var(--font-mono); font-weight:500; font-size:24px; line-height:1.2; color:var(--ink); letter-spacing:0; }
.detail-buy{ display:flex; align-items:center; gap:24px; flex:0 0 auto; }
.detail-price{ font-weight:600; font-size:24px; line-height:1; }
.btn-buy{ display:inline-flex; align-items:center; gap:8px; background:var(--black); color:#fff; border-radius:24px; padding:15px 16px 16px 16px; font-family:var(--font-mono); font-weight:600; font-size:24px; line-height:18px; transition:opacity .15s ease; white-space:nowrap; }
.btn-buy:hover{ opacity:.85; }
.btn-buy svg{ width:16px; height:16px; }
@media (max-width:900px){ .detail-head{ flex-direction:column; } .detail-buy{ width:100%; justify-content:space-between; } .detail-head h1{ font-size:20px; } .detail-price{ font-size:20px; } .btn-buy{ font-size:18px; line-height:16px; padding:13px 16px; } }
.gallery-row{ margin-top:51px; }
.gallery{ display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none; }
.gallery::-webkit-scrollbar{ display:none; }
.gallery .shot{ flex:0 0 auto; width:min(413px,84vw); aspect-ratio:413/577; background:var(--surface); border-radius:var(--r-card); overflow:hidden; scroll-snap-align:start; }
.gallery .shot img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:900px){ .gallery-row{ margin-top:32px; display:grid; grid-template-columns:1fr min(440px,32vw); gap:24px; align-items:start; } .gallery .shot{ width:min(280px,26vw); aspect-ratio:413/577; max-height:min(52vh,392px); } }
@media (min-width:900px) and (max-width:1100px){ .gallery-row{ grid-template-columns:1fr min(380px,34vw); } }
.note{ margin-top:64px; max-width:715px; }
.note h2{ font-weight:600; font-size:16px; line-height:16px; color:var(--black); }
.note p{ margin-top:8px; font-size:17px; line-height:26px; color:var(--ink); }
.note p + p{ margin-top:16px; }
.specs{ margin-top:48px; max-width:715px; }
.specs h2{ font-weight:600; font-size:16px; line-height:16px; margin-bottom:12px; }
.specs dl{ border-top:1px solid var(--border); }
.specs .row{ display:grid; grid-template-columns:220px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); font-size:15px; line-height:22px; }
.specs dt{ color:var(--muted); }
@media (max-width:560px){ .specs .row{ grid-template-columns:140px 1fr; } }
.detail-cta-bottom{ margin:48px 0 8px; }
.detail-body{ margin-top:64px; }
.detail-body .detail-cta-bottom{ margin:48px 0 0; }
.curator-panel{ background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
@media (max-width:899px){ .curator-panel{ width:100%; margin-top:24px; } }
.curator-panel-head{ padding:18px 24px; border-bottom:1px solid var(--border); font-size:14px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); }
.curator-metrics{ padding:4px 0; }
.curator-metric{ padding:14px 20px; border-bottom:1px solid var(--border); }
.curator-metric:last-child{ border-bottom:none; }
.curator-metric-row{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.curator-metric-name{ font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.curator-metric-colon{ font-size:15px; color:var(--muted); }
.curator-metric-value{ font-size:17px; font-weight:600; color:var(--ink); }
.curator-metric-why{ margin-top:6px; font-size:16px; color:var(--muted); line-height:1.6; }
.curator-call{ background:var(--ink); padding:16px 20px; }
.curator-call-label{ font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:6px; }
.curator-call-text{ font-size:17px; line-height:1.6; color:#fff; }
html[data-theme="dark"] .curator-call{ background:#fff; }
html[data-theme="dark"] .curator-call-label{ color:rgba(0,0,0,0.45); }
html[data-theme="dark"] .curator-call-text{ color:var(--ink); }
.page{ padding:40px 0 10px; max-width:715px; }
.page h1{ font-family:var(--font-display); font-weight:700; font-size:30px; margin-bottom:20px; }
.page p{ font-size:16px; line-height:24px; color:var(--ink); margin-bottom:16px; }
.page a{ text-decoration:underline; text-underline-offset:3px; }
.site-footer{ margin-top:104px; border-top:1px solid var(--border); padding:64px 0 32px; }
.footer-grid{ display:grid; grid-template-columns:1.1fr 2fr; gap:72px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr; gap:48px; } }
.footer-left .mark{ font-size:28px; line-height:1; }
.footer-brand{ font-family:var(--font-display); font-weight:700; font-size:28px; line-height:1; color:var(--black); display:inline-block; }
.footer-left .subscribe{ margin-top:24px; max-width:360px; }
.footer-left .fine{ margin-top:20px; color:var(--muted); font-size:13px; max-width:380px; line-height:1.7; }
.footer-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px 48px; max-width:340px; margin-left:auto; }
@media (max-width:560px){ .footer-cols{ grid-template-columns:repeat(2,1fr); } }
.fcol h3{ font-family:var(--font-mono); font-weight:500; font-size:13px; color:var(--muted); margin-bottom:14px; }
.fcol ul{ list-style:none; display:grid; gap:10px; }
.fcol a{ font-size:14px; line-height:16px; color:var(--ink); }
.fcol a:hover{ opacity:.6; }
.footer-bottom{ margin-top:64px; padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.wishlist-page{ padding-top:24px; }
.wishlist-grid{ margin-top:24px; }
.wishlist-empty{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:72px 24px; }
.wishlist-empty-emoji{ font-size:40px; margin-bottom:6px; }
.wishlist-empty-sub{ color:var(--muted); }
.wishlist-empty a{ margin-top:14px; text-decoration:underline; text-underline-offset:3px; color:var(--ink); }
.fly-emoji{ position:fixed; z-index:9999; font-size:30px; line-height:1; pointer-events:none; transform:translate(-50%,-50%); animation:balloon-fly 1.2s cubic-bezier(.22,.61,.36,1) forwards; will-change:transform,opacity; }
@keyframes balloon-fly{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(0deg); } 18%{ opacity:1; transform:translate(-50%,-90%) scale(1.15) rotate(-6deg); } 60%{ opacity:1; } 100%{ opacity:0; transform:translate(calc(-50% + var(--drift,0px)),-260%) scale(1.5) rotate(10deg); } }
@media (prefers-reduced-motion: reduce){ .fly-emoji{ display:none; } }
.sheet-overlay{ position:fixed; inset:0; z-index:70; background:rgba(22,22,22,.34); animation:fade-in .2s ease; }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
.sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--bg); border-radius:20px 20px 0 0; height:80vh; max-height:640px; display:flex; flex-direction:column; animation:sheet-up .28s cubic-bezier(.22,.61,.36,1); }
@keyframes sheet-up{ from{ transform:translateY(100%); } to{ transform:none; } }
.sheet-grip{ width:40px; height:4px; border-radius:99px; background:var(--border); margin:10px auto 0; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 20px 14px; border-bottom:1px solid var(--border); }
.sheet-head h3{ font-family:var(--font-display); font-weight:700; font-size:20px; }
.sheet-close{ width:32px; height:32px; border-radius:99px; font-size:20px; line-height:1; display:grid; place-items:center; color:var(--muted); }
.sheet-close:hover{ background:var(--icon-bg); color:var(--ink); }
.sheet-body{ flex:1; display:grid; grid-template-columns:128px 1fr; min-height:0; }
.sheet-cats{ overflow-y:auto; background:#E7E7E7; border-right:1px solid var(--border); }
.sheet-cat{ width:100%; text-align:left; display:flex; align-items:center; gap:8px; padding:16px 14px; font-family:var(--font-mono); font-weight:500; font-size:13px; color:var(--muted); border-left:3px solid transparent; }
.sheet-cat.is-active{ background:var(--bg); color:var(--ink); border-left-color:var(--ink); }
.sheet-cat .count{ margin-left:auto; background:var(--ink); color:#fff; border-radius:99px; font-size:10px; line-height:1; padding:3px 6px; }
.sheet-options{ overflow-y:auto; padding:8px 20px 20px; }
.sheet-options label{ display:flex; align-items:center; gap:12px; padding:13px 0; cursor:pointer; font-size:15px; line-height:18px; border-bottom:1px solid var(--border); }
.sheet-options label.is-checked{ color:var(--ink); font-weight:600; }
.sheet-options input[type="checkbox"]{ appearance:none; width:20px; height:20px; border:1.5px solid var(--border); border-radius:5px; display:grid; place-content:center; cursor:pointer; flex:0 0 auto; background:#fff; }
.sheet-options input:checked{ background:var(--ink); border-color:var(--ink); }
.sheet-options input:checked::after{ content:"✓"; color:#fff; font-size:12px; line-height:1; }
.sheet-foot{ display:flex; gap:12px; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); }
.sheet-clear{ flex:0 0 auto; height:48px; padding:0 20px; border-radius:24px; border:1px solid var(--border); font-size:14px; }
.sheet-clear:disabled{ opacity:.4; }
.sheet-apply{ flex:1; height:48px; border-radius:24px; background:var(--black); color:#fff; font-family:var(--font-mono); font-weight:600; font-size:15px; }
@media (max-width:760px){ .toolbar{ align-items:center; gap:12px; } .chips{ display:none; } .filters-btn{ display:inline-flex; } }