diff --git a/bg-pic.png b/bg-pic.png
new file mode 100644
index 0000000..995ac37
Binary files /dev/null and b/bg-pic.png differ
diff --git a/indexStyleWhiteRed.html b/indexStyleWhiteRed.html
index 73c1858..c4084d1 100644
--- a/indexStyleWhiteRed.html
+++ b/indexStyleWhiteRed.html
@@ -6,74 +6,91 @@
   <title>Pizza</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;500;600&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Bebas+Neue&family=Lora:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet" />
   <style>
     :root {
-      --bg: #fafafa;
-      --paper: #2a0a10;
-      --accent: #c41e3a;
-      --accent-deep: #9a1530;
-      --muted: #8a5c65;
-      /** Schachbrett-Rahmen: Kachel = 4 kleine Felder (2×2) weiß/rot; Ecken fügen sich zum Muster */
-      --checker-border: clamp(8px, 1.4vw, 12px);
-      --checker-tile: 16px;
+      --red: #d32f2f;
+      --white: #ffffff;
+      --paper: #fdf6f0;
+      --ink: #3a1015;
+      --checker-edge: clamp(10px, 1.6vw, 18px);
+      --checker-tile: 20px;
+      --news-cut-y: clamp(6rem, 20vw, 15rem);
+      --news-cut-x: clamp(7.8rem, 26vw, 19.5rem);
+      --frame-thick: 3px;
+      --frame-thin: 1px;
+      --frame-gap: 5px;
     }
 
-    *, *::before, *::after {
-      box-sizing: border-box;
-    }
+    *, *::before, *::after { box-sizing: border-box; }
 
     html, body {
       margin: 0;
       min-height: 100%;
-      background: var(--bg);
-      color: var(--paper);
-      font-family: "Outfit", system-ui, sans-serif;
+      color: var(--ink);
+      font-family: "Lora", "Georgia", serif;
     }
 
     body {
       display: flex;
       flex-direction: column;
+      background-color: var(--paper);
+      background-image: repeating-conic-gradient(
+        var(--white) 0% 25%,
+        var(--red) 25% 50%,
+        var(--white) 50% 75%,
+        var(--red) 75% 100%
+      );
+      background-size: var(--checker-tile) var(--checker-tile);
     }
 
-    body.preview-open {
-      overflow: hidden;
-    }
+    body.preview-open { overflow: hidden; }
 
-    /**
-     * Rahmen aus Schachbrett: repeating-conic = 2×2 Kästchen pro Kachel (weiß/rot/weiß/rot).
-     * Mask: nur der Ring (padding) sichtbar — zusammen mit Nachbar-Sections ergibt sich ein Kastenmuster.
-     */
     .news-hero,
     .pizza-row,
     .preview {
       isolation: isolate;
     }
 
-    .pizza-row {
-      position: relative;
-    }
+    .pizza-row { position: relative; }
 
     .news-hero::before,
     .pizza-row::before,
     .preview::before {
       content: "";
       position: absolute;
-      inset: 0;
-      padding: var(--checker-border);
-      box-sizing: border-box;
-      background: repeating-conic-gradient(
-        #ffffff 0% 25%,
-        var(--accent) 25% 50%,
-        #ffffff 50% 75%,
-        var(--accent) 75% 100%
-      ) 0 0 / var(--checker-tile) var(--checker-tile);
-      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      mask-composite: exclude;
+      inset: var(--checker-edge);
+      z-index: 0;
+      background: var(--paper);
+      border: var(--frame-thick) solid var(--red);
+      outline: var(--frame-thin) solid var(--red);
+      outline-offset: var(--frame-gap);
       pointer-events: none;
+    }
+
+    .news-hero::after {
+      content: "";
+      position: absolute;
+      inset: var(--checker-edge);
       z-index: 1;
+      background-color: var(--paper);
+      background-image: url("bg-pic.png");
+      background-size: min(58vw, 720px) auto;
+      background-position: right center;
+      background-repeat: no-repeat;
+      pointer-events: none;
+    }
+
+    .news-hero::before,
+    .news-hero::after {
+      clip-path: polygon(
+        var(--news-cut-x) 0%,
+        100% 0%,
+        100% calc(100% - var(--news-cut-y)),
+        calc(100% - var(--news-cut-x)) 100%,
+        0% 100%,
+        0% var(--news-cut-y)
+      );
     }
 
     .news-hero > *,
@@ -82,6 +99,7 @@
       z-index: 2;
     }
 
+    /* ——— Category Nav ——— */
     .cat-nav {
       position: fixed;
       top: 0;
@@ -89,10 +107,8 @@
       right: 0;
       z-index: 40;
       flex-shrink: 0;
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(250, 248, 248, 0.9) 85%, transparent 100%);
-      backdrop-filter: blur(10px);
-      -webkit-backdrop-filter: blur(10px);
-      border-bottom: 1px solid rgba(196, 30, 58, 0.12);
+      background: var(--paper);
+      border-bottom: 3px solid var(--red);
       padding: 0.65rem clamp(0.5rem, 2vw, 1rem) 0.75rem;
       transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
       will-change: transform;
@@ -105,12 +121,9 @@
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .cat-nav {
-        transition-duration: 0.01ms;
-      }
+      .cat-nav { transition-duration: 0.01ms; }
     }
 
-    /** Shop-Bereich unter dem News-Block; Abstand oben, wenn Kategorien-Leiste eingeblendet ist */
     .page-body {
       flex: 1 1 auto;
       min-height: 0;
@@ -124,6 +137,7 @@
       padding-top: clamp(4.25rem, 11vw, 5.5rem);
     }
 
+    /* ——— News Hero ——— */
     .news-hero {
       position: relative;
       flex: 0 0 auto;
@@ -134,78 +148,68 @@
       align-items: flex-start;
       justify-content: center;
       gap: 0;
-      padding: clamp(1.5rem, 4vw, 3rem);
+      padding: clamp(2rem, 5vw, 4rem);
       padding-right: min(42vw, 28rem);
       text-align: left;
-      background-color: #ffffff;
-      background-image:
-        linear-gradient(
-          to right,
-          #ffffff 0%,
-          rgba(255, 255, 255, 0.97) 14%,
-          rgba(255, 255, 255, 0.9) 28%,
-          rgba(255, 255, 255, 0.55) 52%,
-          rgba(255, 255, 255, 0.12) 78%,
-          transparent 100%
-        ),
-        url("BackGroud-news.png");
-      background-size: cover;
-      background-position: right center;
-      background-repeat: no-repeat;
+      background: transparent;
     }
 
     .news-hero__inner {
       position: relative;
-      z-index: 1;
+      z-index: 2;
       max-width: min(36rem, 100%);
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      gap: 1.15rem;
+      gap: 1.25rem;
     }
 
     .news-hero__badge {
       display: inline-block;
-      font-size: clamp(0.7rem, 1.5vw, 0.82rem);
-      font-weight: 600;
-      letter-spacing: 0.2em;
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: clamp(0.85rem, 1.8vw, 1rem);
+      letter-spacing: 0.25em;
       text-transform: uppercase;
-      color: var(--accent);
+      color: var(--red);
+      border: 2px dashed var(--red);
+      padding: 0.3em 0.8em;
+      transform: rotate(-2deg);
     }
 
     .news-hero__title {
-      font-family: "Bebas Neue", Impact, sans-serif;
-      font-size: clamp(2.75rem, 10vw, 4.5rem);
-      line-height: 0.95;
-      letter-spacing: 0.03em;
+      font-family: "Alfa Slab One", "Bebas Neue", Impact, sans-serif;
+      font-size: clamp(3rem, 11vw, 5.5rem);
+      line-height: 0.92;
+      letter-spacing: 0.02em;
       margin: 0;
       max-width: 16ch;
-      color: var(--paper);
+      color: var(--ink);
+      text-transform: uppercase;
     }
 
     .news-hero__text {
       margin: 0;
       max-width: 28rem;
-      font-size: clamp(0.95rem, 2vw, 1.1rem);
-      font-weight: 300;
-      line-height: 1.55;
-      color: var(--muted);
+      font-size: clamp(1rem, 2vw, 1.15rem);
+      font-weight: 400;
+      line-height: 1.6;
+      color: var(--ink);
     }
 
     .news-hero__text strong {
-      color: var(--paper);
-      font-weight: 500;
+      color: var(--red);
+      font-weight: 700;
     }
 
     .news-hero__hint {
       position: absolute;
-      bottom: clamp(1rem, 3vh, 2rem);
-      left: clamp(1.5rem, 4vw, 3rem);
-      font-size: 0.75rem;
-      font-weight: 500;
-      letter-spacing: 0.12em;
+      bottom: clamp(1.5rem, 3vh, 2.5rem);
+      left: clamp(2rem, 5vw, 4rem);
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: 0.85rem;
+      letter-spacing: 0.15em;
       text-transform: uppercase;
-      color: var(--muted);
+      color: var(--red);
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -214,41 +218,30 @@
 
     .news-hero__hint::after {
       content: "";
-      width: 1px;
+      width: 2px;
       height: 2rem;
-      background: linear-gradient(180deg, rgba(196, 30, 58, 0.35), transparent);
+      background: var(--red);
       animation: news-hint-bob 1.8s ease-in-out infinite;
     }
 
     @keyframes news-hint-bob {
-      0%, 100% { transform: translateY(0); opacity: 0.6; }
+      0%, 100% { transform: translateY(0); opacity: 0.5; }
       50% { transform: translateY(6px); opacity: 1; }
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .news-hero__hint::after {
-        animation: none;
-      }
+      .news-hero__hint::after { animation: none; }
     }
 
     @media (max-width: 640px) {
-      .news-hero {
-        padding-right: clamp(1rem, 4vw, 1.5rem);
-        background-image:
-          linear-gradient(
-            to right,
-            #ffffff 0%,
-            rgba(255, 255, 255, 0.98) 32%,
-            rgba(255, 255, 255, 0.88) 58%,
-            rgba(255, 255, 255, 0.4) 82%,
-            rgba(255, 255, 255, 0.06) 96%,
-            transparent 100%
-          ),
-          url("BackGroud-news.png");
-        background-position: 82% center;
+      .news-hero { padding-right: clamp(1.25rem, 4vw, 2rem); }
+      .news-hero::after {
+        background-size: min(88vw, 480px) auto;
+        background-position: right bottom;
       }
     }
 
+    /* ——— Category Nav Buttons ——— */
     .cat-nav__scroll {
       display: flex;
       flex-direction: row;
@@ -260,16 +253,13 @@
       scroll-snap-type: x proximity;
       -webkit-overflow-scrolling: touch;
       scrollbar-width: thin;
-      scrollbar-color: rgba(196, 30, 58, 0.45) transparent;
-    }
-
-    .cat-nav__scroll::-webkit-scrollbar {
-      height: 4px;
+      scrollbar-color: var(--red) transparent;
     }
 
+    .cat-nav__scroll::-webkit-scrollbar { height: 4px; }
     .cat-nav__scroll::-webkit-scrollbar-thumb {
-      background: rgba(196, 30, 58, 0.45);
-      border-radius: 999px;
+      background: var(--red);
+      border-radius: 0;
     }
 
     .cat-nav__btn {
@@ -279,72 +269,73 @@
       flex-direction: column;
       align-items: center;
       justify-content: flex-start;
-      gap: 0.35rem;
+      gap: 0.3rem;
       min-width: 5rem;
       max-width: 6.25rem;
       padding: 0.4rem 0.45rem 0.5rem;
-      border: 1px solid rgba(196, 30, 58, 0.16);
-      border-radius: 10px;
-      background: rgba(255, 255, 255, 0.92);
-      color: var(--paper);
+      border: 2px dashed var(--red);
+      border-radius: 0;
+      background: var(--white);
+      color: var(--ink);
       font-family: inherit;
       cursor: pointer;
-      transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+      transition: background 0.12s ease, color 0.12s ease;
     }
 
     .cat-nav__btn:hover {
-      border-color: rgba(196, 30, 58, 0.45);
-      background: rgba(255, 245, 246, 0.95);
+      background: var(--paper);
     }
 
     .cat-nav__btn.is-active {
-      border-color: rgba(196, 30, 58, 0.85);
-      background: rgba(196, 30, 58, 0.12);
-      box-shadow: 0 0 0 1px rgba(196, 30, 58, 0.22);
+      background: var(--red);
+      color: var(--white);
+      border-style: solid;
+    }
+
+    .cat-nav__btn.is-active .cat-nav__label,
+    .cat-nav__btn.is-active .cat-nav__hint {
+      color: var(--white);
     }
 
     .cat-nav__btn.is-active .cat-nav__icon-wrap {
-      filter: brightness(1.12) saturate(1.08);
+      filter: brightness(0) invert(1);
     }
 
     .cat-nav__icon-wrap {
-      width: 3.75rem;
-      height: 3.75rem;
-      border-radius: 50%;
+      width: 3rem;
+      height: 3rem;
       display: flex;
       align-items: center;
       justify-content: center;
       border: none;
       background: transparent;
-      color: var(--accent);
     }
 
     .cat-nav__icon-wrap svg,
     .cat-nav__icon-wrap .cat-icon-img {
-      width: 3.25rem;
-      height: 3.25rem;
+      width: 2.5rem;
+      height: 2.5rem;
       display: block;
     }
 
-    .cat-nav__icon-wrap .cat-icon-img {
-      object-fit: contain;
-    }
+    .cat-nav__icon-wrap .cat-icon-img { object-fit: contain; }
 
     .cat-nav__label {
-      font-size: 0.62rem;
-      font-weight: 600;
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: 0.7rem;
       line-height: 1.15;
       text-align: center;
-      color: var(--paper);
-      letter-spacing: 0.02em;
+      color: var(--ink);
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
     }
 
     .cat-nav__hint {
-      font-size: 0.58rem;
-      font-weight: 300;
+      font-size: 0.56rem;
+      font-weight: 400;
       line-height: 1.2;
       text-align: center;
-      color: var(--muted);
+      color: var(--red);
       max-width: 5rem;
     }
 
@@ -356,14 +347,12 @@
       justify-content: center;
       padding: 2rem;
       text-align: center;
-      color: var(--muted);
-      font-size: 0.95rem;
-      font-weight: 300;
+      color: var(--ink);
+      font-size: 1rem;
+      font-style: italic;
     }
 
-    .filter-empty.is-visible {
-      display: flex;
-    }
+    .filter-empty.is-visible { display: flex; }
 
     .page {
       width: 100vw;
@@ -373,7 +362,7 @@
       flex-direction: column;
     }
 
-    /** Drei Pizzen nebeneinander; sichtbare Karten teilen sich die Breite gleichmäßig */
+    /* ——— Pizza Grid ——— */
     .pizza-grid {
       flex: 1 1 auto;
       min-height: 0;
@@ -382,8 +371,8 @@
       flex-direction: row;
       flex-wrap: nowrap;
       align-items: stretch;
-      gap: 1px;
-      background: rgba(196, 30, 58, 0.08);
+      gap: calc(var(--checker-edge) * 2);
+      background: transparent;
     }
 
     .pizza-row {
@@ -394,7 +383,7 @@
       display: flex;
       flex-direction: column;
       align-items: stretch;
-      background: linear-gradient(180deg, #fff5f6 0%, rgba(255, 255, 255, 0.98) 45%, var(--bg) 100%);
+      background: transparent;
     }
 
     .text-col,
@@ -411,7 +400,7 @@
       justify-content: flex-start;
       align-items: center;
       text-align: center;
-      padding: clamp(0.65rem, 1.8vw, 1.1rem) clamp(0.5rem, 1.2vw, 0.85rem) 0.35rem;
+      padding: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 1.5vw, 1.25rem) 0.5rem;
       background: transparent;
     }
 
@@ -420,28 +409,26 @@
       position: relative;
       justify-content: center;
       align-items: center;
-      padding: clamp(0.35rem, 1vw, 0.75rem) clamp(0.35rem, 1vw, 0.65rem) clamp(0.5rem, 1.2vw, 0.85rem);
-      background: radial-gradient(ellipse 75% 80% at 50% 45%, rgba(196, 30, 58, 0.07) 0%, transparent 72%);
+      padding: clamp(0.5rem, 1.2vw, 1rem) clamp(0.5rem, 1.2vw, 0.85rem) clamp(0.75rem, 1.5vw, 1.25rem);
+      background: transparent;
     }
 
     .pizza-grid h1 {
-      font-size: clamp(1.45rem, 2.8vw, 2.35rem);
-      margin-bottom: 0.35rem;
+      font-size: clamp(1.6rem, 3vw, 2.5rem);
+      margin-bottom: 0.4rem;
     }
 
-    .pizza-grid .subtitle {
-      margin-bottom: 0.5rem;
-    }
+    .pizza-grid .subtitle { margin-bottom: 0.5rem; }
 
     .pizza-grid .details {
       max-width: 100%;
-      font-size: clamp(0.78rem, 1.25vw, 0.92rem);
-      line-height: 1.45;
+      font-size: clamp(0.8rem, 1.3vw, 0.95rem);
+      line-height: 1.5;
     }
 
     .pizza-grid .price {
-      margin-top: 0.65rem;
-      font-size: clamp(0.95rem, 1.5vw, 1.1rem);
+      margin-top: 0.75rem;
+      font-size: clamp(1rem, 1.6vw, 1.15rem);
     }
 
     .pizza-grid .pizza-badges {
@@ -459,6 +446,7 @@
       .pizza-grid {
         flex-direction: column;
         flex-wrap: nowrap;
+        gap: calc(var(--checker-edge) * 2);
       }
 
       .pizza-row {
@@ -472,12 +460,10 @@
       }
     }
 
-    .img-col--clickable {
-      cursor: pointer;
-    }
+    .img-col--clickable { cursor: pointer; }
 
     .img-col--clickable:focus-visible {
-      outline: 2px solid var(--accent);
+      outline: 3px dashed var(--red);
       outline-offset: 4px;
     }
 
@@ -492,6 +478,16 @@
       justify-content: center;
     }
 
+    .pizza-frame::before {
+      content: "";
+      position: absolute;
+      inset: -4%;
+      border: 2px dashed var(--red);
+      border-radius: 50%;
+      opacity: 0.35;
+      pointer-events: none;
+    }
+
     .pizza-frame img {
       width: 100%;
       height: 100%;
@@ -499,100 +495,98 @@
       display: block;
       animation: pizza-spin 48s linear infinite;
       will-change: transform;
-      filter: drop-shadow(0 12px 28px rgba(42, 10, 16, 0.18));
       pointer-events: none;
     }
 
-    .pizza-frame:hover img {
-      animation-play-state: paused;
-    }
+    .pizza-frame:hover img { animation-play-state: paused; }
 
     @keyframes pizza-spin {
-      from {
-        transform: rotate(0deg);
-      }
-      to {
-        transform: rotate(360deg);
-      }
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
     }
 
+    /* ——— Typography ——— */
     h1 {
-      font-family: "Bebas Neue", Impact, sans-serif;
+      font-family: "Alfa Slab One", "Bebas Neue", Impact, sans-serif;
       font-size: clamp(2.5rem, 8vw, 5rem);
       line-height: 0.95;
       letter-spacing: 0.02em;
       margin: 0 0 0.5rem;
-      color: var(--paper);
+      color: var(--ink);
+      text-transform: uppercase;
     }
 
     .subtitle {
-      font-size: clamp(0.85rem, 1.8vw, 1rem);
-      font-weight: 500;
-      color: var(--accent);
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: clamp(0.9rem, 1.8vw, 1.05rem);
+      color: var(--red);
       text-transform: uppercase;
-      letter-spacing: 0.18em;
-      margin-bottom: 1rem;
+      letter-spacing: 0.22em;
+      margin-bottom: 0.75rem;
+      border-bottom: 2px dashed var(--red);
+      padding-bottom: 0.3em;
+      display: inline-block;
     }
 
     .details {
-      font-weight: 300;
+      font-weight: 400;
       font-size: clamp(0.9rem, 1.6vw, 1.05rem);
-      line-height: 1.55;
-      color: var(--muted);
+      line-height: 1.6;
+      color: var(--ink);
       max-width: 28em;
     }
 
     .details strong {
-      color: var(--paper);
-      font-weight: 500;
+      color: var(--red);
+      font-weight: 700;
     }
 
     .price {
       margin-top: 1.25rem;
-      font-size: clamp(1.1rem, 2vw, 1.35rem);
-      font-weight: 600;
-      color: var(--paper);
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: clamp(1.2rem, 2.2vw, 1.5rem);
+      color: var(--red);
+      letter-spacing: 0.05em;
+      display: inline-block;
+      border: 2px dashed var(--red);
+      padding: 0.2em 0.6em;
+      transform: rotate(-2deg);
     }
 
+    /* ——— Badges ——— */
     .pizza-badges {
       display: flex;
       flex-wrap: wrap;
-      gap: 0.45rem;
+      gap: 0.4rem;
       margin: 0.35rem 0 0.85rem;
       max-width: 22rem;
     }
 
     .pizza-badge {
-      width: 3.1rem;
-      height: 3.1rem;
+      width: 3rem;
+      height: 3rem;
       border-radius: 50%;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       background: transparent;
-      border: none;
-      box-shadow: none;
-      color: var(--accent);
+      border: 1px dashed var(--red);
+      color: var(--red);
       cursor: default;
-      transition: transform 0.15s ease, filter 0.15s ease;
+      transition: transform 0.15s ease;
     }
 
-    .pizza-badge:hover {
-      transform: scale(1.06);
-      filter: brightness(1.08);
-    }
+    .pizza-badge:hover { transform: scale(1.08); }
 
     .pizza-badge svg,
     .pizza-badge .cat-icon-img {
-      width: 2.75rem;
-      height: 2.75rem;
+      width: 2.25rem;
+      height: 2.25rem;
       display: block;
     }
 
-    .pizza-badge .cat-icon-img {
-      object-fit: contain;
-    }
+    .pizza-badge .cat-icon-img { object-fit: contain; }
 
     .pizza-badge--preview {
       width: 2.65rem;
@@ -601,8 +595,8 @@
 
     .pizza-badge--preview svg,
     .pizza-badge--preview .cat-icon-img {
-      width: 2.35rem;
-      height: 2.35rem;
+      width: 2rem;
+      height: 2rem;
     }
 
     .preview-badges {
@@ -619,13 +613,11 @@
       z-index: 100;
       display: none;
       flex-direction: column;
-      background: var(--bg);
+      background: transparent;
       padding: clamp(0.75rem, 2vw, 1.5rem);
     }
 
-    .preview.is-visible {
-      display: flex;
-    }
+    .preview.is-visible { display: flex; }
 
     .preview__grid {
       position: relative;
@@ -638,7 +630,7 @@
       grid-template-areas:
         "left center right"
         "left bottom bottom";
-      gap: clamp(0.5rem, 2vw, 1.25rem);
+      gap: clamp(0.75rem, 2vw, 1.5rem);
       align-items: start;
     }
 
@@ -653,9 +645,7 @@
           "bottom";
       }
 
-      .preview-left {
-        padding-top: 2.5rem;
-      }
+      .preview-left { padding-top: 3rem; }
     }
 
     .preview-left {
@@ -690,42 +680,47 @@
       gap: 0.75rem;
       flex-wrap: wrap;
       justify-content: flex-end;
-      padding-top: 0.5rem;
+      padding-top: 0.75rem;
     }
 
     .preview__back {
       position: absolute;
-      top: clamp(0.5rem, 2vw, 1rem);
-      left: clamp(0.5rem, 2vw, 1rem);
+      top: clamp(0.75rem, 2vw, 1.25rem);
+      left: clamp(0.75rem, 2vw, 1.25rem);
       z-index: 3;
-      background: rgba(255, 255, 255, 0.94);
-      border: 1px solid rgba(196, 30, 58, 0.2);
-      color: var(--paper);
-      font-family: inherit;
-      font-size: 0.9rem;
-      padding: 0.45rem 0.85rem;
-      border-radius: 6px;
+      background: var(--red);
+      border: 2px dashed var(--paper);
+      color: var(--white);
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: 1rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      padding: 0.4rem 0.9rem;
+      border-radius: 0;
       cursor: pointer;
+      outline: 2px solid var(--red);
+      outline-offset: -1px;
     }
 
     .preview__back:hover {
-      border-color: var(--accent);
-      color: var(--accent);
+      background: var(--ink);
     }
 
     .preview-name {
-      font-family: "Bebas Neue", Impact, sans-serif;
-      font-size: clamp(2rem, 5vw, 3.5rem);
+      font-family: "Alfa Slab One", "Bebas Neue", Impact, sans-serif;
+      font-size: clamp(2.2rem, 5.5vw, 3.8rem);
       line-height: 1;
       margin: 0 0 1rem;
-      color: var(--paper);
+      color: var(--ink);
+      text-transform: uppercase;
     }
 
     .preview-label {
-      font-size: 0.75rem;
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: 0.85rem;
       text-transform: uppercase;
-      letter-spacing: 0.12em;
-      color: var(--accent);
+      letter-spacing: 0.15em;
+      color: var(--red);
       margin-bottom: 0.5rem;
     }
 
@@ -737,15 +732,13 @@
 
     .ingredient-list li {
       font-size: clamp(0.9rem, 1.4vw, 1rem);
-      font-weight: 300;
-      color: var(--muted);
-      padding: 0.35rem 0;
-      border-bottom: 1px solid rgba(196, 30, 58, 0.1);
+      font-weight: 400;
+      color: var(--ink);
+      padding: 0.4rem 0;
+      border-bottom: 1px dashed var(--red);
     }
 
-    .ingredient-list li:last-child {
-      border-bottom: none;
-    }
+    .ingredient-list li:last-child { border-bottom: none; }
 
     .macro-list {
       list-style: none;
@@ -755,19 +748,20 @@
 
     .macro-list li {
       font-size: clamp(0.85rem, 1.3vw, 0.95rem);
-      padding: 0.4rem 0;
-      color: var(--muted);
-      border-bottom: 1px solid rgba(196, 30, 58, 0.1);
+      padding: 0.45rem 0;
+      color: var(--ink);
+      border-bottom: 1px dashed var(--red);
     }
 
     .macro-list li strong {
       display: block;
-      color: var(--paper);
-      font-weight: 500;
-      font-size: 0.7rem;
+      font-family: "Bebas Neue", Impact, sans-serif;
+      color: var(--red);
+      font-weight: 400;
+      font-size: 0.75rem;
       text-transform: uppercase;
-      letter-spacing: 0.08em;
-      margin-bottom: 0.15rem;
+      letter-spacing: 0.1em;
+      margin-bottom: 0.1rem;
     }
 
     .carousel-wrap {
@@ -779,6 +773,7 @@
       align-items: center;
       justify-content: center;
       overflow: hidden;
+      border: 2px dashed var(--red);
     }
 
     .carousel-stage {
@@ -801,7 +796,6 @@
       width: 100%;
       height: 100%;
       object-fit: contain;
-      filter: drop-shadow(0 16px 40px rgba(42, 10, 16, 0.22));
     }
 
     .carousel-btn {
@@ -810,11 +804,12 @@
       transform: translateY(-50%);
       width: 48px;
       height: 48px;
-      border-radius: 50%;
-      border: 1px solid rgba(196, 30, 58, 0.22);
-      background: rgba(255, 255, 255, 0.94);
-      color: var(--paper);
-      font-size: 1.35rem;
+      border-radius: 0;
+      border: 2px dashed var(--red);
+      background: var(--white);
+      color: var(--ink);
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: 1.5rem;
       line-height: 1;
       cursor: pointer;
       display: flex;
@@ -824,8 +819,9 @@
     }
 
     .carousel-btn:hover {
-      border-color: var(--accent);
-      color: var(--accent);
+      background: var(--red);
+      color: var(--white);
+      border-style: solid;
     }
 
     .carousel-btn--prev {
@@ -844,15 +840,14 @@
       margin-top: 0.75rem;
     }
 
-    .preview-timer[hidden] {
-      display: none !important;
-    }
+    .preview-timer[hidden] { display: none !important; }
 
     .preview-timer__label {
-      font-size: 0.72rem;
-      letter-spacing: 0.06em;
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: 0.78rem;
+      letter-spacing: 0.08em;
       text-transform: uppercase;
-      color: var(--muted);
+      color: var(--red);
       margin-bottom: 0.4rem;
       display: flex;
       justify-content: space-between;
@@ -862,33 +857,31 @@
 
     .preview-timer__sec {
       font-variant-numeric: tabular-nums;
-      color: var(--paper);
-      font-weight: 500;
+      color: var(--ink);
+      font-weight: 700;
     }
 
     .preview-timer__track {
       height: 8px;
-      border-radius: 999px;
-      background: rgba(196, 30, 58, 0.08);
+      border-radius: 0;
+      background: var(--paper);
       overflow: hidden;
-      border: 1px solid rgba(196, 30, 58, 0.14);
+      border: 1px solid var(--red);
     }
 
     .preview-timer__fill {
       height: 100%;
       width: 0%;
-      border-radius: inherit;
-      background: linear-gradient(90deg, var(--accent-deep), var(--accent));
-      box-shadow: 0 0 12px rgba(196, 30, 58, 0.35);
+      background: var(--red);
     }
 
     .cart-combo {
       display: inline-flex;
       align-items: stretch;
-      border: 1px solid rgba(196, 30, 58, 0.22);
-      border-radius: 10px;
+      border: 2px solid var(--red);
+      border-radius: 0;
       overflow: hidden;
-      background: rgba(255, 245, 246, 0.96);
+      background: var(--white);
     }
 
     .cart-combo__qty {
@@ -896,8 +889,8 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      padding: 0.25rem 0.35rem;
-      border-right: 1px solid rgba(196, 30, 58, 0.16);
+      padding: 0.25rem 0.4rem;
+      border-right: 2px solid var(--red);
       min-width: 3.25rem;
     }
 
@@ -905,28 +898,27 @@
       width: 100%;
       border: none;
       background: transparent;
-      color: var(--paper);
+      color: var(--ink);
       font-size: 0.7rem;
       line-height: 1;
-      padding: 0.2rem 0.5rem;
+      padding: 0.25rem 0.5rem;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
-    .qty-arrow:hover:not(:disabled) {
-      color: var(--accent);
-    }
+    .qty-arrow:hover:not(:disabled) { color: var(--red); }
 
     .qty-arrow:disabled {
-      opacity: 0.35;
+      opacity: 0.3;
       cursor: not-allowed;
     }
 
     .qty-value {
-      font-weight: 600;
-      font-size: 1.15rem;
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-weight: 400;
+      font-size: 1.3rem;
       line-height: 1.2;
       padding: 0.15rem 0;
       min-height: 1.5rem;
@@ -939,20 +931,19 @@
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
-      padding: 0.65rem 1.15rem;
+      padding: 0.7rem 1.25rem;
       border: none;
       border-radius: 0;
-      background: var(--accent);
-      color: #ffffff;
-      font-family: inherit;
-      font-weight: 600;
-      font-size: 0.95rem;
+      background: var(--red);
+      color: var(--white);
+      font-family: "Bebas Neue", Impact, sans-serif;
+      font-size: 1.05rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
       cursor: pointer;
     }
 
-    .btn-cart:hover {
-      filter: brightness(1.08);
-    }
+    .btn-cart:hover { background: var(--ink); }
 
     .btn-cart svg {
       width: 1.1em;
@@ -960,10 +951,11 @@
     }
 
     .preview-hint {
-      font-size: 0.75rem;
-      color: var(--muted);
+      font-size: 0.78rem;
+      color: var(--red);
       margin-top: 0.75rem;
       text-align: center;
+      font-style: italic;
     }
   </style>
 </head>