:root {
  /* Paleta "Sertão & Xilogravura Brutal" */
  --paper-bg: #F5E6CA;
  /* Papel textura pesada */
  --ink-black: #0F0F0F;
  /* Nanquim bruto */
  --clay-red: #C82D00;
  /* Barro agressivo */
  --sun-yellow: #FFB800;
  /* Sol ofuscante */
  --cactus-green: #1B5E20;
  /* Mandacaru denso */

  --primary-color: var(--clay-red);
  --secondary-color: var(--ink-black);
  --accent-color: var(--sun-yellow);

  --text-main: var(--ink-black);
  --text-light: #F9F9F9;

  --border-width: 4px;
  /* Heavy stroke */
  --woodcut-shadow: 10px 10px 0px var(--ink-black);
  /* Massive shadow */

  /* Typography */
  --font-display: 'Sancreek', serif;
  /* Only for Logos */
  --font-heading: 'Special Elite', cursive;
  /* For H1/H2/H3 */
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  /* Clean reading */
}

/* Custom Scrollbar - Minimalist & Functional */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--paper-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--ink-black);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clay-red);
}

/* --- TACTILE PAPER GRAIN EFFET (Advanced UI) --- */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opactiy='0.1'/%3E%3C/svg%3E");
  opacity: 0.25;
  mix-blend-mode: multiply;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

button,
.category-list li,
.product-card,
.splash-btn {
  user-select: none;
  -webkit-user-select: none;
}

body {
  background-color: #E6D0A1;
  /* Raw cotton */
  color: var(--text-main);
  font-family: var(--font-body);
  /* Brutal Jute/Sackcloth Texture Pattern */
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h100v100H0z' fill='%23E6D0A1'/%3E%3Cpath d='M10 0v100M30 0v100M50 0v100M70 0v100M90 0v100M0 10h100M0 30h100M0 50h100M0 70h100M0 90h100' stroke='%23D4B483' stroke-width='2' stroke-opacity='0.6'/%3E%3Cpath d='M0 0l100 100M100 0L0 100' stroke='%23C0A070' stroke-width='1' stroke-opacity='0.4'/%3E%3C/svg%3E");
  background-size: 50px 50px;
  overflow-x: hidden;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* ... */

/* Menu Grid */
.menu-container {
  padding: 40px 20px;
  padding-bottom: 100px;
  background: #F9F3E3;
  background-image: radial-gradient(#D7CCC8 2px, transparent 2px);
  background-size: 24px 24px;
  position: relative;
  border: 10px solid var(--ink-black);
  /* Massive border */
  box-shadow: 14px 14px 0px var(--clay-red);
  /* Massive offset */
  border-radius: 0;
  /* Hard edges */
  margin: 30px auto;

  /* GRID LAYOUT */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  max-width: 1200px;
}

/* Utilities */
.woodcut-border {
  border: var(--border-width) solid var(--ink-black);
  box-shadow: var(--woodcut-shadow);
}

.btn-primary {
  background-color: var(--clay-red);
  color: var(--text-light);
  border: 4px solid var(--ink-black);
  padding: 14px 24px;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: 8px 8px 0px var(--ink-black);
  /* Hard shadow */
  transition: transform 0.1s, box-shadow 0.1s;
  text-transform: uppercase;
  border-radius: 0;
  text-shadow: 2px 2px 0px #000;
}

.btn-primary:active {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0px var(--ink-black);
}

.btn-outline {
  background: var(--paper-bg);
  border: 4px solid var(--ink-black);
  color: var(--ink-black);
  padding: 14px 24px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-heading);
  border-radius: 0;
  box-shadow: 8px 8px 0px var(--sun-yellow);
}

.btn-outline:active {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0px var(--sun-yellow);
}

/* Header */
.main-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--paper-bg);
  border-bottom: 4px double var(--ink-black);
  box-shadow: 0 4px 0px rgba(0, 0, 0, 0.1);
}

.brand {
  text-align: center;
  white-space: nowrap;
}

.brand h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink-black);
  text-transform: uppercase;
  margin: 0;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  flex: 1;
  /* Balance spacing */
}

.header-right {
  justify-content: flex-end;
}

.icon-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: var(--ink-black);
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  /* Fixed width for touch target */
  height: 44px;
  /* Fixed height */
  transition: transform 0.2s;
  padding: 0;
}

.icon-btn:hover {
  transform: scale(1.1);
  color: var(--clay-red);
}

.header-cart-count {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--clay-red);
  color: var(--paper-bg);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: bold;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-black);
  z-index: 2;
}

.accent-gold {
  color: var(--clay-red);
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 50vh;
  min-height: 400px;
  display: flex;
  align-items: center;
  margin-top: 60px;
  /* Offset for fixed header */
  justify-content: center;
  text-align: center;
  margin-top: 60px;
  /* Space for header */
  background-image: url('assets/sertao_bg.png');
  /* Beautiful Sertão Sunset */
  background-size: cover;
  background-position: center;
  border-bottom: 4px solid var(--ink-black);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(245, 230, 202, 1));
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 3px solid var(--ink-black);
  padding: 30px;
  box-shadow: 8px 8px 0px var(--clay-red);
  max-width: 90%;
  border-bottom: 6px solid #006994;
  /* Rio São Francisco accent */
}

.hero-content h2 {
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--paper-bg);
  margin-bottom: 20px;
  text-shadow: 6px 6px 0px var(--ink-black);
  position: relative;
  z-index: 2;
  line-height: 1.1;
}

.badge-premium {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--clay-red);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 10px;
}

.highlight-text {
  color: var(--clay-red);
  text-decoration: underline;
  text-decoration-style: wavy;
}

/* Category Navigation - Professional */
.category-nav-container {
  position: sticky;
  top: 68px;
  z-index: 900;
  background: var(--paper-bg);
  padding: 30px 0 15px 0;
  border-bottom: 2px solid var(--ink-black);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* O Barbante (The String) */
.category-nav-container::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--ink-black);
  z-index: 1;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2);
}

.category-list {
  display: flex;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  list-style: none;
  /* Desktop: Centered, Mobile: Start aligned for scroll */
  justify-content: center;
  flex-wrap: nowrap;
  /* Force single line scroll on mobile if needed */
}

@media (max-width: 768px) {
  .category-list {
    justify-content: flex-start;
    padding-bottom: 5px;
    /* Space for scrollbar if any */
  }
}

.category-list li {
  white-space: nowrap;
  padding: 10px 24px;
  background: var(--paper-bg);
  border: 4px solid var(--ink-black);
  color: var(--ink-black);
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  box-shadow: 6px 6px 0px var(--ink-black);
  border-radius: 0;
  position: relative;
  z-index: 2;
  margin-top: 0px;
  transform-origin: top center;
}

/* O Pregador (The Clothespin) */
.category-list li::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 25px;
  background: var(--sun-yellow);
  border: 2px solid var(--ink-black);
  border-radius: 2px;
  z-index: 3;
}

/* Inner Carimbo Dashed line */
.category-list li::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border: 1px dashed var(--ink-black);
  pointer-events: none;
}

@keyframes swingVaral {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(4deg);
  }

  40% {
    transform: rotate(-3deg);
  }

  60% {
    transform: rotate(2deg);
  }

  80% {
    transform: rotate(-1deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.category-list li:hover {
  animation: swingVaral 0.6s ease-in-out;
  box-shadow: 6px 6px 0px var(--clay-red);
}

.category-list li.active {
  background: var(--ink-black);
  color: var(--paper-bg);
  box-shadow: 3px 3px 0px var(--clay-red);
  transform: translate(1px, 1px);
  border-color: var(--ink-black);
}

.category-list li.active::after {
  border-color: var(--paper-bg);
}

/* Menu Grid (Overridden above) */

.product-card {
  background: var(--paper-bg);
  /* Ragged Paper Effect via Clip Path */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%,
      98% 99%, 96% 98%, 94% 99%, 92% 98%, 90% 99%, 88% 98%, 86% 99%, 84% 98%, 82% 99%, 80% 98%,
      78% 99%, 76% 98%, 74% 99%, 72% 98%, 70% 99%, 68% 98%, 66% 99%, 64% 98%, 62% 99%, 60% 98%,
      58% 99%, 56% 98%, 54% 99%, 52% 98%, 50% 99%, 48% 98%, 46% 99%, 44% 98%, 42% 99%, 40% 98%,
      38% 99%, 36% 98%, 34% 99%, 32% 98%, 30% 99%, 28% 98%, 26% 99%, 24% 98%, 22% 99%, 20% 98%,
      18% 99%, 16% 98%, 14% 99%, 12% 98%, 10% 99%, 8% 98%, 6% 99%, 4% 98%, 2% 99%,
      0% 100%);
  border-radius: 0;
  box-shadow: 10px 10px 0px var(--ink-black);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  border-top: 6px solid var(--ink-black);
  border-left: 6px solid var(--ink-black);
  border-right: 6px solid var(--ink-black);
  /* Initial state for Scroll Animation */
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  will-change: transform, opacity;
  overflow: hidden;
  /* Keep image inside rounded border */
}

.product-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.product-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--clay-red);
}

@keyframes skeletonLoading {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

.skeleton {
  background: linear-gradient(90deg, #E6D0A1 25%, #f0e2c5 50%, #E6D0A1 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  color: transparent !important;
  border: none !important;
}

.card-img.skeleton {
  filter: none;
}

.card-img {
  height: 220px;
  width: 100%;
  object-fit: cover;
  border-bottom: 4px solid var(--ink-black);
  /* "Magic Woodcut" effect: Initial B&W Sepia high contrast */
  filter: grayscale(100%) sepia(80%) contrast(150%) brightness(0.9);
  transition: filter 0.5s ease;
}

@media (hover: hover) {
  .product-card:hover .card-img {
    /* Reveal true colors on hover */
    filter: grayscale(0%) sepia(0%) contrast(110%) brightness(1);
  }

  .product-card:hover .card-price {
    transform: rotate(-2deg) scale(1.1);
    background: var(--clay-red);
    color: var(--paper-bg);
  }
}

/* Fallback for touch devices to avoid sticky hover */
@media (hover: none) {
  .product-card:active .card-img {
    filter: grayscale(0%) sepia(0%) contrast(110%) brightness(1);
  }
}

.card-content {
  padding: 24px 20px 30px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 6px;
  color: var(--ink-black);
}

.card-desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #555;
  border-left: 3px solid var(--sun-yellow);
  padding-left: 8px;
  font-style: italic;
}

.card-price {
  color: var(--ink-black);
  background: var(--paper-bg);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  padding: 6px 14px;
  position: absolute;
  top: -15px;
  right: -10px;
  /* Ripped ribbon edge left and right */
  clip-path: polygon(0% 0%, 100% 0%,
      95% 50%, 100% 100%,
      0% 100%, 5% 50%);
  box-shadow: none;
  /* Can't use box-shadow with complex clip-path easily, relying on border-bottom */
  transform: rotate(3deg);
  transition: transform 0.3s ease, background 0.3s ease;
  z-index: 10;
  border-bottom: 2px solid var(--ink-black);
}

.card-footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px dotted rgba(0, 0, 0, 0.2);
}

.add-btn-mini {
  background: var(--ink-black);
  color: var(--paper-bg);
  border: none;
  border-radius: 0;
  width: 40px;
  height: 40px;
}

.add-btn-mini:hover {
  background: var(--clay-red);
}

/* Floating Cart */
.floating-cart {
  background: var(--ink-black);
  border: 2px solid var(--paper-bg);
  border-radius: 4px;
  box-shadow: 0 8px 0px var(--clay-red);
  color: var(--paper-bg);
  padding-bottom: env(safe-area-inset-bottom);
}

.cart-count {
  background: var(--sun-yellow);
  color: var(--ink-black);
  border: 1px solid var(--ink-black);
}

.cart-total-preview .value {
  color: var(--sun-yellow);
  font-family: var(--font-display);
}

/* Happy Hour */
.happy-hour-banner {
  background: var(--input-bg);
  background-image: url('https://images.unsplash.com/photo-1514362545857-3bc16c4c7d1b?q=80&w=1920&auto=format&fit=crop');
  border: 3px solid var(--ink-black);
  box-shadow: 8px 8px 0px var(--ink-black);
  position: relative;
  overflow: hidden;
}

/* Pattern Overlay for Sections */
.happy-hour-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hh-content h3 {
  color: var(--sun-yellow);
  text-shadow: 2px 2px 0px #000;
  font-size: 2.5rem;
}

.btn-gold {
  background: var(--sun-yellow);
  color: var(--ink-black);
  border: 2px solid var(--ink-black);
  box-shadow: 3px 3px 0px #000;
  font-family: var(--font-heading);
  border-radius: 4px;
}

/* Modals */
/* Modals */
/* Modals */
.cart-panel {
  background: var(--paper-bg);
  border-left: 8px solid var(--ink-black);
  border-radius: 0;
  box-shadow: -15px 0 0px var(--clay-red);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

.cart-header {
  padding: 20px;
  background: var(--ink-black);
  color: var(--paper-bg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--clay-red);
}

.cart-header h3 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 1px;
}

.close-btn {
  background: transparent;
  border: none;
  color: var(--paper-bg);
  font-size: 2rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.close-btn:hover {
  transform: rotate(90deg);
  color: var(--sun-yellow);
}

.cart-items {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px;
}

.empty-cart-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #888;
  font-style: italic;
  opacity: 0.7;
}

.empty-cart-msg i {
  font-size: 4rem;
  color: var(--ink-black);
  margin-bottom: 15px;
  opacity: 0.5;
}

.cart-item {
  border-bottom: 1px dashed var(--ink-black);
  padding: 15px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.cart-item-title {
  font-weight: bold;
  font-family: var(--font-heading);
  font-size: 1.1rem;
}

.cart-footer {
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
  border-top: 4px double var(--ink-black);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-family: var(--font-heading);
  font-size: 1.2rem;
}

.cart-total-value {
  color: var(--clay-red);
  font-size: 1.5rem;
}

.btn-whatsapp {
  width: 100%;
  padding: 15px;
  background-color: var(--cactus-green);
  border: 2px solid var(--ink-black);
  color: white;
  font-family: var(--font-display);
  border-radius: 4px;
  box-shadow: 4px 4px 0px var(--ink-black);
  text-transform: uppercase;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn-whatsapp:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px var(--ink-black);
  background-color: #388E3C;
}

.btn-whatsapp:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--ink-black);
}

.product-modal-content {
  background: var(--paper-bg);
  width: 90%;
  max-width: 500px;
  position: relative;
  /* Brutalist Box V2 */
  border: 6px solid var(--ink-black);
  box-shadow: 12px 12px 0px var(--clay-red);
  border-radius: 0;
  animation: slideUpFade 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Ensure image respects radius */
}

.modal-details {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.close-modal-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  background: var(--paper-bg);
  border: 4px solid var(--ink-black);
  color: var(--clay-red);
  width: 50px;
  height: 50px;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  box-shadow: 6px 6px 0px var(--ink-black);
  transition: transform 0.2s, box-shadow 0.2s;
  border-radius: 0;
}

.close-modal-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px var(--ink-black);
}

.close-modal-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0px var(--ink-black);
}

.hh-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  background: var(--sun-yellow);
  border: 4px solid var(--ink-black);
  color: var(--ink-black);
  font-family: var(--font-display);
  padding: 4px 10px;
  font-size: 1rem;
  box-shadow: 6px 6px 0px var(--ink-black);
  z-index: 10;
  transform: rotate(-3deg);
  border-radius: 0;
}

.cart-item {
  border-bottom: 1px dashed var(--ink-black);
}

.btn-whatsapp {
  background-color: var(--cactus-green);
  border: 4px solid var(--ink-black);
  color: white;
  font-family: var(--font-display);
  border-radius: 0;
  box-shadow: 8px 8px 0px var(--ink-black);
  text-transform: uppercase;
}

/* Typography Overrides */
h1 {
  font-family: var(--font-display);
  /* Logo only */
}

h2,
h3,
h4 {
  font-family: var(--font-heading);
}

/* Search Bar Overlay */
#search-bar-container {
  position: fixed;
  top: 70px;
  left: 0;
  width: 100%;
  background: var(--paper-bg);
  padding: 15px 20px;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px dashed var(--ink-black);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

#search-bar-container.hidden {
  transform: translateY(-20px);
  opacity: 0;
  pointer-events: none;
}

#search-input {
  flex-grow: 1;
  padding: 12px;
  border: 2px solid var(--ink-black);
  font-family: var(--font-body);
  font-size: 1.1rem;
  background: #fff;
  border-radius: 0;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.close-search {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: var(--clay-red);
}

/* Favorite Icon on Card */
.favorite-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--ink-black);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 1.2rem;
  color: #ccc;
  transition: all 0.2s;
}

.favorite-btn.active {
  color: var(--clay-red);
  border-color: var(--clay-red);
  transform: scale(1.1);
}

.favorite-btn:hover {
  transform: scale(1.1);
}

/* Customer Name Input */
.customer-name-input {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border: 2px solid var(--ink-black);
  font-family: var(--font-body);
  background: #fff;
  font-size: 1rem;
}

/* Cross-Selling (Casadinho Perfeito) Voucher/Ticket */
.cross-sell-container {
  margin-top: 20px;
  padding: 15px;
  background: var(--paper-bg);
  border: 4px solid var(--ink-black);
  position: relative;
  box-shadow: 8px 8px 0px var(--ink-black);
  border-radius: 0;
}

.cross-sell-container::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed var(--ink-black);
  pointer-events: none;
}

.cross-sell-title {
  color: var(--clay-red);
  margin-bottom: 10px;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cross-sell-item {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  padding: 10px;
  border: 1px solid var(--ink-black);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.cross-sell-item:hover {
  transform: translateY(-2px);
  box-shadow: 2px 2px 0px var(--clay-red);
}

.cross-sell-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--ink-black);
}

.cross-sell-info {
  flex-grow: 1;
}

.cross-sell-name {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--ink-black);
  display: block;
}

.cross-sell-price {
  font-family: var(--font-body);
  color: var(--clay-red);
  font-weight: bold;
}

/* Phase 20: Typewriter Wipe Reveal */
@keyframes typewriterWipe {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  1% {
    opacity: 1;
  }

  100% {
    clip-path: inset(0 0 -20% 0);
    opacity: 1;
  }

  /* -20% bottom to not chop tails off g/y */
}

.type-reveal {
  animation: typewriterWipe 1.2s steps(30, end) forwards;
  opacity: 0;
  /* Hidden initially before intersection */
}

/* =========================================
   PHASE 21: Premium Custom Interactivity
   ========================================= */

/* Cursor Customization */
@media (pointer: fine) {

  body,
  a,
  button,
  .category-list li,
  .cross-sell-item {
    cursor: none !important;
  }
}

.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: var(--clay-red);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s;
}

.custom-cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 2px solid var(--ink-black);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background-color 0.2s;
}

.custom-cursor-dot.hover-active {
  width: 12px;
  height: 12px;
  background-color: var(--sun-yellow);
}

.custom-cursor-outline.hover-active {
  width: 40px;
  height: 40px;
  background-color: rgba(236, 174, 29, 0.2);
  /* sun-yellow alpha */
}

/* Scroll Prompt In Hero */
.scroll-prompt {
  position: relative;
  /* Change from absolute */
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink-black);
  z-index: 10;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.scroll-prompt:hover {
  opacity: 1;
}

.scroll-text {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 5px;
  background: var(--paper-bg);
  padding: 2px 8px;
  border: 1px solid var(--ink-black);
}

.scroll-icon {
  font-size: 1.5rem;
  animation: bounceScroll 2s infinite;
  background: var(--sun-yellow);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink-black);
  box-shadow: 2px 2px 0px var(--ink-black);
}

@keyframes bounceScroll {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }

  60% {
    transform: translateY(-5px);
  }
}

/* Advanced Toast Container */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  /* Let clicks pass through container */
}

.toast-ticket {
  background: var(--paper-bg);
  border: 4px solid var(--ink-black);
  border-left: 8px solid var(--clay-red);
  box-shadow: 10px 10px 0px var(--ink-black);
  padding: 15px 20px;
  min-width: 250px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink-black);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  transform: translateX(120%);
  opacity: 0;
  animation: slideInToast 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  pointer-events: auto;
  /* Clickable toasts if needed */
}

@keyframes slideInToast {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.toast-ticket.fade-out {
  animation: slideOutToast 0.4s ease forwards;
}

@keyframes slideOutToast {
  to {
    transform: translateX(120%);
    opacity: 0;
  }
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--clay-red);
  width: 100%;
  transform-origin: left;
  animation: toastProgress linear forwards;
}

@keyframes toastProgress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* ==========================================
   CUSTOM CURSOR (BRUTALIST)
   ========================================== */
* {
  cursor: none !important;
}

#cursor-dot,
#cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  /* Higher than everything, including splash */
}

#cursor-dot {
  width: 12px;
  height: 12px;
  background-color: var(--clay-red);
  transition: transform 0.1s ease-out;
}

#cursor-outline {
  width: 40px;
  height: 40px;
  border: 4px solid var(--ink-black);
  transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
  background-color: rgba(250, 250, 247, 0.4);
  /* Faint paper color */
}

/* Hover States */
#cursor-dot.hover-active {
  transform: translate(-50%, -50%) scale(0.5);
}

#cursor-outline.hover-active {
  width: 70px;
  height: 70px;
  background-color: rgba(200, 45, 0, 0.3);
  /* Clay Red tint */
  border-color: var(--clay-red);
}

/* --- NEXUS ALERT: PREMIUM BRUTALIST NOTIFICATIONS --- */
.nexus-alert-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  gap: 15px;
  pointer-events: none;
}

.nexus-alert {
  background: var(--ink-black);
  color: white;
  border: 4px solid var(--sun-yellow);
  padding: 20px 30px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  box-shadow: 12px 12px 0px var(--clay-red);
  display: flex;
  align-items: center;
  gap: 15px;
  pointer-events: all;
  min-width: 320px;
  max-width: 450px;
  position: relative;
  overflow: hidden;
  animation: nexus-slide-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.nexus-alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--sun-yellow);
  animation: nexus-progress 3s linear forwards;
}

.nexus-alert.error {
  border-color: #ff4444;
  box-shadow: 12px 12px 0px #800000;
}

.nexus-alert.success {
  border-color: #00e676;
  box-shadow: 12px 12px 0px #004d40;
}

.nexus-alert i {
  font-size: 2rem;
  color: var(--sun-yellow);
}

.nexus-alert.error i { color: #ff4444; }
.nexus-alert.success i { color: #00e676; }

@keyframes nexus-slide-in {
  from { transform: translateX(120%) rotate(5deg); opacity: 0; }
  to { transform: translateX(0) rotate(0deg); opacity: 1; }
}

@keyframes nexus-slide-out {
  from { transform: translateX(0) scale(1); opacity: 1; }
  to { transform: translateX(120%) scale(0.8); opacity: 0; }
}

@keyframes nexus-progress {
  0% { width: 100%; }
  100% { width: 0%; }
}