/*
Theme Name: EBL Audio Entertainment
Theme URI: https://everythingbrotherlylove.com/
Author: Premium Web Agency
Author URI: https://everythingbrotherlylove.com/
Description: A bold WooCommerce theme for music-and-merch brands. Built for Everything Brotherly Love Audio Entertainment LLC, it pairs a full WooCommerce storefront with a built-in music player, testimonial slider and appointment scheduler. The front page and the About, Products, Music and Contact page templates are assembled from Customizer-controlled sections, and every band is also an Elementor widget.
Version: 1.3.2
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ebl-audio
Tags: e-commerce, one-column, two-columns, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, blog, full-width-template, template-editing, translation-ready
WC requires at least: 7.0
WC tested up to: 9.4

EBL Audio Entertainment is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================
   0. Tokens
   ========================================================= */
:root {
  --red: #d00000;
  --red-dark: #b70000;
  --black: #111111;
  --text: #1a1a1a;
  --muted: #7a7a7a;
  --light: #f7f7f7;
  --line: #e2e2e2;
  --gold: #f5b400;
  --radius: 8px;
  --gutter: 30px;          /* outer page margin around boxed sections */
  --inner: 110px;          /* inner content padding inside boxed sections */
  --font: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }

body {
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.ebl-no-scroll { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* WP >= 6.1 prints `:root :where(a:where(:not(.wp-element-button)))
   { text-decoration: underline }` from core's theme.json, which outranks the
   bare `a` rule above and underlines every link. Match its shape with one more
   element to win on specificity, not on source order. Rules that *want* an
   underline (.footer__bottom a, .entry-content a) are equally specific and
   come later, so they still apply. */
:root a:where(:not(.wp-element-button)) { text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* Author styles such as `.drawer { display: flex }` outrank the UA rule for
   [hidden], so state it explicitly: the panels below rely on it. */
[hidden] { display: none !important; }

/* =========================================================
   1. WordPress core classes
   ========================================================= */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
  clip: auto !important;
  clip-path: none;
  color: var(--red);
  display: block;
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 20px; top: 20px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  width: auto;
  z-index: 100000;
}

.alignleft { float: left; margin: 6px 30px 20px 0; }
.alignright { float: right; margin: 6px 0 20px 30px; }
.aligncenter { clear: both; display: block; margin: 20px auto; }
.alignwide { max-width: none; }
.alignfull { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; }

.wp-caption { max-width: 100%; margin-bottom: 24px; }
.wp-caption-text,
.wp-block-image figcaption { color: var(--muted); font-size: 14px; padding: 10px 0; text-align: center; }
.sticky { position: relative; }
.bypostauthor { display: block; }
.gallery-caption { display: block; }
embed, iframe, object, video { max-width: 100%; }

/* =========================================================
   2. Shared elements
   ========================================================= */
.box {
  margin-left: var(--gutter);
  margin-right: var(--gutter);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}

.title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin-bottom: 18px;
}

.muted { color: var(--muted); font-size: 15px; line-height: 1.75; }
.center { text-align: center; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 42px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  transition: background .25s, color .25s, transform .25s, box-shadow .25s;
}
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(208, 0, 0, .3); }
.btn--outline { border: 1.5px solid var(--red); color: var(--red); min-width: 180px; }
.btn--outline:hover { background: var(--red); color: #fff; }
.btn--dark { background: var(--black); color: #fff; }
.btn--dark:hover { background: var(--red); color: #fff; }
.btn--wide { min-width: 262px; }
.btn--block { width: 100%; }

/* =========================================================
   3. Header
   ========================================================= */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #fff;
  transition: box-shadow .3s;
}
.header.is-scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, .06); }

/*
 * The bar is out of the flow so that shrinking it on scroll cannot reflow the
 * page; this spacer (printed by header.php, so an Elementor header never gets
 * one) holds the space it used to occupy.
 */
.header-spacer { height: 131px; }

/* Clear the admin bar, which is fixed above us. Under 600px WordPress scrolls
   it away with the page, so no offset is needed there. */
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .header { top: 0; }
}

.header__inner {
  height: 131px;
  padding: 26px 156px 0 95px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  transition: height .3s, padding .3s;
}
.header.is-scrolled .header__inner { height: 84px; padding-top: 0; }

.logo {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--black);
  line-height: 1;
}
.logo em { font-style: italic; font-weight: 600; }
.logo--light { color: #fff; }
.logo--long { font-size: 20px; line-height: 1.12; max-width: 270px; display: inline-block; letter-spacing: -0.2px; }
.footer .logo--long { max-width: 420px; text-align: center; }
.logo--img { line-height: 0; }
.logo--img img { max-height: 62px; width: auto; height: auto; transition: max-height .3s; }
.header.is-scrolled .logo--img img { max-height: 52px; }
/* The footer runs on brand red and uses its own artwork, so no filter here. */
.footer .logo--img img { max-height: 78px; }

.nav__list { display: flex; gap: 36px; margin-top: -10px; }
.nav__list li { position: relative; }
.nav__link,
.nav__list a {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
  padding: 6px 0;
}
.nav__link::after,
.nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s;
}
.nav__link:hover::after,
.nav__link.is-active::after,
.nav__list > li > a:hover::after,
.nav__list > li.current-menu-item > a::after,
.nav__list > li.current_page_item > a::after,
.nav__list > li.current-menu-ancestor > a::after { transform: scaleX(1); transform-origin: left; }
.nav__link:hover,
.nav__list a:hover { color: var(--red); }

/* Dropdowns */
.nav__list .sub-menu {
  position: absolute;
  left: 0; top: 100%;
  min-width: 220px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .25s;
  z-index: 20;
}
.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav__list .sub-menu a { display: block; padding: 9px 22px; font-size: 15px; }
.nav__list .sub-menu a::after { display: none; }
.nav__list .sub-menu .sub-menu { left: 100%; top: 0; }

.header__actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; }
.icon-btn { position: relative; display: grid; place-items: center; width: 24px; height: 24px; color: var(--black); transition: color .2s; }
.icon-btn:hover { color: var(--red); }
.icon-btn__count {
  position: absolute;
  top: -8px; right: -10px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
  transform: scale(0);
  transition: transform .25s;
}
.icon-btn__count.is-visible { transform: scale(1); }
.icon-btn.bump { animation: bump .4s; }
@keyframes bump { 50% { transform: scale(1.3); } }

.burger { display: none; width: 28px; height: 22px; position: relative; margin-left: 8px; }
.burger span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--black); border-radius: 2px; transition: .3s;
}
.burger span:nth-child(1) { top: 2px; }
.burger span:nth-child(2) { top: 10px; }
.burger span:nth-child(3) { top: 18px; }
.burger.is-open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* =========================================================
   4. Drawers (cart + wishlist) and overlay
   ========================================================= */
.ebl-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s;
  z-index: 150;
}
.ebl-overlay.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(420px, 92vw);
  height: 100%;
  background: #fff;
  z-index: 160;
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform .4s cubic-bezier(.3, .9, .3, 1);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .18);
}
.drawer.is-open { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 26px;
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 { font-size: 20px; font-weight: 500; letter-spacing: .4px; }
.drawer__close { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; transition: .2s; }
.drawer__close:hover { background: var(--light); color: var(--red); }
.drawer__body { flex: 1; overflow-y: auto; padding: 22px 26px 30px; }
.drawer__empty { color: var(--muted); font-size: 15px; text-align: center; padding: 50px 10px; }
.drawer__empty .btn { margin-top: 22px; }
.drawer__loading { text-align: center; color: var(--muted); padding: 40px 0; font-size: 14px; }

/* Wishlist rows */
.wish-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.wish-item img { width: 72px; height: 90px; object-fit: cover; border-radius: 4px; background: var(--light); }
.wish-item__name { font-size: 16px; font-weight: 500; line-height: 1.3; margin-bottom: 4px; }
.wish-item__name a:hover { color: var(--red); }
.wish-item__price { font-size: 14px; color: var(--muted); }
.wish-item__price ins { text-decoration: none; }
.wish-item__remove { color: var(--muted); font-size: 22px; line-height: 1; padding: 4px 6px; transition: color .2s; }
.wish-item__remove:hover { color: var(--red); }
.wish-item .button {
  margin-top: 8px; display: inline-flex; height: 34px; align-items: center;
  padding: 0 16px; border-radius: 4px; background: var(--black); color: #fff;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
}
.wish-item .button:hover { background: var(--red); }

/* =========================================================
   5. Quick view modal
   ========================================================= */
.quickview {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -46%) scale(.97);
  width: min(900px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius);
  z-index: 170;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, transform .3s;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .3);
}
.quickview.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }
.quickview__close {
  position: absolute; right: 14px; top: 14px; z-index: 3;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  transition: .2s;
}
.quickview__close:hover { background: var(--red); color: #fff; }
.quickview__body { display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; }
.quickview__media { background: var(--light); }
.quickview__media img { width: 100%; height: 100%; object-fit: cover; }
.quickview__info { padding: 44px 40px; }
.quickview__info h2 { font-size: 30px; font-weight: 500; line-height: 1.2; margin-bottom: 10px; }
.quickview__price { font-size: 22px; margin-bottom: 14px; }
.quickview__price del { color: var(--muted); font-size: 17px; margin-right: 8px; }
.quickview__price ins { text-decoration: none; color: var(--red); }
.quickview__excerpt { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 24px; }
.quickview__link { display: inline-block; margin-top: 18px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* =========================================================
   6. Hero
   ========================================================= */
.hero {
  height: clamp(560px, 42.6vw, 817px);
  background: #caa47f;
  display: flex;
  align-items: center;
}
.hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scale(1.02);
  animation: heroZoom 8s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }

.hero__content { position: relative; z-index: 1; padding-left: var(--inner); max-width: 680px; }
.hero__title {
  font-size: 62px;
  font-weight: 500;
  line-height: 1.26;
  color: #fff;
  margin-bottom: 42px;
}
.hero__text { color: #fff; font-size: 16px; line-height: 1.65; margin-bottom: 52px; max-width: 545px; }

/* =========================================================
   7. About
   ========================================================= */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 50px var(--gutter) 30px;
}
.about__main { margin: 0; aspect-ratio: 1 / 1; }
.about__main img,
.about__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.about .box:hover img { transform: scale(1.04); }

.about__side { display: flex; flex-direction: column; justify-content: space-between; }
.about__text { padding: 88px 0 0 99px; max-width: 590px; }
.about__text .title { font-size: 36px; margin-bottom: 22px; }
.about__text .muted { max-width: 450px; }

.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.about__grid .box { margin: 0; aspect-ratio: 1 / 1; }

/* =========================================================
   8. Promo banners
   ========================================================= */
.banner {
  height: clamp(520px, 56.25vw, 1080px);
  background: #f3f3f3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.banner__bg,
.banner__model {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.banner__bigtext {
  position: absolute;
  left: 0; right: 0;
  bottom: 3.5%;
  text-align: center;
  font-size: clamp(56px, 8.1vw, 156px);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: rgba(0, 0, 0, .06);
  pointer-events: none;
}
.banner--holiday .banner__bigtext { font-size: clamp(60px, 9.4vw, 180px); bottom: 4%; }
.banner__model { z-index: 1; }
.banner__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: clamp(36px, 5.5vw, 60px);
}
.banner__title {
  font-size: clamp(32px, 3vw, 58px);
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 70px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.banner--holiday .banner__title { margin-bottom: 64px; }

/* =========================================================
   9. Product cards + grid (shared by front page and shop)
   ========================================================= */
.products-section { padding: 120px 140px 60px; }
.section-head { text-align: center; margin-bottom: 50px; }
.section-head .title { font-size: 36px; margin-bottom: 10px; }

/* The column count travels as a custom property rather than as a
   grid-template-columns declaration per modifier. `ul.product-grid` has to stay
   in the base selector to outrank WooCommerce's own `ul.products` margins, and
   it would otherwise also outrank every `.product-grid--n` modifier and every
   responsive override below — media queries add no specificity — pinning each
   `<ul>` grid at five columns on phones. Each modifier carries the `ul.` form
   too so it ties with the base rule and wins on source order. */
ul.product-grid,
.product-grid {
  --cols: 5;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 48px 30px;
  margin: 0 0 140px;
  padding: 0;
  list-style: none;
}
.product-grid::before,
.product-grid::after { content: none; display: none; }
.shop-main .product-grid { margin-bottom: 70px; }
ul.product-grid--2, .product-grid--2 { --cols: 2; }
ul.product-grid--3, .product-grid--3 { --cols: 3; }
ul.product-grid--4, .product-grid--4 { --cols: 4; }
ul.product-grid--5, .product-grid--5 { --cols: 5; }

.card { position: relative; list-style: none; }
.card__media {
  position: relative;
  aspect-ratio: 304 / 403;
  background: var(--light);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 22px;
}
.card__media > a { display: block; width: 100%; height: 100%; }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.card:hover .card__media img { transform: scale(1.06); }

.card__badges { position: absolute; top: 20px; left: 20px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.badge,
.card__media .onsale {
  display: inline-block;
  background: #000;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 3px;
  line-height: 18px;
  width: max-content;
  position: static;
  margin: 0;
  min-height: 0;
  min-width: 0;
}
.badge--sale { background: var(--red); }
.badge--out { background: #555; }

.card__actions {
  position: absolute;
  right: 16px; top: 16px;
  z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0;
  transform: translateX(14px);
  transition: .3s;
}
.card:hover .card__actions,
.card:focus-within .card__actions { opacity: 1; transform: none; }
.card__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  transition: background .2s, color .2s;
}
.card__icon:hover { background: var(--red); color: #fff; }
.card__icon.is-on { background: var(--red); color: #fff; }
.card__icon.is-on svg { fill: currentColor; }
.card__icon.is-busy { opacity: .6; pointer-events: none; }

.card__cart { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; }
.card__cart .button,
.card__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  border-radius: 6px;
  background: var(--black);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(14px);
  transition: .3s;
}
.card__cart .button:hover,
.card__add:hover { background: var(--red); color: #fff; }
.card:hover .card__cart .button,
.card:focus-within .card__cart .button,
.card:hover .card__add,
.card:focus-within .card__add { opacity: 1; transform: none; }
.card__cart .button.loading { opacity: 1; transform: none; position: relative; color: transparent; }
.card__cart .button.loading::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.card__cart .added { display: none; }
.card__cart .added_to_cart {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-decoration: underline;
}

/* Without hover there is nothing to reveal on, so show the controls outright. */
@media (hover: none) {
  .card__actions { opacity: 1; transform: none; }
  .card__cart .button,
  .card__add { opacity: 1; transform: none; }
}

.card__name { font-size: 20px; font-weight: 500; line-height: 1.3; margin-bottom: 8px; }
.card__name a:hover { color: var(--red); }
.card__price { font-size: 15px; letter-spacing: .3px; margin-bottom: 6px; }
.card__price del { color: var(--muted); margin-right: 7px; }
.card__price ins { text-decoration: none; }
.stars { display: flex; gap: 4px; }
.stars svg { width: 16px; height: 16px; }

/* =========================================================
   10. Testimonials
   ========================================================= */
.testimonials {
  background: var(--light);
  margin-top: 30px;
  padding: 72px 20px 120px;
  text-align: center;
}
.testimonials__quote-mark {
  position: absolute;
  top: 78px; left: 50%;
  transform: translateX(-50%);
  color: #ebebeb;
}
.testimonials__stars {
  position: relative;
  color: var(--gold);
  font-size: 20px;
  letter-spacing: 2px;
  margin: 28px 0 26px;
  line-height: 1;
}
.testimonials__track { position: relative; max-width: 1110px; margin: 0 auto; display: grid; }
.testi {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s, transform .6s;
  pointer-events: none;
}
.testi.is-active { opacity: 1; transform: none; pointer-events: auto; }
.testi blockquote {
  font-size: 24px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.66;
  margin-bottom: 36px;
  border: 0;
  padding: 0;
}
.testi figcaption { font-size: 15px; letter-spacing: .5px; }
.testi figcaption strong { font-size: 20px; font-weight: 600; letter-spacing: 0; }

.testimonials__dots { position: absolute; left: 0; right: 0; bottom: 46px; display: flex; justify-content: center; gap: 10px; }
.testimonials__dots button {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #d5d5d5;
  transition: .3s;
}
.testimonials__dots button.is-active { background: var(--red); width: 26px; border-radius: 6px; }

/* =========================================================
   11. Music player
   ========================================================= */
.music {
  background: var(--black);
  color: #fff;
  margin-top: 12px;
  min-height: 580px;
  display: grid;
  grid-template-columns: 1fr 830px;
  gap: 40px;
  padding: 0 70px 87px var(--inner);
}
.music__intro { position: relative; z-index: 1; padding-top: 70px; }
.music__title { font-size: 64px; font-weight: 500; line-height: 1.22; margin-bottom: 36px; }
.music__intro p { color: #b5b5b5; font-size: 16px; max-width: 395px; line-height: 1.65; }

.vinyl {
  position: absolute;
  left: -230px; bottom: -400px;
  width: 760px; height: 760px;
  pointer-events: none;
}
.vinyl__ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid #262626;
  margin: auto;
}
.vinyl__ring.r1 { width: 100%; height: 100%; background: #151515; }
.vinyl__ring.r2 { width: 79%; height: 79%; background: #181818; }
.vinyl__ring.r3 { width: 58%; height: 58%; background: #1c1c1c; }
.vinyl__disc {
  position: absolute;
  left: 280px; top: 180px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--red);
  display: grid; place-items: center;
  animation: spin 6s linear infinite;
  animation-play-state: paused;
}
.vinyl__disc::before {
  content: "";
  position: absolute; inset: 22px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 0, 0, .15);
}
.vinyl__disc span { width: 60px; height: 60px; border-radius: 50%; background: var(--black); }
.music.is-playing .vinyl__disc { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

.music__list { padding-top: 30px; position: relative; z-index: 1; }
.music__list .eyebrow { margin: 0 0 16px 20px; }

.track {
  display: grid;
  position: relative;
  grid-template-columns: 64px 1fr auto 44px auto auto;
  align-items: center;
  height: 115px;
  padding: 0 20px;
  background: #1e1e1e;
  border-bottom: 1px solid #262626;
  transition: background .3s;
}
.track:nth-child(even) { background: #161616; }
.track:hover { background: #232323; }
.track.is-playing { background: #262020; }

.track__cover { width: 64px; height: 64px; border-radius: 4px; object-fit: cover; background: #222; }
.track__info { padding-left: 16px; min-width: 0; }
.track__title { font-size: 20px; font-weight: 500; line-height: 1.3; margin-bottom: 3px; }
.track__artist { color: var(--red); font-size: 14px; display: block; line-height: 1.7; }
.track__genre { color: #cfcfcf; font-size: 14px; line-height: 1.7; }

.wave { display: flex; align-items: center; gap: 3px; height: 26px; }
.wave i {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: #4a4a4a;
  height: 40%;
}
.wave i:nth-child(1) { height: 35%; } .wave i:nth-child(2) { height: 65%; }
.wave i:nth-child(3) { height: 80%; } .wave i:nth-child(4) { height: 45%; }
.wave i:nth-child(5) { height: 100%; } .wave i:nth-child(6) { height: 55%; }
.wave i:nth-child(7) { height: 85%; } .wave i:nth-child(8) { height: 40%; }
.wave--red i { background: var(--red); }
.track.is-playing .wave i { animation: eq .9s ease-in-out infinite alternate; }
.track.is-playing .wave--grey i { background: #8a8a8a; }
.wave i:nth-child(2n) { animation-delay: -.3s !important; }
.wave i:nth-child(3n) { animation-delay: -.6s !important; }
.wave i:nth-child(5n) { animation-delay: -.15s !important; }
@keyframes eq { 0% { transform: scaleY(.35); } 100% { transform: scaleY(1); } }

.track__wave-l { justify-self: end; margin-right: 80px; }
.track__play {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--red);
  display: grid; place-items: center;
  color: #fff;
  transition: transform .2s, background .2s;
  justify-self: center;
}
.track__play:hover { transform: scale(1.1); background: var(--red-dark); }
.track__play .i-pause { display: none; }
.track.is-playing .track__play .i-play { display: none; }
.track.is-playing .track__play .i-pause { display: block; }
.track__wave-r { margin-left: 80px; margin-right: 80px; }

.track__dl {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px;
  padding: 0 17px;
  border-radius: 20px;
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  justify-self: end;
  transition: background .2s, transform .2s;
}
.track__dl:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); }

.track__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #2b2b2b;
  border-radius: 2px;
  overflow: hidden;
  display: none;
}
.track.is-playing .track__progress { display: block; }
.track__progress span { display: block; height: 100%; width: 0; background: var(--red); }

/* =========================================================
   12. Contact / scheduler
   ========================================================= */
.contact {
  background: var(--light);
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 50px 60px 30px 30px;
}
.contact__col { min-width: 0; }
.contact .title { font-size: 34px; margin-bottom: 14px; }
.contact .muted { margin-bottom: 34px; }

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field { display: block; margin-bottom: 26px; }
.field > span { display: block; font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { height: 120px; padding: 15px; resize: vertical; }
.field--msg { padding-right: 28px; }
.field input::placeholder,
.field textarea::placeholder { color: #8a8a8a; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(208, 0, 0, .1); }
.field .is-invalid,
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid { border-color: var(--red); }

.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; cursor: pointer; color: #555; }
.select::after {
  content: "";
  position: absolute;
  right: 24px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid #111; border-bottom: 2px solid #111;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.form__status { margin-top: 14px; font-size: 14px; min-height: 22px; }
.form__status.is-error { color: var(--red); }
.form__status.is-success { color: #1d8a4a; }
.btn.is-busy { opacity: .7; pointer-events: none; }

.calendar__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.calendar__head h3 { font-size: 22px; font-weight: 500; }
.calendar__nav { display: flex; gap: 12px; }
.calendar__nav button {
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  display: grid; place-items: center;
  transition: .2s;
}
.calendar__nav button:hover { border-color: var(--red); color: var(--red); }
.calendar__nav button:disabled { opacity: .4; cursor: not-allowed; }

.calendar__week,
.calendar__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.calendar__week { margin-bottom: 16px; }
.calendar__week span {
  height: 40px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
}
.calendar__days { row-gap: 16px; }
.day {
  height: 72px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 15px;
  color: #666;
  transition: .2s;
}
.day:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.day.is-other { color: #b5b5b5; }
.day.is-today { border-color: #bbb; font-weight: 600; color: var(--black); }
.day.is-selected { background: var(--red); border-color: var(--red); color: #fff; }
.day:disabled { cursor: not-allowed; opacity: .45; }

.slots__title { font-size: 16px; font-weight: 500; margin: 32px 0 12px; }
.slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.slots button {
  height: 44px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 15px;
  transition: .2s;
}
.slots button:hover { border-color: var(--red); color: var(--red); }
.slots button.is-selected { background: var(--red); border-color: var(--red); color: #fff; }

/* =========================================================
   13. Footer
   ========================================================= */
.footer { background: var(--red); color: #fff; }
.footer__inner { padding: 75px 140px 32px; }
.footer .logo { display: table; margin: 0 auto 92px; }

.footer__grid {
  display: grid;
  grid-template-columns: 748px 267px 357px 1fr;
  margin-bottom: 60px;
}
.footer__news h3 { font-size: 36px; font-weight: 500; line-height: 1.2; margin: 0 0 30px; }
.footer__news p { font-size: 15px; margin-bottom: 20px; }
.newsletter { position: relative; max-width: 574px; }
.newsletter input {
  width: 100%;
  height: 65px;
  border: 0;
  border-radius: 4px;
  padding: 0 70px 0 28px;
  outline: none;
  font-size: 15px;
}
.newsletter input::placeholder { color: #a0a0a0; }
.newsletter button {
  position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%);
  color: #c9c9c9;
  transition: color .2s, transform .2s;
}
.newsletter button:hover { color: var(--red); transform: translateY(-50%) translateX(3px); }
.newsletter__msg { font-size: 14px !important; min-height: 20px; margin: 8px 0 6px !important; }

.socials { display: flex; gap: 12px; }
.socials a {
  width: 34px; height: 34px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: .2s;
}
.socials a:hover { background: #fff; color: var(--red); }

.footer__col h4,
.footer__col .widget-title { font-size: 20px; font-weight: 500; margin: 0 0 34px; }
.footer__col li { margin-bottom: 14px; font-size: 15px; }
.footer__col a { position: relative; transition: opacity .2s; }
.footer__col a:hover { opacity: .75; }
.footer__col .sub-menu { display: block; position: static; box-shadow: none; background: none; padding: 10px 0 0 14px; opacity: 1; visibility: visible; transform: none; }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .45); padding: 18px 10px 0; font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; }
/* With only one line left in the bar there is nothing to space apart. */
.footer__bottom--single { justify-content: center; text-align: center; }
.footer__bottom a { text-decoration: underline; }
.footer__bottom a:hover { opacity: .8; }

/* =========================================================
   14. Toast
   ========================================================= */
.toast {
  position: fixed;
  left: 50%; bottom: 30px;
  z-index: 200;
  transform: translate(-50%, 160px);
  background: var(--black);
  color: #fff;
  padding: 14px 26px;
  border-radius: 6px;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: transform .4s cubic-bezier(.2, .9, .3, 1.3);
  max-width: calc(100% - 32px);
}
.toast.is-visible { transform: translate(-50%, 0); }

/* =========================================================
   15. Reveal on scroll
   ========================================================= */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   16. Interior pages: page header, content, blog, comments
   ========================================================= */
.page-hero {
  position: relative;
  height: clamp(320px, 26vw, 460px);
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  text-align: left;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.04);
  animation: heroZoom 8s ease-out forwards;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .15) 75%);
}
.page-hero__content,
.page-hero__inner { position: relative; z-index: 2; padding-left: var(--inner); max-width: 760px; }
.page-hero__title { font-size: clamp(40px, 4vw, 66px); font-weight: 500; line-height: 1.15; margin-bottom: 18px; }
.page-hero__text,
.page-hero__subtitle { color: rgba(255, 255, 255, .85); font-size: 16px; max-width: 520px; margin: 0 0 24px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.crumbs a { color: var(--text); }
.crumbs a:hover { color: var(--red); }
.crumbs .sep { opacity: .5; }

/* Inside the dark page header the trail is reversed out. */
.page-hero .crumbs,
.page-hero .crumbs a { color: rgba(255, 255, 255, .75); }
.page-hero .crumbs a:hover,
.page-hero .crumbs [aria-current] { color: #fff; }

.site-main { padding: 80px var(--inner) 100px; }
.site-main--narrow { max-width: 1240px; margin: 0 auto; }
.content-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 60px; }
.content-area.has-sidebar { grid-template-columns: minmax(0, 1fr) 330px; }
.content-area__main { min-width: 0; }
.sidebar { min-width: 0; }

.entry { margin-bottom: 70px; }
.entry__thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.entry__thumb img { width: 100%; }
.entry__title { font-size: 34px; font-weight: 500; line-height: 1.2; margin-bottom: 12px; }
.entry__title a:hover { color: var(--red); }
.entry__meta { color: var(--muted); font-size: 14px; letter-spacing: .4px; margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.entry__meta a:hover { color: var(--red); }
.entry__more { display: inline-block; margin-top: 8px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); border-bottom: 1px solid currentColor; }

.entry-content > * { margin-bottom: 24px; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 { font-weight: 500; line-height: 1.25; margin: 42px 0 16px; }
.entry-content h1 { font-size: 38px; }
.entry-content h2 { font-size: 32px; }
.entry-content h3 { font-size: 26px; }
.entry-content h4 { font-size: 21px; }
.entry-content p { line-height: 1.8; }
.entry-content a { color: var(--red); text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: 24px; }
.entry-content ul li { list-style: disc; margin-bottom: 8px; }
.entry-content ol li { list-style: decimal; margin-bottom: 8px; }
.entry-content blockquote {
  border-left: 3px solid var(--red);
  padding: 6px 0 6px 26px;
  font-size: 20px;
  font-style: italic;
  color: var(--muted);
}
.entry-content img { border-radius: var(--radius); }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 12px 14px; text-align: left; }
.entry-content code, .entry-content pre {
  background: var(--light);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}
.entry-content code { padding: 2px 6px; }
.entry-content pre { padding: 20px; overflow-x: auto; }

.entry__footer { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.entry__footer a { color: var(--text); }
.entry__footer a:hover { color: var(--red); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 50px 0; }
.post-nav a { display: block; padding: 22px 26px; background: var(--light); border-radius: var(--radius); transition: .25s; }
.post-nav a:hover { background: #efefef; }
.post-nav span { display: block; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.post-nav .next { text-align: right; }

.pagination,
.woocommerce-pagination { margin: 20px 0 0; }
.pagination .nav-links,
.woocommerce-pagination ul.page-numbers {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  border: 0; padding: 0; margin: 0;
}
.woocommerce-pagination ul.page-numbers li { border: 0; margin: 0; }
.page-numbers,
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 44px; height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 15px;
  transition: .2s;
}
.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover { background: var(--light); border-color: var(--red); color: var(--red); }
.page-numbers.current,
.woocommerce-pagination span.current { background: var(--red); border-color: var(--red); color: #fff; }

.widget { margin-bottom: 44px; }
.widget-title,
.widget h2 { font-size: 20px; font-weight: 500; margin-bottom: 20px; }
.widget ul li { margin-bottom: 11px; font-size: 15px; }
.widget ul li a:hover { color: var(--red); }
.widget select { width: 100%; height: 48px; border: 1px solid var(--line); border-radius: 4px; padding: 0 12px; }

.search-form { position: relative; max-width: 480px; }
.search-form input[type="search"] {
  width: 100%; height: 54px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 120px 0 18px;
  outline: none;
}
.search-form input[type="search"]:focus { border-color: var(--red); }
.search-form button {
  position: absolute; right: 5px; top: 5px;
  height: 44px; padding: 0 20px;
  border-radius: 4px;
  background: var(--red);
  color: #fff;
  font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
}
.search-form button:hover { background: var(--red-dark); }

.comments-area { margin-top: 70px; padding-top: 50px; border-top: 1px solid var(--line); }
.comments-title, .comment-reply-title { font-size: 26px; font-weight: 500; margin-bottom: 30px; }
.comment-list li { margin-bottom: 28px; }
.comment-list .children { padding-left: 40px; margin-top: 28px; }
.comment-body { background: var(--light); border-radius: var(--radius); padding: 24px 26px; }
.comment-author { display: flex; align-items: center; gap: 12px; font-weight: 500; margin-bottom: 6px; }
.comment-author img { border-radius: 50%; }
.comment-metadata { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.comment-content p { margin-bottom: 12px; }
.reply a { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--red); }
.comment-form p { margin-bottom: 18px; }
.comment-form label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px 15px;
  outline: none;
  background: #fff;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--red); }
.comment-form .form-submit input,
.comment-form input[type="submit"] {
  height: 52px; padding: 0 40px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 13px; font-weight: 500; letter-spacing: 2.6px; text-transform: uppercase;
  cursor: pointer;
  width: auto;
  border: 0;
}
.comment-form .form-submit input:hover { background: var(--red-dark); }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 10px; }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; font-size: 14px; }
.comment-form .comment-form-cookies-consent input { width: auto; }

.no-results { text-align: center; padding: 40px 0 10px; }
.no-results .search-form { margin: 26px auto 0; }

.error404 .page-hero { height: clamp(300px, 24vw, 420px); }
.error-404 { text-align: center; }
.error-404 .ebl-404 { font-size: clamp(90px, 16vw, 200px); font-weight: 600; line-height: 1; color: var(--light); margin-bottom: 10px; }
.error-404 .search-form { margin: 30px auto; }

/* =========================================================
   17. Responsive
   ========================================================= */
@media (max-width: 1700px) {
  .header__inner { padding-right: 110px; }
  .music { grid-template-columns: 1fr 760px; padding-right: 40px; }
  .track__wave-l { margin-right: 50px; }
  .track__wave-r { margin-left: 50px; margin-right: 50px; }
  .footer__grid { grid-template-columns: 2fr 1fr 1.3fr 1fr; gap: 30px; }
}

@media (max-width: 1440px) {
  :root { --inner: 80px; }
  .header-spacer { height: 110px; }
  .header__inner { padding: 20px 60px 0; height: 110px; }
  .hero__title { font-size: 54px; }
  .about__text { padding: 50px 0 0 50px; }
  .products-section { padding: 100px 80px 50px; }
  .product-grid { gap: 40px 24px; margin-bottom: 100px; }
  .music { grid-template-columns: 1fr; padding: 0 var(--inner) 70px; }
  .music__intro { padding-top: 70px; }
  .music__list { padding-top: 0; }
  .vinyl { bottom: auto; top: 30px; left: auto; right: -320px; }
  .footer__inner { padding: 70px 80px 30px; }
}

@media (max-width: 1200px) {
  ul.product-grid,
  .product-grid { --cols: 4; }
  .contact { grid-template-columns: 1fr; gap: 70px; padding: 50px 40px 40px; }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__news { grid-column: 1 / -1; margin-bottom: 20px; }
  .content-area.has-sidebar { grid-template-columns: minmax(0, 1fr); }
  .quickview__body { grid-template-columns: 1fr; }
  .quickview__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 991px) {
  :root { --gutter: 16px; --inner: 40px; }
  html { scroll-padding-top: 80px; }
  .header-spacer { height: 76px; }
  .header__inner { grid-template-columns: minmax(0, auto) 1fr; height: 76px; padding: 0 24px; }
  .header.is-scrolled .header__inner { height: 68px; }
  /* The header is a fixed height, so the mark has to stay on one line: a
     wrapped name used to spill out of the bar and sit on top of the page
     below it. Shrink to fit the space the action icons leave instead. The
     footer logo is left alone — it has a full-width row to itself. */
  .header .logo { font-size: 24px; }
  .header .logo--long { font-size: 17px; max-width: none; }
  .header .logo,
  .header .logo--long {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .header .logo--img { overflow: visible; }
  .logo--img img { max-height: 44px; }
  .header.is-scrolled .logo--img img { max-height: 38px; }
  .burger { display: block; }
  .nav {
    position: fixed;
    top: 0; right: 0;
    width: min(320px, 85vw);
    height: 100vh;
    overflow-y: auto;
    background: #fff;
    padding: 100px 32px 32px;
    box-shadow: -20px 0 40px rgba(0, 0, 0, .1);
    transform: translateX(105%);
    transition: transform .4s ease;
    z-index: 155;
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; gap: 6px; margin: 0; }
  .nav__link,
  .nav__list a { display: inline-block; font-size: 20px; padding: 10px 0; }
  .nav__list .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; padding: 0 0 0 16px; min-width: 0;
  }
  .nav__list .sub-menu a { font-size: 17px; padding: 7px 0; }
  .header__actions { position: relative; z-index: 156; }

  .hero { height: 620px; }
  .hero__bg { object-position: 70% center; }
  .hero::before {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(160, 120, 80, .6), rgba(160, 120, 80, 0) 75%);
  }
  .hero__content { z-index: 2; }
  .hero__title { font-size: 46px; margin-bottom: 26px; }
  .hero__text { margin-bottom: 34px; max-width: 420px; }

  .about { grid-template-columns: 1fr; margin-top: 30px; }
  .about__text { padding: 30px 0 40px; max-width: none; }

  .banner { height: 640px; }
  .banner__title { margin-bottom: 30px; }

  .products-section { padding: 80px 24px 40px; }
  ul.product-grid,
  .product-grid { --cols: 3; gap: 34px 16px; margin-bottom: 70px; }
  .card__name { font-size: 18px; }

  .testimonials { padding: 60px 24px 100px; }
  .testi blockquote { font-size: 20px; }

  .music__title { font-size: 48px; }
  .track { grid-template-columns: 64px 1fr auto auto; height: auto; padding: 18px 16px; gap: 0 14px; }
  .track__wave-l, .track__wave-r { display: none; }

  .calendar__week, .calendar__days, .slots { gap: 8px; }
  .day { height: 56px; }
  .slots { grid-template-columns: repeat(3, 1fr); }

  .site-main { padding: 60px 24px 80px; }
  .page-hero { padding: 60px 24px; }
  .post-nav { grid-template-columns: 1fr; }
  .comment-list .children { padding-left: 18px; }

  .footer__inner { padding: 60px 24px 26px; }
  .footer .logo { margin-bottom: 60px; }
  .footer__news h3 { font-size: 30px; }
}

@media (max-width: 640px) {
  .header__inner { padding: 0 16px; }
  .header__actions { gap: 14px; }
  .header .logo { font-size: 20px; }
  .header .logo--long { font-size: 15px; }
  .logo--img img { max-height: 36px; }
  .header.is-scrolled .logo--img img { max-height: 32px; }

  .title, .section-head .title, .contact .title { font-size: 28px; }
  .hero { height: 560px; align-items: flex-end; padding-bottom: 40px; }
  .hero::before { background: linear-gradient(0deg, rgba(120, 85, 55, .8), rgba(120, 85, 55, 0) 70%); }
  .hero__content { padding: 0 24px; }
  .hero__title { font-size: 36px; }
  .hero__text { font-size: 15px; }
  .btn { padding: 0 30px; height: 48px; }
  .btn--wide { min-width: 220px; }

  .banner { height: 520px; }
  .banner__title { font-size: 30px; }

  ul.product-grid,
  .product-grid { --cols: 2; gap: 30px 14px; }
  .card__name { font-size: 16px; }
  .card__price { font-size: 14px; }
  .card__badges { top: 12px; left: 12px; }
  .card__actions { opacity: 1; transform: none; top: 10px; right: 10px; }
  .card__icon { width: 32px; height: 32px; }
  .card__cart { left: 10px; right: 10px; bottom: 10px; }
  .card__cart .button,
  .card__add { opacity: 1; transform: none; height: 38px; font-size: 11px; letter-spacing: 1px; }
  .stars svg { width: 13px; height: 13px; }

  .testi blockquote { font-size: 17px; }
  .testimonials__quote-mark svg { width: 110px; height: 76px; }

  .music { padding: 0 20px 50px; }
  .music__intro { padding-top: 50px; }
  .music__title { font-size: 36px; margin-bottom: 20px; }
  .music__list .eyebrow { margin-left: 0; }
  .vinyl { display: none; }
  .track { grid-template-columns: 52px 1fr auto; gap: 12px 12px; }
  .track__cover { width: 52px; height: 52px; }
  .track__info { padding-left: 0; }
  .track__title { font-size: 17px; }
  .track__dl { grid-column: 2 / -1; justify-self: start; height: 34px; font-size: 13px; }

  .contact { padding: 40px 20px 30px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .field--msg { padding-right: 0; }
  .day { height: 44px; font-size: 14px; }
  .calendar__week span { font-size: 12px; height: 34px; }
  .calendar__week, .calendar__days, .slots { gap: 5px; }
  .slots button { font-size: 13px; }

  .entry__title { font-size: 26px; }
  .quickview__info { padding: 30px 24px; }
  .quickview__info h2 { font-size: 24px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer__col:last-child { grid-column: 1 / -1; }
  .footer__col h4 { margin-bottom: 18px; }
  .footer__bottom { padding-left: 0; font-size: 14px; justify-content: center; text-align: center; }
}


/* =========================================================
   18. Interior pages: About, Products, Music and Contact bands
   ========================================================= */
.site-page { display: block; }
.site-main--intro { padding-bottom: 0; }
.entry-content--full > .elementor,
.entry-content--full > *:last-child { margin-bottom: 0; }
.entry--builder,
.entry--full { margin-bottom: 0; }

.page-section { padding: 110px 140px; }
.page-section--tight { padding-top: 60px; }

/* ---------- About: story ---------- */
.story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.story__media { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.story__media .box { margin: 0; }
.story__media .box:first-child { grid-row: span 2; aspect-ratio: 3 / 4.4; }
.story__media .box:not(:first-child) { aspect-ratio: 1 / 1; }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.story__media .box:hover img { transform: scale(1.05); }
.story__text .muted + .muted { margin-top: 16px; }
.story__sign { margin-top: 34px; display: flex; align-items: center; gap: 16px; }
.story__sign::before { content: ""; width: 46px; height: 2px; background: var(--red); }
.story__sign strong { display: block; font-size: 18px; font-weight: 600; }
.story__sign span { color: var(--muted); font-size: 14px; }

/* ---------- About: counters ---------- */
.stats {
  background: var(--red);
  color: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 70px var(--inner);
  text-align: center;
}
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, .3); }
.stat__num { display: block; font-size: 58px; font-weight: 500; line-height: 1; margin-bottom: 12px; }
.stat__label { font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase; opacity: .85; }

/* ---------- Feature cards (values / services) ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.feature {
  background: var(--light);
  border-radius: var(--radius);
  padding: 46px 40px;
  transition: transform .3s, box-shadow .3s, background .3s;
}
.feature:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 20px 44px rgba(0, 0, 0, .08); }
.feature__icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  margin-bottom: 26px;
}
.feature h3 { font-size: 22px; font-weight: 500; margin-bottom: 12px; }

/* ---------- Timeline ---------- */
.timeline { max-width: 860px; margin: 0 auto; position: relative; }
.timeline::before { content: ""; position: absolute; left: 110px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.timeline__item { display: grid; grid-template-columns: 110px 1fr; gap: 0 46px; padding-bottom: 46px; position: relative; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::after {
  content: "";
  position: absolute; left: 104px; top: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--red);
}
.timeline__year { font-size: 26px; font-weight: 600; color: var(--red); line-height: 1.2; }
.timeline__item h3 { font-size: 20px; font-weight: 500; margin-bottom: 6px; }

/* ---------- Call to action strip ---------- */
.cta {
  background: var(--black);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 70px var(--inner);
  margin-top: 30px;
  margin-bottom: 60px;
}
.cta h2 { font-size: 40px; font-weight: 500; line-height: 1.2; margin-bottom: 8px; }
.cta p { color: #b5b5b5; }
.cta__actions { display: flex; gap: 16px; flex-shrink: 0; }
.btn--ghost { border: 1.5px solid #fff; color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--black); }

/* ---------- Products page: grid and toolbar ---------- */
.products--section { padding-top: 70px; }
.shop-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 46px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filters button {
  height: 42px;
  padding: 0 22px;
  border: 1px solid var(--line);
  border-radius: 21px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: .2s;
}
.filters button:hover { border-color: var(--red); color: var(--red); }
.filters button.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.shop-toolbar__right { display: flex; align-items: center; gap: 20px; }
.shop-toolbar__count { color: var(--muted); font-size: 14px; }
.shop-toolbar .select select {
  height: 42px;
  padding: 0 46px 0 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-size: 14px;
  outline: none;
}
.shop-toolbar .select::after { right: 18px; }
.product-grid .card.is-hidden { display: none; }
.product-empty { grid-column: 1 / -1; text-align: center; padding: 60px 0; list-style: none; }

/* ---------- Products page: perks row ---------- */
.perks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 54px var(--inner);
  background: var(--light);
  margin-top: 30px;
  margin-bottom: 60px;
}
.perk { display: flex; align-items: center; gap: 16px; }
.perk svg { flex-shrink: 0; color: var(--red); }
.perk strong { display: block; font-size: 16px; font-weight: 500; }
.perk span { font-size: 14px; color: var(--muted); }

/* ---------- Music page: player and pricing ---------- */
.music--page { margin-top: 30px; }
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: stretch; }
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 46px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .3s, box-shadow .3s;
}
.plan:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0, 0, 0, .08); }
.plan--featured { background: var(--black); color: #fff; border-color: var(--black); }
.plan--featured .muted,
.plan--featured .plan__price small { color: #b5b5b5; }
.plan__tag {
  position: absolute; top: 22px; right: 22px;
  background: var(--red); color: #fff;
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 3px;
}
.plan h3 { font-size: 22px; font-weight: 500; margin-bottom: 6px; }
.plan__price { font-size: 52px; font-weight: 500; line-height: 1; margin: 22px 0 6px; }
.plan__price small { font-size: 16px; color: var(--muted); font-weight: 400; }
.plan ul { margin: 26px 0 34px; flex-grow: 1; }
.plan li { padding: 9px 0 9px 28px; position: relative; font-size: 15px; border-bottom: 1px dashed var(--line); list-style: none; }
.plan--featured li { border-color: #333; }
.plan li::before {
  content: "";
  position: absolute; left: 2px; top: 16px;
  width: 10px; height: 5px;
  border-left: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}
.plan .btn { width: 100%; }

/* ---------- Contact page: cards and message form ---------- */
.info-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.info-card {
  background: var(--light);
  border-radius: var(--radius);
  padding: 40px 30px;
  text-align: center;
  transition: transform .3s, box-shadow .3s, background .3s;
}
.info-card:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 20px 44px rgba(0, 0, 0, .08); }
.info-card .feature__icon { margin: 0 auto 22px; }
.info-card h3 { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.info-card a,
.info-card p { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.info-card a:hover { color: var(--red); }

.message { display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
.message .muted { margin-bottom: 34px; }
.message .field--msg { padding-right: 0; }
.message .field textarea { height: 160px; }
.message__media { margin: 0; aspect-ratio: 4 / 5; }
.message__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Contact page: FAQ ---------- */
.faq { max-width: 900px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 50px 24px 0;
  font-size: 19px;
  font-weight: 500;
  position: relative;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute; right: 8px; top: 50%;
  width: 16px; height: 2px;
  background: var(--red);
  transition: transform .3s;
}
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0); }
.faq summary:hover { color: var(--red); }
.faq details p { padding: 0 50px 26px 0; }

/* =========================================================
   19. Interior pages: responsive
   ========================================================= */
@media (max-width: 1700px) {
  .page-section { padding: 100px 110px; }
}

@media (max-width: 1440px) {
  .page-section { padding: 90px 80px; }
  .products--section { padding-top: 60px; }
  .story { gap: 60px; }
}

@media (max-width: 1200px) {
  .features, .pricing, .info-cards, .perks { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .stat:nth-child(3) { border-left: 0; }
  .message { grid-template-columns: 1fr; gap: 40px; }
  .message__media { display: none; }
  .cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 991px) {
  .page-hero { height: 340px; }
  .page-section { padding: 70px 24px; }
  .products--section { padding-top: 50px; }
  .story { grid-template-columns: 1fr; }
  .cta h2 { font-size: 32px; }
}

@media (max-width: 640px) {
  .page-hero { height: 300px; }
  .page-hero__content,
  .page-hero__inner { padding: 0 24px; }
  .page-hero__title { font-size: 34px; }
  .features, .pricing, .info-cards, .perks { grid-template-columns: 1fr; }
  .feature, .plan { padding: 36px 26px; }
  .stats { padding: 50px 20px; }
  .stat__num { font-size: 42px; }
  .stat__label { font-size: 11px; letter-spacing: 1.6px; }
  .perks { padding: 40px 20px; }
  .timeline::before { left: 6px; }
  .timeline__item { grid-template-columns: 1fr; padding-left: 36px; }
  .timeline__item::after { left: 0; }
  .timeline__year { font-size: 22px; margin-bottom: 4px; }
  .shop-toolbar { flex-direction: column; align-items: stretch; }
  .shop-toolbar__right { justify-content: space-between; }
  .filters button { padding: 0 16px; height: 38px; font-size: 12px; }
  .cta { padding: 50px 24px; }
  .cta__actions { flex-direction: column; width: 100%; }
  .cta .btn { width: 100%; }
  .faq summary { font-size: 17px; }
}