/* MP3D site styles, built on the Storybook design tokens (light theme). */
:root {
  /* Surfaces */
  --surface-page: #ffffff;
  --surface-primary: #fafafa;
  --surface-secondary: #f5f5f5;
  --surface-inverse: #0a0a0a;
  --surface-action: #2563eb;          /* primary-500 */
  --surface-action-hover: #1145b7;    /* primary-600 */
  --surface-action-pressed: #0e3997;  /* primary-700 */
  --surface-secondary-subtle: #faf6eb; /* amber-50 */

  /* Text */
  --text-primary: #0a0a0a;
  --text-secondary: #4f4f4f;
  --text-tertiary: #616161;
  --text-on-action: #fafafa;
  --text-on-inverse: #fafafa;
  --text-on-inverse-secondary: #e5e5e5;
  --text-secondary-action: #76540b;   /* amber-800 */
  --text-action: #2563eb;
  --text-action-hover: #0e3997;

  /* Borders */
  --border-primary: #e5e5e5;
  --border-inverse: #262626;
  --border-secondary-action: #ebad25; /* amber-500 */
  --focus-ring: #3fa665;              /* success-500 */

  /* Type: Apple text styles on a 17px base */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale in rem (1rem = 17px, set on html below). Size / line height. */
  --text-sm: 0.8824rem;   --leading-sm: 1.1765rem;    /* 15 / 20 */
  --text-base: 1rem; --leading-base: 1.2941rem;  /* 17 / 22 */
  --text-lg: 1.1765rem;   --leading-lg: 1.4706rem;    /* 20 / 25 */
  --text-xl: 1.2941rem;   --leading-xl: 1.6471rem;    /* 22 / 28 */
  --text-2xl: 1.6471rem;  --leading-2xl: 2rem;   /* 28 / 34 */
  --text-3xl: 2rem;  --leading-3xl: 2.4118rem;   /* 34 / 41 */
  --text-display: 3.7647rem;                   /* 64, hero title max */

  /* Spacing (4px base) */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 18px;

  /* Card hover motion: the lift, shadow and image zoom all share this timing */
  --hover-duration: 0.3s;
  --hover-ease: ease;
}

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

/* 106.25% = 17px at the browser default, matching the Storybook base. It still scales with the visitor's text-size setting. */
html { font-size: 106.25%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--text-primary);
  background-color: #c9ced6;
  background-image: url("../img/silversky.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }

a { color: var(--text-action); }
a:hover { color: var(--text-action-hover); }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 8px 12px;
  background: var(--surface-page);
  border-radius: var(--radius-lg);
}
.skip-link:focus { left: 8px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font: 500 var(--text-base)/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-sm { height: 44px; font-size: var(--text-sm); }
.btn-lg { height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-xl); font-size: var(--text-lg); }
.btn-block { width: 100%; }

.btn-primary { background: var(--surface-action); color: var(--text-on-action); }
.btn-primary:hover { background: var(--surface-action-hover); color: var(--text-on-action); }
.btn-primary:active { background: var(--surface-action-pressed); }
.btn-primary:disabled { background: #e5e5e5; color: #a1a1a1; cursor: not-allowed; }

.btn-outline { background: var(--surface-page); color: var(--text-action); border-color: var(--surface-action); }
.btn-outline:hover { background: var(--surface-action-hover); border-color: var(--surface-action-hover); color: var(--text-on-action); }
.btn-outline:active { background: var(--surface-action-pressed); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-secondary); }

/* Header */
.site-header {
  background: var(--surface-inverse);
  border-bottom: 1px solid var(--border-inverse);
  position: sticky;
  top: 0;
  z-index: 20;
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-6);
  min-height: 90px; /* exactly 90px on desktop; lets the nav wrap below the logo on narrow phones */
  padding-top: 0;
  padding-bottom: 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  height: 90px;
}
.brand img { display: block; height: 74px; width: auto; }
.brand:hover img { opacity: 0.85; }
.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) 28px;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: 500;
}
.main-nav > a { color: var(--text-on-inverse); text-decoration: none; }
.main-nav > a:hover { color: #9ebaf6; }

.store-banner {
  background: var(--surface-secondary-subtle);
  border-bottom: 1px solid var(--border-secondary-action);
}
.store-banner p {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  font-weight: 500;
  color: var(--text-secondary-action);
  text-align: center;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-inverse);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero-scrim { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.62); }
.hero-content {
  position: relative;
  max-width: 880px;
  padding: 96px var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}
.hero-logo { width: 220px; max-width: 60vw; height: auto; }
.hero h1 {
  margin-top: var(--space-2);
  font-size: clamp(var(--text-3xl), 5.2vw, var(--text-display));
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-on-inverse);
}
.hero-tagline {
  max-width: 620px;
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  color: var(--text-on-inverse-secondary);
}
.hero .btn { margin-top: var(--space-3); }

/* Gallery */
/* Soft Christmas mesh gradient behind the gallery */
.gallery-bg {
  background-color: transparent;
  background-image:
    radial-gradient(at 6% 8%, rgba(196, 64, 72, 0.32) 0, transparent 42%),
    radial-gradient(at 94% 4%, rgba(46, 125, 84, 0.36) 0, transparent 44%),
    radial-gradient(at 50% 45%, rgba(235, 173, 37, 0.24) 0, transparent 50%),
    radial-gradient(at 4% 70%, rgba(46, 125, 84, 0.28) 0, transparent 40%),
    radial-gradient(at 96% 62%, rgba(214, 120, 128, 0.30) 0, transparent 40%),
    radial-gradient(at 30% 100%, rgba(235, 173, 37, 0.22) 0, transparent 45%),
    radial-gradient(at 80% 100%, rgba(46, 125, 84, 0.24) 0, transparent 42%),
    linear-gradient(rgba(251, 247, 241, 0.62), rgba(251, 247, 241, 0.62));
  background-attachment: scroll;
}
.gallery-bg .card { background: #ffffff; }
.gallery { padding-top: 96px; padding-bottom: 112px; max-width: 1128px; }
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 640px;
  margin-bottom: 48px;
}
.section-head h2 { font-size: var(--text-3xl); line-height: var(--leading-3xl); font-weight: 600; }
.section-head p { color: var(--text-secondary); }

.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 40px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition:
    transform var(--hover-duration) var(--hover-ease),
    box-shadow var(--hover-duration) var(--hover-ease),
    border-color var(--hover-duration) var(--hover-ease);
}
.card:hover,
.card:focus-within {
  border-color: #d4d4d4;
  transform: translateY(-0.25rem);
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.12), 0 3px 8px rgba(10, 10, 10, 0.06);
}
.card-media-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-secondary);
}
.card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--hover-duration) var(--hover-ease);
}
.card:hover .card-media,
.card:focus-within .card-media { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .card, .card-media { transition: none; }
  .card:hover, .card:focus-within,
  .card:hover .card-media, .card:focus-within .card-media { transform: none; }
}
.card-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
  flex-grow: 1;
}
.card-body h3 { font-size: var(--text-base); line-height: var(--leading-base); font-weight: 600; }
.card-caption { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: 500; color: var(--text-secondary); }
.card-buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-primary);
}
.card-body p + .card-buy { margin-top: auto; }
.price { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 700; }
.price-tbd { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); font-weight: 400; }

/* Custom prints */
.custom {
  background-color: #1e5b3a; /* Christmas green */
  border-top: 1px solid #174a2f;
}
.custom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) 48px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.custom-inner > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: var(--space-3); }
.custom h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: 600; color: #fafafa; }
.custom p { color: #e8f0eb; }
.custom .btn-outline { background: #ffffff; color: #1e5b3a; border-color: #ffffff; }
.custom .btn-outline:hover { background: #f4e9c8; border-color: #f4e9c8; color: #174a2f; }
.custom .btn-outline:active { background: #ebd9a0; border-color: #ebd9a0; }

/* Footer */
.site-footer { background: var(--surface-inverse); color: var(--text-on-inverse-secondary); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}
.site-footer strong { color: var(--text-on-inverse); }
.site-footer a { color: #9ebaf6; }
.site-footer a:hover { color: #d2ddf5; }

/* Cart drawer (store mode only) */
.cart-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(10, 10, 10, 0.5); }
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  border-left: 1px solid var(--border-primary);
}
.cart-backdrop[hidden], .cart-drawer[hidden] { display: none; }
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-primary);
}
.cart-head h2 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: 600; }
.cart-empty { padding: var(--space-6); color: var(--text-secondary); }
.cart-items { list-style: none; margin: 0; padding: 0 var(--space-6); overflow-y: auto; flex: 1; }
.cart-item {
  display: grid;
  grid-template-columns: 75px minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  align-items: start;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-primary);
}
.cart-thumb {
  width: 75px;  /* keeps the 4:5 product photo shape */
  height: 94px;
  object-fit: cover;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-primary);
  background: var(--surface-secondary);
}
.cart-item-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.cart-item-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
.cart-item-name { font-weight: 500; }
.cart-item-line { color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-sm); }
.qty { display: inline-flex; align-items: center; gap: var(--space-2); }
.qty button {
  width: 44px;
  height: 44px;
  border: 1px solid #737373;
  border-radius: var(--radius-lg);
  background: var(--surface-page);
  font: 500 var(--text-lg)/1 var(--font-sans);
  cursor: pointer;
}
.qty button:hover { background: var(--surface-secondary); }
.qty output { min-width: 2ch; text-align: center; }
.cart-remove {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-action);
  font: 400 var(--text-sm)/var(--leading-sm) var(--font-sans);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}
.cart-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-top: 1px solid var(--border-primary);
}
.cart-total { display: flex; justify-content: space-between; font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: 500; }
.cart-note { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--text-secondary); }

@media (max-width: 600px) {
  .main-nav { padding-bottom: var(--space-3); } /* nav wraps under the logo on phones */
  .hero { min-height: 560px; }
  .hero-content { padding-top: 64px; padding-bottom: 64px; }
  .hero-tagline { font-size: var(--text-lg); line-height: var(--leading-lg); }
  .gallery { padding-top: 64px; padding-bottom: 64px; }
  .section-head h2 { font-size: var(--text-2xl); line-height: var(--leading-2xl); }
  .custom-inner { padding-top: 56px; padding-bottom: 56px; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Product card: quantity stepper + Add to cart */
.buy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.buy-add { flex: 1 1 140px; }
.stepper {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  border: 1px solid #737373;
  border-radius: var(--radius-lg);
  background: var(--surface-page);
  overflow: hidden;
}
.stepper button {
  width: 40px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: 500 var(--text-lg)/1 var(--font-sans);
  cursor: pointer;
}
.stepper button:hover { background: var(--surface-secondary); }
.stepper button:focus-visible, .stepper input:focus-visible { outline-offset: -3px; }
.stepper input {
  width: 2.5rem;
  border: 0;
  border-left: 1px solid var(--border-primary);
  border-right: 1px solid var(--border-primary);
  text-align: center;
  font: 500 var(--text-base)/1 var(--font-sans);
  color: var(--text-primary);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 3px solid var(--focus-ring); }