/* Global styles for The Lion's Share.
   Extracted from the inline <style> block in index.html — see also
   assets/tailwind-config.js for theme tokens and assets/app.js for behavior. */

body { font-family: 'Hanken Grotesk', sans-serif; background-color: #121212; color: #e4e2e1; }
h1, h2, h3, h4, h5, h6, .font-playfair { font-family: 'Playfair Display', serif; }

.divider-merlot { border-top: 1px solid #7a1a2b; }
.merlot-divider { border-bottom: 1px solid #7a1a2b; }
.text-merlot { color: #7a1a2b; }
.price-text { color: #7a1a2b; }

/* Cart remove button — hover handled in CSS (no inline JS handlers) */
.cart-remove { color: #8e9192; transition: color 0.2s; }
.cart-remove:hover { color: #7a1a2b; }

/* SPA routing */
.page { display: none; }
.page.active { display: block; }

/* Mobile drawer (slides from left) */
#mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  background-color: #121212;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column;
  padding: 2rem 1.25rem 3rem;
  overflow-y: auto;
}
#mobile-menu.open { transform: translateX(0); }

/* Cart drawer (slides from right) */
#cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 420px; z-index: 100;
  background-color: #121212;
  border-left: 1px solid rgba(122, 26, 43, 0.2);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column; overflow: hidden;
}
#cart-drawer.open { transform: translateX(0); }

/* Policy section headings */
.policy-section h2 {
  border-bottom: 1px solid rgba(122, 26, 43, 0.3);
  padding-bottom: 16px;
  margin-bottom: 32px;
  font-family: 'Playfair Display', serif;
}

/* Detail modal: Specifications & Measurements panel.
   Content is injected from each collection card's .card-specs block, so it is
   styled with real CSS here (Tailwind Play CDN does not generate classes for
   dynamically injected markup). */
#detail-specs-toggle .material-symbols-outlined { transition: transform 0.3s ease; }
#detail-specs-panel { transition: max-height 0.3s ease; }
.specs-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: 'Hanken Grotesk', sans-serif; }
.specs-table th, .specs-table td {
  text-align: left; padding: 8px 8px;
  border-bottom: 1px solid rgba(68, 71, 72, 0.35);
  font-size: 12px; color: #c9c6c1; vertical-align: top;
  word-break: break-word; overflow-wrap: anywhere;
}
.specs-table th {
  color: #8e8b86; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 10px; font-weight: 600;
}
/* Narrow index column so the four data columns (incl. Origin) always fit */
.specs-table th:first-child, .specs-table td:first-child { width: 2.25rem; padding-left: 0; }
.specs-table td:first-child { color: #e8c086; }
.specs-dims { list-style: none; margin: 16px 0 0; padding: 0; font-family: 'Hanken Grotesk', sans-serif; }
.specs-dims li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-bottom: 1px solid rgba(68, 71, 72, 0.2);
  font-size: 12px; color: #c9c6c1;
}
.specs-dims li span:first-child {
  color: #8e8b86; text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px;
}
.specs-note {
  margin-top: 16px; font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px; line-height: 1.65; color: #8e8b86;
}

/* "Built around a <maker> hero tie" line above the specs table. */
.specs-hero {
  margin: 0 0 12px; font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px; line-height: 1.5; color: #c9c6c1;
}
.specs-hero strong { color: #e8c086; font-weight: 600; }

/* Scrollbar hide */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Loading indicator */
#page-loading.active { display: flex; }

/* Page transitions */
@keyframes page-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-entering {
  animation: page-in 260ms cubic-bezier(0.25, 0, 0, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .page-entering { animation: none; }
}

/* Detail modal transitions */
@keyframes modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes modal-out {
  from { opacity: 1; transform: translateY(0)   scale(1); }
  to   { opacity: 0; transform: translateY(6px) scale(0.98); }
}
#detail-modal-inner.modal-entering {
  animation: modal-in 260ms cubic-bezier(0.25, 0, 0, 1) both;
}
#detail-modal-inner.modal-leaving {
  animation: modal-out 110ms ease both;
}
@media (prefers-reduced-motion: reduce) {
  #detail-modal-inner.modal-entering,
  #detail-modal-inner.modal-leaving { animation: none; }
}

/* Email popup transitions */
@keyframes popup-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes popup-out {
  from { opacity: 1; transform: translateY(0)   scale(1); }
  to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}
#email-popup-inner.popup-entering {
  animation: popup-in 280ms cubic-bezier(0.25, 0, 0, 1) both;
}
#email-popup-inner.popup-leaving {
  animation: popup-out 130ms ease both;
}
@media (prefers-reduced-motion: reduce) {
  #email-popup-inner.popup-entering,
  #email-popup-inner.popup-leaving { animation: none; }
}