/* ── Container ── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.container-narrow {
  max-width: var(--container-narrow);
}

/* ── Sections ── */

.section {
  padding: var(--space-3xl) 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-5xl) 0;
  }
}

/* ── Site header ── */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(8, 8, 15, 0.75);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: var(--space-2xl);
}

.site-logo {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.03em;
  text-transform: lowercase;
}

.site-logo:hover {
  color: var(--text-primary);
}

.site-logo span {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.site-logo-img {
  display: block;
  height: 72px;
  width: 60px;
  flex-shrink: 0;
}

.footer-brand .site-logo-img {
  height: 64px;
  width: 53px;
}

/* ── Primary nav ── */

.primary-nav {
  display: none;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.primary-nav a {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  position: relative;
}

.primary-nav a:hover,
.primary-nav .current-menu-item a {
  color: var(--text-primary);
}

.primary-nav .current-menu-item a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-accent);
  border-radius: 1px;
}

@media (min-width: 768px) {
  .primary-nav {
    display: block;
  }
}

/* ── Header actions (cart, mobile toggle) ── */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.cart-link {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.cart-link:hover {
  color: var(--text-primary);
}

.cart-link svg {
  width: 22px;
  height: 22px;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  background: var(--gradient-accent);
  color: #fff;
  border-radius: var(--radius-full);
  padding: 0 4px;
}

/* ── Mobile nav toggle ── */

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: all var(--transition-fast);
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }
}

/* ── Mobile nav ── */

.mobile-nav {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  background: var(--bg-primary);
  padding: var(--space-2xl) var(--space-lg);
  transform: translateX(100%);
  transition: transform var(--transition-base);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.mobile-nav a:hover,
.mobile-nav .current-menu-item a {
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .mobile-nav {
    display: none;
  }
}

/* ── Main content ── */

.site-main {
  margin-top: var(--nav-height);
  min-height: calc(100vh - var(--nav-height));
}

/* ── Beat grid ── */

.beat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

@media (min-width: 768px) {
  .beat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
  }
}

@media (min-width: 1024px) {
  .beat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Hero ── */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--nav-height));
  padding: var(--space-4xl) 0;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
}

.hero-content h1 {
  margin-bottom: var(--space-lg);
  line-height: 1.08;
}

.hero-content p {
  font-size: 1.1875rem;
  line-height: 1.7;
  margin-bottom: var(--space-2xl);
  color: var(--text-secondary);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* Browse-by-Collection tile strip embedded in the hero. Sibling of
   .hero-content (not nested) so it spans the full container width, with
   z-index lifting it above .hero-bg's gradient/photo. The shop archive's
   tile strip has a bottom margin to push the next block down — inside the
   hero that creates dead space, so we reset it. */
.hero-tiles {
  position: relative;
  z-index: 2;
  margin-top: var(--space-3xl);
}

.hero-tiles .catalog-collections {
  margin-bottom: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-bg::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(124, 92, 252, 0.08) 0%, transparent 70%);
  filter: blur(40px);
}

.hero-bg::after {
  content: '';
  position: absolute;
  bottom: -10%;
  left: 10%;
  width: 40%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(34, 211, 238, 0.04) 0%, transparent 70%);
  filter: blur(40px);
}

/* ── Footer ── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-3xl) 0 var(--space-xl);
  background: var(--bg-secondary);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-brand p {
  font-size: 0.9375rem;
  margin-top: var(--space-md);
  max-width: 320px;
}

/* ── Footer trust badge ──
   Card-style pill linking to stripe.com. Filled lock icon in a small
   circular badge on the left, two-line stack on the right: small
   "Secure Payments" tagline above the official "Powered by Stripe"
   wordmark (which is the visual focus). Wider than tall so the
   wordmark has room to read. Visible on every page (global footer). */
.footer-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-lg);
  padding: 8px 16px 8px 10px;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.footer-trust:hover,
.footer-trust:focus-visible {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.05);
}

.footer-trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  color: var(--text-primary);
}

.footer-trust-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1;
}

/* Tagline above the Stripe wordmark — small sentence-case label,
   secondary color so it reads as a descriptor and the wordmark
   stays primary. */
.footer-trust-tagline {
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}

/* Official "Powered by Stripe" SVG wordmark (white version). Sized as
   the visual primary in the badge — the lock icon and tagline frame it.
   The SVG's intrinsic aspect ratio is preserved; height controls width. */
.footer-trust-stripe-mark {
  display: block;
  height: 22px;
  width: auto;
  opacity: 0.95;
}

.footer-links h4 {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}

.footer-links ul,
.footer-links .menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a {
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.footer-links a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-muted);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer-copyright {
  margin: 0;
}

/* Brand column secondary links (About, Licensing) */
.footer-brand-links {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-brand-links a {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-brand-links a:hover {
  color: var(--text-primary);
}

/* Social column — icon + label rows */
.footer-social ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  transition: color var(--transition-fast);
}

.footer-social a:hover {
  color: var(--accent-light);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Bottom legal links — inline horizontal */
.footer-legal-links {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-legal-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  font-size: 0.8125rem;
}

.footer-legal-links a:hover {
  color: var(--accent-light);
}

/* Strip Complianz's default styling on the inline cookie-prefs link */
.footer-links .cmplz-manage-consent {
  cursor: pointer;
}