add spacing and responsive changes

parfum-shop/src/components/ProductDetailPage.css

@@ -933,6 +933,10 @@
 }
 
 @media (max-width: 1023px) {
+  .detail-page {
+    padding-bottom: 4.5rem;
+  }
+
   .product-hero {
     grid-template-columns: 1fr;
     align-content: start;
@@ -974,11 +978,11 @@
     grid-column: auto;
     grid-row: auto;
     min-height: 0;
-    height: clamp(18rem, 48svh, 32rem);
+    height: clamp(22rem, 50svh, 34rem);
   }
 
   .product-hero-image {
-    width: min(74%, 460px);
+    width: 100%;
     max-height: 100%;
   }
 
@@ -1035,6 +1039,7 @@
 @media (max-width: 760px) {
   .detail-page {
     padding: 0;
+    padding-bottom: 4.5rem;
   }
 
   .product-hero {
@@ -1053,12 +1058,13 @@
   }
 
   .product-hero-visual {
-    height: clamp(13rem, 32svh, 18rem);
+    height: clamp(22rem, 50svh, 32rem);
     min-height: 0;
   }
 
   .product-hero-image {
-    width: min(68%, 280px);
+    width: 100%;
+    max-height: 100%;
   }
 
   .character-facts,
@@ -1125,8 +1131,7 @@
   }
 
   .product-purchase-panel {
-    min-width: 0;
+    display: none;
-    gap: var(--gap-2xs);
   }
 
   .purchase-price-row {
@@ -1140,18 +1145,18 @@
 
   .size-card {
     min-width: 0;
-    min-height: 70px;
+    min-height: 56px;
-    gap: 0.2rem;
+    gap: 0.15rem;
-    padding: 0.6rem 0.7rem;
+    padding: 0.5rem 0.6rem;
   }
 
   .size-title {
-    font-size: 0.66rem;
+    font-size: 0.64rem;
     letter-spacing: 0.14em;
   }
 
   .size-card strong {
-    font-size: 0.98rem;
+    font-size: 0.92rem;
     white-space: normal;
     overflow-wrap: anywhere;
   }
@@ -1167,6 +1172,10 @@
     font-size: 0.72rem;
   }
 
+  .purchase-actions .restock-button {
+    display: none;
+  }
+
   .purchase-discovery-note,
   .reviews-heading,
   .recommendation-heading {

parfum-shop/src/components/ProductDetailPage.jsx

@@ -1,8 +1,9 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Link, useParams } from "react-router";
 import perfumes from "../data/perfumes";
 import SharedNavbar from "./SharedNavbar";
 import PageMeta from "./seo/PageMeta";
+import StickyBuyBar from "./StickyBuyBar";
 import { useProductTransition } from "../transitions/ProductTransitionContext";
 import { useShop } from "../shop/useShop";
 import { formatChf } from "../shop/money";
@@ -73,6 +74,7 @@ function ProductPurchasePanel({
   discountPreviewCents,
   addToCart,
   subscribeToProduct,
+  panelRef,
 }) {
   const selectedProductId = `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`;
   const selectedProductLabel = selectedSize === "sample" ? "Probe" : "50 ml Flakon";
@@ -92,7 +94,7 @@ function ProductPurchasePanel({
   ];
 
   return (
-    <aside className="product-purchase-panel" data-product-transition-reveal>
+    <aside className="product-purchase-panel" ref={panelRef} data-product-transition-reveal>
       <div className="purchase-price-row">
         <span>Preis</span>
         <strong>{perfume.prices[selectedSize]}</strong>
@@ -176,6 +178,7 @@ function ProductHero({
   discountPreviewCents,
   addToCart,
   subscribeToProduct,
+  panelRef,
 }) {
   const galleryImages = [...new Set([perfume.image, ...(perfume.gallery || [])])].slice(0, 3);
 
@@ -237,6 +240,7 @@ function ProductHero({
         discountPreviewCents={discountPreviewCents}
         addToCart={addToCart}
         subscribeToProduct={subscribeToProduct}
+        panelRef={panelRef}
       />
     </section>
   );
@@ -559,6 +563,7 @@ function ProductDetailContent({ perfumeSlug }) {
     [perfumeSlug]
   );
 
+  const purchasePanelRef = useRef(null);
   const [selectedImage, setSelectedImage] = useState(
     getImageForSize(perfume, "full")
   );
@@ -648,6 +653,7 @@ function ProductDetailContent({ perfumeSlug }) {
           discountPreviewCents={discountPreviewCents}
           addToCart={addToCart}
           subscribeToProduct={subscribeToProduct}
+          panelRef={purchasePanelRef}
         />
 
         <ProductStorySection perfume={perfume} />
@@ -667,6 +673,24 @@ function ProductDetailContent({ perfumeSlug }) {
           startProductTransition={startProductTransition}
         />
       </main>
+
+      <StickyBuyBar
+        observeRef={purchasePanelRef}
+        alwaysVisibleMobile
+        sizes={[
+          { key: "full", label: "50 ml", price: perfume.prices.full },
+          { key: "sample", label: "Probe 2 ml", price: perfume.prices.sample },
+        ]}
+        selectedSize={selectedSize}
+        onSizeChange={handleSizeSelection}
+        onBuy={() =>
+          addToCart(
+            `${perfume.slug}-${selectedSize === "sample" ? "sample" : "full"}`,
+            1,
+            `${perfume.name} ${selectedSize === "sample" ? "Probe" : "50 ml Flakon"} wurde in den Warenkorb gelegt.`
+          ).catch(() => {})
+        }
+      />
     </div>
   );
 }

parfum-shop/src/components/ProductTransition.jsx

@@ -34,12 +34,15 @@ const getStageRect = (sourceRect) => {
   const viewportWidth = window.innerWidth;
   const viewportHeight = window.innerHeight;
   const sourceRatio = sourceRect.height / sourceRect.width || 1;
+  const isMobile = viewportWidth <= 760;
+  const maxWidthFraction = isMobile ? 0.85 : 0.56;
+  const maxHeightFraction = isMobile ? 0.52 : 0.72;
+  const maxAbsWidth = isMobile ? viewportWidth * maxWidthFraction : 620;
   const stageWidth = Math.min(
     Math.max(sourceRect.width * 1.16, 260),
-    viewportWidth * 0.56,
+    maxAbsWidth
-    620
   );
-  const stageHeight = Math.min(stageWidth * sourceRatio, viewportHeight * 0.72);
+  const stageHeight = Math.min(stageWidth * sourceRatio, viewportHeight * maxHeightFraction);
   const normalizedWidth = stageHeight / sourceRatio;
 
   return {

parfum-shop/src/components/StickyBuyBar.css

@@ -0,0 +1,110 @@
+.sticky-buy-bar {
+  display: none;
+}
+
+@media (max-width: 1023px) {
+  .sticky-buy-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 900;
+    display: block;
+    padding: 0.55rem var(--page-x, 1rem);
+    background: var(--theme-bg);
+    border-top: 1px solid var(--theme-border);
+    transform: translateY(100%);
+    opacity: 0;
+    transition:
+      transform var(--duration-med, 0.3s) var(--ease-out, ease-out),
+      opacity var(--duration-med, 0.3s) var(--ease-out, ease-out);
+    pointer-events: none;
+  }
+
+  .sticky-buy-bar.is-visible {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .sticky-buy-bar__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--gap-sm, 0.75rem);
+    max-width: 46rem;
+    margin-inline: auto;
+  }
+
+  .sticky-buy-bar__left {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    min-width: 0;
+  }
+
+  .sticky-buy-bar__label {
+    color: var(--theme-text-muted);
+    font-size: var(--text-xs, 0.72rem);
+    letter-spacing: 0.18em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sticky-buy-bar__price {
+    color: var(--theme-text);
+    font-size: clamp(0.92rem, 3vw, 1.1rem);
+    font-weight: 400;
+    letter-spacing: 0;
+    white-space: nowrap;
+  }
+
+  /* ---- segmented size toggle ---- */
+
+  .sticky-buy-bar__toggle {
+    display: flex;
+    border: 1px solid var(--theme-border);
+    overflow: hidden;
+  }
+
+  .sticky-buy-bar__tab {
+    padding: 0.4rem 0.65rem;
+    border: 0;
+    background: transparent;
+    color: var(--theme-text-muted);
+    font-size: 0.66rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      color var(--duration-med, 0.3s) var(--ease-out, ease-out),
+      background-color var(--duration-med, 0.3s) var(--ease-out, ease-out);
+  }
+
+  .sticky-buy-bar__tab + .sticky-buy-bar__tab {
+    border-left: 1px solid var(--theme-border);
+  }
+
+  .sticky-buy-bar__tab.active {
+    color: var(--theme-accent-contrast, #fff);
+    background: var(--theme-accent);
+  }
+
+  /* ---- buy button ---- */
+
+  .sticky-buy-bar .atmos-btn {
+    flex-shrink: 0;
+    min-width: 6.5rem;
+  }
+}
+
+@media (max-width: 820px) {
+  .sticky-buy-bar.is-always-visible {
+    transform: translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+  }
+}

parfum-shop/src/components/StickyBuyBar.jsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from "react";
+import "./StickyBuyBar.css";
+
+function StickyBuyBar({ label, price, onBuy, observeRef, sizes, selectedSize, onSizeChange, alwaysVisibleMobile }) {
+  const [visible, setVisible] = useState(false);
+  const sentinelRef = useRef(null);
+
+  useEffect(() => {
+    const target = observeRef?.current ?? sentinelRef.current;
+    if (!target) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => setVisible(!entry.isIntersecting),
+      { threshold: 0 }
+    );
+
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [observeRef]);
+
+  const classes = [
+    "sticky-buy-bar",
+    visible && "is-visible",
+    alwaysVisibleMobile && "is-always-visible",
+  ].filter(Boolean).join(" ");
+
+  const currentPrice = sizes
+    ? sizes.find((s) => s.key === selectedSize)?.price
+    : price;
+
+  return (
+    <>
+      {!observeRef && <span ref={sentinelRef} aria-hidden="true" />}
+      <div className={classes}>
+        <div className="sticky-buy-bar__inner">
+          {sizes ? (
+            <div className="sticky-buy-bar__left">
+              <div className="sticky-buy-bar__toggle">
+                {sizes.map((s) => (
+                  <button
+                    key={s.key}
+                    type="button"
+                    className={`sticky-buy-bar__tab ${selectedSize === s.key ? "active" : ""}`}
+                    onClick={() => onSizeChange(s.key)}
+                  >
+                    {s.label}
+                  </button>
+                ))}
+              </div>
+              <strong className="sticky-buy-bar__price">{currentPrice}</strong>
+            </div>
+          ) : (
+            <div className="sticky-buy-bar__left">
+              <span className="sticky-buy-bar__label">{label}</span>
+              <strong className="sticky-buy-bar__price">{currentPrice}</strong>
+            </div>
+          )}
+          <button
+            type="button"
+            className="atmos-btn atmos-btn--primary atmos-btn--uppercase atmos-btn--sm"
+            onClick={onBuy}
+          >
+            Kaufen
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default StickyBuyBar;

parfum-shop/src/pages/DiscoverySetPage.css

@@ -98,8 +98,7 @@
   filter: saturate(0.92) contrast(1.04) var(--shadow-product);
 }
 
-.discovery-panel-facts div,
+.discovery-panel-facts div {
-.discovery-benefit {
   padding-top: var(--gap-sm);
   border-top: 1px solid var(--theme-border);
 }
@@ -256,16 +255,14 @@
 }
 
 .discovery-benefit-panel {
-  display: grid;
+  display: flex;
-  grid-template-columns: 1fr;
+  flex-direction: column;
-  align-content: end;
+  justify-content: center;
-  gap: var(--gap-sm);
+  gap: 0;
   min-height: clamp(360px, 42vw, 620px);
-  padding: clamp(1.2rem, 3vw, 2.4rem);
+  padding: 0;
-  border: 1px solid var(--theme-border);
+  border: 0;
-  background:
+  background: transparent;
-    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008)),
-    color-mix(in srgb, var(--theme-bg) 88%, #000 12%);
 }
 
 .discovery-benefit-panel-head {
@@ -273,7 +270,8 @@
   justify-content: space-between;
   align-items: end;
   gap: var(--gap-sm);
-  padding-bottom: var(--gap-sm);
+  padding-bottom: var(--gap-md);
+  margin-bottom: var(--gap-md);
   border-bottom: 1px solid var(--theme-border);
 }
 
@@ -294,11 +292,15 @@
 }
 
 .discovery-benefit {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: var(--gap-sm);
-  align-items: start;
   padding-top: var(--gap-sm);
+  border-top: 1px solid var(--theme-border);
+  margin-top: var(--gap-sm);
+}
+
+.discovery-benefit:first-of-type {
+  border-top: 0;
+  margin-top: 0;
+  padding-top: 0;
 }
 
 .discovery-benefit strong {
@@ -339,48 +341,42 @@
   white-space: nowrap;
 }
 
-/* Layout columns are provided by the global Grid12 system (see Grid.jsx). */
+.discovery-steps {
-.discovery-steps-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--gap-md);
   margin-top: var(--gap-lg);
 }
 
-.discovery-step-card {
+.discovery-step {
-  border: 1px solid var(--theme-border);
+  padding-top: var(--gap-sm);
-  background:
+  border-top: 1px solid var(--theme-border);
-    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
-    var(--theme-surface-soft);
 }
 
-.discovery-step-card {
+.discovery-step__number {
-  min-height: 280px;
+  display: block;
-  display: flex;
+  margin-bottom: var(--gap-md);
-  flex-direction: column;
-  justify-content: space-between;
-  gap: var(--gap-md);
-  padding: clamp(1rem, 2vw, 1.5rem);
-}
-
-.discovery-step-number {
   color: var(--theme-accent);
-  font-size: var(--text-sm);
+  font-size: var(--text-xs);
   letter-spacing: 0.2em;
 }
 
-.discovery-step-card h3 {
+.discovery-step__title {
-  margin: 0;
+  margin: 0 0 var(--gap-xs);
   color: var(--theme-text);
-  font-size: var(--text-lg);
+  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
   font-weight: 400;
-  line-height: 1.08;
+  line-height: 1.1;
   letter-spacing: 0.02em;
   text-transform: uppercase;
 }
 
-.discovery-step-card p {
+.discovery-step__text {
   margin: 0;
+  max-width: 32ch;
   color: var(--theme-text-muted);
-  font-size: var(--text-base);
+  font-size: var(--text-sm);
-  line-height: 1.65;
+  line-height: 1.55;
 }
 
 .discovery-included-layout {
@@ -660,11 +656,11 @@
     grid-row: auto;
     justify-items: center;
     min-height: 0;
-    height: clamp(18rem, 48svh, 32rem);
+    height: clamp(20rem, 50svh, 34rem);
   }
 
   .discovery-hero-visual img {
-    width: min(78%, 500px);
+    width: 100%;
     height: auto;
     max-height: 100%;
   }
@@ -680,6 +676,10 @@
 }
 
 @media (max-width: 820px) {
+  .discovery-page {
+    padding-bottom: 4.5rem;
+  }
+
   .discovery-hero {
     grid-template-columns: 1fr;
     gap: clamp(0.75rem, 2vw, 1rem);
@@ -688,12 +688,15 @@
     padding-bottom: clamp(1rem, 3vw, 1.5rem);
   }
 
-  .discovery-hero-stage,
+  .discovery-hero-stage {
-  .discovery-order-panel {
     grid-column: 1;
     grid-row: auto;
   }
 
+  .discovery-order-panel {
+    display: none;
+  }
+
   .discovery-hero-copy {
     width: 100%;
     max-width: 100%;
@@ -715,12 +718,12 @@
   }
 
   .discovery-hero-visual {
-    height: clamp(15rem, 36svh, 24rem);
+    height: clamp(22rem, 52svh, 34rem);
     min-height: 0;
   }
 
   .discovery-hero-visual img {
-    width: min(82%, 420px);
+    width: 100%;
   }
 
   .discovery-panel-facts,
@@ -741,6 +744,10 @@
     order: 3;
   }
 
+  .discovery-steps {
+    grid-template-columns: 1fr;
+  }
+
   .discovery-story-grid::before,
   .discovery-process-section::before,
   .discovery-included::before {

parfum-shop/src/pages/DiscoverySetPage.jsx

@@ -5,6 +5,7 @@ import perfumes from "../data/perfumes";
 import SharedNavbar from "../components/SharedNavbar";
 import Grid, { Col } from "../components/layout/Grid";
 import PageMeta from "../components/seo/PageMeta";
+import StickyBuyBar from "../components/StickyBuyBar";
 import { useShop } from "../shop/useShop";
 import "./DiscoverySetPage.css";
 
@@ -54,9 +55,9 @@ const discoverySteps = [
   },
 ];
 
-function DiscoveryOrderPanel({ onBuy }) {
+function DiscoveryOrderPanel({ onBuy, panelRef }) {
   return (
-    <aside className="discovery-order-panel">
+    <aside className="discovery-order-panel" ref={panelRef}>
       <div className="discovery-price-row">
         <span>Preis</span>
         <strong>CHF 48.–</strong>
@@ -85,7 +86,7 @@ function DiscoveryOrderPanel({ onBuy }) {
   );
 }
 
-function DiscoveryHero({ onBuy }) {
+function DiscoveryHero({ onBuy, panelRef }) {
   return (
     <section className="discovery-hero">
       <div className="discovery-hero-stage">
@@ -110,7 +111,7 @@ function DiscoveryHero({ onBuy }) {
         </figure>
       </div>
 
-      <DiscoveryOrderPanel onBuy={onBuy} />
+      <DiscoveryOrderPanel onBuy={onBuy} panelRef={panelRef} />
     </section>
   );
 }
@@ -159,23 +160,15 @@ function DiscoveryProcessSection() {
         <h2 data-reveal="lines">So funktioniert&apos;s</h2>
       </div>
 
-      <Grid gap="sm" className="discovery-steps-grid">
+      <div className="discovery-steps">
         {discoverySteps.map((step) => (
-          <Col
+          <article key={step.number} className="discovery-step" data-reveal="fade">
-            key={step.number}
+            <span className="discovery-step__number">{step.number}</span>
-            as="article"
+            <h3 className="discovery-step__title">{step.title}</h3>
-            span={12}
+            <p className="discovery-step__text">{step.text}</p>
-            md={6}
+          </article>
-            lg={4}
-            className="discovery-step-card"
-            data-reveal="fade"
-          >
-            <span className="discovery-step-number">{step.number}</span>
-            <h3>{step.title}</h3>
-            <p>{step.text}</p>
-          </Col>
         ))}
-      </Grid>
+      </div>
     </section>
   );
 }
@@ -381,6 +374,7 @@ function DiscoveryFinalCta({ onBuy }) {
 
 function DiscoverySetPage() {
   const { addToCart } = useShop();
+  const orderPanelRef = useRef(null);
   const buyDiscoverySet = () =>
     addToCart("discovery-set", 1, "Discovery Set wurde in den Warenkorb gelegt.").catch(() => {});
 
@@ -394,12 +388,20 @@ function DiscoverySetPage() {
       <SharedNavbar variant="hero" active="testen" />
 
       <main id="main-content" className="shell">
-        <DiscoveryHero onBuy={buyDiscoverySet} />
+        <DiscoveryHero onBuy={buyDiscoverySet} panelRef={orderPanelRef} />
         <DiscoveryStorySection />
         <DiscoveryIncludedSection />
         <DiscoveryProcessSection />
         <DiscoveryFinalCta onBuy={buyDiscoverySet} />
       </main>
+
+      <StickyBuyBar
+        label="Discovery Set"
+        price="CHF 48.–"
+        observeRef={orderPanelRef}
+        onBuy={buyDiscoverySet}
+        alwaysVisibleMobile
+      />
     </div>
   );
 }

parfum-shop/src/pages/LandingPage.css

@@ -670,14 +670,12 @@ body.theme-light .hero-wordmark__image {
   }
 
   .hero-product {
-    /* 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(12.5rem, 28svh, 16rem);
+    top: clamp(11.5rem, 26svh, 15rem);
     left: 50%;
     right: auto;
-    width: clamp(12.5rem, 62vw, 17rem);
+    width: clamp(14rem, 72vw, 20rem);
-    height: clamp(13.5rem, 31svh, 17rem);
+    height: clamp(15rem, 38svh, 20rem);
     transform: translateX(-50%);
   }
 
@@ -734,7 +732,7 @@ body.theme-light .hero-wordmark__image {
 
   .discovery-banner {
     min-height: 0;
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 4 / 3;
   }
 }
 
@@ -746,10 +744,9 @@ body.theme-light .hero-wordmark__image {
   }
 
   .hero-product {
-    /* Slightly tighter slot for compact phones. */
+    top: clamp(11rem, 26svh, 14rem);
-    top: clamp(12rem, 28svh, 14.5rem);
+    width: clamp(13rem, 70vw, 18rem);
-    width: clamp(12rem, 62vw, 16rem);
+    height: clamp(14rem, 36svh, 18rem);
-    height: clamp(13rem, 31svh, 16.5rem);
   }
 
   .hero-copy {