:root{
  --bg:#f7f7f8;
  --bg-2:#eeeeef;
  --bg-3:#e7e7e9;

  --surface:#ffffff;
  --surface-soft:#f8f8f9;
  --surface-muted:#f0f1f3;
  --surface-glass:rgba(255,255,255,.90);

  --nav:#dfe1e5;
  --line:#d7d9de;
  --line-2:#c2c6ce;
  --line-3:#adb2bc;
  --line-soft:#edf1f5;

  --text:#1d2026;
  --text-2:#4f5661;
  --text-3:#7d8591;

  --primary:#2d3138;
  --primary-2:#181b21;
  --primary-3:#0f1217;

  --red:#c62828;
  --red-2:#a61f1f;
  --red-soft:#e85a5a;

  --success:#198754;
  --green:#118a52;
  --green-soft:rgba(17,138,82,.08);
  --green-line:rgba(17,138,82,.16);

  --radius:14px;
  --radius-lg:22px;
  --radius-xl:30px;

  --shadow-1:0 8px 24px rgba(20,22,28,.06);
  --shadow-2:0 16px 40px rgba(20,22,28,.10);
  --shadow-3:0 26px 68px rgba(20,22,28,.14);
  --shadow-hover:0 24px 46px rgba(20,22,28,.16);

  --wrap:1280px;
  --ease:cubic-bezier(.22,.7,.2,1);
}

*{
  box-sizing:border-box;
}

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, #ffffff 0%, #f5f5f6 48%, #ececef 100%);
  letter-spacing:-.01em;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
  height:auto;
}

button,
input{
  font:inherit;
}

.wrap{
  width:min(var(--wrap), calc(100% - 32px));
  margin:0 auto;
}

/* =========================
   HERO
   ========================= */
.hero{
  padding:30px 0 36px;
  overflow:hidden;
}

.hero-box{
  position:relative;
  width:100%;
  aspect-ratio:1280 / 500;
  min-height:0;
  height:auto;
  max-width:100%;
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow-3);
  background:#dfe4ea;
  isolation:isolate;
}

.hero-slider{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  max-width:100%;
  overflow:hidden;
  border-radius:inherit;
}

.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden;
  border-radius:inherit;
  transition:opacity .5s ease, visibility .5s ease;
}

.hero-slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.hero-media{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  z-index:0;
  overflow:hidden;
  border-radius:inherit;
}

.hero-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  min-width:100%;
  object-fit:cover;
  object-position:center center;
  filter:contrast(1.04) saturate(1.14) brightness(1.00);
}

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(120deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,.06) 48%, rgba(0,0,0,.20) 100%);
  pointer-events:none;
}

.hero-box__glow{
  display:none;
}

.hero-box__glow--right{
  left:auto;
  right:-100px;
  top:-80px;
  bottom:auto;
  width:360px;
  height:360px;
  background:radial-gradient(circle, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 70%);
}

@keyframes glowPulse{
  0%,100%{opacity:.72; transform:scale(1)}
  50%{opacity:1; transform:scale(1.06)}
}

.hero-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  color:#2d333a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  line-height:1;
  border:1px solid rgba(255,255,255,.78);
  cursor:pointer;
  box-shadow:var(--shadow-2);
  z-index:5;
  transition:
    background-color .25s var(--ease),
    transform .25s var(--ease),
    box-shadow .25s var(--ease),
    border-color .25s var(--ease);
}

.hero-arrow:hover{
  background:#ffffff;
  transform:translateY(-50%) scale(1.06);
  border-color:#ffffff;
  box-shadow:0 22px 42px rgba(20,22,28,.18);
}

.hero-arrow--left{
  left:16px;
}

.hero-arrow--right{
  right:16px;
}

.hero-caption{
  position:absolute;
  left:30px;
  bottom:30px;
  z-index:4;
  background:rgba(255,255,255,.93);
  color:#222831;
  padding:16px 22px;
  border-radius:14px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.3px;
  border:1px solid rgba(255,255,255,.88);
  box-shadow:var(--shadow-2);
  animation:captionIn .9s var(--ease);
  max-width:min(92%, 680px);
}

.hero-slide-title{
  margin-top:10px;
  font-size:14px;
  font-weight:700;
  color:#4b5563;
}

@keyframes captionIn{
  from{
    opacity:0;
    transform:translateY(14px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   SECTION BASICS
   ========================= */
.section{
  padding:0 0 42px;
}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.section-head h2{
  margin:0;
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.6px;
  color:#20252c;
}

.section-head p{
  margin:8px 0 0;
  font-size:15px;
  color:var(--text-2);
  line-height:1.7;
}

.section-link{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border-radius:12px;
  background:linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
  border:1px solid #d9dfe8;
  font-size:13px;
  font-weight:800;
  color:#1d2430;
  box-shadow:0 10px 18px rgba(20,22,28,.05);
  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease),
    border-color .22s var(--ease),
    background .22s var(--ease),
    color .22s var(--ease);
}

.section-link:hover{
  transform:translateY(-2px);
  border-color:#c7d0db;
  background:#ffffff;
  box-shadow:0 14px 24px rgba(20,22,28,.08);
  color:var(--red);
}

/* =========================
   INTRO CONTENT
   ========================= */
.content{
  padding:12px 0 74px;
}

.content-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:42px;
  align-items:start;
  margin-bottom:42px;
}

.welcome h2{
  margin:0 0 18px;
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.6px;
  color:#20252c;
}

.welcome p{
  margin:0 0 20px;
  font-size:16px;
  line-height:1.75;
  color:#59616d;
}

.info-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,249,251,1) 100%);
  border:1px solid rgba(255,255,255,.96);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow-2);
  backdrop-filter:blur(14px);
  overflow:hidden;
}

.info-card::before{
  content:"";
  position:absolute;
  top:-40px;
  right:-40px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 70%);
  pointer-events:none;
}

.info-card h3{
  margin:0 0 14px;
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.2px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  color:#23272d;
}

.info-card p{
  margin:8px 0;
  font-size:15px;
  color:#4d5560;
  line-height:1.6;
}

.info-card strong{
  color:#1f242b;
}

.demo-button{
  position:relative;
  overflow:hidden;
  margin-top:18px;
  width:100%;
  min-height:54px;
  border:0;
  border-radius:14px;
  background:linear-gradient(180deg, #5a5e66 0%, #31353c 100%);
  color:#fff;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 18px 32px rgba(20,22,28,.14);
  transition:
    transform .24s var(--ease),
    box-shadow .24s var(--ease),
    filter .24s var(--ease),
    background .24s var(--ease);
}

.demo-button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 24%, rgba(255,255,255,.34) 50%, transparent 76%);
  transform:translateX(-140%);
  transition:transform .85s var(--ease);
}

.demo-button:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 26px 42px rgba(20,22,28,.18);
  filter:brightness(1.06);
  background:linear-gradient(180deg, #666b74 0%, #353941 100%);
}

.demo-button:hover::before{
  transform:translateX(140%);
}

/* =========================
   FEATURE CATEGORIES
   ========================= */
.category-grid{
  display:grid;
  margin-bottom:80px;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  margin-top:10px;
}

.category-card{
  position:relative;
  overflow:hidden;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:
    0 8px 18px rgba(20,22,28,.05),
    0 18px 40px rgba(20,22,28,.06);
  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease);
}

.category-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 16px 34px rgba(20,22,28,.10),
    0 28px 60px rgba(20,22,28,.08);
  border-color:#cfd6df;
}

.category-card__media{
  position:relative;
  aspect-ratio:450 / 242;
  overflow:hidden;
  background:#eef2f6;
}

.category-card__media picture,
.category-card__media img{
  display:block;
  width:100%;
  height:100%;
}

.category-card__media img{
  object-fit:cover;
  object-position:center;
  transition:transform .35s var(--ease);
}

.category-card:hover .category-card__media img{
  transform:scale(1.04);
}

.category-card__label{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  display:inline-flex;
  min-height:28px;
  padding:0 10px;
  align-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.96);
  font-size:12px;
  font-weight:800;
  color:#3f4752;
  box-shadow:0 8px 18px rgba(20,22,28,.10);
}

.category-card__body{
  padding:18px 18px 20px;
}

.category-card__body h3{
  margin:0 0 10px;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.5px;
  color:#1e232b;
}

.category-card__body p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--text-2);
}

/* =========================
   PRODUCT GRID - STARTSEITE
   ========================= */
.product-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  margin-top:8px;
}

.product-card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,249,251,1) 100%);
  border:1px solid #e3e8ef;
  border-radius:22px;
  box-shadow:
    0 10px 24px rgba(20,22,28,.04),
    0 18px 40px rgba(20,22,28,.05);
  overflow:hidden;
  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease),
    border-color .3s var(--ease),
    background .3s var(--ease);
  cursor:pointer;
}

.product-card:hover{
  transform:translateY(-6px);
  border-color:#cfd6df;
  background:#ffffff;
  box-shadow:
    0 18px 36px rgba(20,22,28,.08),
    0 30px 62px rgba(20,22,28,.08);
}

.product-card__image{
  position:relative;
  display:block;
  aspect-ratio:6 / 7;
  min-height:260px;
  background:linear-gradient(180deg, #f3f5f8 0%, #e8edf3 100%);
  overflow:hidden;
}

.product-card__image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transform:scale(1.06);
  transition:transform .35s var(--ease);
}

.product-card:hover .product-card__image img{
  transform:scale(1.1);
}

.product-card__image.is-empty{
  background:
    linear-gradient(180deg, #f6f7f9 0%, #eceff3 100%);
}

.product-card__image.is-empty::after{
  content:"Kein Bild";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8b95a3;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
}

.product-card__badge{
  position:absolute;
  top:14px;
  left:14px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fff;
  background:linear-gradient(180deg, #595e66 0%, #31363d 100%);
  box-shadow:0 10px 18px rgba(45,49,56,.14);
  z-index:2;
}

.product-card__body{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 auto;
  min-height:0;
}

.product-card__title{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.2;
  letter-spacing:-.4px;
  color:#1f242b;
  margin-top:4px;
}

.product-card__title a{
  color:inherit;
  text-decoration:none;
}

.product-card__title a:hover{
  color:#10141a;
}

.product-card__text{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.68;
  color:var(--text-2);
}

.product-variant-stack{
  display:grid;
  gap:10px;
  margin-bottom:16px;
}

.variant-row{
  display:grid;
  gap:6px;
}

.variant-row__label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7b8390;
}

.variant-color-list,
.variant-size-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.variant-color-list--compact{
  gap:8px;
}

.variant-color-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.14);
  box-shadow:
    0 2px 6px rgba(20,22,28,.08),
    inset 0 1px 0 rgba(255,255,255,.45);
  background:linear-gradient(180deg, #eef2f6 0%, #dfe5ec 100%);
  flex:0 0 18px;
}

.variant-size-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(17,138,82,.05) 0%, rgba(17,138,82,.09) 100%);
  border:1px solid rgba(17,138,82,.16);
  color:#0f6b3f;
  font-size:11px;
  font-weight:800;
  box-shadow:0 4px 10px rgba(20,22,28,.03);
}

.variant-more-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  background:#eef2f6;
  border:1px solid #d9e0e8;
  color:#66707d;
  font-size:11px;
  font-weight:800;
}

.product-card__bottom{
  margin-top:auto;
  padding-top:8px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  width:100%;
}

.product-btn{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:42px;
  padding:0 16px;
  border-radius:12px;
  border:0;
  background:linear-gradient(180deg, #5a5e66 0%, #31353c 100%);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 12px 22px rgba(45,49,56,.14);
  transition:
    transform .24s var(--ease),
    box-shadow .24s var(--ease),
    filter .24s var(--ease);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  white-space:nowrap;
}

.product-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 24%, rgba(255,255,255,.30) 50%, transparent 76%);
  transform:translateX(-140%);
  transition:transform .85s var(--ease);
}

.product-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 28px rgba(45,49,56,.18);
  filter:brightness(1.05);
}

.product-btn:hover::before{
  transform:translateX(140%);
}

.product-price-wrap{
  display:flex;
  align-items:flex-end;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 10px;
}

.product-price{
  font-size:26px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.6px;
  color:var(--green);
}

.product-price--discount{
  color:#138a52;
  text-shadow:0 8px 20px rgba(19,138,82,.10);
}

.product-price-old{
  display:inline-flex;
  align-items:center;
  font-size:15px;
  line-height:1;
  font-weight:800;
  color:#c62828;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(198,40,40,.72);
  opacity:.95;
  transform:translateY(-1px);
}

.product-card__corner-sale{
  position:absolute;
  top:-12px;
  right:-10px;
  z-index:4;
  width:96px;
  height:96px;
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border-radius:24px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(180deg, #e53935 0%, #b71c1c 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 16px 28px rgba(198,40,40,.28),
    0 8px 18px rgba(20,22,28,.14),
    inset 0 1px 0 rgba(255,255,255,.24);
  transform:rotate(8deg);
  transition:
    transform .22s var(--ease),
    box-shadow .22s var(--ease);
}

.product-card:hover .product-card__corner-sale{
  transform:rotate(6deg) translateY(-2px);
  box-shadow:
    0 22px 36px rgba(198,40,40,.34),
    0 12px 24px rgba(20,22,28,.16),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.product-card__corner-sale-label{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
  opacity:.92;
}

.product-card__corner-sale-value{
  font-size:24px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  text-shadow:0 3px 10px rgba(0,0,0,.18);
}

/* =========================
   PROMO STRIP
   ========================= */
.promo-strip{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}

.promo-main,
.promo-side{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  box-shadow:var(--shadow-2);
}

.promo-main{
  min-height:260px;
  padding:28px;
  background:linear-gradient(135deg, #5f656f 0%, #2f343c 100%);
  color:#fff;
}

.promo-main h2{
  margin:0 0 12px;
  font-size:34px;
  line-height:1.1;
  letter-spacing:-.8px;
}

.promo-main p{
  margin:0 0 20px;
  max-width:52ch;
  font-size:15px;
  line-height:1.75;
  color:rgba(255,255,255,.88);
}

.promo-side{
  min-height:260px;
  padding:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,249,251,1) 100%);
  border:1px solid rgba(255,255,255,.96);
}

.promo-side h3{
  margin:0 0 12px;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-.5px;
  color:#1f242b;
}

.promo-side p{
  margin:0;
  font-size:15px;
  line-height:1.7;
  color:var(--text-2);
}

/* =========================
   TRUST BAR
   ========================= */
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.trust-card{
  background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,249,251,1) 100%);
  border:1px solid rgba(255,255,255,.96);
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow-1);
}

.trust-card h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
  letter-spacing:-.3px;
  color:#1f242b;
}

.trust-card p{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:var(--text-2);
}

/* =========================
   PRODUCT FEATURE PREMIUM
   ========================= */
.example-product-wrap{
  position:relative;
  isolation:isolate;
  margin-top:52px;
  display:grid;
  grid-template-columns:minmax(380px, 560px) minmax(0, 1fr);
  gap:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,249,252,1) 100%);
  border:1px solid rgba(255,255,255,.96);
  border-radius:30px;
  box-shadow:
    0 22px 54px rgba(20,22,28,.10),
    0 40px 90px rgba(20,22,28,.12);
  overflow:hidden;
  backdrop-filter:blur(14px);
  transition:
    transform .34s var(--ease),
    box-shadow .34s var(--ease),
    border-color .34s var(--ease);
}

.example-product-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 28%),
    radial-gradient(circle at 86% 16%, rgba(198,40,40,.06) 0%, rgba(198,40,40,0) 24%),
    linear-gradient(135deg, rgba(255,255,255,.00) 0%, rgba(255,255,255,.18) 100%);
}

.example-product-wrap::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.88) 50%, rgba(255,255,255,.0) 100%);
  z-index:1;
  pointer-events:none;
}

.example-product-wrap:hover{
  transform:translateY(-7px);
  border-color:rgba(173,178,188,.82);
  box-shadow:
    0 30px 72px rgba(20,22,28,.13),
    0 46px 110px rgba(20,22,28,.14);
}

.example-product__image{
  position:relative;
  z-index:1;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.34) 34%, rgba(255,255,255,0) 66%),
    linear-gradient(180deg, #f9fafc 0%, #edf1f6 100%);
  min-height:470px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8b929c;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  overflow:hidden;
  padding:22px;
}

.example-product__image::before{
  content:"";
  position:absolute;
  inset:auto auto -90px -70px;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 70%);
  filter:blur(12px);
  pointer-events:none;
}

.example-product__image::after{
  content:"";
  position:absolute;
  top:-50px;
  right:-50px;
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(198,40,40,.05) 0%, rgba(198,40,40,0) 72%);
  filter:blur(10px);
  pointer-events:none;
}

.example-product__image img{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transform:scale(1.08);
  transition:
    transform .38s var(--ease),
    filter .38s var(--ease);
  filter:
    drop-shadow(0 18px 30px rgba(20,22,28,.08))
    drop-shadow(0 34px 54px rgba(20,22,28,.10));
}

.example-product__image:hover img{
  transform:scale(1.12);
}

.example-product__body{
  position:relative;
  z-index:1;
  padding:34px 34px 32px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.example-product__body::before{
  content:"";
  position:absolute;
  left:0;
  top:26px;
  bottom:26px;
  width:1px;
  background:linear-gradient(180deg, rgba(220,225,232,0) 0%, rgba(220,225,232,.86) 18%, rgba(220,225,232,.86) 82%, rgba(220,225,232,0) 100%);
  pointer-events:none;
}

.example-product__badge{
  display:inline-flex;
  align-self:flex-start;
  min-height:34px;
  padding:0 14px;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #5b616a 0%, #2f343c 100%);
  color:#fff;
  font-size:12px;
  font-weight:800;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.10em;
  margin-bottom:14px;
  box-shadow:
    0 12px 24px rgba(45,49,56,.16),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.example-product__title{
  margin:0 0 12px;
  font-size:34px;
  line-height:1.08;
  letter-spacing:-.9px;
  font-weight:900;
  color:#171b21;
  max-width:18ch;
}

.example-product__title a{
  color:inherit;
  text-decoration:none;
}

.example-product__title a:hover{
  color:#0f141a;
}

.example-product__text{
  margin:0 0 22px;
  font-size:15px;
  color:#5a6270;
  line-height:1.82;
  max-width:64ch;
}

.example-product__meta--detail{
  display:grid;
  gap:16px;
  margin-bottom:24px;
  padding:18px 18px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(245,247,250,.96) 100%);
  border:1px solid #e2e7ee;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 22px rgba(20,22,28,.04);
}

.feature-variant-block{
  display:grid;
  gap:8px;
}

.feature-variant-label{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:#7b8390;
}

.feature-variant-colors,
.feature-variant-sizes{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.feature-color-dot{
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:
    0 4px 10px rgba(20,22,28,.08),
    inset 0 1px 0 rgba(255,255,255,.42);
  background:linear-gradient(180deg, #eef2f6 0%, #dfe5ec 100%);
  flex:0 0 22px;
  transition:
    transform .2s var(--ease),
    box-shadow .2s var(--ease);
}

.feature-color-dot:hover{
  transform:translateY(-1px) scale(1.04);
  box-shadow:
    0 8px 14px rgba(20,22,28,.10),
    inset 0 1px 0 rgba(255,255,255,.42);
}

.feature-size-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(17,138,82,.05) 0%, rgba(17,138,82,.10) 100%);
  border:1px solid rgba(17,138,82,.18);
  color:#0f6b3f;
  font-size:12px;
  font-weight:800;
  box-shadow:0 4px 10px rgba(20,22,28,.03);
  transition:
    transform .2s var(--ease),
    background .2s var(--ease),
    border-color .2s var(--ease);
}

.feature-size-pill:hover{
  transform:translateY(-1px);
  background:#ffffff;
  border-color:rgba(17,138,82,.24);
}

.feature-more-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:#eef2f6;
  border:1px solid #d9e0e8;
  color:#66707d;
  font-size:12px;
  font-weight:800;
}

.example-product__bottom{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:6px;
}

.example-price{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:18px 18px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, #ffffff 0%, #f4f7fa 100%);
  border:1px solid #e1e6ed;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 10px 22px rgba(20,22,28,.04);
}

.example-price__label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8a919a;
  font-weight:900;
}

.example-price__value{
  font-size:40px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1.2px;
  color:#12171d;
}

.example-price__old{
  display:inline-flex;
  align-items:center;
  font-size:15px;
  line-height:1;
  font-weight:800;
  color:#c62828;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(198,40,40,.72);
  opacity:.95;
  margin-top:3px;
}

.example-product__cta{
  position:relative;
  overflow:hidden;
  min-height:56px;
  padding:0 26px;
  border-radius:16px;
  border:0;
  background:linear-gradient(180deg, #626872 0%, #31353c 100%);
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:
    0 16px 30px rgba(45,49,56,.16),
    inset 0 1px 0 rgba(255,255,255,.12);
  transition:
    transform .24s var(--ease),
    box-shadow .24s var(--ease),
    filter .24s var(--ease),
    background .24s var(--ease);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.example-product__cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 24%, rgba(255,255,255,.34) 50%, transparent 76%);
  transform:translateX(-140%);
  transition:transform .85s var(--ease);
}

.example-product__cta:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:
    0 26px 42px rgba(45,49,56,.20),
    inset 0 1px 0 rgba(255,255,255,.14);
  filter:brightness(1.06);
  background:linear-gradient(180deg, #6a707a 0%, #353941 100%);
}

.example-product__cta:hover::before{
  transform:translateX(140%);
}

/* =========================
   NEWSLETTER
   ========================= */
.newsletter{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  background:linear-gradient(135deg, #5c616a 0%, #2f343c 100%);
  color:#fff;
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow-3);
}

.newsletter h2{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.6px;
}

.newsletter p{
  margin:0;
  max-width:60ch;
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.88);
}

.newsletter-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.newsletter-form input{
  min-width:260px;
  min-height:50px;
  border:0;
  border-radius:14px;
  padding:0 16px;
  outline:none;
  color:#23262c;
  background:#fff;
  box-shadow:var(--shadow-1);
}

.newsletter-form button{
  min-height:50px;
  padding:0 20px;
  border:0;
  border-radius:14px;
  background:#ffffff;
  color:#23262c;
  font-weight:800;
  cursor:pointer;
  box-shadow:var(--shadow-1);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}

.newsletter-form button:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1100px){
  .content-grid,
  .promo-strip,
  .newsletter{
    grid-template-columns:1fr;
    gap:28px;
  }

  .category-grid,
  .trust-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .product-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .example-product-wrap{
    grid-template-columns:1fr;
  }

  .example-product__body::before{
    display:none;
  }
}

@media (max-width: 900px){
  .hero-box{
    min-height:420px;
    border-radius:24px;
  }

  .hero-caption{
    left:20px;
    right:20px;
    bottom:20px;
    max-width:none;
    font-size:18px;
    padding:14px 18px;
  }

  .example-product__body{
    padding:24px 22px 22px;
  }

  .example-product__image{
    min-height:340px;
  }

  .category-grid,
  .product-grid,
  .trust-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .example-product__title{
    font-size:30px;
    max-width:none;
  }
}

@media (max-width: 700px){
  .hero{
    padding:18px 0 26px;
  }

  .hero-box{
    min-height:340px;
    border-radius:20px;
  }

  .hero-caption{
    left:16px;
    right:16px;
    bottom:16px;
    font-size:16px;
    padding:12px 16px;
  }

  .hero-arrow{
    width:44px;
    height:44px;
    font-size:28px;
  }

  .hero-arrow--left{
    left:12px;
  }

  .hero-arrow--right{
    right:12px;
  }

  .category-grid{
    grid-template-columns:1fr;
  }

  .product-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
  }

  .product-card__image{
    min-height:240px;
  }

  .product-card__body{
    padding:16px;
  }

  .product-card__title{
    font-size:18px;
  }

  .product-card__text{
    font-size:14px;
    line-height:1.65;
  }

  .product-card__bottom,
  .example-product__bottom{
    flex-direction:column;
    align-items:stretch;
  }

  .example-product__cta,
  .demo-button,
  .newsletter-form button,
  .newsletter-form input{
    width:100%;
  }

  .newsletter-form{
    width:100%;
  }

  .product-card__corner-sale{
    top:-8px;
    right:-6px;
    width:84px;
    height:84px;
    border-radius:20px;
    padding:8px;
  }

  .product-card__corner-sale-label{
    font-size:9px;
  }

  .product-card__corner-sale-value{
    font-size:20px;
  }

  .example-product__image{
    min-height:300px;
    padding:16px;
  }

  .example-product__title{
    font-size:26px;
  }

  .example-price__value{
    font-size:34px;
  }
}

@media (max-width: 430px){
  .hero-box{
    min-height:280px;
    border-radius:18px;
  }

  .hero-caption{
    font-size:14px;
    padding:10px 12px;
    border-radius:12px;
  }

  .hero-arrow{
    width:40px;
    height:40px;
    font-size:24px;
    border-radius:12px;
  }

  .product-grid{
    grid-template-columns:1fr;
  }

  .category-card{
    border-radius:18px;
  }

  .category-card__label{
    top:10px;
    left:10px;
    min-height:26px;
    padding:0 9px;
    font-size:11px;
  }

  .category-card__body{
    padding:14px 14px 16px;
  }

  .category-card__body h3{
    font-size:18px;
  }

  .category-card__body p{
    font-size:13.5px;
  }

  .product-card__image{
    min-height:220px;
  }

  .product-card__badge{
    top:12px;
    left:12px;
    min-height:26px;
    padding:0 9px;
    font-size:10px;
  }

  .product-card__title{
    font-size:17px;
  }

  .product-price-wrap{
    gap:8px;
  }

  .product-price-old{
    font-size:13px;
  }

  .example-product__body{
    padding:22px 16px 18px;
  }

  .example-product__title{
    font-size:22px;
  }

  .example-product__image{
    min-height:260px;
  }

  .example-price{
    padding:14px 14px 12px;
  }

  .example-price__value{
    font-size:30px;
  }
}

@media (max-width: 520px){
  .wrap{
    width:min(100% - 18px, var(--wrap));
  }
}

.example-product__cta{
  position:relative;
  overflow:hidden;
  min-height:50px;
  padding:0 22px;
  border-radius:14px;
  border:0;
  background:linear-gradient(180deg, #5a5e66 0%, #31353c 100%);
  color:#fff;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 16px 30px rgba(45,49,56,.16);
  transition:
    transform .24s var(--ease),
    box-shadow .24s var(--ease),
    filter .24s var(--ease),
    background .24s var(--ease);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.example-product__cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 24%, rgba(255,255,255,.34) 50%, transparent 76%);
  transform:translateX(-140%);
  transition:transform .85s var(--ease);
}

.example-product__cta:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 26px 42px rgba(45,49,56,.20);
  filter:brightness(1.06);
  background:linear-gradient(180deg, #666b74 0%, #353941 100%);
}

.example-product__cta:hover::before{
  transform:translateX(140%);
}

/* =========================
   NEWSLETTER
   ========================= */
.newsletter{
  display:grid;
  grid-template-columns:1fr auto;
  gap:18px;
  align-items:center;
  background:linear-gradient(135deg, #5c616a 0%, #2f343c 100%);
  color:#fff;
  border-radius:24px;
  padding:28px;
  box-shadow:var(--shadow-3);
}

.newsletter h2{
  margin:0 0 10px;
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.6px;
}

.newsletter p{
  margin:0;
  max-width:60ch;
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.88);
}

.newsletter-form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.newsletter-form input{
  min-width:260px;
  min-height:50px;
  border:0;
  border-radius:14px;
  padding:0 16px;
  outline:none;
  color:#23262c;
  background:#fff;
  box-shadow:var(--shadow-1);
}

.newsletter-form button{
  min-height:50px;
  padding:0 20px;
  border:0;
  border-radius:14px;
  background:#ffffff;
  color:#23262c;
  font-weight:800;
  cursor:pointer;
  box-shadow:var(--shadow-1);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}

.newsletter-form button:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1100px){
  .content-grid,
  .promo-strip,
  .newsletter{
    grid-template-columns:1fr;
    gap:28px;
  }

  .category-grid,
  .trust-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .product-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px){
  .hero-box{
    min-height:420px;
    border-radius:24px;
  }

  .hero-caption{
    left:20px;
    right:20px;
    bottom:20px;
    max-width:none;
    font-size:18px;
    padding:14px 18px;
  }

  .example-product-wrap{
    grid-template-columns:1fr;
  }

  .example-product__body{
    padding:0 22px 22px;
  }

  .example-product__image{
    min-height:320px;
  }

  .category-grid,
  .product-grid,
  .trust-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 700px){
  .hero{
    padding:18px 0 26px;
  }

  .hero-box{
    min-height:340px;
    border-radius:20px;
  }

  .hero-caption{
    left:16px;
    right:16px;
    bottom:16px;
    font-size:16px;
    padding:12px 16px;
  }

  .hero-arrow{
    width:44px;
    height:44px;
    font-size:28px;
  }

  .hero-arrow--left{
    left:12px;
  }

  .hero-arrow--right{
    right:12px;
  }

  .category-grid{
    grid-template-columns:1fr;
  }

  .product-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
  }

  .product-card__image{
    min-height:240px;
  }

  .product-card__body{
    padding:16px;
  }

  .product-card__title{
    font-size:18px;
  }

  .product-card__text{
    font-size:14px;
    line-height:1.65;
  }

  .product-card__bottom,
  .example-product__bottom{
    flex-direction:column;
    align-items:stretch;
  }

  .example-product__cta,
  .demo-button,
  .newsletter-form button,
  .newsletter-form input{
    width:100%;
  }

  .newsletter-form{
    width:100%;
  }

  .product-card__corner-sale{
    top:-8px;
    right:-6px;
    width:84px;
    height:84px;
    border-radius:20px;
    padding:8px;
  }

  .product-card__corner-sale-label{
    font-size:9px;
  }

  .product-card__corner-sale-value{
    font-size:20px;
  }
}

@media (max-width: 430px){
  .hero-box{
    min-height:280px;
    border-radius:18px;
  }

  .hero-caption{
    font-size:14px;
    padding:10px 12px;
    border-radius:12px;
  }

  .hero-arrow{
    width:40px;
    height:40px;
    font-size:24px;
    border-radius:12px;
  }

  .product-grid{
    grid-template-columns:1fr;
  }

  .category-card{
    border-radius:18px;
  }

  .category-card__label{
    top:10px;
    left:10px;
    min-height:26px;
    padding:0 9px;
    font-size:11px;
  }

  .category-card__body{
    padding:14px 14px 16px;
  }

  .category-card__body h3{
    font-size:18px;
  }

  .category-card__body p{
    font-size:13.5px;
  }

  .product-card__image{
    min-height:220px;
  }

  .product-card__badge{
    top:12px;
    left:12px;
    min-height:26px;
    padding:0 9px;
    font-size:10px;
  }

  .product-card__title{
    font-size:17px;
  }

  .product-price-wrap{
    gap:8px;
  }

  .product-price-old{
    font-size:13px;
  }
}

@media (max-width: 520px){
  .wrap{
    width:min(100% - 18px, var(--wrap));
  }
}

/* =========================
   FEATURED VARIANTS
   ========================= */
.example-product__meta--detail{
  display:grid;
  gap:14px;
  margin-bottom:20px;
}

.feature-variant-block{
  display:grid;
  gap:7px;
}

.feature-variant-label{
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#7b8390;
}

.feature-variant-colors,
.feature-variant-sizes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.feature-color-dot{
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.14);
  box-shadow:
    0 2px 6px rgba(20,22,28,.08),
    inset 0 1px 0 rgba(255,255,255,.45);
  background:linear-gradient(180deg, #eef2f6 0%, #dfe5ec 100%);
  flex:0 0 20px;
}

.feature-size-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 11px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(17,138,82,.05) 0%, rgba(17,138,82,.09) 100%);
  border:1px solid rgba(17,138,82,.16);
  color:#0f6b3f;
  font-size:12px;
  font-weight:800;
  box-shadow:0 4px 10px rgba(20,22,28,.03);
}

.feature-more-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 11px;
  border-radius:999px;
  background:#eef2f6;
  border:1px solid #d9e0e8;
  color:#66707d;
  font-size:12px;
  font-weight:800;
}

.example-price__old{
  display:inline-flex;
  align-items:center;
  font-size:15px;
  line-height:1;
  font-weight:800;
  color:#c62828;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  text-decoration-color:rgba(198,40,40,.72);
  opacity:.95;
  margin-top:6px;
}

@media (max-width:700px){
  .hero{
    padding:18px 0 24px;
  }

  .hero-box{
    aspect-ratio:1280 / 620;
    border-radius:20px;
  }

  .hero-image{
    object-position:center center;
  }
}

/* =========================
   FINAL HERO MOBILE FIX
   Muss ganz unten stehen, weil vorher mehrere Hero-Media-Blöcke existieren.
   ========================= */

@media (max-width:900px){
  .hero-box{
    aspect-ratio:16 / 9;
    min-height:0;
    height:auto;
    max-height:none;
    border-radius:24px;
    overflow:hidden;
  }

  .hero-slider,
  .hero-slide,
  .hero-media{
    width:100%;
    height:100%;
    max-width:100%;
    overflow:hidden;
    border-radius:inherit;
  }

  .hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    min-width:100%;
    object-fit:cover;
    object-position:center center;
  }
}

@media (max-width:700px){
  .hero{
    padding:18px 0 24px;
    overflow:hidden;
  }

  .hero-box{
    aspect-ratio:16 / 10;
    min-height:0;
    height:auto;
    max-height:360px;
    border-radius:20px;
    overflow:hidden;
  }

  .hero-slider,
  .hero-slide,
  .hero-media{
    width:100%;
    height:100%;
    max-width:100%;
    overflow:hidden;
    border-radius:inherit;
  }

  .hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    min-width:100%;
    object-fit:cover;
    object-position:center center;
  }

  .hero-caption{
    left:16px;
    right:16px;
    bottom:16px;
    max-width:none;
    font-size:16px;
    padding:12px 16px;
  }

  .hero-arrow{
    width:44px;
    height:44px;
    font-size:28px;
  }

  .hero-arrow--left{
    left:12px;
  }

  .hero-arrow--right{
    right:12px;
  }
}

@media (max-width:430px){
  .hero-box{
    aspect-ratio:4 / 3;
    min-height:0;
    height:auto;
    max-height:300px;
    border-radius:18px;
    overflow:hidden;
  }

  .hero-caption{
    font-size:14px;
    padding:10px 12px;
    border-radius:12px;
  }

  .hero-arrow{
    width:40px;
    height:40px;
    font-size:24px;
    border-radius:12px;
  }
}

/* Produktkarten wie Kategorie */

.product-card__image-empty{
  width:100%;
  height:100%;
  background:linear-gradient(180deg,#f4f6f9 0%,#e9edf2 100%);
}

.product-card__body{
  gap:4px;
}

.product-review-box{
  width:100%;
  margin:-8px 0 6px;
}

.review-mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  background:linear-gradient(180deg,#fff 0%,#f3f6fa 100%);
  border:1px solid #dde3eb;
  box-shadow:0 6px 14px rgba(20,22,28,.04);
}

.review-left{
  display:flex;
  align-items:center;
  gap:6px;
}

[id^="shopReviewAverage_"]{
  font-size:13px;
  font-weight:800;
  color:#1d2430;
}

[id^="shopReviewStars_"]{
  font-size:12px;
  letter-spacing:.08em;
  color:#f4b400;
}

[id^="shopReviewCountText_"]{
  font-size:11px;
  font-weight:700;
  color:#7b8390;
  text-align:right;
  white-space:nowrap;
}

.product-card__badge-stack{
  position:absolute;
  top:14px;
  left:14px;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  pointer-events:none;
}

.product-card__badge-stack .product-card__badge{
  position:static;
}

.product-card__badge--embroidered{
  background:linear-gradient(180deg,#f6c75a 0%,#c9982a 100%);
  color:#3a2a00;
  box-shadow:
    0 10px 18px rgba(201,152,42,.35),
    inset 0 1px 0 rgba(255,255,255,.6);
}

.product-card__badge--used{
  min-height:32px;
  padding:0 13px;
  background:linear-gradient(180deg,#ef4444 0%,#b91c1c 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 12px 22px rgba(185,28,28,.30),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.product-card__badge--adult-clean{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  padding:0 12px 0 8px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff7f7 0%,#fff1f1 100%);
  border:1px solid rgba(198,40,40,.18);
  color:#991f1f;
  font-size:11px;
  font-weight:800;
  text-transform:none;
}

.product-card__badge-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  padding:0 8px;
  border-radius:999px;
  background:linear-gradient(180deg,#dc3a3a 0%,#ad1e1e 100%);
  color:#fff;
  font-size:10px;
  font-weight:900;
}

.product-card__adult-note-clean{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:2px 0 10px;
  padding:6px 12px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff9f9 0%,#fff2f2 100%);
  border:1px solid rgba(198,40,40,.14);
  color:#8f1d1d;
  font-size:11px;
  font-weight:700;
}

.product-card__adult-note-clean::before{
  content:"18+";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,#dc3a3a 0%,#ad1e1e 100%);
  color:#fff;
  font-size:10px;
  font-weight:900;
}

.product-loyalty-hint{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:fit-content;
  max-width:100%;
  margin:2px 0 10px;
  padding:7px 12px;
  border-radius:999px;
  background:linear-gradient(180deg,#fffdf7 0%,#fff9ec 100%);
  border:1px solid rgba(201,152,42,.20);
  color:#6d5313;
  font-size:12px;
  font-weight:700;
}

.product-loyalty-hint__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  border-radius:999px;
  background:linear-gradient(180deg,#f6c75a 0%,#c9982a 100%);
  color:#3a2a00;
}

.product-loyalty-hint__text{
  min-width:0;
  white-space:nowrap;
}

.variant-color-name-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  max-width:118px;
  padding:0 9px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff 0%,#eef2f6 100%);
  border:1px solid #d9e0e8;
  color:#414a56;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:700px){
  .product-card__badge-stack{
    top:12px;
    left:12px;
    gap:7px;
  }

  .product-loyalty-hint{
    font-size:11px;
    padding:6px 10px;
  }
}