/* ============================================================
   Handmade Jewelry Shop — Frontend Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Nunito:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --gold:         #C9963A;
  --gold-light:   #E8C97A;
  --gold-pale:    #F5E9CC;
  --gold-deep:    #A07828;
  --rose:         #C17B7B;
  --cream:        #FDF8F2;
  --warm-white:   #FFFCF7;
  --dark:         #2A1F1A;
  --medium:       #6B4F3A;
  --text:         #3D2B1F;
  --text-light:   #7A6054;
  --border:       #E8D5B7;
  --shadow-sm:    rgba(42,31,26,0.08);
  --shadow:       rgba(42,31,26,0.14);
  --shadow-lg:    rgba(42,31,26,0.24);

  --ff-head:   'Playfair Display', Georgia, serif;
  --ff-body:   'Nunito', system-ui, sans-serif;
  --ff-script: 'Dancing Script', cursive;

  --ease:      cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur:       0.3s;
  --dur-slow:  0.6s;
  /* Height of the fixed nav. Pages that start their content directly beneath
     it need this much clearance or their first line is hidden -- which is what
     happened to the title of every custom content page. main.js measures the
     real nav and overwrites this; the value here is the fallback. */
  --nav-h:     92px;

  --radius:    14px;
  --radius-sm: 7px;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; height: 100%; }
body {
  font-family: var(--ff-body);
  color: var(--text);
  background: var(--warm-white);
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }
button { font-family: var(--ff-body); }

/* ── Typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-head);
  line-height: 1.2;
  color: var(--dark);
}
.script { font-family: var(--ff-script); color: var(--gold); }

/* ── Layout ─────────────────────────────────────────────────── */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* ── Section Header ─────────────────────────────────────────── */
.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-header .eyebrow {
  display: inline-block;
  font-family: var(--ff-script);
  font-size: 1.35rem;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.section-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.8rem;
}
.section-header p {
  color: var(--text-light);
  max-width: 580px;
  margin: 0 auto;
  font-size: 1.05rem;
}
.divider {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 160px;
  margin: 1.2rem auto 0;
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-light);
}
.divider .gem { color: var(--gold); font-size: 0.75rem; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  text-align: center;
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold);
  /* Derived in includes/theme.php from whatever --gold actually is, because
     white on the default gold is 2.66:1 -- on the buy button of every shop.
     The fallback is the old value, for the seconds before the theme tag
     loads and for anything rendering without it. */
  color: var(--on-gold, #fff);
  border-color: var(--gold);
}
.btn-gold:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,150,58,0.35);
}
.btn-outline-light {
  background: transparent;
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.55);
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  transform: translateY(-2px);
}
.btn-dark {
  background: var(--dark);
  color: var(--gold-light);
  border-color: var(--dark);
}
.btn-dark:hover {
  background: var(--medium);
  border-color: var(--medium);
  transform: translateY(-2px);
}
.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--on-gold, #fff);
  transform: translateY(-2px);
}

/* ── Scroll Reveal ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ── Navigation ──────────────────────────────────────────────── */
.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  padding: 1.3rem 0;
  transition: background var(--dur-slow) var(--ease),
              box-shadow  var(--dur-slow) var(--ease),
              padding     var(--dur-slow) var(--ease),
              top         var(--dur-slow) var(--ease);
}
/* ── Short pages ──
   With most homepage sections switched off the page can be shorter than the
   window, and the footer sat wherever the content stopped with dead ground
   below it. Nothing is broken by that, but it reads as a page that failed to
   load rather than a page with little on it. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > .site-footer { margin-top: auto; }

/* ── No hero to float over ──
   The nav is fixed so it can sit transparently on the hero image. With the
   hero switched off there is nothing to float over and nothing holding the
   page down, so the first section rendered underneath it.

   Sticky pins on scroll exactly as fixed does, and it takes up room in the
   flow -- which is the part that matters here. A padding offset would have to
   guess a height that is 68px at desktop, 96px on a phone and 130px at tablet
   where the links wrap. */
body.no-hero .site-nav {
  position: sticky;
  inset: auto;
  top: 0;
}

.site-nav.scrolled {
  background: rgba(253,248,242,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 24px var(--shadow);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 0.7rem 0;
}

/* Fixed navigation must not sit on top of the section somebody just asked to
   see. main.js replaces --nav-h with the measured height after load; the
   generous fallback is what protects the very first hash jump before that
   script has run. */
:where(#home, #collections, #custom-orders, #about, #newsletter, #contact) {
  scroll-margin-top: calc(var(--nav-h, 8rem) + 1rem);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { display: flex; flex-direction: column; line-height: 1.1; }
.nav-logo .logo-name {
  font-family: var(--ff-head);
  font-size: 1.45rem;
  font-weight: 700;
  font-style: italic;
  color: #fff;
  transition: color var(--dur);
}
.site-nav.scrolled .nav-logo .logo-name { color: var(--dark); }
.nav-logo .logo-tag {
  font-family: var(--ff-script);
  font-size: 0.78rem;
  color: var(--gold-light);
  transition: color var(--dur);
}
.site-nav.scrolled .nav-logo .logo-tag { color: var(--gold); }

.nav-links {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.nav-links a {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(232, 201, 122, 0.82);
  position: relative;
  transition: color var(--dur);
}
.site-nav.scrolled .nav-links a { color: var(--text); }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
/* Touch. The hamburger takes over below 768px, so on a tablet in portrait --
   a touch device -- these are the real navigation and they were 23px tall.
   The underline animation is drawn on ::after at a fixed offset, so growing
   the box would drag it away from the text; the extra height goes on as
   padding with the line pinned back to where the text ends. */
@media (pointer: coarse) {
  .nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .nav-links a::after { bottom: 8px; }
}
.nav-links a:hover { color: var(--gold-light); }
.site-nav.scrolled .nav-links a:hover { color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  color: #fff;
  transition: color var(--dur);
  line-height: 0;
}
.site-nav.scrolled .nav-toggle { color: var(--dark); }

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(155deg, #180d08 0%, #2d1810 35%, #3e2519 65%, #271509 100%);
  background-color: #180d08; /* explicit dark base — transparent image pixels show theme color, not page bg */
  background-size: cover;
  background-position: center top;
}
.hero-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
  animation: orb-drift 12s ease-in-out infinite alternate;
}
.hero-orb:nth-child(1) {
  width: 500px; height: 500px;
  background: var(--gold);
  top: -100px; left: -100px;
  animation-duration: 14s;
}
.hero-orb:nth-child(2) {
  width: 400px; height: 400px;
  background: var(--rose);
  bottom: -80px; right: -60px;
  animation-duration: 10s;
  animation-delay: -4s;
}
.hero-orb:nth-child(3) {
  width: 300px; height: 300px;
  background: var(--gold-light);
  top: 40%; left: 55%;
  animation-duration: 16s;
  animation-delay: -7s;
}
@keyframes orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.1); }
}

/* Sparkles */
.sparkles { position: absolute; inset: 0; pointer-events: none; }
.sparkle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-light), transparent 70%);
  opacity: 0;
  animation: sparkle-anim linear infinite;
}
@keyframes sparkle-anim {
  0%   { opacity: 0;   transform: translateY(0)    scale(0);   }
  15%  { opacity: 0.9; transform: translateY(-15px) scale(1);   }
  85%  { opacity: 0.3; transform: translateY(-70px) scale(0.6); }
  100% { opacity: 0;   transform: translateY(-90px) scale(0);   }
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 820px;
  padding: 2rem;
}
.hero-eyebrow {
  font-family: var(--ff-script);
  font-size: 1.5rem;
  color: var(--gold-light);
  margin-bottom: 1rem;
  opacity: 0;
  animation: fade-up 0.9s var(--ease) 0.3s forwards;
}
.hero h1 {
  font-size: clamp(2.8rem, 8vw, 5.5rem);
  color: #fff;
  font-style: italic;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fade-up 0.9s var(--ease) 0.55s forwards;
  text-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
.hero h1 .gold { color: var(--gold-light); }
.hero-subtext {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.78);
  max-width: 560px;
  margin: 0 auto 2.5rem;
  line-height: 1.85;
  opacity: 0;
  animation: fade-up 0.9s var(--ease) 0.8s forwards;
}
.hero-ctas {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fade-up 0.9s var(--ease) 1.05s forwards;
}
.hero-scroll {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.4);
  font-size: 0.68rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  animation: scroll-bounce 2.5s ease-in-out infinite;
}
.hero-scroll::after {
  content: '';
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Product Card ─────────────────────────────────────────────── */
.product-card {
  background: var(--warm-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 22px var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  cursor: pointer;
  position: relative;
}
.product-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 14px 44px var(--shadow);
}
.product-card-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream);
}
.product-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease);
}
.product-card:hover .product-card-img img { transform: scale(1.08); }
.product-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--gold-pale) 0%, var(--cream) 100%);
  font-size: 3rem;
  color: var(--gold);
}
.product-badge {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  background: var(--gold);
  color: var(--on-gold, #fff);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
}
.product-card-body { padding: 1.4rem; }
.product-cat {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.product-card-body h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.product-desc-short {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 1.1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.product-price {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  color: var(--gold);
  font-weight: 600;
  line-height: 1.1;
}
.product-price .bulk-tag {
  display: block;
  font-family: var(--ff-body);
  font-size: 0.68rem;
  color: var(--text-light);
  font-weight: 500;
  margin-top: 0.15rem;
}
/* The product title and "View Details" are links now, not text and a button,
   so a card can be shared, bookmarked and crawled. They should look exactly as
   they did before. */
.product-card-body h3 .product-link {
  color: inherit;
  text-decoration: none;
}
.product-card-body h3 .product-link:hover { color: var(--gold); }

.btn-view-detail {
  display: inline-block;
  text-decoration: none;
  background: none;
  border: 2px solid var(--gold);
  color: var(--gold);
  padding: 0.45rem 1.1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-view-detail:hover {
  background: var(--gold);
  color: var(--on-gold, #fff);
}
/* The primary action on every card in the grid, and it was 37px tall. Grown
   only on touch: the desktop grid is denser on purpose. */
@media (pointer: coarse) {
  .btn-view-detail {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Featured Section ─────────────────────────────────────────── */
/* Section bands ------------------------------------------------
   Assigned in PHP from a section's position among the ones actually
   visible, not from its own identity, so switching a section off (or
   simply having no featured products) cannot leave two identical bands
   touching. Hero, custom orders and contact keep their own treatment. */
.band-tint  { background: var(--cream); }
.band-light { background: var(--warm-white); }

.section-featured {
  padding: 6rem 0;
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 340px));
  justify-content: center;
  gap: 2rem;
}

/* ── Collections Section ──────────────────────────────────────── */
.section-collections {
  padding: 1rem 0;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}
.products-grid .product-card {
  display: none;
}
.products-grid .product-card.visible {
  display: block;
  animation: card-appear 0.4s var(--ease) both;
}
@keyframes card-appear {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}
.no-products-msg {
  grid-column: 1/-1;
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-light);
  font-size: 1.05rem;
}

/* ── Custom Orders Section ────────────────────────────────────── */
.section-custom-orders {
  padding: 6rem 0;
  background: linear-gradient(155deg, #1c0f09 0%, #2e1a0f 40%, #3e2216 100%);
  position: relative;
  overflow: hidden;
}
.section-custom-orders::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at 10% 80%, rgba(201,150,58,0.12) 0%, transparent 55%),
                    radial-gradient(ellipse at 90% 20%, rgba(193,123,123,0.1) 0%, transparent 50%);
}
.co-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}
.co-text .eyebrow {
  font-family: var(--ff-script);
  font-size: 1.35rem;
  color: var(--gold-light);
  display: block;
  margin-bottom: 0.4rem;
}
.co-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: #fff;
  margin-bottom: 1.2rem;
}
.co-text p {
  color: rgba(255,255,255,0.72);
  margin-bottom: 1.8rem;
  font-size: 1.05rem;
  line-height: 1.85;
}
.event-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.event-tag {
  background: rgba(201,150,58,0.18);
  border: 1px solid rgba(201,150,58,0.38);
  color: var(--gold-light);
  padding: 0.3rem 0.85rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
}
/* Quick form inside custom orders */
.quick-form {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius);
  padding: 2.2rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.quick-form h3 {
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 1.4rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.1rem; }
.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 0.35rem;
  letter-spacing: 0.3px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 0.9rem;
  transition: border-color var(--dur);
  -webkit-appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.28); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold-light);
  background: rgba(255,255,255,0.1);
}
.form-group select option { color: var(--dark); background: #fff; }

/* ── About Section ────────────────────────────────────────────── */
.section-about {
  padding: 6.5rem 0;
}
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.about-visual { position: relative; }
.about-img-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: 0 24px 64px var(--shadow-lg);
  background: linear-gradient(135deg, var(--gold-pale), var(--cream));
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-img-placeholder {
  font-size: 5rem;
  color: var(--gold);
  opacity: 0.4;
}
.about-accent-circle {
  position: absolute;
  top: -1.8rem; right: -1.8rem;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: var(--gold-pale);
  border: 3px solid var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--ff-script);
  font-size: 0.92rem;
  color: var(--gold-deep);
  line-height: 1.3;
  padding: 0.5rem;
  box-shadow: 0 8px 28px var(--shadow);
}
.about-text .eyebrow {
  font-family: var(--ff-script);
  color: var(--gold);
  font-size: 1.3rem;
  display: block;
  margin-bottom: 0.4rem;
}
.about-text h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 1.4rem; }
.about-text p {
  color: var(--text-light);
  margin-bottom: 1.4rem;
  font-size: 1.04rem;
  line-height: 1.9;
}
.about-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.8rem;
}
.pillar {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.pillar-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 0.1rem; }
.pillar h4 { font-size: 0.92rem; margin-bottom: 0.15rem; }
.pillar p  { font-size: 0.8rem; color: var(--text-light); margin: 0; }

/* ── Wholesale Banner ─────────────────────────────────────────── */
.section-wholesale {
  padding: 4.5rem 0;
}
.wholesale-card {
  background: linear-gradient(135deg, var(--gold-pale) 0%, #fff8ed 100%);
  border: 1px solid var(--gold-light);
  border-radius: var(--radius);
  padding: 2.8rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.wholesale-icon { font-size: 1.6rem; vertical-align: middle; margin-right: 0.45rem; }
.wholesale-text h3 { font-size: 1.55rem; margin-bottom: 0.7rem; }
.wholesale-text p  { color: var(--text-light); margin-bottom: 1.4rem; font-size: 1rem; }

/* ── Contact Section ──────────────────────────────────────────── */
.section-contact {
  padding: 5.5rem 0;
  background: linear-gradient(160deg, var(--gold-pale) 0%, var(--cream) 100%);
}
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.8rem;
  max-width: 900px;
  margin: 0 auto;
}
.contact-card {
  background: var(--warm-white);
  border-radius: var(--radius);
  padding: 2.2rem 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px var(--shadow-sm);
  transition: transform var(--dur) var(--ease);
}
.contact-card:hover { transform: translateY(-4px); }
.contact-card-icon  { font-size: 2.2rem; margin-bottom: 0.9rem; }
.contact-card h4    { font-size: 1.05rem; margin-bottom: 0.4rem; }
.contact-card p, .contact-card a {
  color: var(--text-light);
  font-size: 0.93rem;
  line-height: 1.6;
  transition: color var(--dur);
}
.contact-card a:hover { color: var(--gold); }

.social-row {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--gold-light);
  color: var(--gold);
  font-size: 1rem;
  transition: all var(--dur) var(--ease);
}
.social-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold, #fff);
  transform: translateY(-2px);
}
.social-btn:hover svg { fill: var(--on-gold, #fff); }

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,0.65);
  padding: 3.5rem 0 1.5rem;
  text-align: center;
}
.footer-logo {
  font-family: var(--ff-head);
  font-size: 1.65rem;
  color: #fff;
  font-style: italic;
  margin-bottom: 0.2rem;
}
.footer-tagline {
  font-family: var(--ff-script);
  color: var(--gold-light);
  font-size: 1rem;
  display: block;
  margin-bottom: 1.6rem;
}
.footer-nav {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.footer-nav a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  transition: color var(--dur);
}
.footer-nav a:hover { color: var(--gold-light); }
/* Footer links were 21-22px tall. Keyed to the pointer rather than to a
   width: a tablet in portrait is 768px wide and is still a finger. */
@media (pointer: coarse) {
  .footer-nav a,
  .footer-page-nav a,
  .footer-policy-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.footer-page-nav,
.footer-policy-nav {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
/* A page the owner wrote is content; a policy is small print. Same row shape,
   one step apart in weight, so the two groups read as two groups. */
.footer-page-nav a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.62);
  transition: color var(--dur);
}
.footer-page-nav a:hover { color: var(--gold-light); }
.footer-policy-nav a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  transition: color var(--dur);
  white-space: nowrap;
}
.footer-policy-nav a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.5rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.3);
}

/* ── Product Modal ────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,18,12,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  /* A closed overlay is transparent and click-through, but its buttons and
     inputs were still in the tab order -- a keyboard user tabbing down the
     page fell into an invisible dialog. That is fixed in main.js with `inert`
     rather than here with visibility:hidden, because hiding it in CSS has to
     wait for the fade to finish and transitions do not run in a background
     tab, which is exactly when the element would stay focusable. */
  transition: opacity var(--dur) var(--ease);
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal {
  background: var(--warm-white);
  border-radius: var(--radius);
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: scale(0.88) translateY(24px);
  transition: transform 0.4s var(--ease);
  position: relative;
}
.modal-overlay.open .modal {
  transform: scale(1) translateY(0);
}
.modal-img-pane {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius) 0 0 var(--radius);
  background: linear-gradient(135deg, var(--gold-pale), var(--cream));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}
.modal-img-pane img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.modal-img-placeholder { font-size: 5rem; color: var(--gold); opacity: 0.4; }

/* ── Gallery thumbnail strip (v5) ──────────────────────────── */
.modal-gallery-strip {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.modal-gallery-strip::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 5px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color .15s, opacity .15s;
  opacity: .7;
}
.gallery-thumb:hover  { opacity: 1; border-color: rgba(255,255,255,.6); }
.gallery-thumb.active { opacity: 1; border-color: var(--gold); }
.modal-close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  /* 44px on any touch device, not only on a phone. The <=600px rule below
     already did this; a tablet is also a finger, and this was 30px there --
     on the one control that dismisses the dialog. */
  width: 34px; height: 34px;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark);
  transition: all var(--dur);
  z-index: 2;
  line-height: 1;
}
.modal-close:hover {
  background: var(--gold);
  color: var(--on-gold, #fff);
  transform: rotate(90deg);
}
/* 44px on any touch device, not only on a phone. The <=600px block further
   down already did this; a tablet is also a finger, and this was 30px there --
   on the one control that dismisses the dialog. It has to sit after the base
   rule, or the 34px wins on source order. */
@media (pointer: coarse) {
  .modal-close { width: 44px; height: 44px; }
}
.modal-body {
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.modal-cat {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
/* overflow-wrap: anywhere because product names are entered by shop owners,
   not by typographers. A single unbroken run -- a long SKU, a hashtag, a
   run-together name, a URL pasted into a description -- was pushing past the
   right edge of the modal and being clipped by it, so the end of the name was
   simply unreadable and unselectable. Breaking mid-word is ugly; losing the
   text is worse. */
.modal-name {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.modal-description {
  color: var(--text-light);
  font-size: 0.93rem;
  line-height: 1.8;
  flex: 1;
  margin-bottom: 1.4rem;
  overflow-wrap: anywhere;
}
.modal-price-box {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.2rem;
  margin-bottom: 1.4rem;
}
.modal-msrp {
  font-family: var(--ff-head);
  font-size: 1.9rem;
  color: var(--gold);
  font-weight: 600;
}
.modal-bulk {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 0.25rem;
}
.modal-actions { display: flex; flex-direction: column; gap: 0.7rem; }
.btn-paypal {
  width: 100%;
  background: #003087;
  color: #fff;
  border: none;
  padding: 0.85rem 1.5rem;
  border-radius: 50px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  letter-spacing: 0.2px;
}
.btn-paypal:hover {
  background: #002060;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0,48,135,0.38);
}
.btn-paypal svg { flex-shrink: 0; }
.btn-custom-link {
  width: 100%;
  background: none;
  border: 2px solid var(--gold);
  color: var(--gold);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}
.btn-custom-link:hover {
  background: var(--gold);
  color: var(--on-gold, #fff);
}
.paypal-not-configured {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
}
.paypal-not-configured a { color: var(--gold); text-decoration: underline; }

/* ── Toast ────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  background: var(--dark);
  color: #fff;
  padding: 0.9rem 2rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 600;
  z-index: 9999;
  transition: transform 0.4s var(--ease);
  border-left: 4px solid var(--gold);
  white-space: nowrap;
  box-shadow: 0 8px 30px var(--shadow-lg);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 960px) {
  .co-inner, .about-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-visual { max-width: 380px; margin: 0 auto; }
  .modal { grid-template-columns: 1fr; max-width: 480px; }
  /* Stacked, the picture sits above everything else, and at 340px it was
     taking most of a phone screen before the name or the price appeared --
     a quick view you have to scroll to read is not a quick view. Capped
     against the viewport so it shrinks on short screens instead of always
     costing the same 260px. */
  .modal-img-pane {
    border-radius: var(--radius) var(--radius) 0 0;
    min-height: 200px;
    max-height: 40vh;   /* same cap the <=600px rule uses, so the two agree */
  }
  .wholesale-card { gap: 1.5rem; }
  /* Our Story + Custom & Event Orders — center text when stacked */
  .about-text, .co-text { text-align: center; }
  .about-pillars { justify-items: center; }
  .pillar { justify-content: center; }
  .event-tags { justify-content: center; }
}
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(253,248,242,0.98);
    backdrop-filter: blur(14px);
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
    box-shadow: 0 8px 30px var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    display: block;
    padding: 0.7rem 2rem;
    color: var(--text) !important;
  }
  .nav-toggle { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .about-pillars { grid-template-columns: 1fr; }
  .wholesale-card { padding: 2rem 1.5rem; }
}
@media (max-width: 480px) {
  .container { padding: 0 1.25rem; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .hero-ctas .btn { width: 100%; justify-content: center; max-width: 300px; }
  .featured-grid, .products-grid { grid-template-columns: 1fr; }
  .modal-body { padding: 1.5rem; }
}

/* ── Collections section — mobile spacing & sizing ──────────── */
@media (max-width: 640px) {
  /* Reduce the section's generous desktop padding */
  .section-collections { padding: 3.25rem 0 3.75rem; }

  /* Tighten the gap between the heading block and the first button row */
  .section-collections .section-header { margin-bottom: 1.75rem; }

  /* Reduced padding on the About section on mobile */
  .section-about { padding: 2.5rem 0; }

  /* Force "All rights reserved." onto its own line */
  .footer-rights { display: block; }

  /* Footer nav — 2-column grid: even rows, no orphaned links */
  .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem 1.5rem;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
  }

  /* Policy nav — 2-column grid: pairs up cleanly */
  .footer-policy-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem 1rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
  }
}

/* ============================================================
   v2 — Cart, Checkout, Sale Badges, Scroll-to-top, Modals
   ============================================================ */

/* ── Cart nav link — underline on word only, not the badge ── */
.nav-cart-link::after { display: none; }
.nav-cart-text { position: relative; }
.nav-cart-text::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-cart-link:hover .nav-cart-text::after { transform: scaleX(1); }

/* ── Admin / account / marketplace nav links ─────────────── */
.nav-admin-link,
.nav-account-link,
.nav-market-link {
  font-size: .78rem !important;
  font-weight: 600 !important;
  letter-spacing: .4px;
  padding: .3rem .75rem !important;
  border-radius: 20px;
  border: 1.5px solid currentColor;
  opacity: .7;
  transition: opacity .2s, background .2s, color .2s;
  white-space: nowrap;
}
.nav-admin-link::after,
.nav-account-link::after,
.nav-market-link::after { display: none !important; }
.nav-auth-group { display: flex; align-items: center; gap: 0.5rem; }
.nav-admin-link:hover,
.nav-account-link:hover,
.nav-market-link:hover {
  opacity: 1;
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold, #fff) !important;
}

/* ── Nav cart badge ───────────────────────────────────────── */
.nav-cart-link { position: relative; }
.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--on-gold, #fff);
  font-size: .68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Sale badge on product cards ─────────────────────────── */
.sale-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e05555;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 4px;
  letter-spacing: .5px;
  text-transform: uppercase;
  z-index: 2;
}
/* Product badge type colors */
.badge-new       { background: #3b82f6; }
.badge-best_seller { background: var(--gold); }
.badge-limited   { background: #ef4444; }
.badge-seasonal  { background: #22c55e; }
.badge-exclusive { background: #8b5cf6; }

/* Out of stock badge */
.out-of-stock-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(50,50,50,0.82);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 4px;
  letter-spacing: .5px;
  text-transform: uppercase;
  z-index: 2;
}
.product-card.out-of-stock .product-card-img img,
.product-card.out-of-stock .product-placeholder { opacity: 0.55; }
.product-card.out-of-stock .product-card-body { opacity: 0.7; }

.price-original {
  text-decoration: line-through;
  color: var(--text-light);
  font-size: .9rem;
}
.price-sale { color: var(--gold-deep); font-weight: 700; }

/* ── Buttons ─────────────────────────────────────────────── */
/* Scoped to :not(.btn) so cart/checkout standalone buttons get display:inline-block
   while the original hero .btn.btn-gold keeps display:inline-flex;align-items:center */
/* Higher specificity than .btn-gold, so this is the rule that actually paints
   Add to Cart on a product page -- and it was still white on gold. */
.btn-gold:not(.btn) {
  display: inline-block;
  background: var(--gold);
  color: var(--on-gold, #fff);
  padding: .7rem 1.6rem;
  border-radius: 6px;
  font-weight: 700;
  font-family: var(--ff-body);
  border: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  text-decoration: none;
}
.btn-gold:not(.btn):hover { background: var(--gold-deep); }
.btn-gold.btn-full { display: block; width: 100%; text-align: center; }
.btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
  padding: .6rem 1.4rem;
  border-radius: 6px;
  font-weight: 700;
  font-family: var(--ff-body);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.btn-outline:hover { background: var(--gold); color: var(--on-gold, #fff); }
.btn-link-gold {
  display: block;
  text-align: center;
  color: var(--gold);
  margin-top: .75rem;
  font-weight: 600;
}
.btn-paypal-checkout {
  display: block;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 1rem;
}
.btn-paypal-checkout img { margin: 0 auto; max-height: 50px; }

/* ── Page title ─────────────────────────────────────────── */
.page-title {
  font-family: var(--ff-head);
  font-size: 2rem;
  color: var(--dark);
  margin: 2.5rem 0 1.5rem;
}

/* ── Inner-page dark banner (gives transparent nav a real backdrop) ── */
.page-banner {
  background: linear-gradient(135deg, var(--dark) 0%, #3a2518 60%, #2a1a0e 100%);
  padding: 7.5rem 0 2.5rem;
  text-align: center;
}
.page-banner h1 {
  font-family: var(--ff-head);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--cream);
  margin: 0 0 0.3rem;
}
.page-banner .eyebrow {
  font-family: var(--ff-script);
  color: var(--gold);
  font-size: 1.2rem;
  display: block;
  margin-bottom: 0.5rem;
}
.page-banner p {
  color: rgba(253,248,242,0.75);
  max-width: 540px;
  margin: 0.5rem auto 0;
  font-size: 0.95rem;
}
.page-banner .back-link {
  font-size: 0.82rem;
  color: rgba(253,248,242,0.6);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1rem;
  transition: color var(--dur);
}
.page-banner .back-link:hover { color: var(--gold); }

/* ── Main nav ────────────────────────────────────────────── */
.main-nav {
  background: var(--warm-white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .9rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-brand {
  font-family: var(--ff-head);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--dark);
  font-weight: 600;
}
/* ── Selected size tag (cart + checkout) ────────────────── */
.item-size-tag {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-top: .3rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--gold-pale, #fdf4e3);
  border: 1.5px solid var(--gold);
  border-radius: 4px;
  padding: .18rem .5rem;
  white-space: nowrap;
}
.item-size-tag::before {
  content: '✦';
  font-size: .6rem;
  color: var(--gold);
}
/* ── Cart page ───────────────────────────────────────────── */
.cart-page { padding-top: 2.5rem; padding-bottom: 4rem; }
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}
.cart-row {
  display: grid;
  grid-template-columns: 72px 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.cart-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
}
.cart-row-name  { font-weight: 600; font-size: .95rem; margin-bottom: .2rem; }
.cart-row-price { font-size: .88rem; color: var(--text-light); }
.cart-row-qty   { display: flex; align-items: center; gap: .4rem; }
.qty-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  background: var(--cream);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.qty-input {
  width: 48px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .25rem;
  font-family: var(--ff-body);
  font-size: .9rem;
}
.cart-row-total { font-weight: 700; min-width: 60px; text-align: right; }
.cart-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-light); font-size: 1.3rem;
  line-height: 1; padding: 0 .25rem;
  transition: color var(--dur);
}
.cart-remove:hover { color: #e05555; }

.cart-empty-state {
  text-align: center;
  padding: 4rem 0;
  color: var(--text-light);
}
.cart-empty-state p  { font-size: 1.1rem; margin-bottom: 1.5rem; }
.cart-empty          { color: var(--text-light); padding: 2rem 0; }

/* ── Cart / Checkout summary sidebar ────────────────────── */
.cart-summary, .checkout-right {
  background: var(--cream);
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  position: sticky;
  top: 80px;
}
.cart-summary h2, .checkout-right h2 {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin-bottom: 1rem;
}
.summary-table td { padding: .35rem 0; }
.summary-table td:last-child { text-align: right; font-weight: 600; }
.sum-total td { border-top: 1px solid var(--border); padding-top: .75rem; font-size: 1.05rem; }
.shipping-note { font-size: .8rem; color: var(--text-light); margin-bottom: 1rem; }

/* ── Coupon row ─────────────────────────────────────────── */
.coupon-row {
  display: flex;
  gap: .5rem;
  margin-bottom: .5rem;
}
.coupon-row input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .5rem .75rem;
  font-family: var(--ff-body);
  font-size: .9rem;
  text-transform: uppercase;
}
.coupon-msg      { font-size: .85rem; min-height: 1.2em; }
.coupon-msg.ok   { color: #4a8a5a; }
.coupon-msg.err  { color: #c05050; }

/* ── Checkout page ───────────────────────────────────────── */
.checkout-page { padding-top: 5.5rem; padding-bottom: 4rem; }
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}
.section-heading {
  font-family: var(--ff-head);
  font-size: 1.1rem;
  color: var(--dark);
  margin-bottom: .75rem;
}
.checkout-items { margin-bottom: 1rem; }
.checkout-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
}
.checkout-item img {
  width: 56px; height: 56px;
  object-fit: cover; border-radius: 6px;
}
.ci-name  { font-weight: 600; font-size: .92rem; }
.ci-qty   { font-weight: 400; color: var(--text-light); }
.ci-price { font-size: .9rem; color: var(--gold); font-weight: 700; }

/* ── Shipping options ───────────────────────────────────── */
.shipping-options { display: flex; flex-direction: column; gap: .6rem; }
.shipping-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: .75rem 1rem;
  cursor: pointer;
  transition: border-color var(--dur);
}
.shipping-option.selected, .shipping-option:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-pale);
}
.shipping-option input { display: none; }
.so-name  { font-weight: 600; flex: 1; }
.so-price { font-weight: 700; color: var(--gold); transition: opacity .2s; }
.so-desc  { font-size: .8rem; color: var(--text-light); margin-left: auto; }
.so-free-badge { display: none; font-weight: 700; color: var(--gold-deep); font-size: .85rem; }

/* Free shipping active — strike prices, show Free badge */
.shipping-options.free-active .so-price {
  text-decoration: line-through;
  opacity: .45;
}
.shipping-options.free-active .so-free-badge { display: inline; }

/* ── Consent / Marketing opt-in ─────────────────────────── */
.consent-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .6rem;
  font-size: .87rem;
  color: var(--text-light);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.consent-row input { margin-top: 3px; flex-shrink: 0; }
.consent-row a { color: var(--gold); text-decoration: underline; }

/* ── Checkout secure note ───────────────────────────────── */
.checkout-secure {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-light);
  justify-content: center;
  margin-top: .75rem;
}
.policy-links {
  text-align: center;
  font-size: .8rem;
  color: var(--text-light);
  margin-top: .5rem;
}
.policy-links a, .policy-link { color: var(--gold); text-decoration: underline; cursor: pointer; }

/* ── Policy modal ───────────────────────────────────────── */
/* Uses the shared .modal-overlay / .open pattern — no duplicate base rule needed */
.modal-box {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 620px;
  width: 100%;
  max-height: 82vh;
  overflow-y: auto;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s var(--ease);
}
#policyModal.open .modal-box {
  transform: translateY(0);
}
#policyModal .modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none; border: none;
  font-size: 1.5rem; cursor: pointer;
  color: var(--text-light);
  line-height: 1;
  /* The product modal's close button grows to 44px below 600px; this one
     never did, and it is the only way out of a full-screen policy on a
     phone. 39x39 is a miss you cannot recover from without the back
     button. */
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#policyModal .modal-close:hover { color: var(--text); }
.policy-content { font-size: .92rem; line-height: 1.8; }
.policy-content h1, .policy-content h2, .policy-content h3 {
  font-family: 'Playfair Display', serif;
  margin: 1.25rem 0 .5rem;
}
.policy-content p { margin-bottom: .75rem; }
.policy-content ul, .policy-content ol { padding-left: 1.5rem; margin-bottom: .75rem; }
@media (max-width: 500px) {
  .modal-box { padding: 1.25rem 1rem; max-height: 90vh; }
}

/* ── Scroll to top button ───────────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--on-gold, #fff);
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  z-index: 500;
  pointer-events: none;
  box-shadow: 0 4px 12px var(--shadow);
}
.scroll-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Site footer ─────────────────────────────────────────── */
.site-footer {
  background: var(--dark);
  color: rgba(255,255,255,.6);
  text-align: center;
  padding: 1.5rem;
  font-size: .85rem;
}
.site-footer a { color: var(--gold-light); }

/* ── Responsive tweaks for cart/checkout ────────────────── */
@media (max-width: 768px) {
  .cart-layout, .checkout-layout {
    grid-template-columns: 1fr;
  }
  .cart-summary, .checkout-right { position: static; }
  .cart-row {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
  }
  .cart-row-qty, .cart-row-total, .cart-remove { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════
   v4.1 — Mobile UX Polish Pass
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Global mobile typography & spacing ───────────────────
   Clamp hero h1 more aggressively, ensure body text ≥ 16px,
   tighten paragraph line-height on very small screens.        */
@media (max-width: 480px) {
  html { font-size: 16px; }            /* prevent iOS auto-zoom */

  body { line-height: 1.65; }

  p { line-height: 1.7; }

  .section-header h2 {
    font-size: clamp(1.55rem, 7vw, 2rem);
  }

  .hero h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .hero-subtext {
    font-size: 0.97rem;
    line-height: 1.7;
  }
}

@media (max-width: 320px) {
  .container { padding: 0 1rem; }

  .hero h1 { font-size: clamp(1.7rem, 11vw, 2.4rem); }

  .hero-subtext { font-size: 0.9rem; }
}


/* ── 2. Navigation — mobile hamburger improvements ───────────
   Ensure 44 px touch targets, better padding, no overflow at 320 px */
@media (max-width: 768px) {
  .nav-links a {
    min-height: 44px;
    display: flex !important;   /* override the display:block already set */
    align-items: center;
    padding: 0 2rem;            /* vertical space comes from min-height */
    font-size: 0.95rem;
  }

  .nav-links {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 320px) {
  .nav-logo .logo-name { font-size: 1.15rem; }
  .nav-logo .logo-tag  { font-size: 0.7rem; }
}


/* ── 3. Hero section ─────────────────────────────────────────
   Reduce height on portrait mobile, full-width CTAs ≤ 400 px,
   prevent text overflow at 320 px.                            */
@media (max-width: 480px) {
  .hero {
    min-height: min(85vh, 600px);
  }

  .hero-content {
    padding: 1.25rem;
    max-width: 100%;
  }
}

@media (max-width: 400px) {
  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
    max-width: 100%;
  }
}

@media (max-width: 320px) {
  .hero h1 { overflow-wrap: break-word; word-break: break-word; }
  .hero-subtext { font-size: 0.88rem; }
  .hero-eyebrow { font-size: 1.1rem; }
}


/* ── 4. Product cards grid ───────────────────────────────────
   Single-column ≤ 480 px, locked aspect ratio, full-card tap,
   overflow-safe product names.                                */
@media (max-width: 480px) {
  .featured-grid,
  .products-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  /* Lock image aspect ratio to prevent layout shift */
  .product-card-img {
    aspect-ratio: 4 / 3;
  }

  /* Make the entire card a tappable flex column */
  .product-card {
    display: flex;
    flex-direction: column;
  }

  /* Prevent long product names from overflowing */
  .product-card-body h3 {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}


/* ── 5. Product modal ────────────────────────────────────────
   Near-full-screen on mobile, oversized close button (44 × 44),
   image capped at 40vh, 44px size-picker targets.             */
@media (max-width: 600px) {
  .modal-overlay {
    padding: 0;
    align-items: flex-end;        /* slide up from bottom edge */
  }

  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius) var(--radius) 0 0;
    grid-template-columns: 1fr;
  }

  .modal-img-pane {
    border-radius: var(--radius) var(--radius) 0 0;
    min-height: unset;
    max-height: 40vh;
    overflow: hidden;
  }

  .modal-img-pane img {
    position: static;
    width: 100%;
    height: 100%;
    max-height: 40vh;
    object-fit: cover;
  }

  .modal-close {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    top: 0.6rem;
    right: 0.6rem;
  }

  .modal-body {
    padding: 1.25rem;
  }
}

/* Size picker / option buttons — ensure 44 px touch targets */
.size-btn,
.color-btn,
[data-size],
[data-color] {
  min-height: 44px;
  min-width: 44px;
}


/* ── 6. Cart page ────────────────────────────────────────────
   Larger qty controls (≥ 36 px), sticky total at bottom on mobile */
@media (max-width: 768px) {
  .qty-btn {
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
  }

  .qty-input {
    height: 36px;
    font-size: 1rem;
  }

  /* Sticky cart summary at bottom of viewport */
  .cart-summary {
    position: sticky;
    bottom: 0;
    z-index: 50;
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: 0 -4px 24px var(--shadow);
    background: var(--cream);
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 480px) {
  .cart-row {
    gap: 0.75rem;
  }

  .cart-row-name { font-size: 0.9rem; }

  .cart-remove {
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ── 7. Checkout page ────────────────────────────────────────
   Single column, full-width payment button sticky at bottom,
   larger shipping option touch targets.                        */
@media (max-width: 768px) {
  .checkout-page { padding-top: 5rem; padding-bottom: 6rem; }

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  /* Pull the order summary panel above the form on mobile */
  .checkout-right {
    order: -1;
    position: static;
  }

  /* Sticky payment / submit button */
  .btn-gold.btn-full {
    position: sticky;
    bottom: 0;
    z-index: 60;
    width: 100%;
    border-radius: 0;
    padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .btn-gold.btn-full {
    font-size: 1rem;
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  /* Larger shipping option touch targets */
  .shipping-option {
    padding: 1rem;
    min-height: 52px;
  }

  .shipping-options {
    gap: 0.75rem;
  }
}


/* ── 8. Forms — general mobile polish ───────────────────────
   44 px min-height for inputs/selects/textareas, clear labels,
   prevent iOS auto-zoom (font-size ≥ 1rem on focus).          */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .form-group input,
  .form-group select,
  .form-group textarea {
    min-height: 44px;
    font-size: 1rem;        /* prevents iOS zoom on focus */
    padding: 0.7rem 0.9rem;
  }

  textarea,
  .form-group textarea {
    min-height: 100px;
  }

  .form-group label {
    font-size: 0.88rem;
    margin-bottom: 0.45rem;
    display: block;
  }

  /* Coupon input */
  .coupon-row input {
    min-height: 44px;
    font-size: 1rem;
  }
}

/* Error state visibility */
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
  border-color: #e05555 !important;
  background: #fff5f5 !important;
}


/* ── 9. Filter / sort bar (v4.1) ────────────────────────────
   Stack vertically ≤ 600 px, price buttons wrap, sort full-width */
@media (max-width: 600px) {
  .filter-bar,
  .sort-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  /* Price / filter buttons: wrap and fill row */
  .price-filters,
  .filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .price-filters .btn,
  .price-filters button,
  .filter-buttons .btn,
  .filter-buttons button {
    flex: 1 1 auto;
    min-width: calc(50% - 0.25rem);
    justify-content: center;
    text-align: center;
  }

  /* Sort select: full width */
  .sort-select,
  select.sort-select,
  [name="sort"],
  [id="sort"] {
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
  }
}


/* ── 10. Gift wrap option ────────────────────────────────────
   Styles for .gift-wrap-option used in checkout.              */
.gift-wrap-option {
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  background: var(--warm-white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s;
}

.gift-wrap-option:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-pale);
}

.gift-wrap-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
}

.gift-wrap-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  flex-shrink: 0;
}

.gift-wrap-icon  { font-size: 1.4rem; }

.gift-wrap-price {
  display: block;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 0.1rem;
}


/* ── 11. Order status timeline ──────────────────────────────
   Desktop: horizontal row; mobile: vertical stack with a
   connecting line on the left side.                           */
.order-status-timeline {
  display: flex;
  gap: 0;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  padding: 0.5rem 0;
  overflow-x: auto;
}

/* Horizontal connector line */
.order-status-timeline::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 60px;
  position: relative;
  z-index: 1;
}

.timeline-step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: border-color 0.2s, background 0.2s;
}

.timeline-step.active .timeline-step-icon,
.timeline-step.done   .timeline-step-icon {
  border-color: var(--gold);
  background: var(--gold-pale);
}

.timeline-step-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  color: var(--text-light);
  letter-spacing: 0.3px;
}

.timeline-step.active .timeline-step-label,
.timeline-step.done   .timeline-step-label {
  color: var(--gold-deep);
}

/* Mobile: vertical stack, connecting line on the left */
@media (max-width: 600px) {
  .order-status-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    overflow-x: visible;
    padding-left: 1.5rem;
  }

  /* Vertical connecting line */
  .order-status-timeline::before {
    top: 0;
    bottom: 0;
    left: 21px;
    right: auto;
    width: 2px;
    height: 100%;
  }

  .timeline-step {
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 56px;
    padding: 0.35rem 0;
  }

  .timeline-step-icon {
    flex-shrink: 0;
  }

  .timeline-step-label {
    text-align: left;
    font-size: 0.88rem;
  }
}


/* ── 12. Sticky bottom bars — safe-area-inset-bottom ────────
   Ensures content is not hidden by iPhone notch / home bar.   */
.scroll-top {
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

.toast {
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
  .checkout-actions,
  .sticky-pay-bar {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* Product condition. A stated fact about the item, so it reads as a quiet
   line rather than competing with the sale and stock badges. */
.product-condition {
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: .2rem;
}

/* Content that begins immediately under the fixed nav. */
.below-nav { padding-top: calc(var(--nav-h) + 1.25rem); }

/* ══════════════════════════════════════════════════════════════
   Product detail page  (/product/{slug})

   Built from the same tokens as everything else, so a store that has
   picked its own colors or is running a seasonal theme gets a product
   page that matches without anyone touching this file.
   ══════════════════════════════════════════════════════════════ */

.pdp {
  max-width: 1120px;
  margin: 0 auto;
  /* No padding-top here: .below-nav owns it, and a shorthand would silently
     win over it depending on which rule the browser reads last. */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 4rem;
}

.pdp-crumbs {
  font-size: .82rem;
  color: var(--text-light);
  margin-bottom: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
}
.pdp-crumbs a { color: var(--text-light); text-decoration: none; }
.pdp-crumbs a:hover { color: var(--gold); text-decoration: underline; }
.pdp-crumbs span[aria-hidden] { opacity: .5; }
.pdp-crumbs [aria-current] { color: var(--text); }

/* Only an admin ever sees this. */
.pdp-withdrawn {
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  color: var(--dark);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  font-size: .88rem;
  margin-bottom: 1.5rem;
}

.pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

/* ── Images ── */
.pdp-media { position: sticky; top: 6rem; }
.pdp-img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
  box-shadow: 0 6px 26px var(--shadow-sm);
  background: var(--warm-white);
}
.pdp-img-placeholder {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  border-radius: var(--radius);
  background: var(--cream);
  border: 1px solid var(--border);
}
.pdp-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .9rem;
}
.pdp-thumb {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--dur) var(--ease);
}
.pdp-thumb:hover { border-color: var(--gold-light); }
.pdp-thumb.active { border-color: var(--gold); }

/* ── Details ── */
.pdp-cat {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.pdp-name {
  font-family: var(--ff-head);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.15;
  color: var(--dark);
  margin: 0 0 .7rem;
}
.pdp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 1.1rem;
}

.pdp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .5rem;
}
.pdp-now { font-size: 1.9rem; font-weight: 700; color: var(--dark); }
.pdp-was { font-size: 1.1rem; color: var(--text-light); }
.pdp-badge {
  background: var(--rose);
  color: var(--on-rose, #fff);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 50px;
}
.pdp-bulk { font-size: .85rem; color: var(--text-light); margin-bottom: 1rem; }

.pdp-desc {
  line-height: 1.75;
  color: var(--text);
  margin: 1.2rem 0 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}

/* Details: facts about the item, as against the choices above the buy button.
   A two-column grid rather than a table, so a long value wraps under itself
   instead of stretching the label column to match. */
.pdp-details {
  display: grid;
  grid-template-columns: minmax(6rem, auto) 1fr;
  gap: .45rem 1.25rem;
  margin: 0 0 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
  font-size: .95rem;
  line-height: 1.6;
}
.pdp-desc + .pdp-details { border-top: 0; padding-top: 0; margin-top: -.4rem; }
.pdp-details dt {
  color: var(--text-muted);
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding-top: .1rem;
}
.pdp-details dd { margin: 0; color: var(--text); }

.pdp-oos {
  font-weight: 700;
  color: var(--rose);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .85rem;
}

/* ── Buy box ── */
.pdp-buy { margin-top: .5rem; }
.pdp-opt { margin-bottom: 1rem; }
.pdp-opt-label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: .35rem;
}
.pdp-select,
.pdp-text,
.pdp-qty {
  font-family: var(--ff-body);
  font-size: .95rem;
  color: var(--text);
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem .75rem;
  width: 100%;
  max-width: 320px;
}
.pdp-qty { max-width: 110px; }
.pdp-select:focus,
.pdp-text:focus,
.pdp-qty:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-pale);
}

.pdp-add {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .85rem 2.4rem;
  border-radius: 50px;
  margin-top: .4rem;
}
.pdp-add[disabled] { opacity: .55; cursor: not-allowed; }

/* Confirmation, and the reason when it does not work -- a size that sold out
   between the page loading and the click, for instance. */
.pdp-buy-msg {
  margin-top: .8rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gold-deep);
}
.pdp-buy-msg.bad { color: var(--rose); }

.pdp-custom { display: inline-block; margin-top: 1.2rem; }

/* ── 404 ── */
.pdp-404 { text-align: center; padding: 4rem 0; }
.pdp-404 h1 { font-family: var(--ff-head); font-size: 3rem; color: var(--gold); margin: 0; }
.pdp-404 p { color: var(--text-light); margin: 1rem 0 1.6rem; }
.pdp-back { display: inline-block; padding: .75rem 2rem; border-radius: 50px; text-decoration: none; }

@media (max-width: 860px) {
  .pdp-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pdp-media { position: static; }
}

/* ── Quick-view: secondary actions ───────────────────────────
   A hierarchy, rather than three things all shouting. "Add to Cart" is the
   primary and keeps its weight; these sit under it, quieter, in the order
   somebody actually wants them. */
.modal-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  margin-top: .9rem;
}
.modal-details-link {
  font-size: .9rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.modal-share {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: .4rem .9rem;
  font: inherit;
  font-size: .84rem;
  color: var(--text-light);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.modal-share:hover { border-color: var(--gold); color: var(--gold); }
.modal-share:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Feedback after copying.
   It was a paragraph in the flow, which meant the card grew by a line when the
   message appeared and shrank again when it cleared -- the whole modal moved
   under the reader's eyes. It is a tooltip over the button now: absolutely
   positioned, so it costs no layout, fades in and out, and still carries
   role="status" so a screen reader announces it. */
.share-wrap { position: relative; display: inline-flex; }
.share-tip {
  position: absolute;
  bottom: calc(100% + .45rem);
  left: 50%;
  transform: translate(-50%, .25rem);
  z-index: 5;
  background: var(--dark);
  color: #fff;
  font-size: .76rem;
  line-height: 1.3;
  white-space: nowrap;
  padding: .34rem .6rem;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.share-tip::after {
  /* The little pointer. */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--dark);
}
.share-tip.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .share-tip { transition: opacity .01s, visibility 0s linear .01s; }
  .share-tip.show { transition: opacity .01s, visibility 0s; }
}

/* The custom-order ask. Was a full-width bordered pill competing with the
   primary action on every product; now a quiet line under everything else. */
.modal-custom-ask {
  display: block;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.modal-custom-ask:hover { color: var(--gold); }

/* Same control on the full product page. It sits below the buy action rather
   than beside it: on the page somebody has already committed to opening, the
   share is a second thought, not a competing one. */
.pdp-secondary {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
/* The custom-order ask, matched to the quick view's treatment. .modal-custom-ask
   carries the look; this only widens the divider to the column. */
.pdp-custom-ask { margin-top: 1.25rem; }

@media (max-width: 30rem) {
  /* Tap targets, and no side-by-side squeeze on a narrow phone. */
  .modal-secondary { flex-direction: column; align-items: stretch; }
  .share-wrap { display: flex; }
  .modal-share { flex: 1; }
  .modal-share { justify-content: center; padding: .6rem .9rem; }
  .modal-details-link { padding: .3rem 0; }
}
/* Saved items are available to guests as well as customer accounts. */
.wishlist-heart {
  position:absolute; top:.5rem; right:.5rem; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  width:2.15rem; height:2.15rem; padding:0;
  border:1px solid rgba(0,0,0,.08); border-radius:999px;
  background:rgba(255,255,255,.92); color:#8c817b;
  box-shadow:0 1px 5px rgba(0,0,0,.15); cursor:pointer;
  font:inherit; font-size:1.2rem; line-height:1;
  transition:transform .15s, color .15s, background .15s;
}
.wishlist-heart:hover { transform:scale(1.08); background:#fff; color:#b32f55; }
.wishlist-heart.wishlisted { color:#b32f55; }
.wishlist-heart .heart-empty, .wishlist-heart.wishlisted .heart-full { display:inline; }
.wishlist-heart .heart-full, .wishlist-heart.wishlisted .heart-empty { display:none; }
.wishlist-heart:disabled { cursor:wait; opacity:.7; }
.wishlist-heart.pdp-save {
  position:static; width:auto; min-height:2.5rem; padding:.55rem .9rem;
  border-color:var(--border); box-shadow:none; font-size:.88rem;
  background:transparent; color:var(--text-light);
}
.wishlist-heart.pdp-save:hover, .wishlist-heart.pdp-save.wishlisted {
  transform:none; color:var(--dark); background:var(--cream);
}
.wishlist-heart.pdp-save .heart-empty,
.wishlist-heart.pdp-save .heart-full { font-size:1.15rem; }
.nav-saved-link { white-space:nowrap; }
.nav-saved-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.25rem; height:1.25rem; padding:0 .3rem; margin-left:.15rem;
  border-radius:999px; background:var(--gold); color:#fff; font-size:.68rem;
}


/* ── Policy text ──
   A deliberate blank line the shop owner typed. The admin preview uses the
   same rule, and the two have to match or the preview lies. */
.policy-content .policy-gap { margin: 0; height: .6em; }


/* ── Mid-basket ─────────────────────────────────────────────
   A shopper part-way through a basket built across several shops. The link
   changes what it says as well as where it goes, so it is worth looking like
   a thing in progress rather than a second way to leave. */
.nav-market-link.has-run {
  opacity: 1;
  border-color: var(--gold);
  color: var(--gold);
}


/* ══════════════════════════════════════════════════════════════
   The nav, when a shop has grown
   ══════════════════════════════════════════════════════════════ */

/* A 2rem gap between eleven items is 352px of nothing, on a row that had run
   out of room. Tighter, and nothing breaks mid-phrase: "Gift Cards" and
   "Custom Orders" were each wrapping onto two lines, which is what made the
   header three rows tall. */
.nav-links { gap: 1.25rem; flex-wrap: wrap; }
.nav-links > li { white-space: nowrap; }

/* ── The More group ── */
.nav-more { position: relative; }
.nav-more-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: rgba(232, 201, 122, 0.82);
  cursor: pointer;
  transition: color var(--dur);
}
.site-nav.scrolled .nav-more-btn { color: var(--text); }
.nav-more-btn:hover { color: var(--gold-light); }
.site-nav.scrolled .nav-more-btn:hover { color: var(--gold); }
.nav-more-btn svg { transition: transform var(--dur) var(--ease); }
.nav-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-more-panel {
  display: none;
  position: absolute;
  top: calc(100% + .75rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  min-width: 13rem;
  padding: .4rem;
  list-style: none;
  border-radius: 12px;
  background: rgba(253, 248, 242, 0.98);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 34px var(--shadow);
}
.nav-more-panel.open { display: block; }
.nav-more-panel > li { white-space: nowrap; }
.nav-more-panel a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--text) !important;
}
.nav-more-panel a:hover { background: rgba(0, 0, 0, .05); }
/* The underline animation belongs to the row, not to a dropdown. */
.nav-more-panel a::after { display: none !important; }

@media (max-width: 768px) {
  /* Inside the drawer the whole list is already open, so the group is too:
     flattened into the column it sits in, with the button out of the way.
     A nested dropdown inside a dropdown is a menu nobody can operate with a
     thumb. */
  .nav-more-btn { display: none; }
  .nav-more-panel {
    display: block;
    position: static;
    transform: none;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  /* Matching the drawer's own links, not the dropdown's. In the panel these
     are a size down because they sit in a small floating card; in the drawer
     they are the navigation and should read like it. */
  .nav-more-panel a { padding: 0.7rem 2rem; border-radius: 0; font-size: .88rem; }
}


/* ── The footer as a site map ────────────────────────────────
   The header now puts everything except browsing behind More, which is right
   for a header and wrong for the bottom of a page: down here there is room,
   and somebody who has scrolled this far is looking for something specific.

   auto-fit rather than a fixed count, because how many groups there are
   depends on what the owner switched on -- a shop with no accounts and no
   marketplace has two, and two columns centred is the right answer for it. */
.footer-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, max-content));
  justify-content: center;
  gap: 1.6rem 3.5rem;
  margin-bottom: 1.6rem;
  text-align: left;
}
.footer-map-col h3 {
  margin: 0 0 .6rem;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
.footer-map-col ul { list-style: none; margin: 0; padding: 0; }
.footer-map-col li + li { margin-top: .35rem; }
.footer-map-col a {
  font-size: .85rem;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--dur);
}
.footer-map-col a:hover { color: var(--gold-light); }

@media (pointer: coarse) {
  /* The same 44px the rest of the footer's links got. */
  .footer-map-col a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-map-col li + li { margin-top: 0; }
}

@media (max-width: 560px) {
  /* One column, and centred like the rest of the footer. A phone has no room
     for two columns of link text without the longer labels wrapping. */
  .footer-map { grid-template-columns: 1fr; gap: 1.4rem; text-align: center; }
}