addd code review changes

parfum-shop/src/App.css

@@ -1,13 +1,7 @@
-* {
-  box-sizing: border-box;
-}
-
 html,
 body,
 #root {
-  margin: 0;
   min-height: 100%;
-  font-family: "Questrial", Arial, Helvetica, sans-serif;
 }
 
 #root {
@@ -55,7 +49,7 @@ main {
   top: clamp(0.75rem, 2.1vw, 1.4rem);
   right: 0;
   left: 0;
-  z-index: 998;
+  z-index: var(--z-nav);
   margin-bottom: 0;
   padding-top: 0;
   pointer-events: none;
@@ -74,11 +68,14 @@ main {
 .navbar--light .nav-pill,
 .navbar--light .nav-link,
 .shell,
-[class*="-page"],
+.page,
-[class*="-shell"],
+.detail-page,
-[class*="-card"],
+.discovery-page,
-[class*="-panel"],
+.about-page,
-[class*="-box"],
+.support-page,
+.small-page,
+.impressum-page,
+.datenschutz-page,
 button,
 input,
 textarea,

parfum-shop/src/components/Footer.css

@@ -45,7 +45,7 @@
 
 .site-footer__logo {
   width: fit-content;
-  color: #fff;
+  color: var(--theme-accent-contrast);
   font-size: clamp(1rem, 1.5vw, 1.2rem);
   letter-spacing: 0.22em;
   text-decoration: none;
@@ -104,7 +104,7 @@
   transform: translateX(0.25rem);
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1023px) {
   .site-footer__inner {
     grid-template-columns: 1fr 1fr;
   }
@@ -114,7 +114,7 @@
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 767px) {
   .site-footer__inner {
     grid-template-columns: 1fr;
   }

parfum-shop/src/components/ProductDetailPage.css

@@ -926,26 +926,36 @@
     grid-template-columns: 1fr;
   }
 
+  .structure-timeline,
+  .recommendation-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 1023px) {
   .product-hero {
-    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
+    grid-template-columns: 1fr;
-    align-items: center;
+    align-content: start;
-    min-height: 100svh;
+    align-items: start;
-    padding-top: clamp(5.6rem, 9vw, 7.4rem);
+    gap: clamp(1rem, 2.5vw, 1.5rem);
-    padding-bottom: clamp(1rem, 2vw, 1.6rem);
+    min-height: auto;
+    padding-top: clamp(6rem, 10vw, 7.5rem);
+    padding-bottom: clamp(2.5rem, 5vw, 4rem);
   }
 
-  .product-media-column {
+  .product-media-column,
+  .product-purchase-panel {
     grid-column: 1;
-    grid-row: 1;
+    grid-row: auto;
   }
 
   .product-media-column {
     min-height: 0;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: auto minmax(0, 1fr) auto auto;
+    grid-template-rows: auto auto auto auto;
-    gap: clamp(0.65rem, 1.4vw, 1rem);
+    gap: clamp(0.8rem, 2vw, 1.25rem);
-    align-self: stretch;
+    align-self: auto;
     place-items: stretch;
   }
 
@@ -955,15 +965,20 @@
     margin-bottom: 0;
   }
 
+  .product-hero-copy h1 {
+    max-width: 12ch;
+    font-size: clamp(2.4rem, 6.8vw, 4.8rem);
+  }
+
   .product-hero-visual {
     grid-column: auto;
     grid-row: auto;
     min-height: 0;
-    height: min(42svh, 420px);
+    height: clamp(18rem, 48svh, 32rem);
   }
 
   .product-hero-image {
-    width: min(74%, 430px);
+    width: min(74%, 460px);
     max-height: 100%;
   }
 
@@ -971,7 +986,7 @@
   .hero-fact-grid {
     position: static;
     width: auto;
-    margin-top: var(--gap-sm);
+    margin-top: 0;
     transform: none;
   }
 
@@ -980,8 +995,8 @@
   }
 
   .thumb-btn {
-    width: clamp(3.6rem, 6vw, 4.8rem);
+    width: clamp(3.6rem, 8vw, 4.8rem);
-    height: clamp(3.6rem, 6vw, 4.8rem);
+    height: clamp(3.6rem, 8vw, 4.8rem);
   }
 
   .hero-fact-grid {
@@ -1002,28 +1017,18 @@
   .hero-fact-grid p {
     font-size: var(--text-sm);
     line-height: 1.38;
+    overflow-wrap: anywhere;
   }
 
   .product-purchase-panel {
-    grid-column: 2;
-    grid-row: 1;
-    position: relative;
     justify-self: stretch;
-    align-self: center;
+    align-self: auto;
-    width: 100%;
+    width: min(100%, 46rem);
+    max-width: 46rem;
     max-height: none;
+    margin-inline: auto;
     overflow: visible;
-    gap: var(--gap-xs);
+    gap: var(--gap-sm);
-  }
-
-  .product-hero-copy h1 {
-    max-width: 12ch;
-    font-size: clamp(2.4rem, 5.5vw, 4.6rem);
-  }
-
-  .structure-timeline,
-  .recommendation-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
@@ -1035,10 +1040,10 @@
   .product-hero {
     grid-template-columns: 1fr;
     align-content: start;
-    gap: clamp(0.5rem, 1.8vw, 0.8rem);
+    gap: clamp(0.65rem, 2vw, 1rem);
-    min-height: 100svh;
+    min-height: auto;
-    padding-top: clamp(6.7rem, 20vw, 7.25rem);
+    padding-top: clamp(6.4rem, 18vw, 7.25rem);
-    padding-bottom: clamp(0.75rem, 2.4vw, 1rem);
+    padding-bottom: clamp(1.5rem, 5vw, 2.5rem);
   }
 
   .product-media-column,
@@ -1048,12 +1053,12 @@
   }
 
   .product-hero-visual {
-    height: min(29svh, 250px);
+    height: clamp(13rem, 32svh, 18rem);
-    min-height: 198px;
+    min-height: 0;
   }
 
   .product-hero-image {
-    width: min(74%, 292px);
+    width: min(68%, 280px);
   }
 
   .character-facts,
@@ -1091,10 +1096,11 @@
   .thumb-btn {
     width: clamp(2.8rem, 11vw, 3.25rem);
     height: clamp(2.8rem, 11vw, 3.25rem);
+    min-width: var(--touch-target-min);
   }
 
   .product-thumbs {
-    margin-top: -0.6rem;
+    margin-top: 0.2rem;
   }
 
   .hero-fact-grid {
@@ -1108,12 +1114,12 @@
 
   .hero-fact-grid span {
     margin-bottom: 0.25rem;
-    font-size: 0.58rem;
+    font-size: clamp(0.65rem, 2vw, var(--text-xs));
     letter-spacing: 0.09em;
   }
 
   .hero-fact-grid p {
-    font-size: 0.72rem;
+    font-size: clamp(0.78rem, 2.5vw, var(--text-sm));
     line-height: 1.22;
     overflow-wrap: anywhere;
   }
@@ -1133,6 +1139,7 @@
   }
 
   .size-card {
+    min-width: 0;
     min-height: 70px;
     gap: 0.2rem;
     padding: 0.6rem 0.7rem;
@@ -1145,6 +1152,8 @@
 
   .size-card strong {
     font-size: 0.98rem;
+    white-space: normal;
+    overflow-wrap: anywhere;
   }
 
   .size-card small,
@@ -1154,7 +1163,7 @@
 
   .purchase-actions .atmos-btn,
   .restock-button {
-    min-height: 38px;
+    min-height: var(--touch-target-min);
     font-size: 0.72rem;
   }
 
@@ -1188,6 +1197,12 @@
   }
 }
 
+@media (max-width: 640px) {
+  .product-thumbs {
+    display: none;
+  }
+}
+
 @media (max-width: 480px) {
   .product-hero-copy h1 {
     font-size: clamp(1.95rem, 10.2vw, 2.85rem);

parfum-shop/src/components/SharedNavbar.jsx

@@ -4,10 +4,11 @@ import { useTheme } from "../theme/useTheme";
 import "../style/navbar.css";
 
 function SharedNavbar({ variant = "hero", active = "", brandMode = "logo" }) {
-  const { cart, openCart, openProfile, user } = useShop();
+  const { cart, openCart, openProfile, panelOpen, panelType, user } = useShop();
   const { isLight, toggleTheme } = useTheme();
   const cartCount = cart.total_quantity || 0;
   const cartLabel = cartCount > 0 ? `Warenkorb ${cartCount}` : "Warenkorb";
+  const cartCompactLabel = cartCount > 0 ? `Korb ${cartCount}` : "Korb";
   const cartAriaLabel =
     cartCount > 0
       ? `Warenkorb mit ${cartCount} ${cartCount === 1 ? "Artikel" : "Artikeln"} öffnen`
@@ -44,18 +45,25 @@ function SharedNavbar({ variant = "hero", active = "", brandMode = "logo" }) {
           </Link>
           <button
             type="button"
-            className="nav-link nav-button"
+            className="nav-link nav-button nav-link--cart"
             onClick={openCart}
             aria-haspopup="dialog"
+            aria-controls="shop-drawer"
+            aria-expanded={panelOpen && panelType === "cart"}
             aria-label={cartAriaLabel}
           >
-            {cartLabel}
+            <span className="nav-label nav-label--full">{cartLabel}</span>
+            <span className="nav-label nav-label--compact">
+              {cartCompactLabel}
+            </span>
           </button>
           <button
             type="button"
             className="nav-link nav-button"
             onClick={openProfile}
             aria-haspopup="dialog"
+            aria-controls="shop-drawer"
+            aria-expanded={panelOpen && panelType === "profile"}
             aria-label={user ? "Profil öffnen" : "Anmelden oder Profil öffnen"}
           >
             Profil
@@ -64,7 +72,7 @@ function SharedNavbar({ variant = "hero", active = "", brandMode = "logo" }) {
             type="button"
             className={`nav-link nav-button nav-theme-switch ${isLight ? "is-light" : ""}`}
             onClick={toggleTheme}
-            aria-label={isLight ? "Zum Dark Mode wechseln" : "Zum Light Mode wechseln"}
+            aria-label="Light Mode"
             aria-pressed={isLight}
           >
             <span className="nav-theme-switch__track" aria-hidden="true">

parfum-shop/src/components/ShopDrawer.css

@@ -11,7 +11,7 @@
 .drawer-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 80;
+  z-index: var(--z-drawer-backdrop);
   background: rgba(0, 0, 0, 0.58);
   opacity: 0;
   pointer-events: none;
@@ -27,7 +27,7 @@
   position: fixed;
   top: 0;
   right: 0;
-  z-index: 90;
+  z-index: var(--z-drawer);
   width: min(560px, 100%);
   height: 100vh;
   height: 100dvh;
@@ -238,6 +238,13 @@
 
 /* ----- Payment ----------------------------------------------------------- */
 
+.payment-fieldset {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
 .payment-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -262,6 +269,18 @@
     background-color var(--duration-med) var(--ease-out);
 }
 
+.payment-card__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .payment-card::before {
   content: "";
   position: absolute;
@@ -279,6 +298,12 @@
   border-color: rgba(var(--theme-accent-rgb) / 0.55);
 }
 
+.payment-card:focus-within {
+  border-color: var(--theme-control-border-focus);
+  outline: 2px solid var(--theme-focus-ring);
+  outline-offset: 3px;
+}
+
 .payment-card.is-active {
   border-color: var(--theme-accent);
   background: rgba(var(--theme-accent-rgb) / 0.08);
@@ -658,7 +683,7 @@
   position: fixed;
   right: var(--page-x);
   bottom: var(--page-x);
-  z-index: 100;
+  z-index: var(--z-toast);
   width: min(360px, calc(100vw - (var(--page-x) * 2)));
   display: flex;
   flex-direction: column;

parfum-shop/src/components/ShopDrawer.jsx

@@ -1,4 +1,4 @@
-import { useId, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Link } from "react-router";
 import { formatChf } from "../shop/money";
 import { useShop } from "../shop/useShop";
@@ -32,6 +32,24 @@ const creditStatusLabels = {
 const formatDiscoveryStatus = (status) => discoveryStatusLabels[status] || status;
 const formatCreditStatus = (status) => creditStatusLabels[status] || status;
 
+const focusableSelector = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+].join(",");
+
+const getFocusableElements = (container) =>
+  Array.from(container.querySelectorAll(focusableSelector)).filter(
+    (element) =>
+      element instanceof HTMLElement &&
+      element.tabIndex >= 0 &&
+      !element.closest("[inert]") &&
+      element.getClientRects().length > 0
+  );
+
 function Field({
   label,
   value,
@@ -42,6 +60,8 @@ function Field({
   name,
   autoComplete,
   inputMode,
+  describedBy,
+  invalid = false,
 }) {
   const generatedId = useId();
   const fallbackName = label
@@ -62,15 +82,28 @@ function Field({
         readOnly={readOnly}
         autoComplete={autoComplete}
         inputMode={inputMode}
+        aria-describedby={describedBy}
+        aria-invalid={invalid || undefined}
         onChange={(event) => onChange?.(event.target.value)}
       />
     </label>
   );
 }
 
+function DrawerError({ id, children }) {
+  if (!children) return null;
+
+  return (
+    <p className="drawer-error" id={id} role="alert">
+      {children}
+    </p>
+  );
+}
+
 function AuthPanel() {
   const { busy, error, login, register } = useShop();
   const [mode, setMode] = useState("login");
+  const errorId = "auth-error";
   const [form, setForm] = useState({
     first_name: "",
     surname: "",
@@ -105,6 +138,8 @@ function AuthPanel() {
                 name="first_name"
                 value={form.first_name}
                 autoComplete="given-name"
+                describedBy={error ? errorId : undefined}
+                invalid={!!error}
                 onChange={(value) => update("first_name", value)}
               />
               <Field
@@ -112,6 +147,8 @@ function AuthPanel() {
                 name="surname"
                 value={form.surname}
                 autoComplete="family-name"
+                describedBy={error ? errorId : undefined}
+                invalid={!!error}
                 onChange={(value) => update("surname", value)}
               />
             </div>
@@ -125,6 +162,8 @@ function AuthPanel() {
             value={form.email}
             autoComplete="email"
             inputMode="email"
+            describedBy={error ? errorId : undefined}
+            invalid={!!error}
             onChange={(value) => update("email", value)}
           />
           <Field
@@ -134,10 +173,12 @@ function AuthPanel() {
             type="password"
             value={form.password}
             autoComplete={mode === "login" ? "current-password" : "new-password"}
+            describedBy={error ? errorId : undefined}
+            invalid={!!error}
             onChange={(value) => update("password", value)}
           />
 
-          {error && <p className="drawer-error">{error}</p>}
+          <DrawerError id={errorId}>{error}</DrawerError>
 
           <button
             className="atmos-btn atmos-btn--primary atmos-btn--block"
@@ -177,6 +218,7 @@ function CartPanel() {
     city: user?.city || "",
   }));
   const [paymentMethod, setPaymentMethod] = useState("Bill");
+  const errorId = "cart-error";
 
   const updateAddress = (key, value) =>
     setAddress((current) => ({ ...current, [key]: value }));
@@ -194,42 +236,51 @@ function CartPanel() {
           <p className="drawer-muted">Dein Warenkorb ist leer.</p>
         ) : (
           <div className="cart-items">
-            {cart.items.map((item) => (
+            {cart.items.map((item) => {
-              <article className="cart-item" key={item.product_id}>
+              const productName = item.product.name;
-                <div className="cart-item-info">
-                  <h3>{item.product.name}</h3>
-                  <p>
-                    {item.product.size_label} · {formatChf(item.product.price_cents)}
-                  </p>
-                </div>
 
-                <div className="cart-controls" role="group" aria-label="Menge anpassen">
+              return (
-                  <button
+                <article className="cart-item" key={item.product_id}>
-                    type="button"
+                  <div className="cart-item-info">
-                    aria-label="Menge verringern"
+                    <h3>{productName}</h3>
-                    onClick={() => updateCartQuantity(item.product_id, item.quantity - 1)}
+                    <p>
-                  >
+                      {item.product.size_label} · {formatChf(item.product.price_cents)}
-                    −
+                    </p>
-                  </button>
+                  </div>
-                  <span>{item.quantity}</span>
-                  <button
-                    type="button"
-                    aria-label="Menge erhöhen"
-                    onClick={() => updateCartQuantity(item.product_id, item.quantity + 1)}
-                  >
-                    +
-                  </button>
-                </div>
 
-                <button
+                  <div
-                  className="atmos-btn atmos-btn--ghost atmos-btn--sm"
+                    className="cart-controls"
-                  type="button"
+                    role="group"
-                  onClick={() => removeCartItem(item.product_id)}
+                    aria-label={`${productName} Menge: ${item.quantity}`}
-                >
+                  >
-                  Entfernen
+                    <button
-                </button>
+                      type="button"
-              </article>
+                      aria-label={`${productName} Menge verringern`}
-            ))}
+                      onClick={() => updateCartQuantity(item.product_id, item.quantity - 1)}
+                    >
+                      −
+                    </button>
+                    <span aria-live="polite">{item.quantity}</span>
+                    <button
+                      type="button"
+                      aria-label={`${productName} Menge erhoehen`}
+                      onClick={() => updateCartQuantity(item.product_id, item.quantity + 1)}
+                    >
+                      +
+                    </button>
+                  </div>
+
+                  <button
+                    className="atmos-btn atmos-btn--ghost atmos-btn--sm"
+                    type="button"
+                    aria-label={`${productName} aus dem Warenkorb entfernen`}
+                    onClick={() => removeCartItem(item.product_id)}
+                  >
+                    Entfernen
+                  </button>
+                </article>
+              );
+            })}
           </div>
         )}
       </section>
@@ -240,21 +291,29 @@ function CartPanel() {
           <Field
             label="Strasse"
             value={address.street_name}
+            describedBy={error ? errorId : undefined}
+            invalid={!!error}
             onChange={(value) => updateAddress("street_name", value)}
           />
           <Field
             label="Nr."
             value={address.house_number}
+            describedBy={error ? errorId : undefined}
+            invalid={!!error}
             onChange={(value) => updateAddress("house_number", value)}
           />
           <Field
             label="PLZ"
             value={address.zip_code}
+            describedBy={error ? errorId : undefined}
+            invalid={!!error}
             onChange={(value) => updateAddress("zip_code", value)}
           />
           <Field
             label="Ort"
             value={address.city}
+            describedBy={error ? errorId : undefined}
+            invalid={!!error}
             onChange={(value) => updateAddress("city", value)}
           />
         </div>
@@ -262,24 +321,37 @@ function CartPanel() {
 
       <section className="drawer-section">
         <span className="drawer-eyebrow">Zahlung</span>
-        <div className="payment-grid" role="radiogroup" aria-label="Zahlungsmethode">
+        <fieldset
-          {paymentMethods.map((method) => {
+          className="payment-fieldset"
-            const active = paymentMethod === method.key;
+          aria-describedby={error ? errorId : undefined}
-            return (
+        >
-              <button
+          <legend className="visually-hidden">Zahlungsmethode</legend>
-                type="button"
+          <div className="payment-grid">
-                role="radio"
+            {paymentMethods.map((method) => {
-                aria-checked={active}
+              const active = paymentMethod === method.key;
-                className={`payment-card ${active ? "is-active" : ""}`}
+              return (
-                key={method.key}
+                <label
-                onClick={() => setPaymentMethod(method.key)}
+                  className={`payment-card ${active ? "is-active" : ""}`}
-              >
+                  key={method.key}
-                <span className="payment-card__badge">{method.badge}</span>
+                >
-                <strong>{method.label}</strong>
+                  <input
-              </button>
+                    className="payment-card__input"
-            );
+                    type="radio"
-          })}
+                    name="payment_method"
-        </div>
+                    value={method.key}
+                    checked={active}
+                    aria-invalid={!!error || undefined}
+                    onChange={() => setPaymentMethod(method.key)}
+                  />
+                  <span className="payment-card__badge" aria-hidden="true">
+                    {method.badge}
+                  </span>
+                  <strong>{method.label}</strong>
+                </label>
+              );
+            })}
+          </div>
+        </fieldset>
       </section>
 
       <section className="drawer-section drawer-totals">
@@ -311,7 +383,7 @@ function CartPanel() {
         </div>
       </section>
 
-      {error && <p className="drawer-error">{error}</p>}
+      <DrawerError id={errorId}>{error}</DrawerError>
 
       <button
         className="atmos-btn atmos-btn--primary atmos-btn--block atmos-btn--lg"
@@ -347,6 +419,7 @@ function ProfilePanel() {
   } = useShop();
   const [editing, setEditing] = useState(false);
   const [form, setForm] = useState(user || {});
+  const errorId = "profile-error";
 
   const update = (key, value) => setForm((current) => ({ ...current, [key]: value }));
   const notifications = user?.notifications || {};
@@ -412,13 +485,56 @@ function ProfilePanel() {
         {editing ? (
           <>
             <div className="drawer-grid drawer-grid--two">
-              <Field label="Name" value={form.first_name || ""} onChange={(value) => update("first_name", value)} />
+              <Field
-              <Field label="Nachname" value={form.surname || ""} onChange={(value) => update("surname", value)} />
+                label="Name"
-              <Field label="Strasse" value={form.street_name || ""} onChange={(value) => update("street_name", value)} />
+                value={form.first_name || ""}
-              <Field label="Nr." value={form.house_number || ""} onChange={(value) => update("house_number", value)} />
+                describedBy={error ? errorId : undefined}
-              <Field label="PLZ" value={form.zip_code || ""} onChange={(value) => update("zip_code", value)} />
+                invalid={!!error}
-              <Field label="Ort" value={form.city || ""} onChange={(value) => update("city", value)} />
+                onChange={(value) => update("first_name", value)}
-              <Field label="Geburtsdatum" type="date" value={form.birthdate || ""} onChange={(value) => update("birthdate", value)} />
+              />
+              <Field
+                label="Nachname"
+                value={form.surname || ""}
+                describedBy={error ? errorId : undefined}
+                invalid={!!error}
+                onChange={(value) => update("surname", value)}
+              />
+              <Field
+                label="Strasse"
+                value={form.street_name || ""}
+                describedBy={error ? errorId : undefined}
+                invalid={!!error}
+                onChange={(value) => update("street_name", value)}
+              />
+              <Field
+                label="Nr."
+                value={form.house_number || ""}
+                describedBy={error ? errorId : undefined}
+                invalid={!!error}
+                onChange={(value) => update("house_number", value)}
+              />
+              <Field
+                label="PLZ"
+                value={form.zip_code || ""}
+                describedBy={error ? errorId : undefined}
+                invalid={!!error}
+                onChange={(value) => update("zip_code", value)}
+              />
+              <Field
+                label="Ort"
+                value={form.city || ""}
+                describedBy={error ? errorId : undefined}
+                invalid={!!error}
+                onChange={(value) => update("city", value)}
+              />
+              <Field
+                label="Geburtsdatum"
+                type="date"
+                value={form.birthdate || ""}
+                describedBy={error ? errorId : undefined}
+                invalid={!!error}
+                onChange={(value) => update("birthdate", value)}
+              />
             </div>
             <div className="atmos-btn-row">
               <button
@@ -556,7 +672,7 @@ function ProfilePanel() {
         )}
       </section>
 
-      {error && <p className="drawer-error">{error}</p>}
+      <DrawerError id={errorId}>{error}</DrawerError>
     </div>
   );
 }
@@ -572,22 +688,124 @@ function ReadBlock({ label, value }) {
 
 function ShopDrawer() {
   const { closePanel, panelOpen, panelType, user } = useShop();
+  const drawerRef = useRef(null);
+  const restoreFocusRef = useRef(null);
+  const wasOpenRef = useRef(false);
+  const drawerTitleId = useId();
 
   const drawerLabel = !user ? "Konto" : panelType === "cart" ? "Warenkorb" : "Profil";
 
+  useEffect(() => {
+    if (typeof document === "undefined") return undefined;
+
+    if (!panelOpen) {
+      if (wasOpenRef.current) {
+        const restoreTarget = restoreFocusRef.current;
+        if (restoreTarget && document.contains(restoreTarget)) {
+          window.requestAnimationFrame(() => {
+            restoreTarget.focus({ preventScroll: true });
+          });
+        }
+      }
+      wasOpenRef.current = false;
+      return undefined;
+    }
+
+    wasOpenRef.current = true;
+    const activeElement = document.activeElement;
+    if (
+      activeElement instanceof HTMLElement &&
+      !drawerRef.current?.contains(activeElement)
+    ) {
+      restoreFocusRef.current = activeElement;
+    }
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const frameId = window.requestAnimationFrame(() => {
+      const drawer = drawerRef.current;
+      if (!drawer) return;
+      const [firstFocusable] = getFocusableElements(drawer);
+      (firstFocusable || drawer).focus({ preventScroll: true });
+    });
+
+    return () => {
+      window.cancelAnimationFrame(frameId);
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [panelOpen]);
+
+  useEffect(() => {
+    if (!panelOpen || typeof document === "undefined") return undefined;
+
+    const drawer = drawerRef.current;
+    if (!drawer) return undefined;
+
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        closePanel();
+        return;
+      }
+
+      if (event.key !== "Tab") return;
+
+      const focusableElements = getFocusableElements(drawer);
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        drawer.focus({ preventScroll: true });
+        return;
+      }
+
+      const firstFocusable = focusableElements[0];
+      const lastFocusable = focusableElements[focusableElements.length - 1];
+
+      if (!drawer.contains(document.activeElement)) {
+        event.preventDefault();
+        firstFocusable.focus({ preventScroll: true });
+        return;
+      }
+
+      if (event.shiftKey && document.activeElement === firstFocusable) {
+        event.preventDefault();
+        lastFocusable.focus({ preventScroll: true });
+        return;
+      }
+
+      if (!event.shiftKey && document.activeElement === lastFocusable) {
+        event.preventDefault();
+        firstFocusable.focus({ preventScroll: true });
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [closePanel, panelOpen]);
+
   return (
     <>
       <div
         className={`drawer-backdrop ${panelOpen ? "is-open" : ""}`}
+        aria-hidden="true"
         onClick={closePanel}
       />
       <aside
+        id="shop-drawer"
+        ref={drawerRef}
+        role="dialog"
         className={`shop-drawer ${panelOpen ? "is-open" : ""}`}
+        aria-labelledby={drawerTitleId}
+        aria-modal="true"
         aria-hidden={!panelOpen}
+        inert={!panelOpen ? "" : undefined}
+        tabIndex={-1}
         data-lenis-prevent
       >
         <header className="drawer-top">
-          <span className="drawer-eyebrow">{drawerLabel}</span>
+          <span className="drawer-eyebrow" id={drawerTitleId}>
+            {drawerLabel}
+          </span>
           <button
             type="button"
             className="atmos-btn atmos-btn--outline atmos-btn--icon atmos-btn--sm"

parfum-shop/src/index.css

@@ -65,8 +65,6 @@
 
 html {
   scroll-behavior: auto;
-  overflow-x: hidden;
-  overflow-x: clip;
 }
 
 body {
@@ -74,8 +72,6 @@ body {
   background: var(--theme-bg);
   color: var(--theme-text);
   font-family: inherit;
-  overflow-x: hidden;
-  overflow-x: clip;
   transition:
     background-color 0.25s ease,
     color 0.25s ease;

parfum-shop/src/pages/DiscoverySetPage.css

@@ -534,23 +534,37 @@
     grid-template-columns: 1fr;
   }
 
+  .discovery-benefit-panel {
+    min-height: auto;
+  }
+
+  /* products & steps grids: handled by Grid12 md:6 col-spans */
+}
+
+@media (max-width: 1023px) {
   .discovery-hero {
-    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
+    grid-template-columns: 1fr;
-    align-items: center;
+    align-content: start;
-    min-height: 100svh;
+    align-items: start;
-    padding-top: clamp(5.6rem, 9vw, 7.4rem);
+    gap: clamp(1rem, 2.5vw, 1.5rem);
-    padding-bottom: clamp(1rem, 2vw, 1.6rem);
+    min-height: auto;
+    padding-top: clamp(6rem, 10vw, 7.5rem);
+    padding-bottom: clamp(2.5rem, 5vw, 4rem);
+  }
+
+  .discovery-hero-stage,
+  .discovery-order-panel {
+    grid-column: 1;
+    grid-row: auto;
   }
 
   .discovery-hero-stage {
-    grid-column: 1;
-    grid-row: 1;
     min-height: 0;
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto auto;
-    gap: clamp(0.65rem, 1.4vw, 1rem);
+    gap: clamp(0.9rem, 2vw, 1.35rem);
-    align-self: stretch;
+    align-self: auto;
     place-items: stretch;
   }
 
@@ -561,7 +575,12 @@
 
   .discovery-hero-copy h1 {
     max-width: 12ch;
-    font-size: clamp(2.4rem, 5.5vw, 4.6rem);
+    font-size: clamp(2.4rem, 6.8vw, 4.8rem);
+  }
+
+  .discovery-intro {
+    width: min(100%, 44ch);
+    max-width: 44ch;
   }
 
   .discovery-hero-visual {
@@ -569,29 +588,23 @@
     grid-row: auto;
     justify-items: center;
     min-height: 0;
-    height: min(42svh, 420px);
+    height: clamp(18rem, 48svh, 32rem);
   }
 
   .discovery-hero-visual img {
-    width: min(74%, 430px);
+    width: min(78%, 500px);
     height: auto;
     max-height: 100%;
   }
 
   .discovery-order-panel {
-    grid-column: 2;
-    grid-row: 1;
     justify-self: stretch;
-    align-self: center;
+    align-self: auto;
-    width: 100%;
+    width: min(100%, 46rem);
-    gap: var(--gap-xs);
+    max-width: 46rem;
+    margin-inline: auto;
+    gap: var(--gap-sm);
   }
-
-  .discovery-benefit-panel {
-    min-height: auto;
-  }
-
-  /* products & steps grids: handled by Grid12 md:6 col-spans */
 }
 
 @media (max-width: 820px) {
@@ -630,12 +643,12 @@
   }
 
   .discovery-hero-visual {
-    height: min(30svh, 260px);
+    height: clamp(15rem, 36svh, 24rem);
-    min-height: 190px;
+    min-height: 0;
   }
 
   .discovery-hero-visual img {
-    width: min(82%, 320px);
+    width: min(82%, 420px);
   }
 
   .discovery-panel-facts,

parfum-shop/src/pages/LandingPage.css

@@ -24,9 +24,9 @@
 .hero {
   position: relative;
   width: 100%;
-  min-height: 720px;
+  min-height: 680px;
-  min-height: max(720px, 100vh);
+  min-height: max(680px, 100vh);
-  min-height: max(720px, 100dvh);
+  min-height: max(680px, 100dvh);
   overflow: hidden;
   isolation: isolate;
   background: var(--theme-bg);
@@ -48,7 +48,6 @@
   z-index: 0;
   overflow: hidden;
   background: var(--theme-bg);
-  will-change: transform;
 }
 
 .hero-material__texture {
@@ -56,7 +55,6 @@
   inset: 0;
   z-index: 1;
   background: var(--theme-bg);
-  will-change: transform;
 }
 
 .hero-wordmark {
@@ -79,7 +77,6 @@
   width: 100%;
   height: auto;
   opacity: 0.96;
-  will-change: transform, opacity, filter;
 }
 
 body.theme-light .hero-wordmark__image {
@@ -92,13 +89,12 @@ body.theme-light .hero-wordmark__image {
   top: clamp(20rem, 52vh, 40rem);
   left: 50%;
   z-index: 5;
-  width: clamp(20rem, 31vw, 42rem);
+  width: clamp(20rem, 29vw, 42rem);
   aspect-ratio: 1078 / 1284;
   margin: 0;
   display: grid;
   place-items: center;
   transform: translate(-50%, -50%);
-  will-change: transform;
 }
 
 .hero-product__inner {
@@ -107,7 +103,6 @@ body.theme-light .hero-wordmark__image {
   height: 100%;
   display: grid;
   place-items: center;
-  will-change: transform, opacity;
 }
 
 .hero-product__image {
@@ -158,7 +153,6 @@ body.theme-light .hero-wordmark__image {
   flex-wrap: wrap;
   gap: clamp(0.75rem, 1.2vw, 1rem);
   margin-top: clamp(1.25rem, 3.2vh, 1.75rem);
-  will-change: transform, opacity;
 }
 
 /* Hero CTAs use the global .atmos-btn system (see src/style/buttons.css). */
@@ -190,7 +184,7 @@ body.theme-light .hero-wordmark__image {
 .intro-overlay {
   position: absolute;
   inset: 0;
-  z-index: 999;
+  z-index: var(--z-overlay);
   background: var(--theme-paper);
   display: grid;
   place-items: center;
@@ -591,12 +585,15 @@ body.theme-light .hero-wordmark__image {
   .hero-product {
     /* Tablet range (≤ 1180 px): viewports are taller relative to width,
        so we re-center the product instead of inheriting the desktop 52vh. */
-    top: clamp(17rem, 44vh, 28rem);
+    top: clamp(16rem, 36vh, 23rem);
-    width: clamp(21rem, 45vw, 34rem);
+    width: clamp(18rem, 40vw, 29rem);
   }
 
   .hero-content {
-    width: min(23rem, calc(50vw - var(--page-x) - 5rem));
+    right: var(--page-x);
+    bottom: clamp(3.8rem, 8vh, 6rem);
+    width: min(32rem, calc(100vw - (var(--page-x) * 2)));
+    max-width: 32rem;
   }
 
   .hero-scroll {
@@ -628,11 +625,38 @@ body.theme-light .hero-wordmark__image {
   }
 }
 
+@media (max-width: 1023px) {
+  .hero {
+    min-height: 650px;
+    min-height: max(650px, 100svh);
+    min-height: max(650px, 100dvh);
+  }
+
+  .hero-wordmark {
+    top: clamp(4.8rem, 9svh, 6.8rem);
+  }
+
+  .hero-product {
+    top: clamp(18rem, 38svh, 27rem);
+    width: clamp(18rem, 54vw, 32rem);
+  }
+
+  .hero-content {
+    bottom: clamp(3rem, 7svh, 5.5rem);
+    width: auto;
+    max-width: 27rem;
+  }
+
+  .hero-scroll {
+    display: none;
+  }
+}
+
 @media (max-width: 760px) {
   .hero {
-    min-height: 720px;
+    min-height: 620px;
-    min-height: max(720px, 100vh);
+    min-height: max(620px, 100svh);
-    min-height: max(720px, 100dvh);
+    min-height: max(620px, 100dvh);
   }
 
   .hero-material__texture {
@@ -640,7 +664,7 @@ body.theme-light .hero-wordmark__image {
   }
 
   .hero-wordmark {
-    top: clamp(5.8rem, 14svh, 7.5rem);
+    top: clamp(7rem, 17svh, 8.5rem);
     left: var(--page-x);
     right: var(--page-x);
   }
@@ -649,11 +673,11 @@ body.theme-light .hero-wordmark__image {
     /* Phone: keep the product centered, but narrower than the viewport
        so it does not crowd the copy block near the bottom. */
     aspect-ratio: auto;
-    top: clamp(11rem, 24svh, 14rem);
+    top: clamp(12.5rem, 28svh, 16rem);
     left: 50%;
     right: auto;
-    width: clamp(15rem, 74vw, 21rem);
+    width: clamp(12.5rem, 62vw, 17rem);
-    height: clamp(16rem, 38svh, 21rem);
+    height: clamp(13.5rem, 31svh, 17rem);
     transform: translateX(-50%);
   }
 
@@ -716,16 +740,16 @@ body.theme-light .hero-wordmark__image {
 
 @media (max-width: 430px) {
   .hero {
-    min-height: 700px;
+    min-height: 608px;
-    min-height: max(700px, 100vh);
+    min-height: max(608px, 100svh);
-    min-height: max(700px, 100dvh);
+    min-height: max(608px, 100dvh);
   }
 
   .hero-product {
     /* Slightly tighter slot for compact phones. */
-    top: clamp(10rem, 22svh, 13rem);
+    top: clamp(12rem, 28svh, 14.5rem);
-    width: clamp(14rem, 70vw, 18.5rem);
+    width: clamp(12rem, 62vw, 16rem);
-    height: clamp(15rem, 36svh, 19rem);
+    height: clamp(13rem, 31svh, 16.5rem);
   }
 
   .hero-copy {
@@ -746,6 +770,35 @@ body.theme-light .hero-wordmark__image {
   }
 }
 
+@media (max-width: 760px) and (max-height: 620px) {
+  .hero {
+    min-height: 100svh;
+    min-height: 100dvh;
+    overflow: visible;
+    padding-bottom: clamp(1rem, 4svh, 1.6rem);
+  }
+
+  .hero-wordmark {
+    top: clamp(6.2rem, 18svh, 7rem);
+  }
+
+  .hero-product {
+    top: clamp(8.6rem, 25svh, 10.5rem);
+    width: clamp(12.5rem, 40vw, 16rem);
+    height: clamp(13.5rem, 44svh, 16rem);
+  }
+
+  .hero-content {
+    position: relative;
+    left: clamp(1rem, 5vw, 1.5rem);
+    right: auto;
+    bottom: auto;
+    width: calc(100% - clamp(2rem, 10vw, 3rem));
+    margin-top: clamp(20rem, 60svh, 24rem);
+    padding-bottom: 0;
+  }
+}
+
 @container (max-width: 360px) {
   .product-bottom {
     flex-direction: column;
@@ -772,6 +825,5 @@ body.theme-light .hero-wordmark__image {
   .discovery-banner img {
     transition: none;
     animation: none;
-    will-change: auto;
   }
 }

parfum-shop/src/pages/LandingPage.jsx

@@ -517,7 +517,7 @@ function LandingPage() {
                         originalWidth: 1080,
                       })}
                       sizes={PRODUCT_CARD_IMAGE_SIZES}
-                      alt={item.name}
+                      alt=""
                       className="product-image"
                       data-product-transition-source
                       loading={index < 3 ? "eager" : "lazy"}

parfum-shop/src/style/breakpoints.css

@@ -19,7 +19,7 @@
 
 @media (min-width: 768px) {
   .is-hidden-md-down {
-    display: revert;
+    display: block;
   }
   .is-hidden-md-up {
     display: none;

parfum-shop/src/style/buttons.css

@@ -63,7 +63,7 @@
   letter-spacing: 0.04em;
   text-decoration: none;
   text-align: center;
-  white-space: nowrap;
+  white-space: normal;
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
@@ -144,16 +144,16 @@
   --btn-fg-hover: var(--theme-accent-contrast);
   --btn-border: var(--theme-accent-fill);
   --btn-border-hover: var(--theme-accent-fill-strong);
-  --btn-stripe: rgba(255, 255, 255, 0.85);
+  --btn-stripe: rgba(var(--theme-accent-contrast-rgb) / 0.85);
 }
 
 .atmos-btn--invert {
-  --btn-bg: #fff;
+  --btn-bg: var(--theme-accent-contrast);
-  --btn-bg-hover: #fff;
+  --btn-bg-hover: var(--theme-accent-contrast);
   --btn-fg: var(--theme-accent-fill-strong);
   --btn-fg-hover: var(--theme-accent-fill-strong);
-  --btn-border: #fff;
+  --btn-border: var(--theme-accent-contrast);
-  --btn-border-hover: #fff;
+  --btn-border-hover: var(--theme-accent-contrast);
   --btn-stripe: var(--theme-accent-fill-strong);
   --btn-shadow-hover: 0 16px 36px rgba(0, 0, 0, 0.22);
 }
@@ -213,31 +213,31 @@
    they remain readable. Apply by adding `data-on-accent` to a wrapper. */
 [data-on-accent] .atmos-btn--primary,
 .atmos-btn--primary[data-on-accent] {
-  --btn-bg: #fff;
+  --btn-bg: var(--theme-accent-contrast);
-  --btn-bg-hover: #fff;
+  --btn-bg-hover: var(--theme-accent-contrast);
   --btn-fg: var(--theme-accent-fill-strong);
   --btn-fg-hover: var(--theme-accent-fill-strong);
-  --btn-border: #fff;
+  --btn-border: var(--theme-accent-contrast);
-  --btn-border-hover: #fff;
+  --btn-border-hover: var(--theme-accent-contrast);
   --btn-stripe: var(--theme-accent-fill-strong);
 }
 
 [data-on-accent] .atmos-btn--secondary,
 .atmos-btn--secondary[data-on-accent] {
-  --btn-bg: rgba(255, 255, 255, 0.14);
+  --btn-bg: rgba(var(--theme-accent-contrast-rgb) / 0.14);
-  --btn-bg-hover: rgba(255, 255, 255, 0.22);
+  --btn-bg-hover: rgba(var(--theme-accent-contrast-rgb) / 0.22);
-  --btn-fg: #fff;
+  --btn-fg: var(--theme-accent-contrast);
-  --btn-fg-hover: #fff;
+  --btn-fg-hover: var(--theme-accent-contrast);
-  --btn-border: rgba(255, 255, 255, 0.32);
+  --btn-border: rgba(var(--theme-accent-contrast-rgb) / 0.32);
-  --btn-border-hover: #fff;
+  --btn-border-hover: var(--theme-accent-contrast);
-  --btn-stripe: #fff;
+  --btn-stripe: var(--theme-accent-contrast);
 }
 
 [data-on-accent] .atmos-btn--ghost,
 .atmos-btn--ghost[data-on-accent] {
-  --btn-fg: rgba(255, 255, 255, 0.86);
+  --btn-fg: rgba(var(--theme-accent-contrast-rgb) / 0.86);
-  --btn-fg-hover: #fff;
+  --btn-fg-hover: var(--theme-accent-contrast);
-  --btn-bg-hover: rgba(255, 255, 255, 0.12);
+  --btn-bg-hover: rgba(var(--theme-accent-contrast-rgb) / 0.12);
 }
 
 /* ----- Sizes ------------------------------------------------------------- */

parfum-shop/src/style/navbar.css

@@ -3,7 +3,7 @@
 .navbar {
   position: sticky;
   top: clamp(0.75rem, 2vw, 1.25rem);
-  z-index: 998;
+  z-index: var(--z-nav);
   display: flex;
   justify-content: center;
   width: 100%;
@@ -112,23 +112,27 @@
   transform: translateX(18px);
 }
 
+.nav-label--compact {
+  display: none;
+}
+
 /* Hero variant */
 .navbar--hero {
   position: fixed;
   top: clamp(0.75rem, 2.1vw, 1.4rem);
   left: 0;
   right: 0;
-  z-index: 998;
+  z-index: var(--z-nav);
   padding-top: 0;
 }
 
 .navbar--hero .nav-pill {
-  background: rgba(15, 15, 15, 0.58);
+  background: rgba(10, 10, 10, 0.82);
-  border-color: rgba(255, 255, 255, 0.22);
+  border-color: rgba(255, 255, 255, 0.34);
 }
 
 .navbar--hero .nav-link {
-  color: rgba(255, 255, 255, 0.9);
+  color: #fff;
 }
 
 .navbar--hero .nav-button {
@@ -146,7 +150,7 @@
 
 .navbar--hero .nav-link:hover,
 .navbar--hero .nav-link.active {
-  background: rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.22);
 }
 
 /* Detail page variant */
@@ -190,35 +194,58 @@
   }
 
   .nav-pill {
-    justify-content: space-between;
+    width: fit-content;
-    width: 100%;
+    max-width: calc(100vw - 1.5rem);
-    overflow-x: auto;
+    justify-content: center;
-    scrollbar-width: none;
+    flex-wrap: nowrap;
-  }
+    gap: clamp(0.2rem, 1.2vw, 0.4rem);
-
+    padding: 0.35rem;
-  .nav-pill::-webkit-scrollbar {
-    display: none;
   }
 
   .nav-link {
-    min-height: 40px;
+    min-height: 38px;
-    min-width: 40px;
+    min-width: 38px;
-    padding-inline: 0.68rem;
+    flex: 0 0 auto;
-    font-size: 0.75rem;
+    padding-inline: 0.5rem;
+    font-size: 0.72rem;
   }
 
   .nav-link--brand {
-    padding-inline: 0.72rem;
+    padding-inline: 0.65rem;
   }
 
   .nav-brand-logo {
-    width: 54px;
+    width: 50px;
   }
 
   .nav-theme-switch {
+    flex: 0 0 auto;
+    min-width: 42px;
     padding-inline: 0.45rem;
   }
 
+  .nav-theme-switch__track {
+    width: 36px;
+    height: 20px;
+  }
+
+  .nav-theme-switch__thumb {
+    width: 14px;
+    height: 14px;
+  }
+
+  .nav-theme-switch.is-light .nav-theme-switch__thumb {
+    transform: translateX(16px);
+  }
+
+  .nav-link--cart .nav-label--full {
+    display: none;
+  }
+
+  .nav-link--cart .nav-label--compact {
+    display: inline;
+  }
+
   .navbar--hero .nav-pill {
     width: fit-content;
     max-width: calc(100vw - 1.5rem);
@@ -226,11 +253,58 @@
 }
 
 @media (max-width: 390px) {
+  .nav-pill {
+    padding: 0.3rem;
+  }
+
   .nav-link {
-    padding-inline: 0.58rem;
+    padding-inline: 0.3rem;
+    font-size: 0.68rem;
   }
 
   .nav-link--brand {
-    padding-inline: 0.62rem;
+    padding-inline: 0.45rem;
+  }
+
+  .nav-brand-logo {
+    width: 44px;
+  }
+
+  .nav-theme-switch {
+    min-width: 36px;
+    padding-inline: 0.3rem;
+  }
+
+  .nav-theme-switch__track {
+    width: 32px;
+    height: 18px;
+  }
+
+  .nav-theme-switch__thumb {
+    width: 12px;
+    height: 12px;
+  }
+
+  .nav-theme-switch.is-light .nav-theme-switch__thumb {
+    transform: translateX(14px);
+  }
+}
+
+@media (max-width: 430px) {
+  .nav-link--back {
+    gap: 0;
+  }
+
+  .nav-link--back span:not(.nav-back-icon) {
+    display: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav-link,
+  .nav-theme-switch__thumb,
+  .nav-theme-switch__track,
+  .nav-pill {
+    transition: none;
   }
 }

parfum-shop/src/style/tokens.css

@@ -21,11 +21,12 @@
   --theme-black: #262626;
   --theme-white: #eaeaea;
   --theme-accent: #c24700;
-  --theme-accent-rgb: 255 106 0;
+  --theme-accent-rgb: 194 71 0;
   --theme-accent-fill: #c24700;
   --theme-accent-fill-rgb: 194 71 0;
   --theme-accent-fill-strong: #a83b00;
   --theme-accent-contrast: #ffffff;
+  --theme-accent-contrast-rgb: 255 255 255;
   --theme-focus-ring: #ff9440;
 
   /* Surfaces (dark theme — default) */
@@ -92,7 +93,7 @@
   --radius-xl: 0;
 
   /* Typography scale */
-  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
+  --text-xs: clamp(0.85rem, 0.75rem + 0.25vw, 0.875rem);
   --text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 1rem);
   --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
   --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
@@ -113,6 +114,13 @@
   /* Accessibility */
   --touch-target-min: 44px;
 
+  /* Z-index scale */
+  --z-toast: 600;
+  --z-drawer-backdrop: 700;
+  --z-drawer: 800;
+  --z-nav: 900;
+  --z-overlay: 1000;
+
   /* Motion */
   --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
   --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);

parfum-shop/src/utils/responsiveImages.js

@@ -2,7 +2,7 @@ export const PRODUCT_CARD_IMAGE_SIZES =
   "(min-width: 1280px) 520px, (min-width: 1024px) 31vw, (min-width: 768px) 46vw, 92vw";
 
 export const HERO_PRODUCT_IMAGE_SIZES =
-  "(max-width: 760px) 92vw, (max-width: 1180px) 45vw, 768px";
+  "(max-width: 430px) 62vw, (max-width: 760px) 62vw, (max-width: 1180px) 40vw, 29vw";
 
 export function buildPublicImageSrcSet(src, { folder, widths, originalWidth }) {
   const fileName = src.replace(/^\//, "");