/* ============================================================
   PÓ DE LUA — design tokens
   Palette and type lifted directly from the brand mark:
   raw stoneware cream, terracotta clay, ink charcoal, worn gold.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --cream: #f2ebe0;
  --cream-soft: #f7f2ea;
  --stone: #e6dcc8;
  --clay: #c17a54;
  --clay-dark: #9c5e3c;
  --sage: #8a9a86;
  --charcoal: #2a2521;
  --ink-muted: #756a5f;
  --gold: #af8b4e;
  --line: #d9cdb8;

  --radius-card: 22px;
  --shadow-soft: 0 12px 30px -18px rgba(42, 37, 33, 0.35);
  --shadow-lift: 0 20px 45px -20px rgba(42, 37, 33, 0.45);

  --display: 'Cormorant Garamond', serif;
  --sans: 'Jost', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(242, 235, 224, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img { height: 40px; width: auto; }

.brand-word {
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.14em;
  font-weight: 500;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.main-nav a {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.main-nav a:hover,
.main-nav a.active { border-color: var(--clay); color: var(--clay-dark); }

.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--charcoal);
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}
.cart-btn:hover { background: var(--charcoal); color: var(--cream); }
.cart-btn svg { width: 16px; height: 16px; }

.cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--clay);
  color: var(--cream-soft);
  font-family: var(--sans);
  font-size: 0.65rem;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.cart-count[data-empty="true"] { display: none; }

.nav-toggle {
  display: none;
  width: 32px;
  height: 24px;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--charcoal);
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 11px; }
.nav-toggle span:nth-child(3) { top: 22px; }

/* ---------------------------------------------------------------
   Hero
--------------------------------------------------------------- */

.hero {
  padding: 64px 0 40px;
  overflow: hidden;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.hero-copy .eyebrow { margin-bottom: 18px; }

.hero-copy h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.08;
  margin: 0 0 22px;
  letter-spacing: 0.01em;
}
.hero-copy h1 em {
  font-style: italic;
  color: var(--clay-dark);
}

.hero-copy p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 46ch;
  margin: 0 0 30px;
}

.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-primary {
  background: var(--charcoal);
  color: var(--cream-soft);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-ghost {
  color: var(--charcoal);
  border: 1px solid var(--clay);
}
.btn-ghost:hover { background: var(--clay); color: var(--cream-soft); }

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual img {
  max-width: 420px;
  width: 100%;
  filter: drop-shadow(0 24px 40px rgba(42, 37, 33, 0.18));
}

.phase-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 8px 0 38px;
}
.phase-divider .line {
  height: 1px;
  width: 64px;
  background: var(--line);
}
.phase-divider .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------------------------------------------------------------
   Category pills
--------------------------------------------------------------- */

.category-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 44px;
}

.pill {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: all 0.2s ease;
}
.pill:hover { border-color: var(--clay); color: var(--clay-dark); }
.pill.active {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--cream-soft);
}

/* ---------------------------------------------------------------
   Product grid + card art
--------------------------------------------------------------- */

.shop-section { padding: 10px 0 90px; }

.section-heading {
  text-align: center;
  margin-bottom: 8px;
}
.section-heading h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.2rem;
  margin: 6px 0 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.product-card {
  background: var(--cream-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--clay);
}
.product-card:hover .carousel-img {
  transform: scale(1.04);
}


.card-art-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(42, 37, 33, 0.82);
  color: var(--cream-soft);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.product-card:hover .card-art-hint {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.carousel-img {
  transition: transform 0.4s ease;
}
.card-art {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-art .form {
  width: 58%;
  height: 58%;
}

.tone-clay .form { background: linear-gradient(160deg, #d9976f 0%, var(--clay) 55%, var(--clay-dark) 100%); }
.tone-stone .form { background: linear-gradient(160deg, #f2ead9 0%, #e0d3ba 60%, #cbb98f 100%); }
.tone-cream .form { background: linear-gradient(160deg, #fbf7ee 0%, #ecdfc4 100%); }
.tone-gold .form { background: linear-gradient(160deg, #d8bb7c 0%, var(--gold) 60%, #8c6c37 100%); }
.tone-sea .form { background: linear-gradient(160deg, #b7c4b0 0%, var(--sage) 60%, #6c7c67 100%); }

.card-art .grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(42,37,33,0.06) 1px, transparent 1.4px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

.shape-vase .form,
.shape-vase-round .form,
.shape-vase-tall .form { clip-path: path('M50 4C34 4 30 22 34 34C22 40 16 60 20 78C23 92 36 98 50 98C64 98 77 92 80 78C84 60 78 40 66 34C70 22 66 4 50 4Z'); }
.shape-vase-round .form { clip-path: path('M50 6C38 6 34 18 36 28C20 34 14 54 18 70C22 90 38 98 50 98C62 98 78 90 82 70C86 54 80 34 64 28C66 18 62 6 50 6Z'); }
.shape-vase-tall .form { clip-path: path('M50 3C40 3 37 14 38 24C24 30 20 48 22 66C24 88 36 99 50 99C64 99 76 88 78 66C80 48 76 30 62 24C63 14 60 3 50 3Z'); }

.shape-bowl .form,
.shape-bowl-wide .form,
.shape-plate .form { clip-path: path('M8 42C8 42 18 90 50 90C82 90 92 42 92 42C92 34 74 30 50 30C26 30 8 34 8 42Z'); }
.shape-bowl-wide .form { clip-path: path('M4 40C4 40 14 86 50 86C86 86 96 40 96 40C96 30 74 24 50 24C26 24 4 30 4 40Z'); }
.shape-plate .form { clip-path: path('M4 48C4 66 24 80 50 80C76 80 96 66 96 48C96 30 76 18 50 18C24 18 4 30 4 48Z'); }

.shape-cup .form { clip-path: path('M20 30C20 30 18 78 30 88C38 94 62 94 70 88C82 78 80 30 80 30C80 30 66 24 50 24C34 24 20 30 20 30Z'); }
.shape-candle .form { clip-path: path('M36 96C32 96 30 90 30 82L30 40C30 30 40 22 50 22C60 22 70 30 70 40L70 82C70 90 68 96 64 96Z'); }

.shape-earring-hoop .form { clip-path: path('M50 8C27 8 12 26 12 50C12 70 24 86 42 92L42 76C30 71 24 61 24 50C24 33 35 20 50 20C65 20 76 33 76 50C76 61 70 71 58 76L58 92C76 86 88 70 88 50C88 26 73 8 50 8Z'); }
.shape-earring-arch .form { clip-path: path('M50 10C28 10 14 28 14 52L14 92L30 92L30 52C30 38 38 26 50 26C62 26 70 38 70 52L70 92L86 92L86 52C86 28 72 10 50 10Z'); }

.shape-pendant .form { clip-path: circle(38% at 50% 46%); }
.shape-ring .form { clip-path: path('M50 10C28 10 10 28 10 50C10 72 28 90 50 90C72 90 90 72 90 50C90 28 72 10 50 10ZM50 30C61 30 70 39 70 50C70 61 61 70 50 70C39 70 30 61 30 50C30 39 39 30 50 30Z'); }

.card-body {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.card-category {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.card-name {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 500;
  margin: 0;
}

.card-desc {
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0 0 6px;
  flex: 1;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.card-price {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--clay-dark);
}

.add-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
}
.add-btn:hover { background: var(--charcoal); color: var(--cream-soft); }
.add-btn:active { transform: scale(0.92); }
.add-btn svg { width: 16px; height: 16px; }

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-muted);
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------
   About / trust strip
--------------------------------------------------------------- */

.trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
  margin-bottom: 80px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.trust-grid h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  margin: 10px 0 4px;
  font-weight: 500;
}
.trust-grid p {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}
.trust-icon {
  width: 30px; height: 30px;
  margin: 0 auto;
  color: var(--clay-dark);
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */

.site-footer {
  background: var(--charcoal);
  color: var(--stone);
  padding: 56px 0 28px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { height: 34px; }
.footer-brand span {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
}
.footer-cols { display: flex; gap: 60px; flex-wrap: wrap; }
.footer-col h4 {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}
.footer-col a, .footer-col p {
  display: block;
  font-size: 0.85rem;
  color: #cfc4b3;
  margin: 0 0 10px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 22px;
  font-size: 0.75rem;
  color: #a89a86;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------------------------------------------------------------
   Cart drawer
--------------------------------------------------------------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 37, 33, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 49;
}
.overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  max-width: 92vw;
  background: var(--cream-soft);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 50px rgba(0,0,0,0.2);
}
.cart-drawer.open { transform: translateX(0); }

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.cart-header h2 {
  font-family: var(--display);
  font-size: 1.5rem;
  margin: 0;
  font-weight: 500;
}
.cart-close {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
}
.cart-close:hover { background: var(--charcoal); color: var(--cream); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 10px 24px;
}

.cart-line {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line-art {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--stone);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cart-line-art .form { width: 60%; height: 60%; }

.cart-line-info { flex: 1; min-width: 0; }
.cart-line-info h4 {
  font-family: var(--display);
  font-size: 1.02rem;
  margin: 0 0 4px;
  font-weight: 500;
}
.cart-line-price { font-size: 0.85rem; color: var(--ink-muted); }

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.qty-stepper button {
  width: 24px; height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.qty-stepper button:hover { border-color: var(--clay); color: var(--clay-dark); }
.qty-stepper span { font-size: 0.85rem; min-width: 16px; text-align: center; }

.remove-line {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: underline;
  margin-top: 8px;
}
.remove-line:hover { color: var(--clay-dark); }

.cart-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--ink-muted);
}
.cart-empty svg { width: 44px; height: 44px; margin-bottom: 14px; color: var(--clay); }

.cart-footer {
  padding: 20px 24px 26px;
  border-top: 1px solid var(--line);
}
.cart-subtotal {
  display: flex;
  justify-content: space-between;
  font-family: var(--display);
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.cart-note {
  font-size: 0.76rem;
  color: var(--ink-muted);
  margin: 0 0 16px;
}
.checkout-btn {
  width: 100%;
  padding: 16px;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--cream-soft);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s ease;
}
.checkout-btn:hover { transform: translateY(-2px); }
.checkout-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.stripe-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.checkout-warning {
  background: #fbeee3;
  border: 1px solid #e6c6a6;
  color: var(--clay-dark);
  font-size: 0.78rem;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 14px;
  line-height: 1.5;
  display: none;
}
.checkout-warning.show { display: block; }

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--charcoal);
  color: var(--cream-soft);
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 0.82rem;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */

@media (max-width: 980px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-visual img { max-width: 260px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; }
}

@media (max-width: 720px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .hero { padding: 36px 0 20px; }
  .hero-copy p { max-width: none; }
  .container { padding: 0 16px; }
  .card-name { font-size: 1.08rem; }
  .footer-inner { flex-direction: column; }
  .footer-cols { gap: 34px; }
}

@media (max-width: 420px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-body { padding: 14px 14px 16px; }
  .cart-drawer { width: 100%; }
}


.carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--stone);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: inset 0 0 0 1px rgba(42, 37, 33, 0.08);

}
.carousel-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.3s ease;
}
.carousel-img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(247, 242, 234, 0.85);
  color: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.product-card:hover .carousel-arrow,
.carousel-large .carousel-arrow {
  opacity: 1;
}
.carousel-arrow.prev { left: 10px; }
.carousel-arrow.next { right: 10px; }
.carousel-arrow:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.carousel-dots .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
}
.carousel-dots .dot.active { background: var(--gold); }



/* ---------------------------------------------------------------
   Product detail page
--------------------------------------------------------------- */

.product-detail-wrap {
  padding: 40px 0 90px;
}

#detailLoading {
  text-align: center;
  padding: 100px 20px;
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

/* the large carousel mount — reuses .carousel/.carousel-track/.carousel-img
   from the grid card styles, just sized up and pinned so it doesn't scroll
   away while reading a long description */
.carousel-large {
  border-radius: var(--radius-card);
  position: sticky;
  top: 100px; /* clears the sticky header */
}

.carousel-dots-row {
  display: flex;
  justify-content: center;
  padding: 14px 0 4px;
}
.carousel-dots-row .carousel-dots {
  position: static;
  transform: none;
  left: auto;
  bottom: auto;
}
.carousel-dots-row .dot {
  background: var(--line); /* was designed for on-photo contrast; needs a visible color on cream now */
}
.carousel-dots-row .dot.active {
  background: var(--gold);
}

.detail-info {
  padding-top: 6px;
}

.detail-info .card-category {
  display: block;
  margin-bottom: 10px;
}

.detail-info h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.15;
  margin: 0 0 14px;
}

.detail-info .card-price {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--clay-dark);
  margin: 0 0 22px;
  display: block;
}

#detailShortDesc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-muted);
  margin: 0 0 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.long-desc {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--charcoal);
  margin-bottom: 34px;
}
.long-desc p { margin: 0 0 16px; }

#detailAddBtn {
  width: 100%;
  justify-content: center;
  padding: 16px 28px;
}

/* ---------------------------------------------------------------
   Responsive — stack carousel above info, drop the sticky pin
--------------------------------------------------------------- */

@media (max-width: 860px) {
  .product-detail {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .carousel-large {
    position: static;
  }
  .detail-info h1 {
    font-size: 1.8rem;
  }
}

@media (max-width: 480px) {
  .product-detail-wrap {
    padding: 24px 0 60px;
  }
  .detail-info .card-price {
    font-size: 1.3rem;
  }
}

.color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 2px;
}
.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.color-swatch:hover { transform: scale(1.1); }
.color-swatch.active {
  box-shadow: 0 0 0 2px var(--cream-soft), 0 0 0 4px var(--charcoal);
}

.detail-info .color-swatches {
  margin: 4px 0 22px;
  gap: 10px;
}
.detail-info .color-swatch {
  width: 28px;
  height: 28px;
}

.cart-line-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-line-color {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line) inset;
  margin: 2px 0 4px;
}

/* ---------------------------------------------------------------
   Mobile refinements — carousel, swatches, header, cart drawer
--------------------------------------------------------------- */

@media (max-width: 720px) {
  .carousel-arrow {
    opacity: 0.65;
    width: 32px;
    height: 32px;
  }

  .card-art-hint {
    display: none;
  }

  .color-swatch {
    width: 24px;
    height: 24px;
  }
  .detail-info .color-swatch {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    padding: 12px 16px;
  }
  .brand-word {
    font-size: 1.15rem;
  }
  .brand img {
    height: 34px;
  }

  .cart-btn span:not(.cart-count) {
    display: none;
  }
  .cart-btn {
    padding: 9px 10px;
  }

  .carousel-dots .dot {
    width: 5px;
    height: 5px;
  }

  .color-swatches {
    gap: 6px;
  }
  .color-swatch {
    width: 22px;
    height: 22px;
  }

  .qty-stepper button {
    width: 28px;
    height: 28px;
  }

  .cart-header h2 {
    font-size: 1.3rem;
  }
}

@media (max-width: 360px) {
  .product-grid {
    gap: 10px;
  }
  .card-body {
    padding: 12px 12px 14px;
  }
  .card-name {
    font-size: 1rem;
  }
  .card-price {
    font-size: 1.02rem;
  }
  .add-btn {
    width: 36px;
    height: 36px;
  }
}