/* ============================================================
   MITTEN RUGS N STUFF — styles.css
   Aesthetic: Bauhaus Art-Gallery · Bold Color · Professional
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Lora:ital,wght@0,400;0,600;1,400&display=swap');

/* ─── VARIABLES ─── */
:root {
  --off-white:   #f7f4ee;
  --white:       #ffffff;
  --ink:         #111111;
  --ink-mid:     #444444;
  --ink-light:   #888888;

  --cobalt:      #1a3fcc;
  --cobalt-light:#3a5fe8;
  --coral:       #f05a3a;
  --coral-light: #f57a60;
  --saffron:     #f5b800;
  --mint:        #2dbf8a;
  --mint-light:  #52d4a4;
  --lavender:    #9b72cf;

  --card-bg:     rgba(255,255,255,0.82);
  --border:      #e8e4dc;

  --font-display: 'Syne', sans-serif;
  --font-body:    'Lora', Georgia, serif;
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* ─── KEYFRAMES ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.88) rotate(-2deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.9) translateY(24px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(12deg); }
  50%       { transform: translateY(-14px) rotate(12deg); }
}
@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(-8deg); }
  50%       { transform: translateY(-10px) rotate(-8deg); }
}

/* ─── HERO ─── */
header {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
}

/* Color block strips */
.hero-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 8px;
  display: flex;
}
.hero-strip span {
  flex: 1;
}
.hero-strip span:nth-child(1) { background: var(--cobalt); }
.hero-strip span:nth-child(2) { background: var(--coral); }
.hero-strip span:nth-child(3) { background: var(--saffron); }
.hero-strip span:nth-child(4) { background: var(--mint); }
.hero-strip span:nth-child(5) { background: var(--lavender); }

/* Interactive shape canvas */
#shapeCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  z-index: 1;
}
#shapeCanvas:active { cursor: grabbing; }

/* Big background letter */
.hero-bg-letter {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: min(55vw, 560px);
  color: rgba(255,255,255,0.03);
  line-height: 1;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
  letter-spacing: -0.05em;
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  max-width: 900px;
}

.logo-eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: 1.2rem;
  animation: fadeUp 0.7s 0.2s both;
  display: block;
}

.logo-badge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 10vw, 8.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--white);
  animation: zoomIn 0.9s 0.3s cubic-bezier(.16, 1.3, .3, 1) both;
}

/* Each word gets its own color accent on hover */
.logo-badge .w1 { color: var(--white); }
.logo-badge .w2 { color: var(--cobalt-light); }
.logo-badge .w3 {
  font-style: italic;
  font-weight: 400;
  color: var(--coral);
}

.hero-tagline {
  margin-top: 1.8rem;
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(247,244,238,0.5);
  animation: fadeUp 0.8s 0.7s both;
}

.hero-sub {
  margin-top: 0.8rem;
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.35rem);
  color: rgba(247,244,238,0.72);
  animation: fadeUp 0.8s 0.9s both;
}

.btn-shop {
  display: inline-block;
  margin-top: 2.8rem;
  padding: 1em 2.8em;
  background: var(--coral);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  position: relative;
  animation: fadeUp 0.8s 1.1s both;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn-shop:hover {
  background: var(--coral-light);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(240,90,58,0.4);
}

/* ─── NAV ─── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 2.5rem;
  background: var(--white);
  border-bottom: 2px solid var(--ink);
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.nav-logo .accent { color: var(--coral); }

.nav-links { display: flex; gap: 0.5rem; list-style: none; }
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding: 0.45em 1em;
  border: 1.5px solid transparent;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.nav-links a:hover {
  border-color: var(--ink);
  color: var(--cobalt);
}

/* ─── SECTIONS ─── */
section { position: relative; padding: 6rem 2rem; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 800;
  text-align: center;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.section-title span {
  color: var(--cobalt);
  font-style: italic;
  font-weight: 400;
  font-family: var(--font-body);
}

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem auto 3.5rem;
  max-width: 400px;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--border);
}
.sdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.sdot-1 { background: var(--coral); }
.sdot-2 { background: var(--saffron); }
.sdot-3 { background: var(--cobalt); }

/* ─── GALLERY ─── */
#gallery {
  background-color: #f0e6ff;
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 20%,  #ff9de288 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 90% 10%,  #a8edea88 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 80%,  #ffd18088 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 15% 85%,  #c084fc88 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 50% 50%,  #f9a8d488 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 35% 55%,  #6ee7b788 0%, transparent 50%),
    radial-gradient(ellipse 45% 40% at 70% 40%,  #93c5fd88 0%, transparent 50%),
    radial-gradient(ellipse 35% 35% at 55% 20%,  #fde68a88 0%, transparent 50%),
    radial-gradient(ellipse 30% 30% at 25% 45%,  #f9a88088 0%, transparent 45%);
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
}

/* Extra swirly overlay for tie-dye depth */
#gallery::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 320px at 20% 30%, #ff6eb428 0%, transparent 70%),
    radial-gradient(circle 260px at 75% 65%, #38bdf828 0%, transparent 70%),
    radial-gradient(circle 210px at 60% 15%, #facc1528 0%, transparent 70%),
    radial-gradient(circle 300px at 40% 80%, #a78bfa28 0%, transparent 70%),
    radial-gradient(circle 190px at 85% 30%, #34d39928 0%, transparent 70%),
    radial-gradient(circle 240px at 5%  60%, #fb923c28 0%, transparent 70%),
    radial-gradient(circle 180px at 92% 50%, #e879f928 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

#gallery .section-title,
#gallery .section-divider,
#gallery .gallery {
  position: relative;
  z-index: 1;
}

.gallery {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.art-card {
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid var(--ink);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s cubic-bezier(.23,1,.32,1), box-shadow 0.3s;
  animation: fadeUp 0.6s both;
}
/* Colored top bar — each card gets a different color */
.art-card::before {
  content: '';
  display: block;
  height: 5px;
  width: 100%;
}
.art-card:nth-child(6n+1)::before { background: var(--cobalt); }
.art-card:nth-child(6n+2)::before { background: var(--coral); }
.art-card:nth-child(6n+3)::before { background: var(--saffron); }
.art-card:nth-child(6n+4)::before { background: var(--mint); }
.art-card:nth-child(6n+5)::before { background: var(--lavender); }
.art-card:nth-child(6n+6)::before { background: var(--coral-light); }

.art-card:hover {
  transform: translateY(-8px) rotate(-0.4deg);
  box-shadow: 6px 12px 0px var(--ink);
}

.art-card:nth-child(1) { animation-delay: 0.05s; }
.art-card:nth-child(2) { animation-delay: 0.1s; }
.art-card:nth-child(3) { animation-delay: 0.15s; }
.art-card:nth-child(4) { animation-delay: 0.2s; }
.art-card:nth-child(5) { animation-delay: 0.25s; }
.art-card:nth-child(6) { animation-delay: 0.3s; }

.art-img-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  background: var(--off-white);
  border-bottom: 2px solid var(--ink);
}

.art-info { padding: 1.3rem 1.4rem 1.6rem; }

.art-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.art-desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: 1rem;
}

.art-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.art-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.art-badge {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border: 1.5px solid;
}
.badge-available { border-color: var(--mint); color: var(--mint); }
.badge-sold      { border-color: var(--ink-light); color: var(--ink-light); }

.btn-purchase {
  display: block;
  width: 100%;
  padding: 0.8em 1em;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-purchase:hover:not(:disabled) {
  background: var(--cobalt);
  border-color: var(--cobalt);
  transform: translateY(-2px);
}
.btn-purchase:disabled {
  background: transparent;
  color: var(--ink-light);
  border-color: var(--border);
  cursor: not-allowed;
}

/* ─── HOW TO BUY ─── */
#how {
  background: var(--cobalt);
  overflow: hidden;
  position: relative;
}
#how::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--coral) 0%, var(--coral) 25%,
    var(--saffron) 25%, var(--saffron) 50%,
    var(--mint) 50%, var(--mint) 75%,
    var(--lavender) 75%, var(--lavender) 100%
  );
}

#how .section-title { color: var(--white); }
#how .section-title span { color: var(--saffron); }
#how .section-divider::before,
#how .section-divider::after { background: rgba(255,255,255,0.2); }

.steps {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.step {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.15);
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  transition: background 0.2s, transform 0.2s;
}
.step:hover {
  background: rgba(255,255,255,0.13);
  transform: translateY(-4px);
}
.step-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 800;
  color: rgba(255,255,255,0.12);
  line-height: 1;
  position: absolute;
  top: 0.6rem; right: 0.8rem;
}

.step-icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 1rem;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--saffron);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}
.step p {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
}

/* ─── CONTACT ─── */
#contact {
  background: var(--off-white);
  position: relative;
}
#contact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--coral), var(--saffron), var(--cobalt), var(--mint));
}

.payment-wrapper {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.payment-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-mid);
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.payment-cards {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.payment-card {
  flex: 1;
  min-width: 220px;
  max-width: 280px;
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
}
.payment-card:hover {
  transform: translateY(-5px) rotate(-0.5deg);
  box-shadow: 5px 8px 0 var(--ink);
}
.venmo-card::before {
  content: '';
  display: block;
  height: 4px;
  background: #008CFF;
  margin: -2rem -1.5rem 1rem;
}
.cashapp-card::before {
  content: '';
  display: block;
  height: 4px;
  background: var(--mint);
  margin: -2rem -1.5rem 1rem;
}

.payment-logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.payment-handle {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--off-white);
  padding: 0.4em 1em;
  border: 1.5px dashed var(--ink-light);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.payment-handle:hover {
  background: var(--saffron);
  border-color: var(--saffron);
  color: var(--ink);
}

.payment-copy {
  font-size: 0.7rem;
  color: var(--ink-light);
  margin-top: 0.7rem;
  letter-spacing: 0.05em;
}

/* ─── FOOTER ─── */
footer {
  background: var(--ink);
  text-align: center;
  padding: 3rem 1.5rem;
  position: relative;
}

/* Rainbow top border */
footer::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg,
    var(--cobalt) 0%, var(--cobalt) 20%,
    var(--coral) 20%, var(--coral) 40%,
    var(--saffron) 40%, var(--saffron) 60%,
    var(--mint) 60%, var(--mint) 80%,
    var(--lavender) 80%, var(--lavender) 100%
  );
  margin-bottom: 2.5rem;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
}
.footer-logo .accent { color: var(--coral); }
.footer-logo .accent2 { color: var(--saffron); font-style: italic; font-weight: 400; font-family: var(--font-body); }

.footer-copy {
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}

/* ─── MODAL ─── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(17,17,17,0.75);
  backdrop-filter: blur(4px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 2.5rem;
  max-width: 490px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: modalPop 0.35s cubic-bezier(.23,1.3,.32,1) both;
  box-shadow: 8px 10px 0 var(--ink);
}
.modal::before {
  content: '';
  display: block;
  height: 5px;
  background: linear-gradient(90deg, var(--cobalt), var(--coral), var(--saffron));
  margin: -2.5rem -2.5rem 2rem;
}

.modal-close {
  position: absolute; top: 1.3rem; right: 1.3rem;
  background: none; border: 1.5px solid var(--border);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  color: var(--ink-light);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  font-family: var(--font-display);
}
.modal-close:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--white);
}

.modal h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
  line-height: 1;
}

.modal-art-title {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--cobalt);
  margin-bottom: 1.4rem;
}

.modal p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: 0.6rem;
}
.modal strong { color: var(--ink); font-family: var(--font-display); }

/* ─── STEP INDICATOR ─── */
.modal-steps-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 1.6rem;
}
.modal-step-dot {
  width: 12px; height: 12px;
  border: 2px solid var(--border);
  background: transparent;
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
}
.modal-step-dot.active {
  background: var(--cobalt);
  border-color: var(--cobalt);
}
.modal-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
}

/* ─── PAYMENT OPTIONS IN MODAL ─── */
.modal-pay-cards {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}
.modal-pay-option {
  flex: 1;
  min-width: 130px;
  border: 2px solid var(--ink);
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  background: var(--off-white);
  transition: background 0.2s, transform 0.15s;
}
.modal-pay-option:hover { transform: translateY(-2px); }
.venmo-option:hover   { background: #e8f3ff; }
.cashapp-option:hover { background: #e6f9f2; }

.modal-pay-logo {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.modal-pay-handle {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-mid);
  background: var(--white);
  padding: 0.2em 0.5em;
  display: inline-block;
  border: 1px dashed var(--border);
}

.modal-instruction {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-top: 0.8rem;
}

/* ─── ORDER FORM ─── */
.order-form { margin-top: 0.5rem; }
.form-group { margin-bottom: 1.1rem; }

.form-group label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 0.4rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  background: var(--off-white);
  border: 2px solid var(--border);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.65em 0.9em;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
  border-radius: 0;
}
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--cobalt);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--ink-light);
  font-style: italic;
}

.radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-mid);
  cursor: pointer;
  font-weight: 400;
}
.radio-label input[type="radio"] {
  accent-color: var(--cobalt);
  width: 16px; height: 16px;
  cursor: pointer;
}

.form-error {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--coral);
  margin-top: 0.3rem;
}

.btn-submit {
  background: var(--cobalt) !important;
  border-color: var(--cobalt) !important;
  color: var(--white) !important;
  margin-top: 0.6rem;
}
.btn-submit:hover:not(:disabled) {
  background: var(--cobalt-light) !important;
  border-color: var(--cobalt-light) !important;
  transform: translateY(-2px) !important;
}

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s, transform 0.65s;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}


/* ============================================================
   RESPONSIVE — TABLET & MOBILE
   ============================================================ */

/* ── TABLET (max 900px) ── */
@media (max-width: 900px) {

  /* Nav: tighten padding, smaller logo */
  nav {
    padding: 0.8rem 1.4rem;
  }
  .nav-logo { font-size: 1rem; }
  .nav-links { gap: 0.8rem; }
  .nav-links a { font-size: 0.68rem; padding: 0.4em 0.7em; }

  /* Hero: reduce vertical breathing room */
  header { min-height: 90vh; }

  /* Sections: tighter vertical padding */
  section { padding: 4rem 1.5rem; }

  /* Steps: 2 columns on tablet */
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }

  /* Payment cards stack naturally */
  .payment-cards { gap: 1rem; }

  /* Modal slightly wider */
  .modal { padding: 2rem; }

  /* Gallery: 2 columns */
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.2rem;
  }

  /* background-attachment: fixed causes rendering bugs on iOS — disable */
  #gallery { background-attachment: scroll; }
}

/* ── MOBILE (max 640px) ── */
@media (max-width: 640px) {

  /* ── NAV ── */
  nav {
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
    text-align: center;
  }
  .nav-links {
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nav-links a {
    font-size: 0.65rem;
    padding: 0.35em 0.6em;
  }

  /* ── HERO ── */
  header { min-height: 100svh; }

  .logo-eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }

  /* Canvas shapes: reduce to fewer, smaller shapes on mobile */
  #shapeCanvas { opacity: 0.7; }

  .btn-shop {
    font-size: 0.75rem;
    padding: 0.9em 2em;
    margin-top: 2rem;
    /* Simplify clip-path on small screens */
    clip-path: none;
  }

  /* ── SECTIONS ── */
  section { padding: 3.5rem 1rem; }

  .section-title { font-size: clamp(2rem, 8vw, 3rem); }
  .section-divider { margin: 0.8rem auto 2.5rem; }

  /* ── GALLERY ── */
  .gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 0.2rem;
  }

  .art-card:hover {
    /* Disable tilt/lift hover on touch — it sticks */
    transform: none;
    box-shadow: none;
  }

  .art-title { font-size: 1.15rem; }
  .art-price { font-size: 1.6rem; }

  /* ── HOW TO BUY ── */
  .steps {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 420px;
    margin: 0 auto;
  }

  .step { padding: 1.5rem 1.2rem; }
  .step-num { font-size: 2.5rem; }

  /* ── PAYMENT ── */
  .payment-cards {
    flex-direction: column;
    align-items: center;
  }
  .payment-card {
    max-width: 100%;
    width: 100%;
  }

  /* ── FOOTER ── */
  footer { padding: 2.5rem 1rem; }
  .footer-logo { font-size: 1.5rem; }

  /* ── MODAL ── */
  .modal-overlay { padding: 0.75rem; align-items: flex-end; }

  .modal {
    padding: 1.5rem 1.2rem;
    max-height: 92svh;
    border-bottom: none;
    /* Slide up from bottom on mobile */
    border-radius: 16px 16px 0 0;
    animation: modalSlideUp 0.35s cubic-bezier(.23,1.2,.32,1) both;
  }
  .modal::before { margin: -1.5rem -1.2rem 1.5rem; }

  .modal h2 { font-size: 1.5rem; }

  .modal-pay-cards { flex-direction: column; }
  .modal-pay-option { min-width: unset; }

  .btn-purchase { font-size: 0.7rem; padding: 0.85em 1em; }

  .radio-group { flex-direction: column; gap: 0.6rem; }

  /* ── FORM ── */
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group textarea {
    font-size: 1rem; /* Prevents iOS auto-zoom on focus (must be ≥ 16px equiv) */
  }
}

/* ── SMALL MOBILE (max 380px) ── */
@media (max-width: 380px) {
  .logo-badge { font-size: clamp(2.8rem, 14vw, 4rem); }
  .nav-links a { font-size: 0.6rem; }
  .art-price { font-size: 1.4rem; }
}

/* ── EXTRA: slide-up modal animation for mobile ── */
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── TOUCH DEVICES: remove hover effects that get stuck ── */
@media (hover: none) {
  .art-card:hover {
    transform: none;
    box-shadow: none;
  }
  .art-card:hover::before { border-width: 0; }
  .btn-purchase:hover:not(:disabled) { transform: none; }
  .btn-shop:hover { transform: none; box-shadow: none; }
  .nav-links a:hover::after { width: 0; }
  .payment-card:hover { transform: none; box-shadow: none; }
}

/* ── REDUCE MOTION: respect system preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  #shapeCanvas { display: none; }
}