:root{
  --bg:#0e0f13;
  --bg-alt:#15171d;
  --card:#1a1c23;
  --card-hover:#22242c;
  --border:#2a2d36;
  --text:#f2f3f5;
  --text-dim:#9a9ea9;
  --accent:#ff5a36;
  --accent-dim:#ff5a3622;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:hidden;}
/* Scrollbar (page + any scrollable panel) styled to match the site theme
   instead of the browser's default light/grey slider. */
html{scrollbar-width:thin; scrollbar-color:var(--accent) var(--bg-alt);}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--bg-alt);}
::-webkit-scrollbar-thumb{background:var(--accent); border-radius:20px; border:2px solid var(--bg-alt);}
::-webkit-scrollbar-thumb:hover{background:#ff6b47;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Segoe UI', Arial, sans-serif;
  line-height:1.4;
  padding-bottom:24px; /* dynamically adjusted by syncPlayerBarSpacing() when player bar is open */
  max-width:100vw;
}
a{color:inherit; text-decoration:none;}

/* HEADER */
#header-root{
  position:sticky; top:0; z-index:50;
}
header{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; row-gap:10px;
  padding:18px 40px;
  border-bottom:1px solid var(--border);
  background:rgba(14,15,19,0.92);
  backdrop-filter:blur(8px);
}
.logo{font-weight:800; font-size:22px; letter-spacing:0.5px; flex-shrink:0;}
.logo span{color:var(--accent);}
nav{display:flex; flex-wrap:wrap; row-gap:8px; gap:10px 28px; font-size:14px; color:var(--text-dim); min-width:0;}
nav a:hover{color:var(--text);}
nav a.active{color:var(--accent);}
.header-right{display:flex; align-items:center; gap:18px; flex-shrink:0;}
.lang-switch{display:flex; border:1px solid var(--border); border-radius:20px; overflow:hidden; font-size:12px;}
.lang-switch button{background:none; border:none; color:var(--text-dim); padding:6px 12px; cursor:pointer; font-weight:600;}
.lang-switch button.active{background:var(--accent); color:#fff;}
.cta-btn{background:var(--accent); color:#fff; padding:9px 18px; border-radius:8px; font-size:14px; font-weight:600; border:none; cursor:pointer;}

/* CART BUTTON */
.cart-btn{
  position:relative; background:none; border:1px solid var(--border); color:var(--text-dim);
  width:38px; height:38px; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.cart-btn:hover{color:var(--text); border-color:#4a4d57;}
.cart-badge{
  position:absolute; top:-6px; right:-6px; background:var(--accent); color:#fff; font-size:10px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
@keyframes cartBadgeBump{ 0%{transform:scale(1);} 35%{transform:scale(1.4);} 100%{transform:scale(1);} }
.cart-badge-bump{ animation:cartBadgeBump .35s ease; }

/* Confirmation shown after adding an item to the cart, since the cart
   panel/checkout form no longer opens automatically on every add — see
   showCartToast() in site.js. */
.cart-toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(12px);
  background:var(--card); border:1px solid var(--border); color:var(--text);
  padding:12px 20px; border-radius:10px; font-size:14px; font-weight:600;
  box-shadow:0 8px 24px rgba(0,0,0,.4); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease; z-index:500;
}
.cart-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* HERO */
.hero{padding:70px 40px 50px; text-align:center; background:radial-gradient(ellipse at top, #1c1420 0%, var(--bg) 60%);}
.hero h1{font-size:42px; font-weight:800; max-width:800px; margin:0 auto 14px;}
.hero p{color:var(--text-dim); font-size:16px; max-width:560px; margin:0 auto 18px;}
.promo-banner{
  display:inline-block; background:var(--accent-dim); border:1px solid var(--accent); color:var(--accent);
  font-size:13px; font-weight:600; padding:8px 18px; border-radius:20px; margin:0 auto 26px;
}
.search-bar{position:relative; max-width:640px; margin:0 auto; display:flex; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:6px;}
.search-bar input{flex:1; background:none; border:none; color:var(--text); padding:12px 16px; font-size:15px; outline:none;}
.search-bar button{background:var(--accent); color:#fff; border:none; padding:0 22px; border-radius:8px; font-weight:600; cursor:pointer;}
.chips{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:22px;}
.chip{border:1px solid var(--border); color:var(--text-dim); font-size:13px; padding:7px 14px; border-radius:20px; cursor:pointer;}
.chip:hover{border-color:var(--accent); color:var(--text);}

/* Search autocomplete dropdown — reused by the Music/Packs/Logos search
   bars. Positioned absolute against .search-bar (position:relative). Two
   optional groups: recent searches (with a per-item delete "x") and
   live suggestions matched against genre/mood/tag/title text. */
.search-suggest-dd{
  display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:80;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:6px; max-height:340px; overflow-y:auto; text-align:left;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.search-suggest-group + .search-suggest-group{border-top:1px solid var(--border); margin-top:4px; padding-top:4px;}
.search-suggest-label{padding:6px 10px 2px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim);}
.search-suggest-item{display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:8px; cursor:pointer; font-size:13px; color:var(--text);}
.search-suggest-item:hover{background:var(--card-hover);}
.search-suggest-hist-icon{color:var(--text-dim); font-size:12px; flex-shrink:0; line-height:1;}
.search-suggest-text{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.search-suggest-text b{color:var(--accent); font-weight:700;}
/* Specificity note: .search-bar button{background:var(--accent); ...} (line 75)
   targets every <button> inside the search bar, including these two, and
   would otherwise win over a single-class selector. Pair each selector with
   its dropdown-group parent class so it outranks that rule and keeps its
   own flat, textual style instead of the orange pill look. */
.search-suggest-dd .search-suggest-del{background:none; border:none; color:var(--text-dim); font-size:17px; cursor:pointer; padding:0 6px; flex-shrink:0; line-height:1; border-radius:0;}
.search-suggest-dd .search-suggest-clear-hist{
  display:block; width:100%; text-align:center; background:none; border:none; border-top:1px solid var(--border);
  margin-top:4px; padding:9px 10px 6px; font-size:12px; font-weight:600; color:var(--accent); cursor:pointer; border-radius:0;
}
.search-suggest-dd .search-suggest-clear-hist:hover{color:#ff6b47;}
.search-suggest-dd .search-suggest-del:hover{color:var(--accent);}

/* SECTION */
.section{padding:50px 40px;}
.section-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px;}
.section-head h2{font-size:24px; font-weight:700;}
.section-head a{font-size:13px; color:var(--accent);}
.catalog-controls{display:flex; align-items:center; gap:16px;}
#catalog-count{font-size:13px; color:var(--text-dim);}
.per-page-label{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-dim);}
.per-page-label select{
  background:var(--card); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:5px 8px; font-size:13px; cursor:pointer;
}
.catalog-pagination{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:26px;}
.page-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--border);
  background:var(--card); color:var(--text); font-size:16px; cursor:pointer;
}
.page-btn:hover:not(:disabled){border-color:var(--accent); color:var(--accent);}
.page-btn:disabled{opacity:0.35; cursor:default;}
.page-info{font-size:13px; color:var(--text-dim);}
.breadcrumb{display:none;}
.breadcrumb a{color:var(--accent);}
#related{scroll-margin-top:90px;}

.search-active-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--accent-dim); border:1px solid var(--accent); border-radius:10px;
  padding:10px 16px; margin-bottom:16px; font-size:13px; color:var(--text);
}
.search-clear-btn{
  background:none; border:1px solid var(--accent); color:var(--accent);
  border-radius:16px; padding:4px 12px; font-size:12px; cursor:pointer;
}
.search-clear-btn:hover{background:var(--accent); color:#fff;}

/* Reuses .search-bar (defined in the hero section above) on the Packs and
   Logos list pages, which have no hero — just needs its own bottom margin
   instead of the hero's padding providing that spacing, and stays centered
   (margin:0 auto) to match the centered page title above it. */
.list-search-row{margin:0 0 20px;}
.list-search-row .search-bar{margin:0 auto;}

.taxonomy-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px;
}
.taxonomy-card{
  display:block; background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:18px; text-decoration:none; color:var(--text); transition:border-color .15s;
}
.taxonomy-card:hover{border-color:var(--accent);}
.taxonomy-card-title{font-size:15px; font-weight:600; margin-bottom:6px;}
.taxonomy-card-count{font-size:12px; color:var(--text-dim);}

/* License / Contact / Offer info pages — headings and card blocks are
   centered on the page; card body text stays left/justified for
   readability (centering long paragraphs of terms hurts legibility). */
.detail-page-head{display:flex; justify-content:center; text-align:center;}
.contact-card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:28px 32px; max-width:460px; display:flex; flex-direction:column; gap:18px;
  margin:0 auto 20px;
}
.contact-row{display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center;}
.contact-label{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim);}
.contact-value{font-size:16px; font-weight:600;}
.contact-email{color:var(--accent); text-decoration:none;}
.contact-email:hover{text-decoration:underline;}
.contact-terms-title{font-size:15px; font-weight:700; margin-bottom:12px; text-align:center;}
.contact-terms-body{font-size:13px; color:var(--text-dim); line-height:1.6; margin-bottom:10px;}
.contact-terms-body:last-child{margin-bottom:0;}
.contact-terms-subtitle{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim); margin:16px 0 8px; text-align:center;}
.contact-license-list{list-style:none; display:flex; flex-direction:column; gap:6px; margin-bottom:10px;}
.contact-license-list li{font-size:13px; color:var(--text-dim); line-height:1.5;}
.contact-license-list li b{color:var(--text); font-weight:600;}

.license-intro{color:var(--text-dim); font-size:14px; line-height:1.6; max-width:760px; margin:0 auto 22px; text-align:center;}
/* Logos page has no separate H1 — this paragraph doubles as the page's
   big centered heading, sized to match what the old H1 used (26px). */
.logos-lead{font-size:26px; font-weight:700; color:var(--text); line-height:1.35; max-width:820px;}
.license-detail-card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:22px 26px; max-width:760px; margin:0 auto 16px;
}
.license-detail-title{font-size:17px; font-weight:700; margin-bottom:10px; text-align:center;}
.license-detail-body{font-size:14px; color:var(--text-dim); line-height:1.65;}
.license-common-list{list-style:none; display:flex; flex-direction:column; gap:10px;}
.license-common-list li{font-size:13px; color:var(--text-dim); line-height:1.6; padding-left:18px; position:relative;}
.license-common-list li:before{content:"—"; position:absolute; left:0; color:var(--accent);}

/* REVIEWS PAGE — imported AudioJungle reviews + leave-a-review form */
.review-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; max-width:1000px; margin:0 auto 12px;}
.review-card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:20px 22px; display:flex; flex-direction:column; gap:10px;}
.review-card-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.review-track{font-size:13px; font-weight:600; color:var(--text-dim); text-align:right;}
.stars-static{display:inline-flex; gap:2px; font-size:14px; letter-spacing:1px;}
.stars-static .star{color:var(--border);}
.stars-static .star.filled{color:var(--accent);}
.review-text{font-size:14px; color:var(--text); line-height:1.6; white-space:pre-line; margin:0;}
.review-meta{font-size:12px; color:var(--text-dim);}
.review-response{background:var(--bg); border-radius:8px; padding:10px 14px; margin-top:2px;}
.review-response-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--accent); margin-bottom:4px;}
.review-response p{font-size:13px; color:var(--text-dim); line-height:1.5; margin:0;}

.review-compact-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; border-top:1px solid var(--border);}
.review-compact-row{display:flex; align-items:center; gap:14px; padding:10px 4px; border-bottom:1px solid var(--border); font-size:13px;}
.review-compact-track{flex:1; color:var(--text); font-weight:500;}
.review-compact-meta{color:var(--text-dim); font-size:12px; white-space:nowrap;}

.reviews-source-note{text-align:center; font-size:11px; color:var(--text-dim); margin:16px 0 0; text-transform:uppercase; letter-spacing:.4px;}

.review-form-card{max-width:520px;}
.review-field-label{display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-dim); margin:16px 0 6px; text-align:center;}
.review-field-label:first-of-type{margin-top:4px;}
.review-input{width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; color:var(--text); padding:11px 14px; font-size:14px; font-family:inherit; outline:none; box-sizing:border-box;}
.review-input:focus{border-color:var(--accent);}
.review-textarea{resize:vertical; min-height:90px;}
.star-picker{display:flex; flex-direction:row-reverse; justify-content:center; gap:4px;}
.star-picker input{position:absolute; opacity:0; width:0; height:0;}
.star-picker label{font-size:30px; color:var(--border); cursor:pointer; transition:color .15s; line-height:1;}
.star-picker input:checked ~ label,
.star-picker label:hover,
.star-picker label:hover ~ label{color:var(--accent);}
.review-submit-btn{display:block; width:100%; margin-top:22px; background:var(--accent); color:#fff; border:none; padding:12px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer;}
.review-submit-btn:hover{opacity:.92;}
.review-form-msg{margin-top:14px; font-size:13px; text-align:center; padding:10px 12px; border-radius:8px;}
.review-form-msg-ok{background:rgba(255,90,54,.12); color:var(--accent);}
.review-form-msg-error{background:rgba(255,90,54,.08); color:#ff8a6e;}
.custom-files-input{padding:9px 14px; cursor:pointer;}
.custom-files-hint{font-size:11px; color:var(--text-dim); margin:6px 0 0; text-align:center;}

/* SIDEBAR FILTER PANEL — the "Фильтры" entry point lives only in the top
   nav (styled like the other nav links) and toggles the panel. The panel
   itself sits in normal document flow (as a flex child of .home-layout,
   so it pushes/shrinks the track list rather than covering it) and uses
   position:sticky pinned below the header. --header-h is the header's
   live measured height (set by syncFilterPanelTop in site.js, since the
   header has no fixed pixel height), used as the panel's sticky offset. */
.home-layout{display:flex; align-items:flex-start; gap:0;}
.home-main{flex:1; min-width:0;}
.nav-filter-link{background:none; border:none; cursor:pointer; font:inherit; padding:0; color:var(--text-dim);}
.nav-filter-link:hover, .nav-filter-link.active{color:var(--accent);}

/* Floating filter toggle — replaces the old "Filters" nav text link.
   Fixed to the viewport (not just the sticky header) so it stays visible
   while scrolling, anchored just below the header via --header-h (same
   live-measured var the filter panel itself uses). JS shows/hides it
   (display:none by default here) depending on route (Music/Packs/Logos
   only) and whether the panel is currently open. */
.filter-fab{
  /* Centered in the gap between the screen's left edge and the left border
     of the track/pack/logo cards (.section padding-left = 40px on desktop):
     gap = 40 - 36 (button width) = 4px, split evenly = 2px on each side.
     The top offset (from the bottom of the sticky header) is then set to
     that same 2px so the gap above the button matches the gap to its left. */
  display:none; position:fixed; top:calc(var(--header-h, 70px) + 2px); left:2px; z-index:120;
  width:36px; height:36px; border-radius:7px; background:rgba(255,90,54,.88); border:none; color:#fff;
  align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  transition:background .15s ease, transform .15s ease;
}
.filter-fab:hover{background:rgba(255,107,71,.92); transform:scale(1.05);}
.filter-fab svg{width:16px; height:16px;}
.filter-fab-badge{
  position:absolute; top:-4px; right:-4px; background:#fff; color:var(--accent); font-size:10px; font-weight:800;
  min-width:14px; height:14px; border-radius:7px; display:flex; align-items:center; justify-content:center; padding:0 2px;
  border:1px solid var(--bg);
}
.filter-panel{
  /* Always open on desktop — a fixed sidebar, not a collapsible drawer.
     (Only phones, via the max-width:600px override further down, get the
     collapsed-by-default/toggle behavior with its own .open class.) */
  position:sticky; top:var(--header-h, 70px); left:0; align-self:flex-start;
  width:300px; flex-shrink:0; overflow:hidden;
  /* Always the full sidebar height, whether or not a group is open — its
     own background fills all the way down to the player bar (or the screen
     edge with no player), so it reads as one continuous panel rather than
     stopping short. Subtract --player-h (live height of the bottom player
     bar, 0 when closed — set by syncPlayerBarSpacing() in site.js) so the
     panel's foot/clear-filters button never ends up hidden behind the
     fixed, higher-z-index player bar when both are open at once. */
  height:calc(100vh - var(--header-h, 70px) - var(--player-h, 0px));
  background:var(--bg-alt); border-right:1px solid var(--border);
  transition:width .22s ease; display:flex; flex-direction:column;
  z-index:40;
}
/* The head bar now only ever holds the close (×) button — the "Filters"
   label was redundant with the section right above it (Music/Packs/Logos
   heading) and got dropped. On desktop the panel can't be closed at all, so
   there's nothing left to show here — hidden entirely and re-shown, with
   the button pinned to the right, only for phones in the max-width:600px
   block, where the panel is a toggleable overlay. */
.filter-panel-head{
  display:none; align-items:center; justify-content:flex-end;
  padding:14px 20px; border-bottom:1px solid var(--border);
  white-space:nowrap; flex-shrink:0;
}
.filter-panel-close{background:none; border:none; color:var(--accent); font-size:22px; cursor:pointer; line-height:1;}
.filter-panel-close:hover{color:#ff6b47;}
/* display:flex + column here is what lets the single open group (only one
   can be open at a time — see toggleFilterSection()) flex-grow to absorb
   all the leftover vertical space, pushing every group below it down to
   the bottom of the panel instead of just sitting wherever its content
   happens to end. Closed groups keep flex-shrink:0 so they always show at
   their natural (header-only) height and never get squeezed. */
.filter-panel-body{flex:1; display:flex; flex-direction:column; padding:8px 0; overflow-y:auto; min-height:0;}
.filter-group{border-bottom:1px solid var(--border); white-space:nowrap; flex-shrink:0;}
.filter-group.open{flex:1 1 0; display:flex; flex-direction:column; min-height:0;}
.filter-group-head{
  width:100%; display:flex; align-items:center; gap:8px; justify-content:flex-start;
  background:none; border:none; color:var(--text); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; padding:16px 20px; cursor:pointer;
  flex-shrink:0;
}
.filter-group-head span:first-child{flex:1; text-align:left;}
.filter-group-active-count{
  background:var(--accent); color:#fff; border-radius:9px; font-size:11px; font-weight:700;
  padding:1px 7px;
}
.filter-group-toggle{color:var(--text-dim); font-size:16px; width:16px; text-align:center;}
.filter-group.open .filter-group-head{color:var(--accent);}
/* Closed groups never render this (JS gives it display:none inline) so the
   fixed max-height only ever matters as a fallback; the open one gets it
   replaced below with flex:1 so the list itself is what stretches to fill
   the group's now-grown share of the panel, scrolling internally past that. */
.filter-group-body{max-height:240px; overflow-y:auto; padding:0 20px 14px;}
.filter-group.open .filter-group-body{flex:1; max-height:none; min-height:0;}
.filter-check-row{
  display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13px;
  color:var(--text-dim); cursor:pointer;
}
.filter-check-row:hover{color:var(--text);}
.filter-check-row input{accent-color:var(--accent); width:15px; height:15px; flex:none; cursor:pointer;}
.filter-check-label{flex:1;}
.filter-check-count{color:var(--text-dim); font-size:11px;}
.filter-panel-foot{padding:16px 20px; border-top:1px solid var(--border); flex-shrink:0;}
.filter-clear-btn{
  width:100%; background:none; border:1px solid var(--accent); color:var(--accent);
  border-radius:8px; padding:10px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.filter-clear-btn:hover{background:var(--accent); color:#fff;}
/* Mobile/tablet overrides for the filter panel live in the consolidated
   responsive section near the end of this file. */

/* TRACK LIST */
.track-list{display:flex; flex-direction:column; gap:10px;}
.track-row{
  display:grid;
  grid-template-columns:56px 52px 1.6fr 1fr 90px 130px 150px;
  align-items:center; gap:16px;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:12px 16px; cursor:pointer; transition:background .15s;
}
.track-row:hover{background:var(--card-hover); border-color:#3a3d47;}
/* Genre/mood-matched cover photo, one per track/pack (backfilled via the
   admin Pexels batch script — see admin/_fetch_cover_images.js). Falls
   back to a plain card-colored square (no broken-image icon) for any
   track that hasn't been backfilled yet. Hidden on phones/tablets — see
   the <=800px override below — to keep the tuned mobile row layout intact. */
.track-thumb{
  width:56px; height:56px; border-radius:10px; overflow:hidden; flex-shrink:0;
  background-size:cover; background-position:center; background-color:var(--card-hover);
}
.play-btn{
  width:40px; height:40px; border-radius:50%; background:var(--accent); border:none; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; flex-shrink:0;
}
.play-btn.playing{background:#fff; color:var(--accent);}
.track-main .t-title{font-weight:700; font-size:15px;}
.track-main .t-sub{color:var(--text-dim); font-size:12px; margin-top:2px;}
.tags{display:flex; gap:6px; flex-wrap:wrap;}
.tag{font-size:11px; color:var(--text-dim); border:1px solid var(--border); padding:3px 9px; border-radius:12px;}
.duration{color:var(--text-dim); font-size:13px; text-align:center;}
.waveform{height:32px; border-radius:6px; background:repeating-linear-gradient(90deg, var(--border) 0 2px, transparent 2px 5px); opacity:.6;}
.license-btn{
  background:none; border:1px solid var(--accent); color:var(--accent); padding:9px 14px; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.license-btn:hover{background:var(--accent); color:#fff;}
.license-btn-cart-icon{flex-shrink:0; display:block;}

footer{border-top:1px solid var(--border); padding:40px; color:var(--text-dim); font-size:13px; display:flex; flex-direction:column; gap:12px;}
.footer-bottom-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;}
.footer-requisites{font-size:12px; color:var(--text-dim);}
.footer-requisites a{color:var(--text-dim); text-decoration:none;}
.footer-requisites a:hover{color:var(--accent);}
.footer-links{display:flex; gap:20px; flex-wrap:wrap;}
.footer-links a{color:var(--text-dim); text-decoration:none;}
.footer-links a:hover{color:var(--accent);}

/* TRACK DETAIL PAGE */
.track-hero{padding:50px 40px; display:flex; gap:36px; align-items:center; flex-wrap:wrap;}
.track-hero-play{
  width:96px; height:96px; border-radius:50%; background:var(--accent); border:none; color:#fff; font-size:30px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.track-hero-info h1{font-size:34px; margin-bottom:8px;}
.track-hero-info .t-sub{color:var(--text-dim); font-size:14px; margin-bottom:14px;}
.track-desc{color:var(--text-dim); font-size:16px; line-height:1.65; margin:0 40px 20px;}
.tag-chips-row{display:flex; flex-wrap:wrap; gap:8px; margin:0 40px 30px;}
.tag-chip{
  font-size:11px; color:var(--text-dim); border:1px solid var(--border);
  padding:5px 12px; border-radius:14px; cursor:pointer; background:var(--card);
}
.tag-chip:hover{border-color:var(--accent); color:var(--accent);}
.included-files{
  margin:0 auto 30px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px 24px; max-width:420px; width:calc(100% - 80px);
}
.included-files-title{font-size:13px; font-weight:600; margin-bottom:10px; text-align:center;}
.included-files-list{display:flex; flex-direction:column; gap:6px;}
.included-file-row{
  display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim);
  padding:4px 0; border-bottom:1px dashed var(--border);
}
.included-file-row:last-child{border-bottom:none;}
.pack-track-count{color:var(--text-dim); font-weight:400; font-size:12px;}
.pack-track-row{display:flex; align-items:center; gap:10px; cursor:default;}
.pack-track-row span:first-of-type{flex:1; color:var(--text); font-size:13px;}
.play-btn-small{width:26px; height:26px; font-size:10px; flex-shrink:0;}
.download-demo-btn{
  display:block; margin:0 auto 30px; background:none; border:1px solid var(--border); color:var(--text-dim);
  padding:10px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
}
.download-demo-btn:hover{border-color:var(--accent); color:var(--accent);}
.wave-scrubber.big{height:90px; width:auto; margin:0 40px; padding:0 4px;}
.pack-wave-labels{display:flex; gap:4px; margin:6px 40px 40px; padding:0 4px;}
.pack-wave-labels span{font-size:11px; color:var(--text-dim); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.detail-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:0 40px 40px; font-size:13px;}
.detail-grid div{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px; min-width:0; overflow-wrap:break-word;}
.detail-grid div span{display:block; color:var(--text-dim); font-size:11px; text-transform:uppercase; margin-bottom:4px;}
.detail-grid div b a{color:inherit; text-decoration:none;}
.detail-grid div b a:hover{color:var(--accent);}
.license-tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; max-width:820px; margin:0 auto 50px;}
.tier{border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center; min-width:0; overflow-wrap:break-word;}
.tier.featured{border-color:var(--accent); background:var(--accent-dim);}
.tier .price{font-size:28px; font-weight:800; margin:8px 0;}
.tier .tier-desc{font-size:12px; color:var(--text-dim); margin-bottom:14px;}
.tier button{width:100%; background:var(--accent); color:#fff; border:none; padding:11px; border-radius:8px; font-weight:600; cursor:pointer;}

/* Hover tooltip on license tier names in the price block — shows the
   full license description on :hover / :focus without any JS beyond
   setting the translated data-tooltip attribute. */
.tier > [data-tooltip]{cursor:help; border-bottom:1px dashed var(--text-dim); display:inline-block;}
[data-tooltip]{position:relative;}
[data-tooltip]::after{
  content:attr(data-tooltip);
  position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(4px);
  width:260px; max-width:80vw; background:var(--bg-alt); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px; font-size:12px; font-weight:400; line-height:1.5; text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.35); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease; z-index:60;
}
[data-tooltip]::before{
  content:""; position:absolute; left:50%; bottom:100%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--border);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease; z-index:61;
}
[data-tooltip]:hover::after, [data-tooltip]:focus::after{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);}
[data-tooltip]:hover::before, [data-tooltip]:focus::before{opacity:1; visibility:visible;}
@media (max-width: 640px){
  [data-tooltip]::after{width:210px;}
}
/* WAVEFORM SCRUBBER (shared: bottom player + track detail page) */
.wave-scrubber{
  position:relative; height:40px; cursor:pointer; width:100%; max-width:100%; overflow:hidden;
}
.wave-scrubber canvas{ width:100%; height:100%; display:block; }

/* STICKY BOTTOM PLAYER */
.player-bar{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--bg-alt); border-top:1px solid var(--border);
  display:none; flex-direction:column; gap:6px; padding:10px 24px 14px; z-index:200;
}
.player-bar.open{display:flex;}
.player-bar .wave-scrubber{height:34px; min-width:0;}
.player-controls{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; row-gap:10px;}
.player-controls-left{display:flex; align-items:center; gap:10px; min-width:0; flex-shrink:0;}
.player-controls-right{display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; flex-shrink:0;}
.player-nav{
  width:30px; height:30px; border-radius:50%; background:none; border:1px solid var(--border); color:var(--text-dim);
  font-size:11px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.player-nav:hover{color:var(--text); border-color:#4a4d57;}
.player-play{
  width:44px; height:44px; border-radius:50%; background:var(--accent); border:none; color:#fff; font-size:16px; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.player-track-text{cursor:pointer; min-width:0;}
.player-track-text:hover .player-track-title{text-decoration:underline;}
.player-track-title{font-weight:700; font-size:14px;}
.player-track-sub{font-size:11px; color:var(--text-dim);}
.player-time-wrap{font-size:12px; color:var(--text-dim); white-space:nowrap; display:flex; align-items:center; gap:10px;}
.player-bpm{border-left:1px solid var(--border); padding-left:10px;}
.player-dl-btn, .player-similar-btn{
  background:none; border:1px solid var(--border); color:var(--text-dim); padding:9px 14px; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.player-dl-btn:hover, .player-similar-btn:hover{color:var(--text); border-color:#4a4d57;}
.player-buy-btn{
  background:var(--accent); border:none; color:#fff; padding:10px 26px; border-radius:8px;
  font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.player-close{background:none; border:none; color:var(--text-dim); font-size:20px; cursor:pointer; padding:8px;}

@media (max-width: 900px){
  .player-controls{grid-template-columns:1fr; justify-items:center;}
  .player-controls-left{width:100%;}
  .player-bar .wave-scrubber{width:100%;}
  .player-controls-right{width:100%; justify-content:center;}
}

/* MODAL - buy license */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(6,6,8,0.75); z-index:300;
  align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{background:var(--bg-alt); border:1px solid var(--border); border-radius:16px; max-width:720px; width:100%; padding:30px; position:relative;}
.modal-close{position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text-dim); font-size:22px; cursor:pointer;}
.modal h3{font-size:18px; margin-bottom:4px;}
.modal .m-sub{color:var(--text-dim); font-size:12px; margin-bottom:20px;}
.modal .license-tiers{grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 0 6px; max-width:none;}
.modal .tier{padding:16px 14px; min-width:0; overflow-wrap:break-word;}
.modal .tier .price{font-size:22px; margin:6px 0;}
.modal .tier .tier-desc{font-size:11px;}
.modal .tier button{width:100%; padding:9px 12px; margin-top:6px;}

@media (max-width: 640px){
  .modal .license-tiers{grid-template-columns:1fr;}
}

/* PLACEHOLDER SECTIONS (Packs / Logos) */
.placeholder-note{color:var(--text-dim); font-size:14px; padding:30px 0;}

/* CART */
.cart-modal-box{max-width:460px;}
.cart-items{max-height:320px; overflow-y:auto; margin-bottom:16px;}
.cart-empty{color:var(--text-dim); font-size:13px; text-align:center; padding:20px 0;}
.cart-item{
  display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border);
}
.cart-item-info{flex:1; min-width:0;}
.cart-item-title{font-weight:700; font-size:14px;}
.cart-item-tier{font-size:12px; color:var(--text-dim);}
.cart-item-price{font-size:14px; font-weight:700; white-space:nowrap;}
.cart-item-remove{background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; padding:0 4px;}
.cart-item-remove:hover{color:var(--text);}
.cart-totals{border-top:1px solid var(--border); padding-top:12px; margin-bottom:16px;}
.cart-row{display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim); padding:4px 0;}
.cart-row-total{font-size:16px; font-weight:800; color:var(--text); padding-top:8px;}
.cart-checkout-btn{
  width:100%; background:var(--accent); color:#fff; border:none; padding:13px; border-radius:8px;
  font-weight:700; font-size:14px; cursor:pointer;
}
.cart-checkout-btn:disabled{opacity:0.4; cursor:not-allowed;}

@media (max-width: 800px){
  .track-row{grid-template-columns:44px 1fr; grid-template-areas:"play main" "tags tags" "wave wave" "dur license";}
  .track-thumb{display:none;}
  .play-btn{grid-area:play;}
  .track-main{grid-area:main; min-width:0;}
  .tags{grid-area:tags;}
  .waveform{grid-area:wave;}
  .duration{grid-area:dur; text-align:left;}
  .license-btn{grid-area:license; justify-self:end;}
  .detail-grid{grid-template-columns:1fr 1fr;}
  .license-tiers{grid-template-columns:1fr;}
  .player-track-info{min-width:120px;}
}

/* Page H1 used by License/Offer/Contact/Genre-Mood pages — was inline
   font-size before, moved to a class so the mobile breakpoint below can
   actually shrink it (inline styles can't be overridden by a plain media
   query rule). */
.page-h1{font-size:28px; margin:0;}
.page-h1-alt{font-size:26px; margin:0;}
/* Packs/Logos titles reuse the hero <h1> size/weight from the Music
   homepage (.hero h1) so they read as the same "big page title" instead
   of the smaller License/Offer/Contact style. */
.page-h1-hero{font-size:42px; font-weight:800;}

/* =====================================================================
   MOBILE / TABLET — everything below is additive and only activates
   under these max-widths, so the desktop layout above is untouched.
   Two breakpoints: ~900px (tablet — hamburger nav kicks in here since a
   6-item nav plus lang switch and cart no longer fits comfortably) and
   ~600px (phone — tighter spacing, stacked layouts, full-screen filter
   panel).
   ===================================================================== */

/* --- Hamburger nav button: hidden on desktop, shown from 900px down --- */
.nav-burger{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:36px; height:36px; background:none; border:1px solid var(--border); border-radius:8px;
  cursor:pointer; flex-shrink:0; padding:0;
}
.nav-burger span{display:block; width:16px; height:2px; background:var(--text-dim); transition:transform .2s ease, opacity .2s ease;}
.nav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-burger.open span:nth-child(2){opacity:0;}
.nav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width: 900px){
  header{padding:14px 20px;}
  .nav-burger{display:flex;}
  #main-nav{
    display:none; width:100%; flex-basis:100%; order:5;
    flex-direction:column; align-items:stretch; gap:0;
    margin-top:14px; border-top:1px solid var(--border);
  }
  #main-nav.open{display:flex;}
  #main-nav a, #main-nav .nav-filter-link{
    padding:14px 4px; border-bottom:1px solid var(--border); font-size:15px;
    width:100%; text-align:left; /* buttons center-align text by default, unlike <a> — force both to match */
  }
  .header-right{gap:12px;}
  .filter-panel{width:min(300px, 84vw);}
}

@media (max-width: 600px){
  header{padding:12px 16px;}
  .logo{font-size:19px;}

  /* Hero */
  .hero{padding:32px 18px 26px;}
  .hero h1{font-size:25px;}
  .hero p{font-size:14px;}
  .promo-banner{font-size:12px; padding:7px 14px;}
  .search-bar{padding:5px;}
  .search-bar input{padding:10px 10px; font-size:14px;}
  .search-bar button{padding:0 14px; font-size:13px;}
  .chips{gap:8px; margin-top:16px;}
  .chip{font-size:12px; padding:6px 12px;}

  /* Sections / catalog controls */
  .section{padding:28px 16px;}
  .section-head{flex-wrap:wrap; gap:10px;}
  .section-head h2{font-size:19px;}
  .page-h1{font-size:21px;}
  .page-h1-alt{font-size:20px;}
  .page-h1-hero{font-size:25px;}
  .catalog-controls{flex-wrap:wrap; gap:10px;}
  .breadcrumb{padding:14px 16px 0; font-size:12px;}
  .logos-lead{font-size:19px;}

  /* Filter panel: on a phone a 300px sidebar squeezes the catalog into an
     unusable sliver, so it becomes a fixed full-width overlay instead of
     pushing the flex layout — and, unlike desktop, starts closed and is
     only shown via the filter-fab toggle (with its own close button). */
  .filter-panel{position:fixed; z-index:150; top:var(--header-h, 56px); left:0; height:calc(100vh - var(--header-h, 56px) - var(--player-h, 0px)); width:0; border-right-color:transparent;}
  .filter-panel.open{width:100vw; border-right-color:var(--border);}
  .filter-panel-head{display:flex;}
  /* On phones (<=600px) .section padding drops to 16px, smaller than the
     button itself, so a fully clear, centered gap isn't physically possible
     here — flush the button to the edge (0px) to minimize the overlap, and
     match the top offset to the same 0px for consistency with the desktop rule. */
  .filter-fab{width:34px; height:34px; left:0; top:calc(var(--header-h, 56px) + 0px);}

  /* Taxonomy (genres/moods) grid */
  .taxonomy-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px;}
  .taxonomy-card{padding:14px;}

  /* Track list rows */
  .track-row{padding:10px 12px; gap:10px;}
  .play-btn{width:36px; height:36px;}
  .track-main .t-title{font-size:14px;}
  .license-btn{padding:8px 12px; font-size:12px;}

  /* Track detail page */
  .track-hero{padding:26px 16px; gap:18px;}
  .track-hero-play{width:68px; height:68px; font-size:22px;}
  .track-hero-info h1{font-size:22px;}
  .track-desc{margin:0 16px 16px; font-size:14px;}
  .tag-chips-row{margin:0 16px 22px;}
  .wave-scrubber.big{margin:0 16px; height:64px;}
  .pack-wave-labels{margin:6px 16px 26px;}
  .pack-wave-labels span{font-size:10px;}
  .detail-grid{margin:0 16px 26px; gap:10px;}
  .included-files{width:calc(100% - 32px); padding:14px 16px; margin:0 auto 24px;}
  .license-tiers{gap:12px;}
  .tier{padding:16px;}

  /* Contact / License / Offer cards */
  .contact-card{padding:20px 18px; width:100%;}
  .license-detail-card{padding:18px 16px;}

  /* Reviews page */
  .review-grid{grid-template-columns:1fr; gap:12px;}
  .review-card{padding:16px 16px;}
  .review-compact-row{flex-wrap:wrap; gap:6px 10px;}
  .review-compact-meta{white-space:normal;}
  .star-picker label{font-size:26px;}

  /* Player bar */
  .player-bar{padding:8px 14px 12px;}
  .player-track-title{font-size:13px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .player-track-sub{max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .player-dl-btn, .player-similar-btn{padding:7px 10px; font-size:12px;}
  .player-buy-btn{padding:8px 18px; font-size:12px;}
  .player-bpm{display:none;} /* least essential info point, first to go on a tight bar */

  /* Modals (buy license / cart) */
  .modal-overlay{padding:10px;}
  .modal{padding:20px 16px; border-radius:12px;}
  .modal h3{font-size:16px;}
  .modal .tier{padding:14px 10px;}

  /* Footer */
  footer{padding:24px 16px; flex-direction:column; align-items:flex-start; gap:12px;}
  .footer-bottom-row{flex-direction:column; align-items:flex-start; gap:12px;}
}

@media (max-width: 420px){
  .detail-grid{grid-template-columns:1fr 1fr;}
  .track-row{grid-template-columns:40px 1fr;}
}