/* =========================================================
   Inovy Store – Premium CSS
   Aesthetic: Apple-level restraint, precise rhythm, no noise
   ========================================================= */

/* ---------- Root & Design Tokens ---------- */
:root{
  /* Color */
  --ink: #0b0c0e;              /* primary text (graphite/black) */
  --muted: #5a6272;            /* secondary text */
  --line: #e8ecf2;             /* grid borders / separators */
  --line-strong: #d9dee6;
  --bg: #ffffff;               /* canvas */
  --bg-soft: #f6f8fb;          /* soft section */
  --accent: #111316;           /* brand black for buttons */
  --accent-ink: #ffffff;

  /* Elevation */
  --shadow-1: 0 8px 24px rgba(16,24,40,.08), 0 2px 8px rgba(16,24,40,.05);
  --shadow-2: 0 16px 40px rgba(16,24,40,.12), 0 6px 18px rgba(16,24,40,.08);

  /* Rounding (squared, not pills) */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* Type scale */
  --fz-12: 12px;
  --fz-14: 14px;
  --fz-16: 16px;
  --fz-18: 18px;
  --fz-20: 20px;
  --fz-28: 28px;
  --fz-40: clamp(28px, 4.2vw, 40px);
  --fz-56: clamp(34px, 6.2vw, 56px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-1: .18s var(--ease);
  --t-2: .28s var(--ease);
}

/* ---------- Reset / Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body.store{
  margin:0;
  font: 500 var(--fz-16)/1.55 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue";
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,select{font:inherit;color:inherit}

/* Layout helpers */
.container, .sh-container, .sf-container, .pg-container,
.assist-inner, .tb-container, .footer-container{
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}

/* ---------- Header ---------- */
#store-header{
  position: sticky; top:0; z-index:40;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.sh-container{
  display:flex; align-items:center; gap:16px;
  padding: 14px 0;
}
.sh-logo img{height:32px;width:auto}

.sh-nav{margin-left:auto; display:flex; gap:18px}
.sh-nav a{
  padding:8px 10px; border-radius: var(--r-sm);
}
.sh-nav a.active,
.sh-nav a:hover{ background: var(--bg-soft); }

.sh-tools{
  display:flex; align-items:center; gap:14px; margin-left:10px;
}
.lang-switch{display:flex; gap:8px; align-items:center}
.lang-switch button{
  padding:6px 10px; border-radius: var(--r-sm);
  background: transparent; border:1px solid var(--line);
  cursor: pointer;
}
.lang-switch button.active{ background: var(--bg-soft); border-color: var(--line-strong) }

.currency{padding:6px 10px; border:1px solid var(--line); border-radius: var(--r-sm)}

#cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid var(--line); border-radius: var(--r-sm);
  background: #fff; cursor: pointer;
}
#cart-btn:hover{ box-shadow: var(--shadow-1); }
#cart-count{
  min-width:20px; height:20px; display:inline-grid; place-items:center;
  border-radius: 10px; padding:0 6px; background: var(--ink); color:#fff; font-weight:700; font-size: var(--fz-12);
}

/* ---------- Hero ---------- */
#store-hero{
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(1200px 400px at 50% -200px, #f2f5fa 0%, rgba(242,245,250,0) 60%),
    var(--bg);
}
#store-hero .hero-inner{
  width:min(1000px, 100% - 48px);
  margin: 64px auto;
  text-align:center;
  padding: 24px 0 48px;
}
#store-hero h1{
  margin:0 0 10px;
  font-size: var(--fz-56);
  font-weight: 900;
  letter-spacing:.2px;
}
#store-hero p{
  margin:0 auto 18px;
  color: var(--muted);
  font-size: var(--fz-18);
  max-width: 760px;
}
.hero-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ---------- Buttons (squared, premium) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:42px; padding:0 18px;
  border-radius: var(--r-md);
  border:1px solid var(--line-strong);
  background:#fff; color: var(--ink);
  font-weight: 800; letter-spacing:.2px;
  transition: transform var(--t-1), box-shadow var(--t-1), background var(--t-1), border-color var(--t-1);
  cursor:pointer;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active{ transform: translateY(0); box-shadow:none; }

.btn-primary{
  background: var(--accent); color: var(--accent-ink);
  border-color: #15171b;
}
.btn-primary:hover{ box-shadow: var(--shadow-2); }

.btn-outline{
  background: #fff; color: var(--ink);
}

.view-demo{
  position:absolute; right:12px; bottom:12px;
  height:36px; padding:0 14px; border-radius: var(--r-sm);
  border:1px solid var(--line); background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  font-weight:700; cursor:pointer;
  transition: transform var(--t-1), box-shadow var(--t-1);
}
.view-demo:hover{ transform: translateY(-1px); box-shadow: var(--shadow-1); }

/* ---------- Filter Bar ---------- */
#store-filters{
  position: sticky; top:64px; z-index:30;
  background: #fff; border-bottom: 1px solid var(--line);
}
.sf-container{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 12px 0;
}
.sf-tabs{ display:flex; gap:8px; flex-wrap:wrap }
.filter-tab{
  padding:8px 14px; border-radius: var(--r-sm);
  background:#fff; border:1px solid var(--line);
  cursor:pointer; font-weight:700;
}
.filter-tab.active,
.filter-tab:hover{ background: var(--bg-soft); border-color: var(--line-strong); }

.sf-right{ display:flex; gap:10px; align-items:center; }
.sf-right select{
  height:38px; padding:0 12px; border-radius: var(--r-sm);
  border:1px solid var(--line); background:#fff; color: var(--ink);
}

/* ---------- Product Grid ---------- */
#products{ padding: 36px 0 72px; }
.pg-container{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width:1080px){ .pg-container{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:720px){ .pg-container{ grid-template-columns: 1fr; } }

.product-card{
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  overflow:hidden; background:#fff;
  transition: transform var(--t-2), box-shadow var(--t-2), border-color var(--t-2);
}
.product-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--line-strong); }

.p-thumb{
  position:relative; aspect-ratio: 16/10; overflow:hidden;
  background: #f0f3f8;
}
.p-thumb img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.02);
  transition: transform .8s var(--ease);
}
.product-card:hover .p-thumb img{ transform: scale(1.06); }

.p-body{ padding: 14px 14px 16px; display:grid; gap:10px }
.p-body h3{ margin:0; font-size: var(--fz-18); letter-spacing:.2px; font-weight:800 }
.p-body p{ margin:0; color: var(--muted); font-size: var(--fz-14) }

.p-meta{ display:flex; gap:8px; flex-wrap:wrap }
.p-badge{
  padding:6px 8px; font-size: var(--fz-12); font-weight:700; letter-spacing:.2px;
  border:1px solid var(--line); border-radius: var(--r-sm); background:#fff;
}

.p-price{ display:grid; gap:4px; margin-top:2px }
.p-price strong{ font-size: var(--fz-20); letter-spacing:.2px }
.p-price small{ color: var(--muted); }

.add-cart{ width:100%; margin-top:6px }
.p-upsell{ margin-top:4px; font-size: var(--fz-12); color: var(--muted) }
.p-upsell a{ text-decoration: underline; text-underline-offset:2px; }

/* ---------- Assist (Upsell) ---------- */
.assist{
  padding: clamp(56px, 8vw, 110px) 0;
  background: linear-gradient(180deg, var(--bg), var(--bg-soft));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.assist-inner{
  display:grid; gap:24px; grid-template-columns: 1.1fr .9fr; align-items:center;
}
@media (max-width:980px){ .assist-inner{ grid-template-columns: 1fr; } }

.assist-text h2{
  margin:0 0 8px; font-size: var(--fz-40); font-weight:900; letter-spacing:.2px;
}
.assist-text p{ margin:0 0 12px; color: var(--muted); font-size: var(--fz-18) }
.assist-list{
  margin:0 0 16px; padding:0; list-style:none; display:grid; gap:8px;
}
.assist-list li{
  border:1px solid var(--line); border-radius: var(--r-sm); padding:10px 12px; background:#fff; font-weight:600;
}
.assist-img{ border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; background:#f2f5fa }
.assist-img img{ width:100%; height:auto; display:block }

/* ---------- Trust Band ---------- */
#trust-band{
  background: #fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.tb-container{
  display:grid; grid-template-columns: repeat(4,1fr); gap:12px; padding: 18px 0;
}
.tb-container > div{
  text-align:center; padding:12px; border:1px solid var(--line);
  border-radius: var(--r-sm); font-weight:700;
}
@media (max-width:880px){ .tb-container{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .tb-container{ grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
#store-footer{
  background: #0a0b0d; color:#e9edf5;
  padding: clamp(28px, 4vw, 44px) 0 20px;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-container{ text-align:center }
.footer-logo{ height:32px; width:auto; margin: 2px auto 12px; display:block }
.footer-tagline{ margin:0 0 10px; opacity:.9 }
.footer-links{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  margin: 6px 0 10px;
}
.footer-links a{
  padding:8px 10px; border-radius: var(--r-sm);
  border:1px solid rgba(255,255,255,.14);
}
.footer-links a:hover{ background: rgba(255,255,255,.06); }
.footer-copy{ margin:0; opacity:.7; font-size: var(--fz-14) }


.cart-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 14px; border-bottom:1px solid var(--line);
}
.cart-header h3{ margin:0; font-size: var(--fz-18); font-weight:900 }
.cart-header button{
  width:36px; height:36px; border-radius: var(--r-sm);
  border:1px solid var(--line); background:#fff; cursor:pointer;
}

#cart-items{ flex:1 1 auto; overflow:auto; padding:12px }
.cart-item{
  display:grid; grid-template-columns: 64px 1fr auto; gap:12px; align-items:center;
  padding:10px; border:1px solid var(--line); border-radius: var(--r-sm); background:#fff; margin-bottom:10px;
}
.cart-item img{ width:64px; height:48px; object-fit:cover; border-radius: var(--r-sm); background:#f0f3f8 }
.cart-item h4{ margin:0; font-size: var(--fz-16) }
.cart-item small{ color: var(--muted) }
.cart-item .remove{ border:1px solid var(--line); border-radius: var(--r-sm); padding:6px 10px; cursor:pointer; background:#fff }

.cart-summary{
  border-top:1px solid var(--line); padding:12px; display:grid; gap:10px;
}
.cart-total{ display:flex; align-items:center; justify-content:space-between; }
.checkout{ width:100% }

/* ---------- Micro-Interactions ---------- */
.product-card:hover .p-thumb::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 60% at 70% 20%, rgba(255,255,255,.35), transparent 60%);
  pointer-events:none;
}

/* Focus styles */
:focus-visible{ outline:2px solid #1f232b; outline-offset: 2px; border-radius: 6px; }

/* ---------- Utilities ---------- */
.hidden{ display:none !important }
.center{ text-align:center }

/* ---------- Responsive Header Compaction ---------- */
@media (max-width: 880px){
  .sh-nav{ display:none }
  #store-header .sh-container{ justify-content:space-between }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}


/* ===== Centered Floating Mobile Menu (compact like your mock) ===== */

/* Overlay: dim + blur background, not fullscreen panel */
.mobile{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,17,21,.45);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  z-index:1300;
  transform:translateY(-8px);
  opacity:0; pointer-events:none;
  transition:transform .22s ease, opacity .22s ease;
  padding:24px;               /* breathing room around the card */
}
.mobile.open{ transform:translateY(0); opacity:1; pointer-events:auto; }

/* Glass card centered; compact height */
.mobile__panel{
  width:min(520px, 92%);            /* ~ one-third of screen */
  overflow:auto;              /* scroll if content is taller */
  padding:16px 18px 20px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 18px 50px rgba(0,0,0,.35);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  transform:scale(.985);
  transition:transform .22s ease;
}
.mobile.open .mobile__panel{ transform:scale(1); }

/* Menu items (compact tiles) */
.mobile__item{
  display:block; text-align:left;
  padding:14px 16px; margin:8px 6px;
  border-radius:14px;
  background:rgba(255,255,255,.82);
  border:1px solid #E7EBF2;
  font-weight:800; color:#0f1115;
}
.mobile__item:hover{ background:rgba(255,255,255,.94); }

/* Lang + Currency row (compact) */
.mobile__row{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin:10px 6px 12px;
}
.dd-btn.dd-btn--glass{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 12px; border-radius:12px;
  background:rgba(255,255,255,.85);
  border:1px solid #D7DBE2;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-weight:800; font-size:14px;
}
.dd-chev{ width:18px; height:18px; transition:transform .2s }
.dd.open .dd-chev{ transform:rotate(180deg) }

/* Dropdown popup sits above the card */
.dd-menu{
  display:none;
  position:absolute; top:calc(100% + 8px); left:0; min-width:100%;
  background:rgba(255,255,255,.98);
  border:1px solid #E2E6EC; border-radius:12px;
  box-shadow:0 18px 40px rgba(16,24,40,.18), 0 6px 18px rgba(16,24,40,.10);
  padding:6px; margin:0; list-style:none; z-index:1500;
}
.dd.open .dd-menu{ display:block; }
.dd-menu li{ padding:10px 12px; border-radius:10px; cursor:pointer; font-weight:700; }
.dd-menu li:hover{ background:#F2F4F8; }
.dd-menu li[aria-selected="true"]{ background:#EEF1F6; }

/* CTA inside the card */
.mobile__cta{
  margin:8px 6px 2px; height:46px;
  border-radius:14px; font-weight:900; letter-spacing:.2px;
}

/* Tweak for very small screens: allow a bit more height */
@media (max-height:720px){
  .mobile__panel{ max-height:46vh; }
}


/* Cart drawer layering */
.cart-drawer{
  position: fixed; top:0; right:0; bottom:0; width:min(420px, 100%);
  background:#fff; border-left:1px solid #e8ecf2;
  box-shadow: -10px 0 30px rgba(0,0,0,.12);
  transform: translateX(100%);
  transition: transform .22s ease;
  display:flex; flex-direction:column;
  z-index: 1400; /* above backdrop */
}
.cart-drawer.open{ transform: translateX(0); }
.cart-drawer.hidden{ display:none; } /* keep if you use it initially */

/* Header with close X */
.cart-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 14px; border-bottom:1px solid #e8ecf2;
}
#close-cart{
  width:36px; height:36px; border-radius:10px;
  border:1px solid #e1e6ee; background:#fff; cursor:pointer; font-size:20px; line-height:1;
}

/* Backdrop for cart */
.cart-backdrop{
  position: fixed; inset: 0;
  background: rgba(15,17,21,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1390; /* just under the cart */
}
.cart-backdrop[hidden]{ display:none !important; }

/* Header with close X */
.cart-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding: 14px; border-bottom:1px solid #e8ecf2;
}
#close-cart{
  width:36px; height:36px; border-radius:10px;
  border:1px solid #e1e6ee; background:#fff; cursor:pointer; font-size:20px; line-height:1;
}

/* Backdrop for cart */
.cart-backdrop{
  position: fixed; inset: 0;
  background: rgba(15,17,21,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1390; /* just under the cart */
}
.cart-backdrop[hidden]{ display:none !important; }



:root{
  --hdr-h: 68px; /* già c'è */
}

/* Filter bar: stai sotto l'header e usa la stessa altezza */
#store-filters{
  position: sticky;
  top: var(--hdr-h);      /* <-- PRIMO FIX CRITICO */
  z-index: 1000;          /* sotto all'header */
}

/* Per sicurezza, evita che i genitori rompano sticky */
body, main { overflow: visible; }


:root{ --hdr-h: 68px; }

/* NAVBAR: make it fixed and on top of everything */
.header{
  position: fixed;
  inset: 0 0 auto 0;       /* top:0; left/right:0 */
  height: var(--hdr-h);
  background: #fff;
  border-bottom: 1px solid #EEF1F6;
  z-index: 4000;           /* above anything else */
}




/* ===== Quickview Backdrop ===== */
.qv-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,17,21,.45);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1300; /* per esempio */
}
.qv-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Quickview Panel ===== */
.qv {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1400; /* <-- DEVE essere più alto del backdrop */
}
.qv[hidden]{ display:none!important }

.qv.open {
  opacity: 1;
  pointer-events: auto;
}


.qv__shell {
  max-width: 1200px;
  width: 100%;
  max-height: 90vh;
  background: #fff;
  border-radius: 20px;
  border: 1px solid #E6E9F0;
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  transform: translateY(12px) scale(.98);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.7,.2,1),
              opacity   .22s cubic-bezier(.2,.7,.2,1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.qv__shell[data-in]{ transform:scale(1); opacity:1 }

.qv__shell.open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Top bar */
.qv__bar{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #EEF1F6; background:#fff }
.qv__title{ margin:0; font:900 1rem/1 Inter,system-ui; letter-spacing:.2px; color:#0f1115 }
.qv__bar-actions{ display:flex; gap:8px }
.qv__icon{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #D7DBE2; border-radius:12px; background:#fff }
.qv__icon svg{ width:18px; height:18px }

/* Body grid */
.qv__grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:0; height:100% }
.qv__preview{ display:flex; flex-direction:column; border-right:1px solid #EEF1F6; background:#fbfcfe }
.qv__config{ display:flex; flex-direction:column; overflow:auto }

/* Preview toolbar */
.qv__preview-toolbar{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px }
.qv__chip{ padding:8px 12px; border-radius:10px; border:1px solid #D7DBE2; background:#fff; font-weight:800; cursor:pointer }
.qv__chip--ghost{ background:#f6f8fb }
.qv__chip.is-active{ background:#0f1115; color:#fff; border-color:#0f1115 }

.qv__frame-wrap{ position:relative; flex:1 1 auto; display:grid; place-items:center; padding:12px }
.qv__frame{ width:100%; height:100%; border:1px solid #E6E9F0; border-radius:14px; background:#fff }
.qv__skeleton{ position:absolute; inset:12px; border:1px dashed #E6E9F0; border-radius:14px; display:grid; place-items:center; color:#687084; font-weight:700; background:linear-gradient(90deg,#f4f6fb 0%,#fff 50%,#f4f6fb 100%); background-size:200% 100%; animation:sk 1.5s linear infinite }
@keyframes sk{ to{ background-position: -200% 0 } }

/* Config */
.qv__price-block{ padding:16px 16px 12px; border-bottom:1px solid #EEF1F6; background:#fff; position:sticky; top:0; z-index:1 }
.qv__brand{ display:flex; gap:10px; align-items:center; margin-bottom:10px }
.qv__thumb{ width:44px; height:32px; object-fit:cover; border-radius:8px; border:1px solid #E6E9F0; background:#f2f4f8 }
.qv__name{ margin:0; font:900 1.05rem/1.2 Inter,system-ui; color:#0f1115 }
.qv__tagline{ margin:.5px 0 0; color:#666f7d; font-size:.9rem }

.qv__plan-tabs{ display:flex; gap:8px; margin:8px 0 10px }
.qv__tab{ padding:8px 10px; border-radius:10px; border:1px solid #D7DBE2; background:#fff; font-weight:800; cursor:pointer }
.qv__tab.is-active{ background:#0f1115; color:#fff; border-color:#0f1115 }

.qv__price-line{ display:flex; align-items:end; justify-content:space-between; margin:4px 0 10px }
.qv__price-main{ font:900 1.6rem/1 Inter,system-ui; letter-spacing:.2px; color:#0f1115 }
.qv__price-note{ color:#6b7280; margin-left:8px; font-weight:700 }
.qv__eta{ color:#444b57; font-weight:800 }

.qv__includes{ display:grid; gap:6px; margin:10px 0 10px }
.qv__inc{ display:flex; align-items:center; gap:8px; font-weight:700; color:#23262c; }
.qv__inc svg{ width:16px; height:16px }
.qv__addons{ margin:8px 0 10px }
.qv__addons-title{ margin:0 0 8px; font-weight:900 }
.qv__addon-list{ display:grid; gap:8px }
.qv__addon{ display:flex; align-items:center; justify-content:space-between; border:1px solid #E6E9F0; border-radius:10px; background:#fff; padding:8px 10px; font-weight:700 }
.qv__cta{ margin-top:8px; }
.qv__legal{ display:block; margin-top:8px; color:#7f8590 }

.qv__desc{ padding:14px 16px 18px }
.qv__details{ border:1px solid #E6E9F0; border-radius:10px; background:#fff; padding:10px 12px; margin:10px 0 }
.qv__tech, .qv__components{ margin:8px 0 0; padding-left:18px }

/* Devices: preview width presets */
.qv__frame[data-device="desktop"]{ width:100% }
.qv__frame[data-device="tablet"]{ width:820px; max-width:100% }
.qv__frame[data-device="mobile"]{ width:420px; max-width:100% }

@media (max-width:1024px){
  .qv__grid{ grid-template-columns:1fr; }
  .qv__preview{ border-right:0; border-bottom:1px solid #EEF1F6 }
  .qv__shell{ height:min(92vh, 1000px) }
}

/* Small white icon button for grid (top-right) */
.p-thumb{ position:relative }
.atc-ico{ position:absolute; top:10px; right:10px; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #D7DBE2; border-radius:12px; background:#fff; box-shadow:0 8px 18px rgba(16,24,40,.10) }
.atc-ico svg{ width:20px; height:20px }




/* Action row under price */
.p-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
}

/* The “Details & Optionen” button uses your btn/btn-primary tokens */
.p-actions .btn{
  flex:1;
  height:40px;
  padding:0 14px;
  font-size: var(--fz-14);
  border-radius: var(--r-md);
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid var(--line-strong);
  transition: transform var(--t-1), box-shadow var(--t-1), background var(--t-1), border-color var(--t-1);
}
.p-actions .btn-primary{
  background: var(--accent);
  color: var(--accent-ink);
  border-color:#15171b;
}
.p-actions .btn-primary:hover{
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}

/* Little cart icon next to it (secondary entry point) */
.p-actions-cart{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--r-md);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 8px 18px rgba(16,24,40,.06);
  cursor:pointer;
  transition: box-shadow var(--t-1), transform var(--t-1), border-color var(--t-1), background var(--t-1);
}
.p-actions-cart svg{
  width:20px;
  height:20px;
  color: var(--ink);
}
.p-actions-cart:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  border-color: var(--line-strong);
  background:#fff;
}

/* The top-right icon in the thumbnail (already defined as .atc-ico) – keep same vibe */
.atc-ico{
  cursor:pointer;
  transition: box-shadow var(--t-1), transform var(--t-1), border-color var(--t-1), background var(--t-1);
}
.atc-ico:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
  background:#fff;
}


/* ---------- Product Grid ---------- */
#products{
  padding: 36px 0 72px;
}

.pg-container{
  /* 3 columns desktop, 2 tablet, 1 mobile */
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap:20px;
  justify-content:center; /* keeps them centered if last row has fewer */
}

/* Card shell */
.product-card{
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  background:#fff;
  box-shadow:0 8px 24px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.03);
  overflow:hidden;
  transition: transform var(--t-2), box-shadow var(--t-2), border-color var(--t-2);
  max-width: 360px;           /* <- keeps them from becoming “fullscreen-wide” */
  width:100%;
  margin-inline:auto;         /* center each card inside its grid cell */
}

.product-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
  border-color: var(--line-strong);
}

/* Thumbnail */
.p-thumb{
  position:relative;
  aspect-ratio: 16/10;
  overflow:hidden;
  background:#f0f3f8;
  cursor:pointer; /* because it opens quickview */
}
.p-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: transform .8s var(--ease);
}
.product-card:hover .p-thumb img{
  transform: scale(1.06);
}

/* Live demo pill unchanged */
.view-demo{
  position:absolute;
  right:12px;
  bottom:12px;
  height:32px;
  padding:0 12px;
  border-radius: var(--r-sm);
  border:1px solid var(--line);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  font-weight:700;
  font-size: var(--fz-12);
  cursor:pointer;
  transition: transform var(--t-1), box-shadow var(--t-1);
}
.view-demo:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

/* floating cart icon (top-right in the thumbnail) */
.atc-ico{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #D7DBE2;
  border-radius:12px;
  background:#fff;
  box-shadow:0 8px 18px rgba(16,24,40,.10);
  cursor:pointer;
  transition: box-shadow var(--t-1), transform var(--t-1), border-color var(--t-1), background var(--t-1);
}
.atc-ico svg{
  width:20px;
  height:20px;
  color: var(--ink);
}
.atc-ico:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
  background:#fff;
}

/* Body */
.p-body{
  padding:14px 14px 16px;
  display:grid;
  gap:10px;
}

.p-title{
  margin:0;
  font-size: var(--fz-16);     /* a bit smaller */
  line-height:1.3;
  letter-spacing:.2px;
  font-weight:800;
}

.p-desc{
  margin:0;
  color: var(--muted);
  font-size: var(--fz-14);
  line-height:1.4;
  min-height:3.2em; /* lock two lines height so cards align */
}

.p-meta{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.p-badge{
  padding:5px 8px;
  font-size: var(--fz-12);
  font-weight:700;
  letter-spacing:.2px;
  border:1px solid var(--line);
  border-radius: var(--r-sm);
  background:#fff;
}

.p-price{
  display:grid;
  gap:2px;
  margin-top:2px;
}
.p-price-main{
  font-size: var(--fz-18);    /* smaller */
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.2;
}
.p-price small{
  color: var(--muted);
  font-size: var(--fz-12);
}

/* Actions row */
.p-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

/* button: Details & Optionen */
.p-actions .btn{
  flex:1;
  height:38px;
  padding:0 12px;
  font-size: var(--fz-14);
  line-height:1;
  border-radius: var(--r-md);
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid var(--line-strong);
  background: var(--accent);
  color: var(--accent-ink);
  cursor:pointer;
  transition: transform var(--t-1), box-shadow var(--t-1), border-color var(--t-1), background var(--t-1);
}
.p-actions .btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}

/* icon add-to-cart in action row */
.p-actions-cart{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--r-md);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 8px 18px rgba(16,24,40,.06);
  cursor:pointer;
  transition: box-shadow var(--t-1), transform var(--t-1), border-color var(--t-1), background var(--t-1);
}
.p-actions-cart svg{
  width:20px;
  height:20px;
  color: var(--ink);
}
.p-actions-cart:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  border-color: var(--line-strong);
  background:#fff;
}

.p-upsell{
  margin-top:4px;
  font-size: var(--fz-12);
  color: var(--muted);
}
.p-upsell a{
  text-decoration: underline;
  text-underline-offset:2px;
}

/* mobile tweaks so row doesn’t explode on 320px */
@media (max-width:400px){
  .p-actions{
    flex-wrap:wrap;
  }
  .p-actions .btn{
    flex:1 1 100%;
    order:1;
  }
  .p-actions-cart{
    order:0;
  }
}


/* ===== Layer fix / z-index normalization ===== */

/* Header should NOT be the top boss anymore */
.header {
  z-index: 1100 !important;
}

/* Mobile full-screen overlay (burger menu) above header */
#mobile-overlay {
  z-index: 5000 !important;
}

/* Cart backdrop dims the whole page INCLUDING header */
#cart-backdrop {
  position: fixed;        /* make sure it covers viewport */
  inset: 0;
  background: rgba(15,17,21,.45);
  backdrop-filter: saturate(1.2) blur(8px);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  z-index: 4500 !important;
}
/* === CART LAYER CLEAN === */

/* Oscura e sfoca TUTTO il sito sotto, compresa la navbar */
#cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,17,21,.45);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  z-index: 9997;
}
#cart-backdrop[hidden] {
  display: none !important;
}

/* Pannello carrello sopra il blur, nitido */
#cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;

  width: min(420px, 100%);
  background: #fff;
  border-left: 1px solid #e8ecf2;
  box-shadow: -10px 0 30px rgba(0,0,0,.18);

  transform: translateX(100%);
  transition: transform .22s cubic-bezier(.22,.61,.36,1);

  display: flex;
  flex-direction: column;

  z-index: 9998; /* sopra il backdrop */
}

#cart-drawer.open {
  transform: translateX(0);
}

#cart-drawer.hidden {
  display: none;
}

/* Header interno al carrello */
#cart-drawer .cart-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  border-bottom:1px solid #e8ecf2;
}

#cart-drawer .cart-header h3 {
  margin:0;
  font-size: var(--fz-18);
  font-weight:900;
}

#cart-drawer .cart-header button {
  width:36px;
  height:36px;
  border-radius: var(--r-sm);
  border:1px solid #e1e6ee;
  background:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}

#cart-items {
  flex:1 1 auto;
  overflow:auto;
  padding:12px;
}

.cart-item {
  display:grid;
  grid-template-columns:64px 1fr auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px solid var(--line);
  border-radius: var(--r-sm);
  background:#fff;
  margin-bottom:10px;
}

.cart-item img {
  width:64px;
  height:48px;
  object-fit:cover;
  border-radius: var(--r-sm);
  background:#f0f3f8;
}

.cart-item h4 {
  margin:0;
  font-size: var(--fz-16);
}

.cart-item small {
  color: var(--muted);
}

.cart-item .remove {
  border:1px solid var(--line);
  border-radius: var(--r-sm);
  padding:6px 10px;
  cursor:pointer;
  background:#fff;
}

.cart-summary {
  border-top:1px solid var(--line);
  padding:12px;
  display:grid;
  gap:10px;
}

.cart-total {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.checkout {
  width:100%;
}




.qv__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  gap:24px;
  padding:20px;
}
@media(max-width:900px){
  .qv__grid{
    grid-template-columns:1fr;
  }
}

/* Left side offer */
.qv__offer{
  display:flex;
  flex-direction:column;
  gap:20px;
  min-width:0;
}
.qv__brandline{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.qv__lead{
  font-size:14px;
  line-height:1.5;
  font-weight:500;
  color:#0f1115;
  margin:0;
}

/* Plans list */
.qv__plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}
.qv-plan{
  position:relative;
  border:1px solid #D7DBE2;
  border-radius:14px;
  background:#fff;
  padding:16px;
  box-shadow:0 10px 30px rgba(16,24,40,.06);
}
.qv-plan--highlight{
  border-color:#0f1115;
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  background:linear-gradient(#fff,#f8f9fb);
}
.qv-plan__badge{
  position:absolute;
  top:12px;
  right:12px;
  background:#0f1115;
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1;
  border-radius:8px;
  padding:4px 6px;
}
.qv-plan__head{
  margin-bottom:10px;
}
.qv-plan__title{
  margin:0 0 4px;
  font-size:14px;
  font-weight:800;
  color:#0f1115;
  line-height:1.2;
}
.qv-plan__price{
  display:flex;
  flex-direction:column;
}
.qv-plan__main{
  font-size:20px;
  font-weight:800;
  line-height:1.2;
  color:#0f1115;
}
.qv-plan__note{
  font-size:12px;
  font-weight:600;
  color:#5a6272;
}
.qv-plan__feat{
  margin:0 0 12px;
  padding-left:18px;
  font-size:13px;
  line-height:1.4;
  color:#0f1115;
  font-weight:500;
}
.qv-plan__eta{
  font-size:12px;
  font-weight:700;
  color:#0f1115;
  background:#F4F6FB;
  border:1px solid #E4E8F1;
  border-radius:8px;
  padding:6px 8px;
  margin:0 0 12px;
}
.qv-plan__cta{
  width:100%;
  border-radius:12px;
  background:#fff;
  border:1px solid #0f1115;
  color:#0f1115;
  font-weight:800;
  padding:12px 14px;
  cursor:pointer;
}
.qv-plan__cta--primary{
  background:#0f1115;
  color:#fff;
}
.qv-plan__cta--ghost{
  background:#F9FAFC;
  border:1px solid #D7DBE2;
  color:#0f1115;
  font-weight:700;
}

/* Right side preview phone */
.qv__preview-skinny{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}
.qv__preview-top{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}
.qv__preview-label{
  font-size:12px;
  font-weight:700;
  color:#0f1115;
}
.qv__preview-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.qv__mini-btn{
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  padding:6px 8px;
  border-radius:10px;
  border:1px solid #D7DBE2;
  background:#fff;
  cursor:pointer;
}
.qv__mini-btn--danger{
  border-color:#D7DBE2;
  background:#FCE8E8;
  color:#7a1a1a;
  font-weight:800;
}

.qv__phoneframe{
  position:relative;
  width:240px;
  max-width:100%;
  background:#000;
  border-radius:28px;
  border:2px solid #1a1a1a;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  overflow:hidden;
}
.qv__phone-notch{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  height:24px;
  background:#000;
  border-bottom-left-radius:14px;
  border-bottom-right-radius:14px;
  z-index:3;
}
.qv__frame-mobile{
  position:relative;
  z-index:2;
  border:0;
  width:100%;
  height:480px;
  background:#fff;
}
.qv__skeleton{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:700;
  font-size:12px;
  background:repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.07) 0px,
    rgba(255,255,255,.07) 10px,
    rgba(15,17,21,.9) 10px,
    rgba(15,17,21,.9) 20px
  );
}

.pricing{padding:clamp(56px,8vw,100px) 20px;background:var(--bg);color:var(--ink)}
    .pr-head{max-width:900px;margin:0 auto 28px;text-align:center}
    .pr-head h2{margin:0 0 6px;font-size:clamp(28px,5vw,48px);font-weight:900;letter-spacing:-.02em}
    .pr-head p{margin:0;color:var(--muted)}
    .pr-grid{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr));gap:22px;max-width:1100px;margin:26px auto 0}
    .plan{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
      border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden;isolation:isolate;
      transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease}
    .plan:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:#D6DBE6}

    .plan__aura{
      position:absolute;inset:-28% -18% -18% -18%;
      pointer-events:none;z-index:0;opacity:.42;
      background:
        radial-gradient(220px 180px at 18% 22%, rgba(20,24,40,.06), transparent 60%),
        radial-gradient(280px 200px at 82% 76%, rgba(20,24,40,.05), transparent 64%),
        radial-gradient(180px 240px at 58% 30%, rgba(20,24,40,.045), transparent 62%);
      background-repeat:no-repeat;
      background-size:140% 140%,150% 150%,160% 160%;
      background-position:0% 0%,100% 100%,30% 70%;
      filter:blur(26px) saturate(2);
      animation:auraDrift 14s ease-in-out infinite alternate;
      transition:opacity .35s ease,filter .35s ease;
    }
    .plan:hover .plan__aura{opacity:.55;filter:blur(28px) saturate(1.04)}
    .plan--popular .plan__aura{opacity:.5}

    @keyframes auraDrift{
      0%{background-position:0% 0%,100% 100%,30% 70%;transform:translate3d(0,0,0) scale(1)}
      50%{background-position:8% 12%,92% 84%,36% 64%;transform:translate3d(0,-1%,0) scale(1.01)}
      100%{background-position:12% 22%,88% 78%,42% 58%;transform:translate3d(1%,-2%,0) scale(1.015)}
    }

    .plan__head{position:relative;z-index:1;padding:22px 22px 10px}
    .plan__title{margin:0 0 2px;font-size:22px;line-height:1;font-weight:900}
    .plan__tagline{margin:6px 0 12px;color:var(--muted)}
    .plan__price{display:flex;align-items:flex-end;gap:6px}
    .plan__currency{font-weight:800}
    .plan__amount{font-size:42px;line-height:1;font-weight:900;letter-spacing:-.02em}
    .plan__amount--ask{font-size:42px;font-weight:900;letter-spacing:-.02em}
    .plan__period{color:var(--muted);font-weight:700}

    .plan__ribbon{position:absolute;top:14px;right:-42px;transform:rotate(35deg);background:#111;color:#fff;
      font-weight:900;font-size:12px;padding:6px 48px;border-radius:8px;z-index:2;letter-spacing:.02em;
      box-shadow:0 8px 20px rgba(0,0,0,.25)}
    .plan--popular{border-color:#111}
    .plan--popular .plan__amount{
      background:linear-gradient(90deg,#111,#2d3441);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    .plan__feat{z-index:1;position:relative;margin:8px 22px 16px;list-style:none;padding:0}
    .plan__feat li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px dashed #E8ECF4;min-height:38px}
    .plan__feat li:first-child{border-top:none}

    .plan__feat li[data-has="true"]{color:var(--ink);font-weight:700}
    .plan__feat li[data-has="true"]::before{
      content:"";width:18px;height:18px;border-radius:4px;background:#0f1115;display:inline-block;
      -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="%23fff" d="M9.2 16.2 4.8 11.8 6.2 10.3 9.2 13.3 17.8 4.7 19.3 6.1z"/></svg>') center/14px 14px no-repeat;
      mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="white" d="M9.2 16.2 4.8 11.8 6.2 10.3 9.2 13.3 17.8 4.7 19.3 6.1z"/></svg>') center/14px 14px no-repeat;
    }

    .plan__feat li[data-has="false"]{color:#A3AABC;position:relative;font-size:16px}
    .plan__feat li[data-has="false"]::before{
      content:"—";display:inline-block;width:18px;text-align:center;color:#B4BAC6;
      font-weight:900;letter-spacing:.08em;
    }
    .plan__feat li[data-has="false"] .sr-only{
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }

    .btn--primary{background:#111;color:#fff;border-color:#111;font-weight:800;text-decoration:none}
    .btn--primary:hover{background:#000;transform:translateY(-1px);box-shadow:0 12px 22px rgba(16,24,40,.18)}
    .btn--full{width:calc(100% - 44px);margin:0 22px 22px}

    @media (max-width:980px){
      .pr-grid{grid-template-columns:1fr;max-width:640px}
      .plan__ribbon{right:-28px}
    }

    .no-scroll{overflow:hidden!important}


    


/* ====== PRODUCT HERO LAYOUT ====== */
:root{
  --ink:#0f1115;
  --muted:#5a6272;
  --line:#E4E8F1;
  --card-bg:#fff;
  --radius-xl:18px;
  --radius-md:12px;
  --shadow-card:0 24px 60px rgba(16,24,40,.08),0 8px 20px rgba(16,24,40,.06);
  --shadow-hover:0 32px 70px rgba(16,24,40,.12),0 12px 28px rgba(16,24,40,.10);

  /* legacy gradient vars you had */
  --assist-grad:radial-gradient(circle at 20% 20%,rgba(82,91,255,.6)0%,rgba(0,0,0,0)60%), radial-gradient(circle at 80% 80%,rgba(0,0,0,.6)0%,rgba(0,0,0,0)60%),linear-gradient(100deg,#1b1f2a 0%,#0f1115 80%);
  --assist-accent:#4d5dff;

  /* template surface base tone (kept for reference, not used directly now) */
  --template-surface:
    radial-gradient(circle at 80% 90%,rgba(162,15,22,.08)0%,rgba(0,0,0,0)60%),
    radial-gradient(circle at 10% 10%,rgba(0,0,0,.03)0%,rgba(0,0,0,0)60%),
    #ffffff;
  --template-border:rgba(162,15,22,.22);
  --template-grad:linear-gradient(100deg,#2a1b1b 0%,#0f0f0f 80%);
}

.product-shell{
  max-width:1440px;
  margin:calc(var(--hdr-h,68px) + 24px) auto 48px;
  padding:0 24px;
  color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Inter","SF Pro Display",Roboto,"Helvetica Neue",sans-serif;
}

.product-hero{
  display:grid;
  grid-template-columns:minmax(400px,0.55fr) minmax(0,0.45fr);
  gap:24px;
}

@media (max-width:960px){
  .product-hero{
    grid-template-columns:1fr;
  }
}

/* ===== LEFT PREVIEW CARD ===== */
.preview-card{
  background:var(--card-bg);
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:580px; /* you wanted this taller hero feel */
}

.preview-media{
  position:relative;
  background:#f9fafc;
  border-bottom:1px solid var(--line);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  min-height:320px; /* extended from 220px */
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:16px;
}

.preview-media img{
  width:auto;
  min-height:300px;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 18px 40px rgba(0,0,0,.16),0 6px 18px rgba(0,0,0,.08);
}

.preview-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:16px;
  border-bottom:1px solid var(--line);
}

.tag-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#F5F7FB;
  border:1px solid #E1E6F0;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  color:#2a2f3a;
  padding:8px 12px;
}

/* ACTION BUTTONS ROW, SIDE BY SIDE */
.preview-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:16px;
}

.preview-btn{
  flex:1 1 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-width:0;
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:#fff;
  font-size:15px;
  font-weight:700;
  line-height:1.2;
  padding:14px 16px;
  text-decoration:none;
  color:var(--ink);
  transition:box-shadow .18s cubic-bezier(.2,.7,.2,1),
             transform .18s cubic-bezier(.2,.7,.2,1),
             background .18s;
}
.preview-btn:hover{
  box-shadow:var(--shadow-hover);
  background:#fff;
  transform:translateY(-1px);
}
.preview-btn span{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex-wrap:wrap;
}
.preview-btn .arrow{
  font-weight:600;
  font-size:14px;
  opacity:.7;
}

/* ===== RIGHT SIDE HEADER (TITLE/STARS/TEXT) ===== */

/* header block on the right */
.prod-head{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

/* first line: title + stars inline */
.prod-head-top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  row-gap:8px;
  column-gap:16px;
}

/* product title */
.prod-title{
  margin:0;
  font-size:clamp(24px,1vw+20px,28px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink);
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:10px;
}

/* stars inline next to title */
.prod-stars-inline{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:700;
  line-height:1;
}
.prod-stars-inline .stars{
  background:linear-gradient(90deg,#fae27a 0%,#ffb500 100%);
  -webkit-background-clip:text;
  color:transparent;
  font-size:14px;
  font-weight:700;
  line-height:1;
}

/* trust/credibility note */
.prod-trust-note{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  line-height:1.4;
  max-width:720px;
}

/* tagline + small description below */
.prod-tagline{
  margin:0;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  color:#111;
}
.prod-desc{
  margin:0;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  color:var(--muted);
  max-width:720px;
}

/* ===== PLAN CARDS WRAPPER (RIGHT SIDE OFFERS) ===== */
.plan-row{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:700px){
  .plan-row{
    grid-template-columns:1fr;
  }
}

.plan-card{
  position:relative;
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  flex-direction:column;
  min-height:500px; /* keep your height */
}

/* CARD THEMES (SOFT PASTEL STYLING) */

/* Template card (149 €) - soft red */
.plan-card--template{
  background:
    radial-gradient(circle at 80% 90%, rgba(255,80,80,0.07) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(circle at 10% 10%, rgba(255,180,180,0.05) 0%, rgba(0,0,0,0) 60%),
    #fff;
  border:1px solid rgba(200,40,40,.3);
  color:#111;
  box-shadow:var(--shadow-card);
}

/* Assist card (890 €) - soft blue */
.plan-card--assist{
  background:
    radial-gradient(circle at 80% 90%, rgba(70,110,255,0.07) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(circle at 10% 10%, rgba(180,200,255,0.05) 0%, rgba(0,0,0,0) 60%),
    #fff;
  border:1px solid rgba(60,80,200,.3);
  color:#111;
  box-shadow:var(--shadow-card);
}

/* card inner content */
.plan-inner{
  padding:16px 16px 96px; /* leaves space above CTA bar */
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* topline row inside card: left info vs price */
.plan-topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:8px;
}

.plan-left h3{
  margin:0;
  font-size:15px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
  color:inherit;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.plan-left .plan-note{
  margin:4px 0 0;
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  color:var(--muted);
}

/* override: assist card was previously forcing white text, kill that */
.plan-card--assist .plan-left .plan-note{
  color:var(--muted);
}

.plan-price{
  text-align:right;
}
.plan-price .amt{
  font-size:30px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  color:inherit;
}
.plan-price .sub{
  display:block;
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  color:var(--muted);
}
/* kill previous white subtext on assist */
.plan-card--assist .plan-price .sub{
  color:var(--muted);
}

/* feature bullets */
.plan-bullets{
  margin:4px 0 0;
  padding:0;
  list-style:none;
  font-size:13px;
  font-weight:600;
  line-height:1.45;
}

.plan-bullets li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:#111;
  padding:4px 0;
  border-top:1px dashed var(--line);
}
.plan-bullets li:first-child{
  border-top:none;
}

/* assist card also now dark text, and light borders */
.plan-card--assist .plan-bullets li{
  border-top:1px dashed var(--line);
  color:#111;
}

.plan-bullets .ic{
  flex-shrink:0;
  font-size:14px;
  line-height:1.2;
  font-weight:700;
  color:#111;
}
.plan-card--assist .plan-bullets .ic{
  color:#111;
}
.plan-bullets .dim{
  color:#A3AABC;
  font-weight:500;
}
.plan-card--assist .plan-bullets .dim{
  color:#A3AABC;
  font-weight:500;
}

/* AI chip badge in Assist headline */
.ai-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(70,110,255,.12);
  border:1px solid rgba(60,80,200,.4);
  color:#001a66;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
  border-radius:999px;
  padding:4px 8px;
}

.ai-chip .ai-icon{
  width:14px;
  height:14px;
  border-radius:4px;
  background:radial-gradient(circle at 20% 20%,#ff4d4d 0%,rgba(0,0,0,0)60%),
              radial-gradient(circle at 80% 80%,#00c96b 0%,rgba(0,0,0,0)60%),
              radial-gradient(circle at 50% 50%,#4d5dff 0%,rgba(0,0,0,0)60%);
}

/* ===== CTA BAR AT BOTTOM OF CARD ===== */
.plan-cta-bar {
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  display:flex;
  flex-wrap:nowrap;
  align-items:stretch; /* ensures equal height between buy + cart */
  gap:8px;

  padding:16px 20px 20px;
  background:linear-gradient(
    to top,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,0) 80%
  );
}

/* assist card is light now, so same light gradient */
.plan-card--assist .plan-cta-bar{
  background:linear-gradient(
    to top,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,0) 80%
  );
}

/* ===== PRIMARY CTA BUTTON (BUY NOW) ===== */
.btn-primary-full{
  flex:1 1 auto;
  border-radius:var(--radius-md);
  cursor:pointer;
  text-align:left;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;

  min-height:56px;
  padding:12px 14px;

  font-size:15px;
  font-weight:800;
  line-height:1.3;

  border:1px solid transparent;
  color:#111;
  background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.07);
  transition:box-shadow .18s,transform .18s;
}

/* themed button: Template (soft red) */
.plan-card--template .btn-primary-full{
  border:1px solid rgba(200,40,40,.4);
  background:rgba(255,80,80,0.12);
  color:#7a0000;
  box-shadow:0 16px 40px rgba(200,40,40,.18);
}
.plan-card--template .btn-primary-full:hover{
  background:rgba(255,80,80,0.16);
  box-shadow:0 22px 50px rgba(200,40,40,.24);
  transform:translateY(-1px);
}

/* themed button: Assist (soft blue) */
.plan-card--assist .btn-primary-full{
  border:1px solid rgba(60,80,200,.4);
  background:rgba(70,110,255,0.12);
  color:#001a66;
  box-shadow:0 16px 40px rgba(60,80,200,.18);
}
.plan-card--assist .btn-primary-full:hover{
  background:rgba(70,110,255,0.16);
  box-shadow:0 22px 50px rgba(60,80,200,.24);
  transform:translateY(-1px);
}

/* text lines inside CTA buy button */
.btn-primary-full .topline{
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  color:inherit;
}
.btn-primary-full .subline,
.btn-primary-full .sub{
  font-size:12px;
  font-weight:600;
  line-height:1.4;
  opacity:.8;
  margin-top:2px;
  color:inherit;
}

/* ===== CART ICON BUTTON (ICON ONLY) ===== */
.btn-icon-cart{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:56px;
  min-height:56px;
  padding:0;

  border-radius:var(--radius-md);
  cursor:pointer;
  margin:0;

  background:#fff;
  border:1px solid transparent;
  box-shadow:0 16px 40px rgba(0,0,0,.07);
  color:#000;
  transition:box-shadow .18s,transform .18s;
}

/* Template cart button = red accent */
.plan-card--template .btn-icon-cart{
  border:1px solid rgba(200,40,40,.4);
  color:#7a0000;
  box-shadow:0 16px 40px rgba(200,40,40,.14);
}
.plan-card--template .btn-icon-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 50px rgba(200,40,40,.22);
}

/* Assist cart button = blue accent */
.plan-card--assist .btn-icon-cart{
  border:1px solid rgba(60,80,200,.4);
  color:#001a66;
  box-shadow:0 16px 40px rgba(60,80,200,.14);
}
.plan-card--assist .btn-icon-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 22px 50px rgba(60,80,200,.22);
}

.btn-icon-cart svg{
  width:22px;
  height:22px;
  stroke-width:1.8;
  color:currentColor;
}


/* ===== CUSTOM / MAßARBEIT BUTTON ROW UNDER THE CARDS ===== */

.custom-row{
  margin-top:16px;
  text-align:center;
}

.custom-btn{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 10px;

  border-radius:var(--radius-md);
  border:1px solid #0f1115;
  background:#fff;

  font-size:14px;
  font-weight:800;
  line-height:1.2;

  padding:12px 16px;
  text-decoration:none;
  color:#0f1115;

  box-shadow:0 18px 40px rgba(0,0,0,.07);
  transition:box-shadow .18s,transform .18s,background .18s;
}

.custom-btn:hover{
  background:#0f1115;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 28px 60px rgba(0,0,0,.3);
}

.custom-btn .sub{
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  opacity:.7;
}

/* ===== BENEFIT / TRUST / BADGE SECTIONS BELOW HERO ===== */

.benefit-band{
  background:#FBFCFE; /* var(--soft-bg) */
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-top:40px;
}

.benefit-inner{
  max-width:1440px;
  margin:0 auto;
  padding:28px 24px;
  display:grid;
  grid-template-columns:1fr min-content 1fr;
  gap:20px;
}

@media (max-width:800px){
  .benefit-inner{
    grid-template-columns:1fr;
  }
  .benefit-divider{display:none;}
}

.benefit-col h4{
  margin:0 0 8px;
  font-size:15px;
  font-weight:800;
  color:var(--ink);
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:8px;
}

.pill-mini{
  font-size:11px;
  font-weight:700;
  line-height:1.2;
  border-radius:999px;
  padding:4px 8px;
  background:#111;
  color:#fff;
  border:1px solid #000;
}

.benefit-col ul{
  margin:0;
  padding:0;
  list-style:none;
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  color:var(--ink);
}

.benefit-col li{
  display:flex;
  gap:8px;
  padding:4px 0;
  color:var(--ink);
}

.benefit-col li .tick{
  color:#0f1115;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
}

.benefit-col li .copy{
  flex:1;
}

.benefit-divider{
  width:1px;
  background:linear-gradient(#DDE1EC 0%,#CBD2E2 50%,#DDE1EC 100%);
}

/* ===== TRUST / GUARANTEE ROW (STARS + BADGES) ===== */

.trust-row{
  max-width:1440px;
  margin:24px auto 0;
  padding:0 24px 48px;
}

.trust-topline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
  margin-bottom:16px;
}

.trust-top-stars{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  color:#0f1115;
}

.trust-top-stars .stars{
  background:linear-gradient(90deg,#fae27a 0%,#ffb500 100%);
  -webkit-background-clip:text;
  color:transparent;
}

.trust-topnote{
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  color:var(--muted);
}

/* guarantee / trust badges pills */
.trust-badges{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:16px;
}

.trust-pill{
  border-radius:var(--radius-md);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.05);
  padding:16px;
  text-align:center;
  font-size:clamp(13px,0.2vw+12px,14px);
  font-weight:700;
  line-height:1.4;
  color:#0f1115;
}


/* === COMPACT CTA BUTTONS IN PLAN CARDS === */

/* shared base for both buttons */
.btn-primary-full,
.btn-icon-cart {
  min-height:44px;          /* was 56px -> now tighter */
  padding:10px 12px;        /* was 12px 14px */
  border-radius:10px;       /* a bit tighter than var(--radius-md)=12px, optional */
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  transition:box-shadow .18s, transform .18s;
  align-items:flex-start;
}

/* make sure layout inside cta bar still stretches them equally */
.plan-cta-bar{
  align-items:stretch;      /* keep equal height between both buttons */
  gap:8px;
  padding:16px 20px 20px;
}

/* MAIN CTA BUTTON (left) */
.btn-primary-full{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:left;
  border:1px solid transparent;
  background:#fff;
  color:#111;
  font-size:14px;           /* was 15px */
  font-weight:800;
  line-height:1.3;
}

/* template theme */
.plan-card--template .btn-primary-full{
  border:1px solid rgba(200,40,40,.4);
  background:rgba(255,80,80,0.12);
  color:#7a0000;
  box-shadow:0 12px 28px rgba(200,40,40,.15);
}
.plan-card--template .btn-primary-full:hover{
  background:rgba(255,80,80,0.16);
  box-shadow:0 18px 40px rgba(200,40,40,.22);
  transform:translateY(-1px);
}

/* assist theme */
.plan-card--assist .btn-primary-full{
  border:1px solid rgba(60,80,200,.4);
  background:rgba(70,110,255,0.12);
  color:#001a66;
  box-shadow:0 12px 28px rgba(60,80,200,.15);
}
.plan-card--assist .btn-primary-full:hover{
  background:rgba(70,110,255,0.16);
  box-shadow:0 18px 40px rgba(60,80,200,.22);
  transform:translateY(-1px);
}

/* text inside main CTA button, now tighter */
.btn-primary-full .topline{
  font-size:14px;          /* was 15px */
  font-weight:800;
  line-height:1.3;
  color:inherit;
  margin-bottom:2px;
}
.btn-primary-full .subline,
.btn-primary-full .sub{
  font-size:11px;          /* was 12px */
  font-weight:600;
  line-height:1.3;
  opacity:.8;
  color:inherit;
  margin:0;
}

/* CART BUTTON (right) */
.btn-icon-cart{
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;

  min-width:44px;          /* was 56px */
  padding:0 10px;
  border:1px solid transparent;
  background:#fff;
  color:#000;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}

/* template theme for cart */
.plan-card--template .btn-icon-cart{
  border:1px solid rgba(200,40,40,.4);
  color:#7a0000;
  box-shadow:0 12px 28px rgba(200,40,40,.12);
}
.plan-card--template .btn-icon-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(200,40,40,.22);
}

/* assist theme for cart */
.plan-card--assist .btn-icon-cart{
  border:1px solid rgba(60,80,200,.4);
  color:#001a66;
  box-shadow:0 12px 28px rgba(60,80,200,.12);
}
.plan-card--assist .btn-icon-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(60,80,200,.22);
}

/* cart icon SVG stays centered, inherits color */
.btn-icon-cart svg{
  width:20px;
  height:20px;
  stroke-width:1.8;
  color:currentColor;
}


/* FINAL HARD OVERRIDE - COMPACT CTA ROW, LOCKED HEIGHT, PERFECT ALIGNMENT */

.plan-cta-bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  display:flex;
  flex-wrap:nowrap;
  align-items:flex-end;      /* align bottoms on same baseline */
  gap:8px;

  padding:16px 20px 20px;
  background:linear-gradient(
    to top,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,0) 80%
  );
}

.plan-card--assist .plan-cta-bar{
  background:linear-gradient(
    to top,
    rgba(255,255,255,.9) 0%,
    rgba(255,255,255,0) 80%
  );
}

/* SHARED HEIGHT TARGET for BOTH buttons */
.plan-cta-bar .btn-primary-full,
.plan-cta-bar .btn-icon-cart{
  height:42px;          /* <- lock both to 42px */
  min-height:42px;
  max-height:42px;
  border-radius:10px;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:6px 10px;     /* super tight vertical padding */
  line-height:1.2;
  overflow:hidden;      /* IMPORTANT: prevents the buy button from forcing more height */
}

/* MAIN BUY BUTTON */
.btn-primary-full{
  flex:1 1 auto;
  border:1px solid transparent;
  background:#fff;
  color:#111;
  text-align:left;
  font-weight:800;
  font-size:13px;       /* down from 14 */
  line-height:1.2;
  padding:6px 10px;     /* re-apply to beat older rules */
}

/* TEMPLATE THEME */
.plan-card--template .btn-primary-full{
  border:1px solid rgba(200,40,40,.4);
  background:rgba(255,80,80,0.12);
  color:#7a0000;
  box-shadow:0 10px 20px rgba(200,40,40,.15);
}
.plan-card--template .btn-primary-full:hover{
  background:rgba(255,80,80,0.16);
  box-shadow:0 16px 28px rgba(200,40,40,.22);
  transform:translateY(-1px);
}

/* ASSIST THEME */
.plan-card--assist .btn-primary-full{
  border:1px solid rgba(60,80,200,.4);
  background:rgba(70,110,255,0.12);
  color:#001a66;
  box-shadow:0 10px 20px rgba(60,80,200,.15);
}
.plan-card--assist .btn-primary-full:hover{
  background:rgba(70,110,255,0.16);
  box-shadow:0 16px 28px rgba(60,80,200,.22);
  transform:translateY(-1px);
}

/* TEXT INSIDE BUY BUTTON */
.btn-primary-full .topline{
  font-size:13px;
  font-weight:800;
  line-height:1.2;
  margin:0 0 2px 0;
  color:inherit;
  white-space:nowrap;          /* keep first line tight */
}

.btn-primary-full .sub,
.btn-primary-full .subline{
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  color:inherit;
  opacity:.8;
  margin:0;
  white-space:nowrap;          /* stop it from wrapping a 3rd line */
}

/* CART BUTTON */
.btn-icon-cart{
  flex:0 0 auto;
  border:1px solid transparent;
  background:#fff;
  color:#000;
  padding:0 12px;
  display:flex;
  flex-direction:row;          /* icon centered horizontally */
  justify-content:center;
  align-items:center;
  line-height:1;
  font-size:14px;
  font-weight:700;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
}

/* TEMPLATE CART THEME */
.plan-card--template .btn-icon-cart{
  border:1px solid rgba(200,40,40,.4);
  color:#7a0000;
  box-shadow:0 10px 20px rgba(200,40,40,.12);
}
.plan-card--template .btn-icon-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(200,40,40,.22);
}

/* ASSIST CART THEME */
.plan-card--assist .btn-icon-cart{
  border:1px solid rgba(60,80,200,.4);
  color:#001a66;
  box-shadow:0 10px 20px rgba(60,80,200,.12);
}
.plan-card--assist .btn-icon-cart:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 28px rgba(60,80,200,.22);
}

/* CART ICON SIZE */
.btn-icon-cart svg{
  width:18px;
  height:18px;
  stroke-width:1.8;
  color:currentColor;
}



/* top row wrapper: title/trust text on left, rating chip on right */
.prod-head-top{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  row-gap:12px;
  column-gap:16px;
}

/* left block (title + small trust line) */
.prod-head-left{
  display:flex;
  flex-direction:column;
  min-width:200px;
}

.prod-title{
  margin:0;
  font-size:clamp(24px,1vw+20px,28px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.03em;
  color:#0f1115;
}

.prod-trust-note{
  margin:4px 0 0;
  font-size:12px;
  font-weight:600;
  color:#5a6272;
  line-height:1.4;
}

/* rating chip on the right */
.rating-chip{
  flex-shrink:0;
  display:inline-flex;
  flex-direction:column;
  min-width:max-content;

  background:#fff;
  border:1px solid #E4E8F1;
  border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.06);

  padding:8px 12px 9px;
  line-height:1.2;
}

.rating-stars{
  background:linear-gradient(90deg,#fae27a 0%,#ffb500 100%);
  -webkit-background-clip:text;
  color:transparent;

  font-size:14px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.1;
}

.rating-txt{
  font-size:11px;
  font-weight:600;
  color:#5a6272;
  line-height:1.3;
  white-space:nowrap;
}

@media (max-width:520px){
  .rating-chip{
    width:100%;
  }
  .rating-txt{
    white-space:normal;
  }
}