/* WOOMIE — Foundation Stylesheet */
/* Light, bright, airy, generous white space — per AGENTS.md §2b */

:root {
  --ink: #0d0d0d;
  --paper: #fafaf8;
  --card: #fff;
  --gold: #ffd700;
  --gold-dark: #9c6d00; /* Updated from #daa500 to ensure > 4.5:1 WCAG AA contrast on white */
  --gold-accent: #f4a460;
  --purple: #6a2d8f;
  --rose: #d73a5e;
  --teal: #1b9b8c;
  --muted: #707070; /* Updated from #888 to ensure > 4.5:1 WCAG AA contrast on white */
  --line: #e0e0e0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Georgia', serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 16px;
}

/* ============ TYPOGRAPHY ============ */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--ink);
}

h1 {
  font-size: 3rem;
  margin-bottom: 1.5rem;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1.25rem;
}

h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

p {
  margin-bottom: 1rem;
  color: var(--ink);
}

a {
  color: var(--gold-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--gold);
}

/* ============ CONTAINER & LAYOUT ============ */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }
  
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
}

/* ============ HEADER & NAV ============ */

header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
}

.woomie-logo {
  width: 255px;
  height: 63px;
  max-width: 100%;
}

.logo span {
  margin-right: 0.5rem;
}

.logo b {
  color: var(--gold);
}

.menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--ink);
}

.nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
}

.nav ul li a {
  color: var(--ink);
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav ul li a:hover {
  color: var(--gold);
}

.cart-link,
.wishlist-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.cart-count,
.wishlist-count {
  background: linear-gradient(135deg, #ffd700 0%, #f4a460 100%);
  color: var(--ink); /* Updated from white to var(--ink) for WCAG AA contrast */
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

@media (max-width: 768px) {
  .menu-btn {
    display: block;
  }
  
  .nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--card);
    border-top: 1px solid var(--line);
    display: none;
    padding: 1rem 0;
  }
  
  .nav ul li {
    width: 100%;
  }
  
  .nav ul li a {
    display: block;
    padding: 1rem 1.5rem;
  }
}

/* ============ HERO ============ */

.hero {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, var(--paper) 100%); /* Rebalanced from purple/teal gradient to clean light gold gradient */
  padding: 6rem 0;
  text-align: center;
  border-bottom: 2px solid var(--gold);
}

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero h1 {
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.hero p {
  font-size: 1.25rem;
  color: var(--ink); /* Rebalanced from var(--purple) to var(--ink) */
  margin-bottom: 2rem;
  max-width: 600px;
  font-weight: 500;
}

.hero .btn {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .hero {
    padding: 4rem 0;
  }

  .hero h1 {
    font-size: 2rem;
  }
}

/* ============ HERO CAROUSEL (home page, click-and-buy showcase) ============ */
/* No .container wrapper in the markup (see index.html) — the section itself
   carries the site's 1200px contained-width rhythm via width/max-width/margin,
   matching .hero + .container's max-width instead of a padding gutter, so the
   photography can run edge-to-edge inside the rounded panel. */

.hero-carousel {
  position: relative;
  width: calc(100% - 4rem);
  max-width: 1200px;
  margin: 3rem auto;
  aspect-ratio: 21 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(13, 13, 13, 0.12);
}

/* .hc-track is a block-level flex row: its own rendered width always equals
   the carousel's visible width (100% of parent), while each .hc-slide has
   flex: 0 0 100% (basis resolved against that same width). That equivalence
   is what makes the JS's `translateX(-${n * 100}%)` land exactly one slide
   per step — if .hc-track were ever given an explicit multiple-of-100%
   width, the percentage-based transform would overshoot. Same constraint as
   .pd-track above. */
.hc-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.hc-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.hc-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.hc-slide:hover img {
  transform: scale(1.03);
}

.hc-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 2.5rem 2.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* Scrim built from var(--ink) (#0d0d0d), not an arbitrary dark color —
     light text over a photo, not a dark page background. */
  background: linear-gradient(to top, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.4) 55%, rgba(13, 13, 13, 0) 100%);
}

.hc-name {
  font-family: 'Georgia', serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}

.hc-price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
}

.hc-caption::after {
  content: 'Shop Now \2192';
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.3s ease, transform 0.3s ease;
}

.hc-slide:hover .hc-caption::after {
  color: var(--gold);
  transform: translateX(4px);
}

.hc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 1.9rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(13, 13, 13, 0.18);
  transition: all 0.3s ease;
  z-index: 2;
}

.hc-arrow.prev {
  left: 1.5rem;
}

.hc-arrow.next {
  right: 1.5rem;
}

.hc-arrow:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-accent) 100%);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.45);
  transform: translateY(-50%) scale(1.08);
}

.hc-dots {
  position: absolute;
  bottom: 1.5rem;
  right: 2rem;
  z-index: 2;
  display: flex;
  gap: 0.6rem;
}

.hc-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(13, 13, 13, 0.3);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(13, 13, 13, 0.25);
  transition: all 0.3s ease;
}

.hc-dot:hover {
  border-color: var(--gold);
}

.hc-dot.on {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-accent) 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
}

@media (max-width: 768px) {
  .hero-carousel {
    width: calc(100% - 3rem);
    margin: 2rem auto;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
  }

  .hc-caption {
    padding: 1.5rem 1.25rem 1.15rem;
  }

  .hc-name {
    font-size: 1.3rem;
  }

  .hc-price {
    font-size: 1rem;
  }

  .hc-caption::after {
    font-size: 0.7rem;
  }

  .hc-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.4rem;
  }

  .hc-arrow.prev {
    left: 0.75rem;
  }

  .hc-arrow.next {
    right: 0.75rem;
  }

  .hc-dots {
    bottom: 1rem;
    right: 1.25rem;
    gap: 0.5rem;
  }

  .hc-dot {
    width: 9px;
    height: 9px;
  }
}

/* ============ SECTIONS ============ */

.section {
  padding: 4rem 0;
  border-bottom: 1px solid var(--line);
}

.section-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.section-sub {
  color: var(--muted);
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.card {
  background: var(--card);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  text-align: center;
}

.card:hover {
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.1); /* Rebalanced from var(--purple) shadow to clean dark shadow */
  transform: translateY(-4px);
  border-color: var(--gold); /* Rebalanced from var(--purple) to var(--gold) */
}

.product-card {
  background: var(--card);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  text-align: center;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  position: relative;
}

.product-card:hover {
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.1); /* Rebalanced from var(--purple) shadow to clean dark shadow */
  transform: translateY(-4px);
  border-color: var(--gold); /* Rebalanced from var(--rose) to var(--gold) */
}

.product-card .emoji {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.product-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.product-card h3 {
  margin-bottom: 0.5rem;
}

.product-card .price {
  font-size: 1.5rem;
  color: var(--ink); /* Rebalanced from var(--rose) to var(--ink) */
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}

.card-rating .star {
  font-size: 0.85rem;
}

.card-rating .rating-count {
  color: var(--muted);
  font-size: 0.8rem;
}

.product-card .badge {
  display: inline-block;
  background: linear-gradient(135deg, #ffd700 0%, #f4a460 100%);
  color: var(--ink); /* Updated from white to var(--ink) for WCAG AA contrast */
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* Stock-count urgency (shop/home cards). Only ever rendered when genuinely
   low (1-3 units left) — see js/app.js productCardMarkup(). Deliberately a
   soft gold tint, not alarm-red: attention-getting without reading as a
   dark pattern, and staying inside the site's gold/ink palette. Sits
   between .badge and .sold-out in the markup (mutually exclusive with
   .sold-out at the data level), so it carries its own margin-bottom to
   match .badge's spacing rhythm. */
.product-card .stock-urgency {
  display: inline-block;
  background: rgba(255, 215, 0, 0.12);
  color: var(--gold-dark);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ============ CATEGORY TILES (Shop by Category, home page) ============ */

.category-tile {
  display: block;
  background: var(--card);
  padding: 1.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.category-tile:hover {
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.1);
  transform: translateY(-4px);
  border-color: var(--gold);
}

.category-tile-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.category-tile .emoji {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.category-tile strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

/* ============ BUTTONS ============ */

.btn {
  background: linear-gradient(135deg, #ffd700 0%, #f4a460 100%);
  color: var(--ink); /* Updated from white to var(--ink) for WCAG AA contrast */
  border: none;
  padding: 1rem 2rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s ease;
  font-family: inherit;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn:hover {
  background: linear-gradient(135deg, #f4a460 0%, #ffd700 100%);
  color: var(--ink); /* Updated from white to var(--ink) for WCAG AA contrast */
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--gold-dark); /* Rebalanced from var(--purple) to var(--gold-dark) */
  box-shadow: none;
}

.btn.ghost:hover {
  background: rgba(156, 109, 0, 0.05); /* Rebalanced from purple to gold tint */
  border-color: var(--gold); /* Rebalanced from var(--purple) to var(--gold) */
}

/* ============ FOOTER ============ */

footer {
  background: var(--ink);
  color: #f5f5f5;
  padding: 4rem 0 2rem;
  margin-top: 4rem;
  border-top: 1px solid var(--line);
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h3,
.footer-section h4 {
  color: #f5f5f5;
  margin-bottom: 1rem;
}

.footer-section p {
  color: #999;
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-social {
  margin-top: 0.75rem;
}

.footer-social a {
  color: var(--gold);
}

.footer-social a:hover {
  color: var(--gold-dark);
}

.footer-section ul {
  list-style: none;
}

.footer-section ul li {
  margin-bottom: 0.5rem;
}

.footer-section a {
  color: #999;
  font-size: 0.95rem;
}

.footer-section a:hover {
  color: var(--gold);
}

.footer-copy {
  text-align: center;
  color: #999; /* Updated from #666 to #999 to meet > 4.5:1 WCAG AA contrast on dark background */
  font-size: 0.9rem;
  border-top: 1px solid #333;
  padding-top: 2rem;
}

/* ============ CART ============ */

.cart-header {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, var(--paper) 100%); /* Rebalanced from purple/teal gradient to clean light gold gradient */
  padding: 3rem 0;
  border-bottom: 2px solid var(--gold);
}

.cart-items {
  background: var(--card);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: 2rem;
  min-height: 200px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--line);
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.qty-btn {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 4px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.qty-btn:hover {
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}

.qty-value {
  min-width: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cart-empty {
  margin-bottom: 1rem;
}

.cart-item-remove {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 0.4rem 0.85rem;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.cart-item-remove:hover {
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}

.cart-summary {
  background: var(--card);
  padding: 2rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  text-align: right;
}

.cart-summary h2 {
  margin-bottom: 1.5rem;
  color: var(--gold-dark);
}

.promo-row {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.promo-row input {
  flex: 1;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9rem;
}

.promo-row .btn.ghost {
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
}

.promo-msg {
  color: var(--gold-dark);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.promo-applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

.promo-applied #promoRemove {
  background: none;
  border: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.cart-subtotal {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.cart-summary #checkoutBtn {
  width: 100%;
}

.cart-summary #clearCart {
  width: 100%;
  margin-top: 0.75rem;
}

/* ============ TRACK ============ */

.track-header {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, var(--paper) 100%); /* Rebalanced from purple/teal gradient to clean light gold gradient */
  padding: 3rem 0;
  border-bottom: 2px solid var(--gold);
}

.track-form {
  display: flex;
  gap: 1rem;
  margin: 3rem 0;
  max-width: 500px;
}

.track-form input {
  flex: 1;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 1rem;
}

.track-form .btn {
  flex-shrink: 0;
}

/* ============ ABOUT & CONTACT ============ */

.about-header,
.contact-header {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, var(--paper) 100%); /* Rebalanced from purple/teal gradient to clean light gold gradient */
  padding: 3rem 0;
  border-bottom: 2px solid var(--gold);
  text-align: center;
}

.about-header p,
.contact-header p {
  color: var(--ink); /* Rebalanced from var(--purple) to var(--ink) */
  font-size: 1.1rem;
  font-weight: 500;
}

.about-content,
.contact-content {
  max-width: 700px;
  margin: 3rem auto;
  padding: 2rem;
  background: var(--card);
  border-radius: 8px;
  border: 1px solid var(--line);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.about-content:hover,
.contact-content:hover {
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.1); /* Rebalanced from var(--purple) shadow to clean dark shadow */
  border-color: var(--gold); /* Rebalanced from var(--purple) to var(--gold) */
}

.about-content h2,
.contact-content h2 {
  color: var(--ink); /* Rebalanced from var(--purple) to var(--ink) */
  margin-bottom: 1.5rem;
}

/* ============ SHOP ============ */

.shop-header {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, var(--paper) 100%); /* Rebalanced from purple/teal gradient to clean light gold gradient */
  padding: 3rem 0;
  border-bottom: 2px solid var(--gold);
  text-align: center;
}

.shop-header p {
  color: var(--ink); /* Rebalanced from var(--purple) to var(--ink) */
  font-size: 1.1rem;
  font-weight: 500;
}

/* ---- shop search & sort ---- */

.shop-controls {
  background: var(--paper);
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}

.shop-controls .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.search-bar {
  flex: 1 1 320px;
  max-width: 420px;
}

#searchInput {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
  transition: border-color 0.3s ease;
}

#searchInput::placeholder {
  color: var(--muted);
}

#searchInput:focus {
  border-color: var(--gold);
}

.sort-dropdown {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.sort-dropdown label {
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

#sortSelect {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
  cursor: pointer;
  transition: border-color 0.3s ease;
}

#sortSelect:focus {
  border-color: var(--gold);
}

.shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
  font-style: italic;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .shop-controls {
    padding: 1.5rem 0;
  }

  .shop-controls .container {
    flex-direction: column;
    align-items: stretch;
  }

  .search-bar {
    max-width: none;
  }

  .sort-dropdown {
    justify-content: space-between;
  }

  #sortSelect {
    flex: 1;
  }
}

/* ---- shop filters ---- */

.shop-filters {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
}

.shop-filters .container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
}

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

.filter-heading {
  display: block;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.filter-price-inputs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#priceMin,
#priceMax {
  width: 90px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--card);
  transition: border-color 0.3s ease;
}

#priceMin::placeholder,
#priceMax::placeholder {
  color: var(--muted);
}

#priceMin:focus,
#priceMax:focus {
  border-color: var(--gold);
}

.filter-price-sep {
  color: var(--muted);
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  max-width: 320px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ink);
  font-size: 0.95rem;
  cursor: pointer;
}

.filter-option input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--gold-dark);
}

.filter-group-availability {
  justify-content: flex-start;
}

.filter-clear {
  align-self: flex-end;
  margin-left: auto;
  background: none;
  border: none;
  color: var(--gold-dark);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

.filter-clear:hover {
  color: var(--gold);
}

@media (max-width: 768px) {
  .shop-filters {
    padding: 1.25rem 0;
  }

  .shop-filters .container {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .filter-options {
    max-width: none;
  }

  .filter-clear {
    align-self: stretch;
    margin-left: 0;
    text-align: left;
  }
}

/* ============ ACCESSIBILITY & RESPONSIVE ============ */

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .category-tile {
    padding: 1.25rem 1rem;
  }

  .hero {
    padding: 3rem 0;
  }
  
  .section {
    padding: 2rem 0;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
  }
}

/* Focus visible for keyboard navigation */
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-dark); /* Rebalanced from var(--purple) to var(--gold-dark) */
  outline-offset: 2px;
}

/* ---- policy pages ---- */

.policy-header {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, var(--paper) 100%);
  padding: 4rem 0;
  border-bottom: 2px solid var(--gold);
  text-align: center;
}

.policy-header h1 {
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.policy-intro {
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 500;
}

.policy-content {
  max-width: 760px;
  margin: 3rem auto 4rem;
  padding: 2.5rem;
  background: var(--card);
  border-radius: 8px;
  border: 1px solid var(--line);
}

.policy-content h2 {
  color: var(--ink);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.policy-content h2:first-child {
  margin-top: 0;
}

.policy-content p {
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.error-404-content {
  max-width: 560px;
  margin: 3rem auto 5rem;
  text-align: center;
}

.error-404-content p {
  color: var(--ink);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.error-404-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.faq-item h3 {
  color: var(--gold-dark);
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.faq-item p {
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .policy-header {
    padding: 3rem 0;
  }

  .policy-content {
    padding: 1.5rem;
    margin: 2rem auto 3rem;
  }
}

/* ---- whatsapp button ---- */
/* WhatsApp brand green is a deliberate exception to the site's gold accent —
   a recognizable third-party brand mark, not a site accent color. */

.whatsapp-button {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25d366 0%, #20ba5a 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  text-decoration: none;
  z-index: 999;
  transition: all 0.3s ease;
  font-size: 0.75rem;
  flex-direction: column;
  gap: 0.25rem;
}

.whatsapp-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

.whatsapp-icon {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.whatsapp-text {
  display: none; /* hidden on desktop, shown on mobile */
  font-weight: 700;
  font-size: 0.65rem;
}

/* Mobile: show text label, slightly larger tap target */
@media (max-width: 768px) {
  .whatsapp-button {
    width: 70px;
    height: 70px;
  }

  .whatsapp-text {
    display: block;
  }

  .whatsapp-icon {
    width: 28px;
    height: 28px;
  }
}

/* Small screens: pull in from the edge */
@media (max-width: 480px) {
  .whatsapp-button {
    bottom: 1rem;
    right: 1rem;
    width: 60px;
    height: 60px;
  }
}

/* ---- product page ---- */

.pd {
  padding: 3rem 0 4rem;
}

.pd-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 4rem;
}

/* -- gallery -- */

.pd-gallery {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 8px 24px rgba(13, 13, 13, 0.08);
}

/* .pd-track is a block-level flex row: its own rendered width always equals
   the gallery's visible width (100% of parent), while each .pd-slide has
   flex: 0 0 100% (basis resolved against that same width). That equivalence
   is what makes the JS's `translateX(-${n * 100}%)` land exactly one slide
   per step — if .pd-track were ever given an explicit multiple-of-100%
   width, the percentage-based transform would overshoot. */
.pd-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.45s ease;
}

.pd-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 3rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.06) 0%, var(--paper) 100%);
  font-size: 5.5rem;
  line-height: 1;
}

/* Real product photos (optional p.images) fill the slide edge to edge,
   ignoring the fallback panel's padding via absolute positioning. */
.pd-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-slide span {
  font-family: 'Georgia', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

/* color-swatch wrapper (third fallback slide) */
.pd-slide > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.pd-swatch {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(13, 13, 13, 0.12);
}

.pd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(13, 13, 13, 0.1);
  transition: all 0.3s ease;
  z-index: 2;
}

.pd-arrow.prev {
  left: 1rem;
}

.pd-arrow.next {
  right: 1rem;
}

.pd-arrow:hover {
  background: linear-gradient(135deg, #ffd700 0%, #f4a460 100%);
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  transform: translateY(-50%) scale(1.08);
}

.pd-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 2;
}

.pd-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--gold-dark);
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s ease;
}

.pd-dot:hover {
  border-color: var(--gold);
}

.pd-dot.on {
  background: linear-gradient(135deg, #ffd700 0%, #f4a460 100%);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
}

/* -- info column -- */

.pd-info {
  display: flex;
  flex-direction: column;
}

.pd-crumb {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.pd-crumb a {
  color: var(--gold-dark);
}

.pd-crumb a:hover {
  color: var(--gold);
}

.pd-name {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.pd-price {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.pd-price-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.pd-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ffd700 0%, #f4a460 100%);
  color: var(--ink);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.pd-desc {
  color: var(--ink);
  line-height: 1.75;
  margin-bottom: 1.75rem;
}

.pd-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.pd-size {
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.pd-size:hover {
  border-color: var(--gold);
}

.pd-size.sel {
  background: linear-gradient(135deg, #ffd700 0%, #f4a460 100%);
  border-color: transparent;
  color: var(--ink);
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.35);
}

.pd-size-oos {
  color: var(--muted);
  background: var(--paper);
  border-color: var(--line);
  text-decoration: line-through;
  cursor: not-allowed;
  opacity: 0.6;
}

.pd-size-oos:hover {
  border-color: var(--line);
}

/* #pdAdd / #pdCustom already carry the shared .btn / .btn.ghost styling;
   only spacing/wrap behaviour is added here since they now sit side by
   side in a light, roomy layout rather than stacked full-width. */
#pdAdd,
#pdCustom,
#pdNotify {
  display: inline-block;
  margin: 0 0.75rem 0.75rem 0;
  vertical-align: middle;
}

.pd-share {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.pd-share-label {
  font-size: 0.85rem;
  color: var(--muted);
}

.pd-share-btn {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.pd-share-btn:hover {
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}

/* Stock-count urgency on the product detail page. Same honest,
   stock-driven-only rule as .stock-urgency on the cards (see js/app.js
   initProduct()) — hidden unless genuinely low. Calm layout like .pd-note,
   but the gold-toned emphasis carries the urgency instead of a jarring
   red/alarm treatment. */
.pd-stock {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gold-dark);
  margin-bottom: 0.5rem;
}

.pd-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

/* -- related products -- */

.pd-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .pd {
    padding: 2rem 0 3rem;
  }

  .pd-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .pd-gallery {
    aspect-ratio: 1 / 1;
  }

  .pd-slide {
    padding: 2rem;
    font-size: 4.5rem;
  }

  .pd-name {
    font-size: 1.85rem;
  }

  .pd-price {
    font-size: 1.4rem;
  }

  .pd-related {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ---- reviews & ratings ---- */

.star {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.1em;
}

.star-filled {
  color: var(--gold);
}

.star-empty {
  color: var(--line);
}

.pd-reviews {
  padding: 0.5rem 0 2rem;
}

.reviews-empty {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 1.75rem;
}

.reviews-empty a {
  color: var(--gold-dark);
  text-decoration: underline;
  font-weight: 700;
}

.reviews-empty a:hover {
  color: var(--gold);
}

.reviews-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.reviews-summary-stars {
  font-size: 1.5rem;
  letter-spacing: 0.15em;
}

.reviews-summary-text {
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
}

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.review-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 1.5rem;
}

.review-item-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.review-author {
  font-weight: 700;
  color: var(--ink);
}

.review-date {
  color: var(--muted);
  font-size: 0.85rem;
  margin-left: auto;
}

.review-stars {
  margin-bottom: 0.6rem;
}

.review-stars .star {
  font-size: 0.9rem;
}

.review-text {
  color: var(--ink);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .reviews-empty {
    padding: 1.25rem;
    font-size: 1rem;
  }

  .review-item {
    padding: 1.25rem;
  }

  .review-item-header {
    flex-wrap: wrap;
  }

  .review-date {
    margin-left: 0;
  }
}

/* ---- tailoring tracking ---- */
/* Styles the markup rendered by initTrack() in js/app.js:
   <p class="track-message">...</p>
   <div class="track-progress"><div class="track-stage completed|current|pending">
     <span class="track-stage-number">N</span>
     <span class="track-stage-name">...</span>
     <span class="track-stage-date">...</span>
   </div><span class="track-line"></span> ... </div>
   <div class="track-dates"><p>...</p><p>Expected delivery: ...</p></div>
   Layout: horizontal step row on desktop, stacked vertical timeline on mobile. */

#trackResult {
  margin-bottom: 4rem;
}

.track-message {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08) 0%, var(--paper) 100%);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 1.25rem 1.75rem;
  margin: 2.5rem 0;
  line-height: 1.4;
}

.track-progress {
  display: flex;
  align-items: flex-start;
  margin: 3rem 0;
  padding: 1rem 0;
}

.track-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 120px;
  min-width: 0;
  padding: 0 0.5rem;
  position: relative;
}

.track-stage-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.85rem;
  transition: all 0.3s ease;
}

.track-stage-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.track-stage-date {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
}

/* connector between stage boxes */
.track-line {
  flex: 1 1 30px;
  min-width: 16px;
  height: 2px;
  align-self: flex-start;
  margin-top: 22px; /* centers on the 44px stage-number circle */
  background: var(--line);
  transition: background 0.3s ease;
}

/* a completed (or current) stage colors the line leading out of it gold */
.track-stage.completed + .track-line,
.track-stage.current + .track-line {
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-accent) 100%);
}

/* completed — filled gold badge, reads as "done" */
.track-stage.completed .track-stage-number {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-accent) 100%);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.35);
}

.track-stage.completed .track-stage-date {
  color: var(--gold-dark);
}

/* current — the unmistakable "you are here" focal point */
.track-stage.current {
  transform: scale(1.08);
  z-index: 2;
}

.track-stage.current .track-stage-number {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-accent) 100%);
  border-color: var(--gold);
  color: var(--ink);
  font-size: 1.25rem;
  box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.18), 0 6px 18px rgba(156, 109, 0, 0.35);
  animation: track-pulse 2.4s ease-in-out infinite;
}

.track-stage.current .track-stage-name {
  color: var(--gold-dark);
  font-size: 1.02rem;
}

.track-stage.current .track-stage-date {
  color: var(--ink);
  font-weight: 700;
}

@keyframes track-pulse {
  0%, 100% {
    box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.18), 0 6px 18px rgba(156, 109, 0, 0.35);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(255, 215, 0, 0.08), 0 6px 18px rgba(156, 109, 0, 0.35);
  }
}

/* pending — muted, de-emphasized, no gold */
.track-stage.pending .track-stage-number {
  background: var(--paper);
  border-color: var(--line);
  color: var(--muted);
}

.track-stage.pending .track-stage-name {
  color: var(--muted);
  font-weight: 500;
}

.track-stage.pending .track-stage-date {
  color: var(--muted);
}

.track-dates {
  max-width: 560px;
  margin: 2rem 0 3rem;
  padding: 1.5rem 1.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.track-dates p {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.track-dates p:last-child {
  margin-bottom: 0;
  font-weight: 700;
  color: var(--gold-dark);
}

@media (max-width: 768px) {
  .track-message {
    font-size: 1.15rem;
    padding: 1rem 1.25rem;
    margin: 2rem 0;
  }

  /* stacked vertical timeline: number column on the left, text on the right */
  .track-progress {
    flex-direction: column;
    margin: 2rem 0;
    padding: 0.5rem 0;
  }

  .track-stage {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 1rem;
    align-items: start;
    text-align: left;
    flex: none;
    padding: 0.6rem 0;
  }

  .track-stage-number {
    grid-row: 1 / 3;
    grid-column: 1;
    margin-bottom: 0;
  }

  .track-stage-name {
    grid-column: 2;
    grid-row: 1;
  }

  .track-stage-date {
    grid-column: 2;
    grid-row: 2;
  }

  .track-line {
    width: 2px;
    height: 22px;
    flex: none;
    align-self: auto;
    margin: 0 0 0 21px; /* aligns under the center of the 44px number circle */
    background: var(--line);
  }

  .track-stage.completed + .track-line,
  .track-stage.current + .track-line {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-accent) 100%);
  }

  .track-stage.current {
    transform: none;
  }

  .track-dates {
    max-width: none;
    padding: 1.25rem 1.5rem;
  }
}

/* ---- wishlist ---- */
/* .wishlist-link / .wishlist-count mirror .cart-link / .cart-count above
   (shared rules, see the .cart-link, .wishlist-link block near the top of
   the header styles). This section covers the rest of the wishlist surface:
   the heart toggle on product/shop cards, the inline toggle on the product
   page, and the empty-state message on wishlist.html. */

.wishlist-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--line);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 13, 13, 0.12);
  transition: color 0.3s ease, transform 0.2s ease, background 0.3s ease;
}

.wishlist-btn:hover {
  transform: scale(1.12);
  background: rgba(255, 255, 255, 0.95);
}

.wishlist-btn.saved {
  color: var(--gold-dark);
}

.wishlist-btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  margin: 0 0.75rem 0.75rem 0;
  vertical-align: middle;
  background: transparent;
  border: 2px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.wishlist-btn-inline:hover {
  border-color: var(--gold-dark);
  background: rgba(156, 109, 0, 0.05);
}

.wishlist-btn-inline.saved {
  color: var(--gold-dark);
  border-color: var(--gold-dark);
}

#wishlistItems p {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted);
  font-style: italic;
  font-size: 1.1rem;
}

#wishlistItems p a {
  color: var(--gold-dark);
}

@media (max-width: 768px) {
  .wishlist-btn {
    width: 40px;
    height: 40px;
    top: 0.75rem;
    right: 0.75rem;
  }

  .wishlist-btn-inline {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* ---- sticky add-to-cart bar ---- */
/* Mirrors #pdAdd once it scrolls out of view (see initProduct() in
   js/app.js) so shoppers don't have to scroll back up to buy. z-index sits
   one below .whatsapp-button (999) so the WhatsApp circle stays on top and
   clickable if it overlaps the bar's right edge on small screens. */

.sticky-cart-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: var(--card);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.sticky-cart-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sticky-cart-name {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

.sticky-cart-price {
  color: var(--gold-dark);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
}

#stickyCartAdd {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .sticky-cart-bar {
    padding: 0.85rem 1rem;
  }

  .sticky-cart-name {
    max-width: 45vw;
  }

  .sticky-cart-price {
    max-width: 45vw;
  }
}

/* .whatsapp-button and .sticky-cart-bar both anchor to the bottom of the
   viewport and overlap on narrow screens once the sticky bar is showing
   (roughly 85-90px tall at its default padding, taller than the WhatsApp
   button's own bottom offset). initProduct() toggles this class on
   #whatsappBtn in step with the bar's visibility so the WhatsApp circle
   clears it instead of sitting on top of the bar's own Add to Cart button.
   Higher specificity (two classes) beats .whatsapp-button's plain-class
   rules regardless of which media query they're declared in, so one rule
   here covers every breakpoint. */
.whatsapp-button.lifted {
  bottom: 100px;
}

/* ---- size guide ---- */
/* Trigger link sits right under #pdSizes on the product page. Hidden by
   default (product.html) — only unhidden by initProduct() (js/app.js) when
   the product's category has a matching entry in SIZE_GUIDES
   (js/products.js); bags/jewelry/perfume have none, so the link never shows
   for those. The modal is the first on the site: a light card over a dark
   scrim (not a dark page background — same reasoning as the hero carousel's
   photo-caption scrim), z-index above the sticky cart bar (998) and the
   WhatsApp button (999) so it is always the topmost layer when open. */

.size-guide-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: -0.75rem 0 1.75rem;
  color: var(--gold-dark);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.size-guide-link:hover {
  color: var(--ink);
}

.size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.size-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.6);
}

.size-guide-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(13, 13, 13, 0.25);
}

.size-guide-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.size-guide-close:hover {
  color: var(--ink);
  background: var(--paper);
}

#sizeGuideTitle {
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 1.5rem 0.35rem 0;
}

.size-guide-unit {
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
  margin-bottom: 1.5rem;
}

.size-guide-table-wrap {
  overflow-x: auto;
}

.size-guide-table {
  width: 100%;
  border-collapse: collapse;
}

.size-guide-table th,
.size-guide-table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.size-guide-table th {
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.size-guide-table td {
  color: var(--ink);
  font-size: 0.95rem;
}

.size-guide-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 768px) {
  .size-guide-panel {
    padding: 1.75rem;
    border-radius: 12px;
  }

  #sizeGuideTitle {
    font-size: 1.2rem;
  }
}

/* ---- checkout trust badges ---- */
/* Honest, text-forward trust signals placed just above the checkout button
   in .cart-summary — no icon library, no invented claims. Every badge and
   the policy summary below map directly to copy already published on
   shipping.html and returns.html. Kept quiet (ink/muted text, gold-dark
   glyphs, no borders or backgrounds) so the .btn checkout button remains
   the strongest element on the page. */

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.trust-badge-glyph {
  color: var(--gold-dark);
  font-size: 1rem;
  line-height: 1;
}

.checkout-policy-summary {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}

.checkout-policy-summary a {
  color: var(--gold-dark);
  text-decoration: underline;
}

.checkout-policy-summary a:hover {
  color: var(--ink);
}

@media (max-width: 768px) {
  .trust-badges {
    justify-content: center;
    gap: 0.5rem 1rem;
  }

  .checkout-policy-summary {
    text-align: center;
  }
}