/* ============================== SHOP ============================== */

.shop-hero{ padding: clamp(2.5rem,5vw,4rem) 0 2rem; }
.shop-hero h1{ font-size: clamp(2.2rem,4.6vw,3.4rem); max-width:18ch; }
.shop-hero p{ color: var(--ink-dim); max-width:56ch; margin-top:1rem; }

.shop-shell{ display:grid; grid-template-columns: 272px 1fr; gap:2.5rem; align-items:start; padding-bottom:5rem; }

.shop-sidebar{ position:sticky; top:5.5rem; display:flex; flex-direction:column; gap:1.4rem; }
.side-block{ padding:1.4rem; }
.side-block h4{ font-family:var(--f-display); font-weight:800; font-size:.9rem; margin-bottom:1rem; }
.search-box{ position:relative; }
.search-box input{ width:100%; padding:.75em 1em .75em 2.4em; border-radius:999px; border:2px solid var(--line); background: var(--cream); font-size:.86rem; }
.search-box svg{ position:absolute; left:.9em; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--ink-faint); }
.cat-list{ display:flex; flex-direction:column; gap:.4rem; }
.cat-item{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:.65em .8em; border-radius:12px; font-size:.86rem; color: var(--ink-dim); font-weight:700; transition: all var(--dur-fast); text-align:left; }
.cat-item:hover{ background: var(--cream-deep); }
.cat-item.is-active{ background: var(--g-coral); color:#fff; }
.cat-item .count{ font-family:var(--f-mono); font-size:.72rem; opacity:.8; }
.age-filter{ display:flex; flex-wrap:wrap; gap:.5rem; }
.age-filter button{ padding:.5em 1em; border-radius:999px; background: var(--cream); border:2px solid var(--line); font-size:.78rem; font-weight:700; }
.age-filter button.is-active{ background: var(--ink); color:#fff; border-color:var(--ink); }

.shop-content{ display:flex; flex-direction:column; gap:2.2rem; }
.shop-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.shop-count{ font-size:.88rem; color: var(--ink-faint); font-weight:700; }

.shop-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:1.4rem; }
@media (max-width:1080px){ .shop-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .shop-grid{ grid-template-columns: 1fr; } }

.shop-native-ad{ grid-column: span 1; display:flex; align-items:stretch; justify-content:stretch; min-width:0; }
.shop-native-ad .ad-block,
.shop-native-ad .ad-slot{ width:100%; max-width:none; height:100%; aspect-ratio:auto; }
.shop-native-ad,
.shop-native-ad .ad-block,
.shop-native-ad .ad-click-target,
.shop-native-ad .ad-unit{ height:100%; }
.shop-sidebar .ad-slot{ width:100%; max-width:none; }
.shop-sidebar .la-ad{ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; padding:8px; background:var(--cream); }
.shop-sidebar .la-ad-img{ width:100%; height:150px; }
.shop-sidebar .la-ad-body{ display:flex; flex-direction:column; align-items:stretch; gap:1rem; padding:1rem .2rem .2rem; }
.shop-sidebar .la-ad-copy strong{ white-space:normal; font-size:.95rem; }
.shop-sidebar .la-ad-copy span{ white-space:normal; line-height:1.45; }
.shop-sidebar .la-ad-cta{ text-align:center; padding:.55rem .35rem; }

@media (max-width:980px){
  .shop-shell{ grid-template-columns:1fr; }
  .shop-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
  .side-block{ flex:1; min-width:220px; }
}