:root {
  --brand-cream: #FAF6F0;
  --brand-ink: #18242C;
  --brand-teal: #2D6073;
  --brand-terracotta: #C85232;
  --brand-gold: #D99B26;
  --brand-sand: #EFE8DC;
}

* {
  box-sizing: border-box;
}

#menuCatalog, #howItWorks, #faq { scroll-margin-top: 7rem; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-chevron { transform: rotate(180deg); }

body {
  margin: 0;
  background-color: var(--brand-cream);
  color: var(--brand-ink);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.hidden {
  display: none !important;
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.94) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

@keyframes pulseRing {
  0% { transform: scale(0.95); opacity: 0.8; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.24) rotate(-6deg); }
  70% { transform: scale(0.94) rotate(4deg); }
}
@keyframes drawerIn { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes itemPop { 0% { opacity: 0; transform: translateY(12px) scale(.96); } 70% { transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes successPop { 0% { opacity: 0; transform: scale(.55) rotate(-12deg); } 65% { opacity: 1; transform: scale(1.14) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes failWiggle { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-9px); } 40%,80% { transform: translateX(9px); } }
@keyframes floatAdded { 0% { opacity: 0; transform: translateY(8px) scale(.7); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) scale(1.1); } }
.tray-panel-enter { animation: drawerIn .32s cubic-bezier(.2,.8,.2,1) both; }
.cart-item-enter { animation: itemPop .32s cubic-bezier(.2,.8,.2,1) both; }
.success-icon-enter { animation: successPop .55s cubic-bezier(.2,.8,.2,1) both; }
.failure-card-enter { animation: failWiggle .42s ease-in-out, popIn .25s ease-out both; }
.added-float { position:absolute; right:8px; top:-4px; color:#16834a; font-size:12px; font-weight:900; pointer-events:none; animation:floatAdded .75s ease-out forwards; }

.animate-pop-in {
  animation: popIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-shake {
  animation: shakeError 0.42s ease-in-out;
}

.animate-cart-bounce {
  animation: cartBounce 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pulse-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid currentColor;
  animation: pulseRing 1.8s infinite;
}

/* Responsive polish and accessible interaction states */
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(217,155,38,.75); outline-offset: 2px;
}
input, select, textarea { max-width: 100%; }
img { max-width: 100%; }
@media (max-width: 420px) {
  header .h-20 { height: 4.25rem; }
  #toastBanner { left: 1rem; right: 1rem; max-width: none; }
  #cartDrawer > div { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Custom subtle scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #FAF6F0;
}
::-webkit-scrollbar-thumb {
  background: #D7CEBE;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2D6073;
}