/* ============================================
   EM Productions - Official Web Site
   Modern stylesheet (2026)
   Faithful to original palette, modern layout.
   ============================================ */

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #000;
  color: #b8b8b8;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: #c8bfa8;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}

a:hover {
  color: #fff8dc;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

em, i { font-style: italic; }
strong, b { font-weight: bold; }

/* Bilingual text visibility */
html[lang="en"] [data-lang="it"],
html[lang="it"] [data-lang="en"] {
  display: none !important;
}

/* ============================================
   Navigation (sticky top, hamburger on mobile)
   ============================================ */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(200, 191, 168, 0.25);
  padding: 0.8rem 2rem;
}

nav.site-nav .nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

nav.site-nav .nav-brand {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  color: #fff8dc;
}

nav.site-nav .nav-brand:hover {
  color: #ffffff;
}

nav.site-nav .nav-links {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  align-items: center;
  margin: 0;
}

nav.site-nav .nav-links a {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c8bfa8;
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
}

nav.site-nav .nav-links a:hover,
nav.site-nav .nav-links a.active {
  color: #fff8dc;
  border-bottom-color: #fff8dc;
}

nav.site-nav .nav-toggle {
  display: none;
  background: none;
  border: none;
  color: #c8bfa8;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.3rem;
}

nav.site-nav .lang-switch {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  margin-left: 0.8rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(200, 191, 168, 0.25);
}

nav.site-nav .lang-switch button {
  background: none;
  border: none;
  color: #9a9a9a;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  transition: color 0.3s ease;
}

nav.site-nav .lang-switch button.active,
nav.site-nav .lang-switch button:hover {
  color: #fff8dc;
}

nav.site-nav .lang-switch .sep {
  color: #555;
}

/* ============================================
   Main Content
   ============================================ */
main {
  flex: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 2rem;
  width: 100%;
}

main.narrow {
  max-width: 820px;
}

main.wide {
  max-width: 1180px;
}

/* Page title */
.page-title {
  text-align: center;
  margin-bottom: 2.5rem;
}

.page-title h1 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.35rem;
  font-weight: normal;
  color: #fff8dc;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
}

.page-title h1 sup { font-size: 0.4em; vertical-align: super; }

.page-title .subtitle {
  display: block;
  font-size: 0.95rem;
  color: #9a9a9a;
  font-style: italic;
  margin-top: 0.6rem;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: normal;
}

/* Home layout: flex column — hero takes the full visible area above the fold
   so on load you only see the black, the top menu and the logo. The music
   feature sits far below, reachable by scroll, close to the footer. */
main.home-main {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.8rem;
}

main.home-main .home-hero {
  flex: 1 0 auto;
}

/* Home big logo — minimalist hero with lots of black + slow Ken Burns zoom.
   No overflow clipping: the logo is a planet on black, same as the page
   background, so we let it scale freely without a container frame that
   would crop its edges (same approach as the moon on Infinita Conscia). */
.home-hero {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fill the viewport (minus nav) so music-feature is below the fold */
  min-height: calc(100vh - 80px);
  padding: 3.5rem 1rem;
}

.home-hero .logo-link {
  display: inline-block;
  max-width: 510px;
  width: 85%;
}

.home-hero img {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin: 0 auto;
  opacity: 0.95;
  transition: opacity 0.3s ease;
  animation: kenburns-logo 18s ease-in-out infinite alternate;
  will-change: transform;
}

.home-hero .logo-link:hover img {
  opacity: 1;
}

@keyframes kenburns-logo {
  0%   { transform: scale(1); }
  100% { transform: scale(1.12); }
}

/* Respect the user's OS-level motion preferences */
@media (prefers-reduced-motion: reduce) {
  .home-hero img {
    animation: none;
  }
}

/* Home tagline — small, just above the copyright in the footer */
.home-tagline {
  text-align: center;
  margin: 0.6rem auto 0.4rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.7rem;
  color: #888888;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Hero image / full-width image — never upscale above natural resolution */
.hero-image {
  margin: 2rem auto;
  text-align: center;
}

.hero-image img {
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  height: auto;
}

.hero-image .photo-credit,
.caption {
  font-size: 0.78rem;
  color: #9a9a9a;
  margin-top: 0.6rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Contact gallery imgs follow the same rule */
.contact-gallery figure img {
  max-width: 100%;
  width: auto;
  height: auto;
}

/* Content sections */
.content-section {
  margin-bottom: 2.5rem;
}

.content-section h2 {
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8bfa8;
  margin-bottom: 1.2rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: normal;
}

.content-section p {
  margin-bottom: 1rem;
  font-size: 1rem;
  color: #c8c8c8;
}

/* Music feature block — the warm cream rectangle (faithful to original).
   Small and below the fold on the home page, close to the footer. */
.music-feature {
  background: #ffebcd;
  color: #000000;
  padding: 1.1rem 1.2rem;
  margin: 4rem auto 0.2rem;
  max-width: 360px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  line-height: 1.5;
  text-align: center;
  border-radius: 2px;
}

.music-feature h2 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.25rem;
  letter-spacing: 0.04em;
  color: #000;
}

.music-feature p {
  margin-bottom: 0.1rem;
  font-size: 0.78rem;
  color: #000000;
  line-height: 1.45;
}

.music-feature p.track {
  font-weight: bold;
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

.music-feature p.muted {
  font-size: 0.66rem;
  color: #4a4a4a;
  margin-top: 0.45rem;
  line-height: 1.35;
}

.music-feature audio {
  width: 100%;
  max-width: 320px;
  margin: 0.7rem auto 0;
  display: block;
  height: 30px;
}

.music-feature sup { font-size: 0.65em; }

/* ============================================
   Links index — label BESIDE the image, no frames, no upscale
   ============================================ */
.link-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 2rem 0;
}

.link-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.4rem;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
}

.link-card .label {
  padding: 0;
  text-align: right;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8bfa8;
  border: none;
  transition: color 0.3s ease;
}

.link-card:hover .label { color: #fff8dc; }

.link-card .label sup { font-size: 0.5em; vertical-align: super; }

.link-card .img-wrap {
  overflow: visible;
  max-width: 100%;
}

.link-card .img-wrap img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0;
}

/* Dealer card (text-only variant of the link card) */
.link-card.dealer-card .img-wrap.dealer-text-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid #ffebcd;
  background: rgba(255, 235, 205, 0.04);
  min-height: 100px;
  transition: background 0.3s ease, border-left-color 0.3s ease;
}

.link-card.dealer-card:hover .img-wrap.dealer-text-card {
  background: rgba(255, 235, 205, 0.08);
}

.link-card.dealer-card .dealer-card-text {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffebcd;
  margin: 0 0 0.35rem;
}

.link-card.dealer-card .dealer-card-sub {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.85rem;
  font-style: italic;
  color: #b8b8b8;
  margin: 0;
  line-height: 1.45;
}

/* ============================================
   Photographs gallery grid (index)
   ============================================ */
.gallery-hero {
  margin: 1rem auto 3rem;
  max-width: 820px;
}

.gallery-hero img {
  width: 100%;
  height: auto;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}

.gallery-grid a {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(200, 191, 168, 0.15);
  aspect-ratio: 4 / 3;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.gallery-grid a:hover {
  border-color: rgba(200, 191, 168, 0.6);
  transform: translateY(-2px);
}

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-grid .gallery-label {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #c8bfa8;
  font-style: italic;
  letter-spacing: 0.04em;
}

.gallery-item {
  display: flex;
  flex-direction: column;
}

/* Gallery single page */
.gallery-single {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.gallery-single img {
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
}

.gallery-single .photo-meta {
  font-size: 0.85rem;
  color: #9a9a9a;
  font-style: italic;
  margin-top: 0.8rem;
  letter-spacing: 0.04em;
}

.gallery-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2rem 0 1rem;
  gap: 1rem;
}

.gallery-nav a {
  padding: 0.6rem 1rem;
  border: 1px solid rgba(200, 191, 168, 0.3);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.gallery-nav a:hover {
  background: rgba(200, 191, 168, 0.08);
  border-color: #c8bfa8;
}

.gallery-nav .back {
  color: #fff8dc;
}

/* ============================================
   Events — posters stacked
   ============================================ */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  align-items: center;
  margin: 2rem 0;
}

.event-item {
  text-align: center;
  max-width: 540px;
}

.event-item img {
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 1px solid rgba(200, 191, 168, 0.1);
}

.event-item .event-caption {
  font-size: 0.85rem;
  color: #9a9a9a;
  font-style: italic;
  margin-top: 0.8rem;
  letter-spacing: 0.04em;
}

/* ============================================
   Contact page
   ============================================ */
.contact-block {
  text-align: center;
  margin: 2.5rem 0;
}

.contact-block .contact-name {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.6rem;
  color: #fff8dc;
  margin-bottom: 0.6rem;
  letter-spacing: 0.04em;
}

.contact-block .contact-email {
  font-size: 1.1rem;
}

.contact-block .contact-email a {
  color: #c8bfa8;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

.contact-block .contact-email a:hover {
  border-bottom-color: #fff8dc;
  color: #fff8dc;
}

.contact-gallery {
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.contact-gallery figure {
  margin: 0;
  text-align: center;
}

/* (natural-size rule applied earlier in the file) */

.contact-gallery figcaption {
  font-size: 0.78rem;
  color: #9a9a9a;
  font-style: italic;
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}

/* ============================================
   Order / Bank wire page
   ============================================ */
.order-intro {
  margin: 2rem auto;
  text-align: center;
  max-width: 520px;
}

.price-table {
  margin: 2rem auto;
  max-width: 560px;
  border-collapse: collapse;
  width: 100%;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1rem;
}

.price-table caption {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.3rem;
  font-style: italic;
  color: #fff8dc;
  margin-bottom: 1rem;
  caption-side: top;
}

.price-table th,
.price-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid rgba(200, 191, 168, 0.15);
  text-align: left;
  vertical-align: middle;
}

.price-table th {
  color: #c8bfa8;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(200, 191, 168, 0.35);
}

.price-table td.price {
  text-align: right;
  color: #fff8dc;
  font-weight: bold;
  white-space: nowrap;
}

.order-steps {
  max-width: 720px;
  margin: 3rem auto 2rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(200, 191, 168, 0.15);
}

.order-steps h2 {
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8bfa8;
  margin-top: 1.8rem;
  margin-bottom: 0.7rem;
  font-weight: normal;
}

.order-steps h2:first-child {
  margin-top: 0;
}

.order-steps p { margin-bottom: 0.7rem; }

.order-steps .bank-details {
  background: rgba(200, 191, 168, 0.06);
  padding: 1rem 1.2rem;
  margin: 0.8rem 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;
  color: #fff8dc;
  letter-spacing: 0.04em;
  line-height: 1.9;
  border-left: 3px solid #c8bfa8;
}

.order-lang-tabs {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(200, 191, 168, 0.2);
}

.order-lang-tabs a {
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  color: #9a9a9a;
}

.order-lang-tabs a:hover {
  color: #fff8dc;
}

/* ============================================
   Commentary
   ============================================ */
.commentary-body {
  max-width: 720px;
  margin: 2rem auto;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.05rem;
  line-height: 1.9;
  color: #c8c8c8;
}

.commentary-body blockquote {
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 2px solid #c8bfa8;
  color: #d8d8d8;
  font-style: italic;
}

.commentary-body blockquote p {
  margin-bottom: 0.9rem;
}

.commentary-body .quote-attr {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: #c8bfa8;
  font-style: italic;
  text-align: right;
  letter-spacing: 0.02em;
  font-weight: normal;
}

/* ============================================
   Sitemap
   ============================================ */
.sitemap-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem 2rem;
  margin: 2rem 0;
  align-items: center;
}

.sitemap-grid a.sm-label {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c8bfa8;
  text-align: right;
  padding-right: 0;
  border-bottom: 1px solid transparent;
}

.sitemap-grid a.sm-label:hover {
  color: #fff8dc;
  border-bottom-color: #fff8dc;
}

.sitemap-grid a.sm-img {
  display: block;
  overflow: hidden;
  border: 1px solid rgba(200, 191, 168, 0.15);
  max-height: 142px;
  transition: border-color 0.3s ease;
}

.sitemap-grid a.sm-img:hover {
  border-color: rgba(200, 191, 168, 0.5);
}

.sitemap-grid a.sm-img img {
  width: 100%;
  height: 142px;
  object-fit: cover;
}

/* ============================================
   Generic two-column text block (bilingual description etc.)
   ============================================ */
.bilingual-block {
  max-width: 680px;
  margin: 2rem auto;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #c8c8c8;
  text-align: left;
}

.bilingual-block p {
  margin-bottom: 1.4rem;
}

.bilingual-block hr {
  width: 50%;
  margin: 1.5rem auto;
  border: none;
  border-top: 1px solid rgba(200, 191, 168, 0.25);
}

/* External-link big button (used for redirect-style pages) */
.external-link-big {
  display: inline-block;
  margin: 2rem auto;
  padding: 1.1rem 2.5rem;
  border: 1px solid #c8bfa8;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: #fff8dc;
  transition: background 0.3s ease, color 0.3s ease;
}

.external-link-big:hover {
  background: #c8bfa8;
  color: #000000;
}

.redirect-page {
  text-align: center;
  padding: 2rem 0;
}

.redirect-page img {
  margin: 0 auto 2rem;
  max-width: 567px;
  width: 90%;
  height: auto;
}

/* ============================================
   Shop (cart-based, will be fully wired in phase 2)
   Base styles reserved for future shop phase.
   ============================================ */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.shop-item {
  text-align: center;
  padding: 1rem 0.5rem;
  background: transparent;
  border: none;
}

/* CD cover with hover-swap: two images stacked, the "disc" version
   revealed on hover. Matches the original CSIShow behaviour. */
.cd-cover {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 173px;
  margin: 0 auto 0.8rem;
  line-height: 0;
}

.cd-cover.wide { max-width: 520px; margin-left: auto; margin-right: auto; }

/* Energy Journeys is a 3-CD set, wider image — let the card span 2 grid
   columns so the image shows at a size comparable to the other covers. */
.shop-item.wide-item { grid-column: span 2; }

@media (max-width: 560px) {
  .shop-item.wide-item { grid-column: span 1; }
}

.cd-cover img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.cd-cover .cd-back {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.shop-item:hover .cd-cover .cd-back,
.cd-cover:hover .cd-back {
  opacity: 1;
}

.shop-item img.cd-static {
  display: block;
  width: 100%;
  max-width: 173px;
  height: auto;
  margin: 0 auto 0.8rem;
}

.shop-item .artist { color: #9a9a9a; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; }

.shop-item .title {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: #fff8dc;
  margin: 0.3rem 0;
}

.shop-item .meta { font-size: 0.78rem; color: #9a9a9a; font-style: italic; }

.shop-item .price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #fff8dc;
  margin: 0.6rem 0;
}

.shop-item .more-info {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shop-item .more-info a {
  color: #9a9a9a;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.shop-item .more-info a:hover {
  color: #fff8dc;
  border-bottom-color: #c8bfa8;
}

/* ============================================
   Audiophile-value meter (thermometer-like)
   ============================================ */
.audio-meter {
  display: block;
  margin: 0.6rem auto 0.4rem;
  max-width: 180px;
  text-align: left;
}

.audio-meter .am-label {
  display: block;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 0.25rem;
  text-align: center;
}

.audio-meter .am-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.audio-meter .am-bar {
  flex: 1;
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(200, 191, 168, 0.25);
  border-radius: 2px;
  overflow: hidden;
}

.audio-meter .am-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(90deg, #4fae4a 0%, #7fcf5a 60%, #9fe070 100%);
  box-shadow: 0 0 4px rgba(127, 207, 90, 0.4);
  transition: width 0.4s ease;
}

.audio-meter .am-num {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.78rem;
  color: #c8bfa8;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.audio-meter .am-num strong {
  color: #fff8dc;
  font-weight: bold;
}

/* ============================================
   Audiophile legend at top of catalog
   ============================================ */
.audio-legend {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  padding: 1rem 1.3rem;
  border-left: 2px solid #7fcf5a;
  background: rgba(127, 207, 90, 0.04);
  font-size: 0.85rem;
  line-height: 1.55;
  color: #c8c8c8;
}

.audio-legend strong {
  color: #9fe070;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

/* ============================================
   Add-to-cart controls on each shop item
   ============================================ */
.add-to-cart-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0.4rem;
}

.add-to-cart-row .qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(200, 191, 168, 0.3);
  background: rgba(255, 255, 255, 0.02);
}

.add-to-cart-row .qty-control button {
  background: none;
  border: none;
  color: #c8bfa8;
  width: 24px;
  height: 28px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
}

.add-to-cart-row .qty-control button:hover { color: #fff8dc; }

.add-to-cart-row .add-qty-input {
  width: 34px;
  height: 28px;
  text-align: center;
  background: transparent;
  border: none;
  color: #fff8dc;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.9rem;
  -moz-appearance: textfield;
}
.add-to-cart-row .add-qty-input::-webkit-outer-spin-button,
.add-to-cart-row .add-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.add-to-cart-btn {
  background: transparent;
  color: #fff8dc;
  border: 1px solid #c8bfa8;
  padding: 0.4rem 1rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.add-to-cart-btn:hover {
  background: #c8bfa8;
  color: #000;
}

/* ============================================
   Floating "View cart" bar (shows when cart has items)
   ============================================ */
.cart-peek {
  position: sticky;
  top: 64px;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.5rem;
  pointer-events: none;
}

.cart-peek-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #c8bfa8;
  padding: 0.55rem 1rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff8dc;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.cart-peek-btn:hover {
  background: #c8bfa8;
  color: #000;
}

.cart-badge {
  display: none;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffebcd;
  color: #000;
  font-size: 0.72rem;
  font-weight: bold;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  letter-spacing: 0;
}

.cart-badge.flash {
  animation: cart-badge-flash 0.55s ease-out;
}

@keyframes cart-badge-flash {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ============================================
   Cart section at bottom of the shop page
   ============================================ */
.shop-cart {
  max-width: 820px;
  margin: 4rem auto 2rem;
  padding: 1.8rem;
  border: 1px solid rgba(200, 191, 168, 0.22);
  background: rgba(255, 255, 255, 0.015);
}

.shop-cart h2 {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1.1rem;
  font-weight: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff8dc;
  margin-bottom: 1.4rem;
  text-align: center;
}

.cart-empty {
  text-align: center;
  font-style: italic;
  color: #9a9a9a;
  padding: 1rem 0;
  font-size: 0.95rem;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.cart-table td {
  padding: 0.7rem 0.4rem;
  border-bottom: 1px solid rgba(200, 191, 168, 0.12);
  vertical-align: middle;
  color: #d8d8d8;
}

.cart-table tr:last-child td { border-bottom: none; }

.cart-table .cart-title {
  color: #fff8dc;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.cart-table .cart-qty {
  width: 140px;
  white-space: nowrap;
}

.cart-table .qty-btn {
  background: transparent;
  border: 1px solid rgba(200, 191, 168, 0.35);
  color: #c8bfa8;
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  transition: all 0.2s ease;
}

.cart-table .qty-btn:hover {
  background: #c8bfa8;
  color: #000;
}

.cart-table .qty-input {
  width: 42px;
  height: 26px;
  text-align: center;
  background: transparent;
  border: 1px solid rgba(200, 191, 168, 0.25);
  color: #fff8dc;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.9rem;
  margin: 0 0.3rem;
  -moz-appearance: textfield;
}

.cart-table .qty-input::-webkit-outer-spin-button,
.cart-table .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-table .cart-line {
  text-align: right;
  white-space: nowrap;
  font-weight: bold;
  color: #fff8dc;
}

.cart-table .cart-remove {
  width: 40px;
  text-align: center;
}

.cart-table .remove-btn {
  background: transparent;
  border: none;
  color: #9a9a9a;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  transition: color 0.2s ease;
}

.cart-table .remove-btn:hover { color: #ff8080; }

.ship-zone-row {
  margin: 1.5rem 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  align-items: center;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(200, 191, 168, 0.15);
}

.ship-zone-row label {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c8bfa8;
}

.ship-zone-row select {
  background: #000;
  border: 1px solid rgba(200, 191, 168, 0.35);
  color: #fff8dc;
  padding: 0.45rem 0.7rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.92rem;
  min-width: 280px;
  cursor: pointer;
}

.ship-zone-row select:focus {
  outline: 1px solid #c8bfa8;
  outline-offset: 1px;
}

.shipping-note {
  display: block;
  font-size: 0.78rem;
  color: #9a9a9a;
  font-style: italic;
  margin-top: 0.3rem;
  flex-basis: 100%;
}

.cart-totals {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(200, 191, 168, 0.15);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  font-size: 0.95rem;
  max-width: 360px;
  margin-left: auto;
}

.cart-totals .label {
  color: #c8bfa8;
  letter-spacing: 0.05em;
}

.cart-totals .value {
  color: #d8d8d8;
  text-align: right;
  font-weight: bold;
}

.cart-totals .grand-label {
  font-size: 1.05rem;
  color: #fff8dc;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(200, 191, 168, 0.25);
  margin-top: 0.3rem;
}

.cart-totals .grand-value {
  font-size: 1.15rem;
  color: #fff8dc;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(200, 191, 168, 0.25);
  margin-top: 0.3rem;
}

.checkout-actions {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: center;
}

.checkout-btn {
  display: inline-block;
  min-width: 280px;
  padding: 0.9rem 1.6rem;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  border: 1px solid #c8bfa8;
  background: #c8bfa8;
  color: #000;
}

.checkout-btn:hover {
  background: #fff8dc;
  border-color: #fff8dc;
}

.checkout-btn.secondary {
  background: transparent;
  color: #c8bfa8;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  padding: 0.6rem 1.2rem;
  min-width: 220px;
  border: 1px solid rgba(200, 191, 168, 0.4);
}

.checkout-btn.secondary:hover {
  background: rgba(200, 191, 168, 0.1);
  color: #fff8dc;
  border-color: #c8bfa8;
}

.clear-cart-link {
  background: transparent;
  border: none;
  color: #777;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 0.6rem;
  padding: 0.3rem;
}

.clear-cart-link:hover { color: #aaa; }

.express-note {
  text-align: center;
  font-size: 0.78rem;
  color: #9a9a9a;
  font-style: italic;
  margin-top: 1.5rem;
  line-height: 1.6;
}

.express-note a { color: #c8bfa8; }
.express-note a:hover { color: #fff8dc; }

/* Contextual local-dealer notice — appears when the customer picks a
   country for which a dealer is defined in DEALERS (scripts-shop.js). */
.dealer-notice {
  margin: 1.2rem 0 0.5rem;
  padding: 1rem 1.2rem;
  border-left: 2px solid #ffebcd;
  background: rgba(255, 235, 205, 0.05);
  font-size: 0.92rem;
  line-height: 1.55;
  color: #d8d8d8;
}

.dealer-notice .dealer-text {
  margin: 0 0 0.6rem;
}

.dealer-notice .dealer-text strong {
  color: #fff8dc;
}

.dealer-notice .dealer-cta {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dealer-notice .dealer-cta a {
  color: #ffebcd;
  border-bottom: 1px solid rgba(255, 235, 205, 0.4);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.dealer-notice .dealer-cta a:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

@media (max-width: 560px) {
  .shop-cart { padding: 1.2rem; margin-left: 0.5rem; margin-right: 0.5rem; }
  .cart-table .cart-qty { width: 120px; }
  .ship-zone-row select { min-width: 100%; }
  .cart-totals { max-width: 100%; }
  .checkout-btn { min-width: 100%; }
}

/* ============================================
   Footer
   ============================================ */
footer.site-footer {
  border-top: 1px solid rgba(200, 191, 168, 0.15);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  margin-top: 3rem;
}

/* Decorative row of vintage icon-thumbnails that reconnects the new site to the old */
footer.site-footer .footer-icons {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin: 0 auto 1.8rem;
  max-width: 760px;
}

footer.site-footer .footer-icons a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 85px;
  padding: 0.3rem 0;
  transition: opacity 0.3s ease;
  opacity: 0.75;
}

footer.site-footer .footer-icons a:hover {
  opacity: 1;
}

footer.site-footer .footer-icons img {
  width: 56px;
  height: 56px;
  border-radius: 2px;
  filter: grayscale(0.15);
  transition: filter 0.3s ease;
}

footer.site-footer .footer-icons a:hover img {
  filter: grayscale(0);
}

footer.site-footer .footer-icons span {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9a9a;
  text-align: center;
  line-height: 1.2;
}

footer.site-footer .footer-icons a:hover span {
  color: #fff8dc;
}

footer.site-footer .footer-nav {
  margin-bottom: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(200, 191, 168, 0.1);
}

footer.site-footer .footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  padding: 0;
}

footer.site-footer .footer-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a9a9a;
}

footer.site-footer .footer-nav a:hover {
  color: #fff8dc;
}

footer.site-footer .copyright p {
  font-size: 9px;
  color: #777777;
  line-height: 1.35;
  letter-spacing: 0;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
  nav.site-nav {
    padding: 0.7rem 1rem;
  }

  nav.site-nav .nav-brand {
    font-size: 1rem;
    flex: 1;
  }

  nav.site-nav .nav-toggle {
    display: block;
    order: 3;
  }

  nav.site-nav .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
    padding-top: 1rem;
    align-items: flex-start;
    order: 4;
  }

  nav.site-nav .nav-links.open {
    display: flex;
  }

  nav.site-nav .nav-links a {
    font-size: 0.9rem;
    padding: 0.4rem 0;
    width: 100%;
  }

  nav.site-nav .lang-switch {
    order: 2;
    border-left: none;
    padding-left: 0;
    margin-left: 0;
  }

  main {
    padding: 2rem 1.2rem;
  }

  .home-hero {
    padding: 2rem 1rem 1.5rem;
  }

  .page-title h1 {
    font-size: 1.15rem;
    letter-spacing: 0.16em;
  }

  .link-card {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .link-card .label {
    text-align: center;
    padding: 0.3rem 0;
    border: none;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
  }

  .sitemap-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem 0;
  }

  .sitemap-grid a.sm-label {
    text-align: center;
    padding-right: 0;
    margin-top: 1rem;
    font-size: 1.25rem;
  }

  .music-feature {
    padding: 1.5rem 1.2rem;
  }

  .order-steps {
    padding: 1.4rem 1.2rem;
  }

  .order-steps .bank-details {
    font-size: 0.82rem;
    padding: 0.8rem 0.9rem;
  }

  footer.site-footer .footer-nav ul {
    gap: 1rem;
  }

  footer.site-footer .footer-icons {
    gap: 0.5rem 0.6rem;
  }

  footer.site-footer .footer-icons a {
    width: 68px;
  }

  footer.site-footer .footer-icons img {
    width: 46px;
    height: 46px;
  }

  footer.site-footer .footer-icons span {
    font-size: 0.62rem;
  }

  .home-hero {
    min-height: calc(100vh - 140px);
    padding: 2rem 1rem;
  }
}

@media (max-width: 480px) {
  .page-title h1 {
    font-size: 1rem;
    letter-spacing: 0.12em;
  }

  main {
    padding: 1.5rem 1rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .music-feature h2 {
    font-size: 1.3rem;
  }

  .contact-block .contact-name {
    font-size: 1.5rem;
  }

  footer.site-footer {
    padding: 2rem 1rem 1.5rem;
  }

  footer.site-footer .copyright p {
    font-size: 0.68rem;
  }

  footer.site-footer .footer-icons a {
    width: 56px;
  }

  footer.site-footer .footer-icons img {
    width: 40px;
    height: 40px;
  }

  footer.site-footer .footer-icons span {
    display: none;
  }
}

/* Print */
@media print {
  nav.site-nav, footer.site-footer, .lang-switch { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}