/* Neelu Patel — Paper Mache & Collage Artist
   Shared stylesheet */

:root {
  --paper: #faf6ef;
  --paper-alt: #f1ead9;
  --ink: #2c241b;
  --ink-soft: #5c5346;
  --accent: #b8582e;
  --accent-dark: #8f421f;
  --gold: #b6923f;
  --border: #e2d7c0;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(44, 36, 27, 0.08);
  --shadow-hover: 0 16px 40px rgba(44, 36, 27, 0.14);
  --radius: 10px;
  --max-width: 1160px;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; color: var(--ink-soft); }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.75em;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.btn.btn-outline:hover { background: var(--accent); color: var(--white); }
.btn.btn-whatsapp { background: #25D366; }
.btn.btn-whatsapp:hover { background: #1ea952; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 14px 20px 0;
  background: transparent;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 9px 10px 9px 22px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(226, 215, 192, 0.7);
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(44, 36, 27, 0.06);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-header.scrolled .nav {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 32px rgba(44, 36, 27, 0.12);
}

.logo {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.logo span { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 9px 16px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover { background: var(--paper-alt); color: var(--ink); }
.nav-links a.active { background: var(--accent); color: #fff; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--ink);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cart-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--paper-alt);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cart-toggle:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--paper);
}

.nav-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper-alt);
  align-items: center;
  justify-content: center;
}

@media (max-width: 800px) {
  .site-header { padding: 12px 14px 0; }
  .nav { border-radius: 24px; padding: 8px 8px 8px 18px; position: relative; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: var(--white);
    border: 1px solid var(--border);
    box-shadow: 0 16px 36px rgba(44,36,27,0.14);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    border-radius: 18px;
    padding: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease;
  }
  .nav-links.open { max-height: 400px; opacity: 1; }
  .nav-links a { padding: 12px 16px; border-radius: 12px; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 80px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -180px;
  right: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,88,46,0.14) 0%, rgba(184,88,46,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -160px;
  left: -140px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182,146,63,0.12) 0%, rgba(182,146,63,0) 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 800px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero { padding: 48px 0; }
}

.hero-photo-wrap {
  position: relative;
}
.hero-photo-wrap::before {
  content: '';
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  z-index: -1;
  opacity: 0.6;
}
.hero-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  aspect-ratio: 4/5;
  background: var(--paper-alt) center/cover;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }

.hero-badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
}
.hero-badge .num {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.hero-badge .label {
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.2;
  max-width: 90px;
}
@media (max-width: 500px) {
  .hero-badge { left: 8px; bottom: -18px; padding: 10px 14px; }
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 1.5em;
}

/* ---------- Entrance / scroll animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* ---------- Cart drawer ---------- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 10, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 1100;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  background: var(--paper);
  box-shadow: -12px 0 40px rgba(0,0,0,0.2);
  z-index: 1101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.cart-drawer-head h3 { margin: 0; font-size: 1.2rem; }
.cart-close {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-soft);
}

.cart-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.cart-empty { color: var(--ink-soft); font-size: 0.9rem; }

.cart-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cart-item img, .cart-item-noimg {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--paper-alt);
  flex-shrink: 0;
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-weight: 600;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-item-price { color: var(--accent); font-size: 0.85rem; font-weight: 600; margin: 2px 0 8px; }
.cart-item-qty { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.cart-item-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
}

.cart-drawer-foot {
  padding: 18px 24px 24px;
  border-top: 1px solid var(--border);
}
.cart-note {
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: center;
  margin: 10px 0 0;
}

/* ---------- Section wrapper ---------- */
.section { padding: 64px 0; }
.section-alt { background: var(--paper-alt); }
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head p { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 24px;
}
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

#productGrid {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px 16px;
}
@media (max-width: 1100px) { #productGrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px) { #productGrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { #productGrid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; } }

.card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card-media {
  aspect-ratio: 1/1;
  background: var(--paper-alt);
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-media img { transform: scale(1.05); }
.card-body { padding: 18px 20px; }
.card-body h3 { margin-bottom: 4px; font-size: 1.05rem; }
.card-price { color: var(--accent); font-weight: 700; margin: 6px 0; }

.card-actions {
  margin-top: auto;
  padding: 0 20px 18px;
}
.btn-cart-add {
  width: 100%;
  justify-content: center;
  padding: 10px 16px;
  font-size: 0.85rem;
  background: var(--paper-alt);
  color: var(--ink);
}
.btn-cart-add:hover { background: var(--accent); color: #fff; }

/* ---------- Gallery (Photos section) ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.gallery-item {
  aspect-ratio: 1/1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: var(--paper-alt);
  position: relative;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 10px 6px;
  font-size: 0.75rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gallery-item:hover .caption { opacity: 1; }

.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 32px;
}
.filter-btn {
  padding: 8px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.2s ease;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(20, 16, 10, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 6px; }
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav:hover, .lightbox-close:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 700px) {
  .lightbox-nav { width: 38px; height: 38px; font-size: 1.2rem; }
}

/* ---------- Bio / About ---------- */
.bio-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 800px) { .bio-grid { grid-template-columns: 1fr; } }
.bio-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.quote-block {
  background: var(--white);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px 30px;
  margin-top: 28px;
  box-shadow: var(--shadow);
}
.quote-block p { font-style: italic; color: var(--ink); margin-bottom: 10px; }
.quote-block .who { font-weight: 700; color: var(--accent); font-style: normal; font-size: 0.9rem; }

/* ---------- Awards / Press ---------- */
.press-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.press-chip {
  padding: 10px 18px;
  background: var(--white);
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow);
}

/* ---------- Product detail ---------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 800px) { .product-grid { grid-template-columns: 1fr; } }
.product-gallery-main {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 1/1;
  background: var(--paper-alt);
}
.product-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.product-thumbs img {
  width: 70px; height: 70px; object-fit: cover;
  border-radius: 6px; cursor: pointer;
  border: 2px solid transparent;
}
.product-thumbs img.active { border-color: var(--accent); }
.product-price { font-size: 1.6rem; color: var(--accent); font-weight: 700; margin: 10px 0 20px; }
.product-meta { color: var(--ink-soft); font-size: 0.9rem; margin-top: 24px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: #d8cfc0;
  padding: 48px 0 28px;
  margin-top: 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.site-footer p, .site-footer a { color: #b8ac99; font-size: 0.9rem; }
.site-footer a:hover { color: #fff; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  font-size: 0.8rem;
  color: #8a806f;
  text-align: center;
}

/* ---------- Misc ---------- */
.center { text-align: center; }
.mt-lg { margin-top: 48px; }
.badge-empty {
  padding: 40px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 0.9rem;
}

/* ---------- Icon system (mask-based, inherits currentColor) ---------- */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.icon-bag {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 20.5L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 20.5L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
}
.icon-menu {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}
.icon-close {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.icon-chevron-left {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
}
.icon-chevron-right {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
.icon-plus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.icon-minus {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}
.icon-trash {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2m-9 0 1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2m-9 0 1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13'/%3E%3C/svg%3E");
}
.icon-chat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.4 8.4 8.3 8.3 0 0 1-3.8-.9L3 21l1.9-5.8a8.3 8.3 0 0 1-.9-3.8A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.4 8.4 8.3 8.3 0 0 1-3.8-.9L3 21l1.9-5.8a8.3 8.3 0 0 1-.9-3.8A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E");
}
.icon-check {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- Button micro-interactions & focus ---------- */
.btn { box-shadow: 0 2px 10px rgba(184,88,46,0.18); }
.btn:active { transform: scale(0.96); }
.btn.btn-outline { box-shadow: none; }
.btn.btn-whatsapp { box-shadow: 0 2px 10px rgba(37,211,102,0.25); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Cart toggle refinements ---------- */
.cart-toggle { font-size: 1rem; }
.cart-badge.bump { animation: badgeBump 0.4s ease; }
@keyframes badgeBump {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.88); }
  100% { transform: scale(1); }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--ink);
  color: #fff;
  padding: 13px 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index: 1200;
  max-width: calc(100vw - 40px);
}
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toast .icon-check {
  color: #6fcf97;
  flex-shrink: 0;
}
.toast .toast-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.toast .toast-view {
  color: var(--gold);
  text-decoration: underline;
  cursor: pointer;
  flex-shrink: 0;
  background: none;
  border: none;
  font: inherit;
  font-weight: 700;
  padding: 0;
}

/* ---------- Hero scroll cue ---------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 1;
  animation: scrollCueBounce 2.2s ease-in-out infinite;
  opacity: 0.7;
}
.scroll-cue .icon { width: 0.9em; height: 0.9em; }
@keyframes scrollCueBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(7px); }
}
@media (max-width: 700px) { .scroll-cue { display: none; } }

/* ---------- Cart drawer icon refinements ---------- */
.cart-toggle .icon-bag { width: 1.15em; height: 1.15em; }
.cart-close .icon-close { width: 1.1em; height: 1.1em; }
.qty-btn { display: inline-flex; align-items: center; justify-content: center; }
.qty-btn .icon { width: 0.7em; height: 0.7em; }
.cart-item-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.cart-item-remove .icon { width: 0.85em; height: 0.85em; }
.lightbox-close .icon, .lightbox-nav .icon { width: 1.1em; height: 1.1em; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue, .cart-badge.bump { animation: none; }
}

/* ---------- Stats strip ---------- */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.stat-item { text-align: center; }
.stat-item .stat-num {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-item .stat-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 700px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
}

/* ---------- Category tiles ---------- */
.category-tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.category-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.category-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.category-tile:hover img { transform: scale(1.08); }
.category-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,16,10,0.75) 0%, rgba(20,16,10,0.05) 55%, transparent 100%);
}
.category-tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 18px;
  z-index: 1;
  color: #fff;
}
.category-tile-label h3 { color: #fff; margin-bottom: 2px; font-size: 1.15rem; }
.category-tile-label span {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.8);
}

/* ---------- Featured products (home) ---------- */
.mini-product-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block;
}
.mini-product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.mini-product-card .card-media { aspect-ratio: 1/1; background: var(--paper-alt); overflow: hidden; }
.mini-product-card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.mini-product-card:hover .card-media img { transform: scale(1.06); }
.mini-product-card .card-body { padding: 16px 18px; }
.mini-product-card .card-body h3 { font-size: 0.98rem; margin-bottom: 3px; }
.mini-product-card .card-price { color: var(--accent); font-weight: 700; margin: 4px 0 0; font-size: 0.92rem; }

/* ---------- Signature spotlight ---------- */
.spotlight {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) { .spotlight { grid-template-columns: 1fr; gap: 28px; } }
.spotlight-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  aspect-ratio: 4/3;
}
.spotlight-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Testimonial ---------- */
.testimonial {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.testimonial .quote-mark {
  font-family: var(--serif);
  font-size: 4rem;
  color: var(--gold);
  line-height: 1;
  opacity: 0.5;
  margin-bottom: -10px;
}
.testimonial p.quote-text {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--ink);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 18px;
}
.testimonial .who { color: var(--accent); font-weight: 700; font-size: 0.9rem; }

/* ---------- Awards visual strip (home) ---------- */
.awards-visual {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 44px;
  align-items: center;
}
@media (max-width: 800px) { .awards-visual { grid-template-columns: 1fr; gap: 24px; } }
.awards-visual-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
}
.awards-visual-photo img { width: 100%; height: 100%; object-fit: cover; }
.awards-visual .press-list { justify-content: flex-start; margin-top: 20px; }

/* ---------- Shop hero ---------- */
.shop-hero {
  position: relative;
  overflow: hidden;
  padding: 64px 0 40px;
  text-align: center;
}
.shop-hero::before {
  content: '';
  position: absolute;
  top: -200px; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse, rgba(184,88,46,0.12) 0%, rgba(184,88,46,0) 70%);
  pointer-events: none;
}
.shop-hero-collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  max-width: 100%;
}
.shop-hero-collage img {
  width: 72px; height: 92px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow);
  transform: rotate(var(--r, 0deg));
  border: 3px solid var(--white);
  flex-shrink: 0;
}
.shop-hero-collage img:nth-child(1) { --r: -8deg; margin-top: 14px; }
.shop-hero-collage img:nth-child(2) { --r: 5deg; }
.shop-hero-collage img:nth-child(3) { --r: -3deg; margin-top: 20px; }
.shop-hero-collage img:nth-child(4) { --r: 7deg; margin-top: 4px; }
.shop-hero-collage img:nth-child(5) { --r: -6deg; margin-top: 16px; }
@media (max-width: 600px) {
  .shop-hero-collage img { width: 50px; height: 64px; }
}
@media (max-width: 380px) {
  .shop-hero-collage img { width: 40px; height: 52px; }
  .shop-hero-collage img:nth-child(n) { margin-top: 0; }
}

/* ---------- Segmented filter bar ---------- */
.filter-bar {
  position: sticky;
  top: 73px;
  z-index: 50;
  background: rgba(250, 246, 239, 0.95);
  backdrop-filter: blur(6px);
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn { flex-shrink: 0; }
@media (max-width: 800px) {
  .filter-bar { top: 66px; }
}
.filter-btn {
  position: relative;
}
.filter-btn .count {
  font-size: 0.72rem;
  opacity: 0.65;
  margin-left: 4px;
}

/* ---------- Product card (shop grid) ---------- */
.card {
  position: relative;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(44,36,27,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(44,36,27,0.12);
  border-color: var(--border);
}

.card-media {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: var(--paper-alt);
}
.card-media > a { display: block; width: 100%; height: 100%; }
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.card:hover .card-media img { transform: scale(1.06); }
.card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,16,10,0.28) 0%, rgba(20,16,10,0) 38%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover .card-media::after { opacity: 1; }
@media (hover: none) {
  .card-media::after { opacity: 0.5; }
}

/* Gold-frame accent (same vocabulary as .hero-photo-wrap / .product-gallery-main) */
.card-media::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px solid var(--gold);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 2;
}
.card:hover .card-media::before,
.card:active .card-media::before { opacity: 0.85; }

.card-body { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 8px; }
.card-body-link { display: block; }
.card-body .card-cat {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 3px;
}
.card-body h3 {
  font-size: 0.86rem;
  font-weight: 600;
  font-family: var(--serif);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 0;
}
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-price {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.8rem;
}
.card-quick-add {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper-alt);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.card-quick-add:hover { background: var(--accent); color: #fff; }
.card-quick-add:active { transform: scale(0.9); }
.card-quick-add .icon { width: 0.8em; height: 0.8em; }

.card-actions { display: none; }

/* ---------- Product detail: breadcrumb ---------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--ink-soft); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

/* ---------- Product detail: gallery frame ---------- */
.product-gallery-main {
  position: relative;
}
.product-gallery-main:has(.zoomable-photo) { cursor: zoom-in; }
.product-gallery-main::before {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  z-index: -1;
  opacity: 0.55;
}

/* ---------- Related products ---------- */
.related-products .section-head { margin-bottom: 28px; }

/* ---------- Sticky mobile buy bar ---------- */
.mobile-buy-bar { display: none; }
@media (max-width: 700px) {
  .mobile-buy-bar {
    display: flex;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
    z-index: 90;
  }
  .mobile-buy-bar .btn { flex: 1; justify-content: center; font-size: 0.85rem; padding: 12px 10px; }
  .product-buy-actions { display: none; }
}

/* ---------- About: bio hero treatment ---------- */
.bio-photo-wrap { position: relative; }
.bio-photo-wrap::before {
  content: '';
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  z-index: -1;
  opacity: 0.55;
}
.bio-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-hover); }

/* ---------- Philosophy split section ---------- */
.philosophy-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) { .philosophy-split { grid-template-columns: 1fr; gap: 24px; } }
.philosophy-split .quote-mark {
  font-family: var(--serif);
  font-size: 3.4rem;
  color: var(--gold);
  opacity: 0.55;
  line-height: 1;
  margin-bottom: -6px;
}
.philosophy-split blockquote {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 20px;
}

/* ---------- Teaching / workshop split ---------- */
.teach-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
}
.teach-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding-left: 32px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  padding-bottom: 36px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -32px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--paper-alt);
  box-shadow: 0 0 0 2px var(--accent);
}
.timeline-item .tl-date {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.timeline-item h3 { margin-bottom: 4px; font-size: 1.1rem; }
.timeline-item p { margin: 0; }

/* ---------- Trust badges (product page) ---------- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--paper-alt);
  border-radius: var(--radius);
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.trust-badge .icon { color: var(--accent); width: 1.15em; height: 1.15em; }

/* ---------- Price block (product page) ---------- */
.price-block { margin: 12px 0 20px; }
.price-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
  margin-bottom: 3px;
}
.price-block .product-price { margin: 0; }

/* ---------- Product gallery stage ---------- */
.product-gallery-col { position: relative; }
.product-stage {
  position: relative;
  padding: 26px;
  border-radius: calc(var(--radius) + 12px);
  background:
    radial-gradient(ellipse at 50% 28%, rgba(182,146,63,0.14) 0%, rgba(184,88,46,0.05) 45%, transparent 72%),
    var(--paper-alt);
}
.piece-number {
  display: block;
  margin-top: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}

/* ---------- Variant chips ---------- */
.variant-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.variant-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--white);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.variant-chip:hover { border-color: var(--accent); color: var(--ink); }
.variant-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.variant-chip:active { transform: scale(0.96); }

/* ---------- Zoom on hover (product main image) ---------- */
.product-gallery-main { overflow: hidden; }
.product-gallery-main img { transition: transform 0.5s ease; }
.product-gallery-main:hover img { transform: scale(1.06); }

/* ---------- Press card grid (Awards page) ---------- */
.press-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.press-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent);
  color: var(--accent);
}
.press-card .icon { width: 0.85em; height: 0.85em; color: var(--gold); flex-shrink: 0; }

/* Additional icons: leaf, pin, sparkle */
.icon-leaf {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21c9 0 14-5 14-14V5h-2C8 5 3 10 3 19v2z'/%3E%3Cpath d='M5 21c0-6 3-10 7-13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21c9 0 14-5 14-14V5h-2C8 5 3 10 3 19v2z'/%3E%3Cpath d='M5 21c0-6 3-10 7-13'/%3E%3C/svg%3E");
}
.icon-pin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.3'/%3E%3C/svg%3E");
}
.icon-sparkle {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18'/%3E%3C/svg%3E");
}

/* ---------- Masonry gallery (Photos page) ---------- */
.masonry-gallery {
  column-count: 4;
  column-gap: 18px;
}
@media (max-width: 1000px) { .masonry-gallery { column-count: 3; } }
@media (max-width: 700px) { .masonry-gallery { column-count: 2; column-gap: 12px; } }
@media (max-width: 460px) { .masonry-gallery { column-count: 1; } }

.masonry-gallery .gallery-item {
  break-inside: avoid;
  margin-bottom: 18px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  position: relative;
  background: var(--paper-alt);
}
.masonry-gallery .gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}
.masonry-gallery .gallery-item:hover img { transform: scale(1.04); }
.masonry-gallery .gallery-item .caption {
  opacity: 1;
  background: linear-gradient(to top, rgba(20,16,10,0.78) 0%, rgba(20,16,10,0.35) 55%, transparent 100%);
  padding: 24px 14px 12px;
  font-size: 0.82rem;
  font-weight: 500;
}

/* ---------- Photos hero collage variant ---------- */
.photos-hero-collage img { width: 64px; height: 84px; }

/* ================================================================
   MOBILE LAYER — tighter type scale, denser layout, 2-col grids
   ================================================================ */
@media (max-width: 700px) {

  /* --- Type scale --- */
  h1 { font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.18; }
  h2 { font-size: clamp(1.35rem, 5.6vw, 1.65rem); line-height: 1.2; }
  h3 { font-size: 1.02rem; }
  p  { font-size: 0.92rem; line-height: 1.55; margin-bottom: 0.85em; }
  .eyebrow { font-size: 0.64rem; letter-spacing: 0.14em; margin-bottom: 0.55em; }

  /* --- Rhythm / spacing --- */
  .section { padding: 38px 0; }
  .section-head { margin-bottom: 24px; }
  .hero { padding: 28px 0 34px; }
  .shop-hero { padding: 28px 0 20px; }
  .hero-grid { gap: 24px; }
  .grid { gap: 14px; }
  .hero-actions { gap: 10px; margin-top: 1.1em; }

  /* --- Buttons --- */
  .btn { padding: 10px 18px; font-size: 0.85rem; gap: 6px; }

  /* --- Keep grids at 2 columns instead of blowing up to 1 --- */
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .masonry-gallery { column-count: 2; column-gap: 12px; }
  .masonry-gallery .gallery-item { margin-bottom: 12px; border-radius: 10px; }

  /* --- Hero imagery: shorter, less dominant --- */
  .hero-photo { aspect-ratio: 1/1; }
  .hero-photo-wrap::before,
  .bio-photo-wrap::before,
  .product-gallery-main::before { inset: 8px -8px -8px 8px; }
  .hero::before, .hero::after { display: none; }
  .product-stage { padding: 16px; border-radius: calc(var(--radius) + 8px); }
  .trust-badges { padding: 13px 15px; gap: 10px 16px; margin-top: 22px; }

  .hero-badge {
    padding: 7px 11px;
    gap: 7px;
    bottom: -14px;
    left: 10px;
    border-radius: 8px;
  }
  .hero-badge .num { font-size: 1.15rem; }
  .hero-badge .label { font-size: 0.58rem; max-width: 70px; line-height: 1.15; }

  /* --- Stats --- */
  .stats-strip { gap: 18px 12px; margin-top: 30px; }
  .stat-item .stat-num { font-size: clamp(1rem, 5vw, 1.35rem); margin-bottom: 3px; }
  .stat-item .stat-label { font-size: 0.62rem; letter-spacing: 0.05em; }

  /* --- Quotes / testimonial --- */
  .testimonial .quote-mark,
  .philosophy-split .quote-mark { font-size: 2.2rem; margin-bottom: -4px; }
  .testimonial p.quote-text { font-size: 1rem; line-height: 1.45; margin-bottom: 12px; }
  .testimonial .who { font-size: 0.78rem; }
  .philosophy-split blockquote { font-size: 1rem; line-height: 1.45; margin-bottom: 14px; }
  .quote-block { padding: 18px 18px; margin-top: 20px; }

  /* --- Category tiles --- */
  .category-tile { aspect-ratio: 1/1; border-radius: 10px; }
  .category-tile-label { padding: 12px 11px; }
  .category-tile-label h3 { font-size: 0.92rem; }
  .category-tile-label span { font-size: 0.66rem; }

  /* --- Mini product cards (home / related) --- */
  .mini-product-card .card-body { padding: 10px 12px 12px; }
  .mini-product-card .card-body h3 { font-size: 0.82rem; line-height: 1.25; }
  .mini-product-card .card-price { font-size: 0.78rem; }

  /* --- Media blocks --- */
  .spotlight-photo, .awards-visual-photo, .teach-photo { aspect-ratio: 3/2; }
  .spotlight { gap: 20px; }

  /* --- Press cards --- */
  .press-card { padding: 12px 13px; font-size: 0.78rem; border-radius: 10px; }
  .press-chip { padding: 7px 13px; font-size: 0.75rem; }

  /* --- Timeline --- */
  .timeline { padding-left: 24px; }
  .timeline-item { padding-bottom: 24px; }
  .timeline-item::before { left: -24px; width: 11px; height: 11px; }
  .timeline-item h3 { font-size: 0.98rem; }
  .timeline-item .tl-date { font-size: 0.66rem; }

  /* --- Product detail --- */
  .product-grid { gap: 22px; }
  .product-price { font-size: 1.25rem; margin: 6px 0 14px; }
  .breadcrumb { font-size: 0.72rem; margin-bottom: 16px; }
  .trust-badges { gap: 10px; margin-top: 18px; padding-top: 14px; }
  .trust-badge { font-size: 0.72rem; }
  .variant-chip { padding: 5px 11px; font-size: 0.75rem; }
  .related-products .section-head { margin-bottom: 18px; }

  /* --- Filter bar --- */
  .filter-bar { padding: 10px 16px; margin-bottom: 24px !important; }
  .filter-btn { padding: 6px 13px; font-size: 0.76rem; }

  /* --- Cart drawer --- */
  .cart-drawer-head { padding: 15px 18px; }
  .cart-drawer-list { padding: 12px 18px; }
  .cart-drawer-foot { padding: 14px 18px 18px; }

  /* --- Nav --- */
  .logo { font-size: 1.05rem; }
  .nav { padding: 7px 7px 7px 15px; gap: 10px; }
  .cart-toggle, .nav-toggle { width: 34px; height: 34px; }

  /* --- Footer --- */
  .site-footer { padding: 32px 0 20px; margin-top: 28px; }
  .footer-grid { gap: 22px; margin-bottom: 22px; }
  .site-footer h4 { font-size: 0.92rem; margin-bottom: 10px; }
  .site-footer p, .site-footer a { font-size: 0.82rem; }
  .footer-bottom { font-size: 0.72rem; padding-top: 16px; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  #productGrid { gap: 12px 8px; }
  .card-body { padding: 10px 11px 12px; }
  .card-body h3 { font-size: 0.8rem; }
  .card-price { font-size: 0.75rem; }
}

/* ================================================================
   AESTHETIC PASS — typography refinement, nav, surfaces
   ================================================================ */

/* --- Typographic refinement now that real fonts are loaded --- */
h1, h2 { letter-spacing: -0.015em; }
h1 { font-weight: 600; }
h2 { font-weight: 600; }
h3 { font-weight: 600; letter-spacing: -0.005em; }
body { letter-spacing: -0.006em; }
.eyebrow { font-family: var(--sans); }

/* Subtle warm paper depth behind the whole page */
body {
  background-image:
    radial-gradient(ellipse 90% 60% at 15% 0%, rgba(184,88,46,0.045), transparent 60%),
    radial-gradient(ellipse 80% 50% at 90% 8%, rgba(182,146,63,0.05), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Softer, more layered elevation */
:root {
  --shadow: 0 1px 2px rgba(44,36,27,0.04), 0 8px 24px rgba(44,36,27,0.06);
  --shadow-hover: 0 2px 4px rgba(44,36,27,0.05), 0 18px 40px rgba(44,36,27,0.12);
}

/* Section headings get a small decorative rule */
.section-head .eyebrow { position: relative; }
.section-head h2 + p, .section-head h1 + p { margin-top: 12px; }

/* Buttons: refined weight + easing */
.btn {
  font-family: var(--sans);
  letter-spacing: -0.005em;
  transition: background 0.25s cubic-bezier(0.16,1,0.3,1),
              transform 0.25s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.25s ease;
}

/* Cards / surfaces: unify radius language */
.card, .mini-product-card, .press-card, .category-tile,
.spotlight-photo, .awards-visual-photo, .teach-photo,
.hero-photo, .bio-photo, .product-gallery-main,
.masonry-gallery .gallery-item {
  border-radius: 14px;
}
.card-media { border-radius: 14px 14px 0 0; }

/* Quote marks sit better with the real serif */
.testimonial .quote-mark, .philosophy-split .quote-mark {
  font-family: var(--serif);
  font-weight: 700;
}

/* ================================================================
   NAV — refined desktop pill + full-screen mobile menu
   ================================================================ */
.site-header { z-index: 300; }

.nav {
  background: rgba(255,255,255,0.72);
  border-color: rgba(226,215,192,0.55);
  box-shadow: 0 1px 2px rgba(44,36,27,0.03), 0 6px 22px rgba(44,36,27,0.05);
}
.site-header.scrolled .nav {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 1px 2px rgba(44,36,27,0.04), 0 10px 30px rgba(44,36,27,0.1);
}

.logo { letter-spacing: -0.01em; font-weight: 600; }

.nav-links a { letter-spacing: -0.005em; }
.nav-links a.active {
  box-shadow: 0 2px 10px rgba(184,88,46,0.28);
}

.cart-toggle, .nav-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cart-toggle:hover, .nav-toggle:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: none;
}

/* --- Mobile: full-screen elegant menu --- */
@media (max-width: 800px) {
  .nav-links {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    background: var(--paper);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 72px 24px 48px;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.32s ease, visibility 0.32s ease, transform 0.32s ease;
    z-index: 200;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }

  .nav-links li { width: 100%; max-width: 340px; }
  .nav-links a {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 500;
    text-align: center;
    color: var(--ink);
    padding: 14px 18px;
    border-radius: 12px;
    background: transparent;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease, color 0.2s ease;
  }
  .nav-links.open a { opacity: 1; transform: none; }
  .nav-links.open li:nth-child(1) a { transition-delay: 0.06s; }
  .nav-links.open li:nth-child(2) a { transition-delay: 0.11s; }
  .nav-links.open li:nth-child(3) a { transition-delay: 0.16s; }
  .nav-links.open li:nth-child(4) a { transition-delay: 0.21s; }
  .nav-links.open li:nth-child(5) a { transition-delay: 0.26s; }
  .nav-links a.active {
    background: transparent;
    color: var(--accent);
    box-shadow: none;
  }
  .nav-links a.active::after {
    content: '';
    display: block;
    width: 26px;
    height: 2px;
    background: var(--accent);
    margin: 8px auto 0;
    border-radius: 2px;
  }

  /* hamburger becomes a close icon while open */
  .nav-toggle.is-open {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  .nav-toggle.is-open .icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  }

  body.menu-open { overflow: hidden; }
}

/* ================================================================
   MOBILE — MINIMAL EDIT
   Cuts duplicated/secondary content so the phone scroll stays short
   and editorial. Every rule here is display-only: remove a line to
   bring the content back.
   ================================================================ */
@media (max-width: 700px) {

  /* Whole sections that repeat something else on the page */
  .mobile-hide { display: none !important; }

  /* Secondary descriptive copy under section headings — the heading
     already says it. Keeps headings breathing instead of stacked text. */
  .section-head p { display: none; }

  /* Card blurbs (keeps image + title). Price is .card-price, protected. */
  .card-body p:not(.card-price) { display: none; }

  /* Hero badge duplicates the "23+ Years of Craft" stat below it */
  .hero-badge { display: none; }

  /* Footer "Explore" column duplicates the sticky nav */
  .footer-grid > div:nth-child(2) { display: none; }

  /* Collage: 3 photos reads intentional, 5 reads busy */
  .shop-hero-collage img:nth-child(n+4) { display: none; }

  /* Trust badges: stack as one quiet column, not three chips */
  .trust-badges { flex-direction: column; gap: 7px; }

  /* Stagger felt slow on a short screen — reveal together */
  .reveal-delay-1, .reveal-delay-2,
  .reveal-delay-3, .reveal-delay-4 { transition-delay: 0s; }

  /* ---- Editorial touch: left-aligned headings + accent rule ---- */
  .section-head {
    text-align: left;
    max-width: none;
    margin-bottom: 20px;
  }
  .section-head .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .section-head .eyebrow::after {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--gold);
    opacity: 0.8;
  }
  /* …but hero banners and the pull-quote stay centered */
  .shop-hero .section-head,
  .testimonial,
  .center.section-head { text-align: center; }
  .shop-hero .section-head .eyebrow::after { display: none; }
}

/* ================================================================
   MOBILE — HEADER & CART SHEET REDESIGN
   (keep this block last; it intentionally overrides the pill nav
   and the side-drawer cart on small screens)
   ================================================================ */
@media (max-width: 800px) {

  /* ---- Header: drop the pill, go flat + frosted-on-scroll ---- */
  .site-header { padding: 0; }
  .nav {
    max-width: none;
    margin: 0;
    padding: 13px 14px 13px 18px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
    transition: background 0.28s ease, border-color 0.28s ease;
  }
  .site-header.scrolled .nav {
    background: rgba(250, 246, 239, 0.86);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom-color: rgba(226, 215, 192, 0.75);
    box-shadow: none;
  }

  .logo { font-size: 1.12rem; }

  /* Bare icon buttons — no rings, bigger tap area */
  .cart-toggle, .nav-toggle {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--ink);
  }
  .cart-toggle:hover, .nav-toggle:hover {
    background: transparent;
    color: var(--accent);
  }
  .cart-toggle:active, .nav-toggle:active { background: rgba(44,36,27,0.06); }
  .cart-toggle .icon-bag { width: 1.25em; height: 1.25em; }
  .nav-right { gap: 2px; }

  /* Cleaner 2-rule hamburger */
  .nav-toggle .icon-menu {
    width: 1.3em; height: 1.3em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 9h16M4 15h10'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 9h16M4 15h10'/%3E%3C/svg%3E");
  }
  .nav-toggle.is-open {
    background: transparent;
    border: none;
    color: var(--accent);
  }

  .cart-badge {
    top: 2px; right: 2px;
    border-color: var(--paper);
  }
}

@media (max-width: 700px) {

  /* ---- Cart: bottom sheet instead of full-screen side drawer ---- */
  .cart-drawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 86dvh;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 44px rgba(20,16,10,0.28);
    transform: translateY(100%);
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .cart-drawer.open { transform: translateY(0); }

  /* grab handle */
  .cart-drawer-head {
    position: relative;
    padding: 22px 20px 14px;
    border-bottom: 1px solid var(--border);
  }
  .cart-drawer-head::before {
    content: '';
    position: absolute;
    top: 9px; left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px;
    border-radius: 999px;
    background: var(--border);
  }
  .cart-drawer-head h3 { font-size: 1.05rem; }

  .cart-drawer-list { padding: 6px 20px; }
  .cart-drawer-foot { padding: 14px 20px 20px; }

  /* roomier, cleaner rows */
  .cart-item { padding: 14px 0; gap: 14px; align-items: center; }
  .cart-item img, .cart-item-noimg {
    width: 58px; height: 58px;
    border-radius: 10px;
  }
  .cart-item-name { font-size: 0.88rem; white-space: normal; line-height: 1.3; }
  .cart-item-price { margin: 3px 0 8px; }
  .qty-btn {
    width: 28px; height: 28px;
    background: var(--paper-alt);
    border: none;
  }
  .cart-item-qty { gap: 10px; }
  .cart-item-remove { font-size: 0.74rem; text-decoration: none; opacity: 0.75; }
  .cart-note { font-size: 0.7rem; }
}

body.drawer-open { overflow: hidden; }

/* ================================================================
   MOBILE — FLOATING BOTTOM TAB BAR
   Repurposes the existing .nav-links <ul> (order is identical on
   every page: Home / About / Photos / Awards / Shop) into an
   app-style pill dock. CSS-only — no markup changes.
   ================================================================ */
@media (max-width: 800px) {

  /* Top bar keeps only brand + cart; nav moves to the bottom */
  .nav-toggle { display: none !important; }
  body.menu-open { overflow: auto; }

  .nav-links {
    position: fixed;
    inset: auto;                /* reset the old full-screen menu box first */
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 24px);
    height: auto;
    max-height: none;

    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    padding: 7px 8px;

    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(226, 215, 192, 0.85);
    border-radius: 999px;
    box-shadow:
      0 2px 6px rgba(44, 36, 27, 0.06),
      0 12px 34px rgba(44, 36, 27, 0.16);

    opacity: 1;
    visibility: visible;
    overflow: visible;
    z-index: 95;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .nav-links li { width: auto; max-width: none; }

  .nav-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 58px;
    padding: 7px 6px 6px;
    border-radius: 999px;
    font-size: 0;               /* hides the original text node */
    background: transparent;
    color: var(--ink-soft);
    opacity: 1;
    transform: none;
    transition: background 0.22s ease, color 0.22s ease;
  }

  /* icon */
  .nav-links a::before {
    content: '';
    width: 21px;
    height: 21px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }

  /* short label */
  .nav-links a::after {
    font-family: var(--sans);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
  }

  /* active tab */
  .nav-links a.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 3px 12px rgba(184, 88, 46, 0.34);
  }
  .nav-links a.active::after { display: block; width: auto; height: auto; background: none; margin: 0; border-radius: 0; }
  .nav-links a:active { transform: scale(0.94); }

  /* ---- per-tab icon + label (order verified across all pages) ---- */
  .nav-links li:nth-child(1) a::after { content: 'Home'; }
  .nav-links li:nth-child(1) a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V20a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V20a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1V9.5'/%3E%3C/svg%3E");
  }

  .nav-links li:nth-child(2) a::after { content: 'About'; }
  .nav-links li:nth-child(2) a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c0-3.6 3.4-6 7.5-6s7.5 2.4 7.5 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c0-3.6 3.4-6 7.5-6s7.5 2.4 7.5 6'/%3E%3C/svg%3E");
  }

  .nav-links li:nth-child(3) a::after { content: 'Photos'; }
  .nav-links li:nth-child(3) a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='m4 17 5-4.5 3.5 3L16 12l4 4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='m4 17 5-4.5 3.5 3L16 12l4 4'/%3E%3C/svg%3E");
  }

  .nav-links li:nth-child(4) a::after { content: 'Awards'; }
  .nav-links li:nth-child(4) a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 5.5H4.5V7a3 3 0 0 0 3 3M17 5.5h2.5V7a3 3 0 0 1-3 3'/%3E%3Cpath d='M12 14v3M9 20.5h6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 5.5H4.5V7a3 3 0 0 0 3 3M17 5.5h2.5V7a3 3 0 0 1-3 3'/%3E%3Cpath d='M12 14v3M9 20.5h6'/%3E%3C/svg%3E");
  }

  .nav-links li:nth-child(5) a::after { content: 'Shop'; }
  .nav-links li:nth-child(5) a::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 20.5L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 6 20.5L5 8z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
  }

  /* Keep content clear of the floating dock. Reserve it INSIDE the footer, never
     on body: body's background is --paper, so reserving there paints a beige
     strip below the dark footer that reads as an empty gap at the end of the
     page. The footer is the last element in every page, so this is equivalent. */
  body { padding-bottom: 0; }
  .site-footer {
    margin-bottom: 0;
    /* Only a small strip: main.js pins the dock hidden once the footer is on
       screen, so nothing overlays the copyright line down here. Reserving the
       dock's full 79px instead just ends the page in empty dark brown. */
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  /* product pages: stack the buy bar directly above the dock */
  .mobile-buy-bar {
    bottom: calc(78px + env(safe-area-inset-bottom));
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    border-radius: 0;
  }
}

/* very small phones: tighten the dock so 5 tabs still fit */
@media (max-width: 360px) {
  .nav-links { gap: 0; padding: 6px; }
  .nav-links a { min-width: 52px; padding: 6px 3px 5px; }
  .nav-links a::after { font-size: 0.54rem; }
  .nav-links a::before { width: 19px; height: 19px; }
}

/* guard: the old full-screen-menu rules must not fight the bottom dock */
@media (max-width: 800px) {
  .nav-links.open {
    transform: translateX(-50%);
    max-height: none;
    padding: 7px 8px;
  }
  .nav-links.open a { transition-delay: 0s !important; }
}

/* ================================================================
   MOBILE — TOUCH FEEL & MOTION
   Appended last on purpose: these rules refine the dock, cart sheet
   and lightbox defined above and rely on source order to win.
   KEEP THIS BLOCK AT THE BOTTOM OF THE FILE.
   ================================================================ */

/* ---- Touch hygiene (harmless on desktop) ---- */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-padding-top: 80px; }          /* in-page anchors clear the fixed header */
/* No rubber-band white flash past the ends. Root ONLY — never add body here.
   body has overflow-x:hidden, which per spec forces its overflow-y to compute to
   auto, making body its own scroll box with nothing in it to scroll. Adding
   overscroll-behavior-y:none to that box stops the wheel from chaining up to
   <html>, so the trackpad silently does nothing while dragging the scrollbar
   still works. On the root it propagates to the viewport, which is what we want. */
html { overscroll-behavior-y: none; }

/* Inner scrollers must not chain to the page behind them */
.cart-drawer-list,
.filter-bar {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Lightbox ---------- */
/* Was display:none/flex, which cannot animate. Swap to opacity so it fades,
   and so the drag transform has something to animate against. */
.lightbox {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}
.lightbox.open { opacity: 1; visibility: visible; pointer-events: auto; }
.lightbox img {
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  touch-action: pinch-zoom;   /* our JS owns pan; the browser keeps pinch-to-zoom */
}
.lightbox img.dragging { transition: none; }   /* follow the finger 1:1 */
body.lightbox-open { overflow: hidden; }

@media (max-width: 700px) {
  .lightbox { padding: 0; }
  .lightbox img {
    max-width: 100vw;
    max-height: 76dvh;
    border-radius: 0;
  }
  .lightbox-close {
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    width: 42px; height: 42px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  /* Arrows are redundant once the image can be swiped. */
  .lightbox-nav { display: none; }

  /* One-time affordance, fades itself out. */
  .lightbox::after {
    content: 'Swipe to browse · swipe down to close';
    position: absolute;
    left: 0; right: 0;
    bottom: calc(18px + env(safe-area-inset-bottom));
    text-align: center;
    font-family: var(--sans);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
    opacity: 0;
  }
  .lightbox.open::after { animation: hintFade 3.6s ease forwards; }
}
@keyframes hintFade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  65%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Bottom dock: hide while reading down ---------- */
@media (max-width: 800px) {
  .nav-links {
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
  }
  body.dock-hidden .nav-links {
    transform: translateX(-50%) translateY(calc(100% + 26px));
    opacity: 0;
    pointer-events: none;
  }

  /* Product buy bar rides down with the dock instead of leaving a gap. */
  .mobile-buy-bar { transition: bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
  body.dock-hidden .mobile-buy-bar {
    bottom: 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  /* Toast has to clear the dock — at bottom:28px it was landing on top of it. */
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  body.dock-hidden .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .toast { transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
}

/* ---------- Tap feedback ---------- */
/* Hover styles stick on touch screens, so trade them for press states. */
@media (hover: none) {
  .card:hover,
  .mini-product-card:hover,
  .category-tile:hover { transform: none; box-shadow: var(--shadow); }
  .card:hover .card-media img,
  .mini-product-card:hover .card-media img,
  .category-tile:hover img { transform: none; }

  .card:active,
  .mini-product-card:active,
  .category-tile:active,
  .press-card:active,
  .gallery-item:active {
    transform: scale(0.972);
    transition: transform 0.12s ease;
  }
  .btn:active { transform: scale(0.97); }
  .filter-btn:active { transform: scale(0.94); }
  .qty-btn:active { transform: scale(0.9); }
}

/* ---------- Filter rail ---------- */
@media (max-width: 800px) {
  .filter-bar {
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    /* Fade the right edge so a scrollable row of chips doesn't read as "that's all of them" */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 36px), transparent 100%);
  }
  .filter-btn { scroll-snap-align: start; }

  /* Comfortable tap targets on the small controls. */
  .cart-item-remove { padding: 6px 0; display: inline-block; }
  .lightbox-close, .cart-close { min-width: 42px; min-height: 42px; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox img,
  .nav-links,
  .mobile-buy-bar,
  .toast,
  .cart-drawer { transition: none !important; }
  .lightbox.open::after { animation: none; opacity: 1; }
  .card:active,
  .mini-product-card:active,
  .category-tile:active,
  .btn:active { transform: none; }
}

/* ================================================================
   MOBILE — PRODUCT PAGE BOTTOM STACK
   The buy bar and the nav dock are both fixed. Before this block they
   overlapped by ~1px and together ate 131px of a 660px viewport, while
   body only reserved 78px — so the title and price sat permanently
   underneath. Give them a real gap, one visual language, and enough
   reserved space to scroll clear.
   ================================================================ */
@media (max-width: 700px) {

  /* Float the buy bar so it reads as a pair with the dock pill instead
     of a white shelf the pill is resting on. */
  .mobile-buy-bar {
    left: 12px;
    right: 12px;
    bottom: calc(90px + env(safe-area-inset-bottom));   /* clears the 79px dock + gap */
    padding: 8px;
    gap: 8px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(226, 215, 192, 0.85);
    border-top: 1px solid rgba(226, 215, 192, 0.85);
    border-radius: 999px;
    box-shadow:
      0 2px 6px rgba(44, 36, 27, 0.06),
      0 12px 34px rgba(44, 36, 27, 0.16);
  }
  .mobile-buy-bar .btn {
    border-radius: 999px;
    padding: 11px 10px;
    font-size: 0.84rem;
  }

  /* When the dock slides away the bar drops into its place rather than
     leaving a hole, and keeps its floating inset. */
  body.dock-hidden .mobile-buy-bar {
    bottom: calc(14px + env(safe-area-inset-bottom));
    padding-bottom: 8px;
  }

  /* Reserve the full stack: dock (79) + gap (11) + bar (61) + breathing room.
     :has() keeps this scoped to product pages with no markup change.
     This is for AFTER the footer only (three older .product-page-main
     padding-bottom rules used to double up with this one here, stacking to
     ~300px of dead space below the footer — don't re-add one).
     Reserved inside the footer for the same reason as the dock allowance above:
     on body it paints a beige void that the buy bar then appears to hang in. */
  body:has(.mobile-buy-bar) { padding-bottom: 0; }
  body:has(.mobile-buy-bar) .site-footer {
    /* Buy bar only. With the dock pinned hidden here it sits at bottom:14px and
       reaches 76px up, so this clears it without a band of dead space. */
    padding-bottom: calc(20px + 84px + env(safe-area-inset-bottom));
  }

  /* Unlike the dock, the buy bar never hides — it just drops closer to the
     bottom edge. So it permanently floats over whatever's last on the page,
     which is "You may also like". Without this, its bottom row's price sits
     underneath the bar with nothing left to scroll past to reveal it. */
  .related-products { padding-bottom: 110px; }
}

/* ================================================================
   PERFORMANCE — RENDER COST
   The shop grid holds 363 cards and the awards page 129. Laying all of
   them out on every filter change measured 75ms worst case; letting the
   browser skip offscreen subtrees brings that to 15ms. `auto` in
   contain-intrinsic-size means the real size is remembered after first
   render, so scroll position and the scrollbar stay stable.
   ================================================================ */
#productGrid .card {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}
.gallery-grid .gallery-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
/* Deliberately NOT applied to .masonry-gallery — it uses CSS columns, which
   need real heights to balance, and it only holds 8 items anyway. */

/* No double-tap-zoom delay on anything interactive. */
a, button, .btn, .card, .filter-btn, .gallery-item, .category-tile, .qty-btn {
  touch-action: manipulation;
}

/* Frosted layers are the most expensive thing painted per scroll frame, and
   on mobile up to three are on screen at once (header + dock + buy bar).
   Trade blur radius and the saturate() pass for slightly more opaque
   backgrounds — visually near-identical, materially cheaper to composite. */
@media (max-width: 800px) {
  .site-header.scrolled .nav {
    background: rgba(250, 246, 239, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .nav-links {
    background: rgba(255, 255, 255, 0.91);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .mobile-buy-bar {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
}

/* Smooth scrolling is a motion effect too. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ================================================================
   SHOP SEARCH
   363 pieces behind five category chips was not findable. Search
   composes with the category filter rather than replacing it.
   ================================================================ */
.icon-search {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4 4'/%3E%3C/svg%3E");
}

.shop-search { margin-bottom: 14px; }

.shop-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.shop-search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 88, 46, 0.13);
}
.shop-search-field .icon-search {
  width: 1.05em;
  height: 1.05em;
  color: var(--ink-soft);
  opacity: 0.75;
}
.shop-search-field input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.92rem;   /* >=16px on mobile below, so iOS does not zoom on focus */
  color: var(--ink);
  padding: 13px 0;
}
.shop-search-field input::placeholder { color: var(--ink-soft); opacity: 0.65; }
.shop-search-field input::-webkit-search-cancel-button { display: none; }

.shop-search-clear {
  border: none;
  background: var(--paper-alt);
  color: var(--ink-soft);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.shop-search-clear .icon { width: 0.75em; height: 0.75em; }
.shop-search-clear:hover { background: var(--border); color: var(--ink); }

.shop-result-count {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.shop-result-count:empty { display: none; }

.shop-no-results {
  text-align: center;
  padding: 40px 0 10px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.link-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 700px) {
  /* 16px is the threshold below which iOS Safari zooms the page on focus. */
  .shop-search-field input { font-size: 16px; padding: 12px 0; }
  .shop-search { margin-bottom: 12px; }
  .shop-result-count { margin-bottom: 10px; font-size: 0.72rem; }
}