:root {
  --color-canvas-mist: #f2f4f5;
  --color-pure-white: #ffffff;
  --color-ink-black: #000000;
  --color-faint-border: #ebebeb;
  --color-muted-gray: #787574;
  --color-cool-stone: #cccccc;
  --color-warm-fog: #acb0aa;
  --color-shop-violet: #c93649;
  --color-violet-wash: #f6dce0;
  --color-slate-ink: #332f2d;
  --shadow-sm: rgba(0, 0, 0, 0.06) 0px 2px 8px 0px;
  --shadow-card: rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.1) 0px 2px 4px -2px;
  --shadow-lg: rgba(0,0,0,0.12) 0px 4px 24px 0px;
  --shadow-violet: rgba(201,54,73,0.28) 0px 4px 24px 0px;
  --radius-cards: 28px;
  --radius-image: 20px;
  --radius-full: 9999px;
  --font-gt-standard: 'GT Standard', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-canvas-mist);
  color: var(--color-ink-black);
  font-family: var(--font-gt-standard);
  font-size: 16px;
  line-height: 1.33;
  letter-spacing: -0.031em;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 64px;
  background: var(--color-pure-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16px 8px;
  z-index: 30;
}
.brand-mark {
  width: 40px; height: 40px;
  border-radius: 9999px;
  background: var(--color-shop-violet);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 400;
  box-shadow: var(--shadow-violet);
}
.sidebar nav { display: flex; flex-direction: column; gap: 12px; align-items: center; margin: auto 0; }
.nav-item {
  width: 48px; height: 48px;
  border: 0;
  background: transparent;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: var(--color-ink-black);
  position: relative;
}
.nav-item.active, .nav-item:hover { background: var(--color-canvas-mist); }
.cart-nav b {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 18px; height: 18px;
  border-radius: 9999px;
  background: var(--color-shop-violet);
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
  font-weight: 400;
}
.page-shell { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px 88px; }
.hero {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  align-items: center;
  gap: 64px;
  padding: 80px 0 64px;
}
.eyebrow { color: var(--color-muted-gray); font-size: 12px; margin: 0 0 12px; letter-spacing: -0.017em; }
h1 { font-size: clamp(42px, 7vw, 80px); line-height: .88; letter-spacing: -0.07em; margin: 0 0 24px; font-weight: 400; max-width: 740px; }
.hero-text { max-width: 620px; color: var(--color-muted-gray); font-size: 18px; margin: 0 0 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.trust-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.trust-row span { background:#fff; border:1px solid var(--color-faint-border); border-radius:9999px; padding:8px 12px; color:var(--color-muted-gray); box-shadow:var(--shadow-sm); font-size:12px; }
.retail-problem { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:24px; align-items:start; margin:0 0 64px; }
.retail-problem h2 { margin:0; font-size:32px; line-height:1.05; letter-spacing:-0.055em; font-weight:400; }
.problem-list { display:grid; gap:12px; }
.problem-list article { background:#fff; border-radius:28px; padding:20px; box-shadow:var(--shadow-card); }
.problem-list strong { display:block; font-weight:400; font-size:18px; letter-spacing:-0.04em; margin-bottom:6px; }
.problem-list span { display:block; color:var(--color-muted-gray); }
.how-section { margin-top:80px; }
.section-header.stacked { display:block; }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.how-grid article { background:#fff; border-radius:28px; box-shadow:var(--shadow-card); padding:28px; }
.how-grid span { width:36px; height:36px; display:grid; place-items:center; border-radius:9999px; background:var(--color-shop-violet); color:#fff; box-shadow:var(--shadow-violet); }
.how-grid h3 { font-weight:400; font-size:20px; letter-spacing:-0.05em; margin:18px 0 8px; }
.how-grid p { color:var(--color-muted-gray); margin:0; }
.retail-tip { color:var(--color-muted-gray); background:var(--color-canvas-mist); border-radius:18px; padding:12px; margin:0 0 14px; font-size:14px; }
.btn {
  border: 1px solid var(--color-faint-border);
  background: var(--color-pure-white);
  color: var(--color-ink-black);
  border-radius: var(--radius-full);
  padding: 14px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  min-height: 48px;
}
.btn.primary { background: var(--color-shop-violet); color: #fff; border-color: transparent; box-shadow: var(--shadow-violet); }
.btn.ghost span { background: var(--color-canvas-mist); padding: 2px 8px; border-radius: 9999px; }
.hero-constellation { position: relative; height: 480px; }
.floating-card {
  position: absolute;
  width: 220px;
  background: var(--color-pure-white);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-card);
  padding: 0 0 16px;
  overflow: hidden;
}
.floating-card strong { display:block; padding: 12px 16px 0; font-size: 14px; font-weight: 400; }
.floating-card span { display:block; padding: 4px 16px 0; color: var(--color-muted-gray); font-size: 11px; letter-spacing: -0.058em; }
.fake-product { aspect-ratio: 1/1; margin: 0; border-radius: 20px; background: #fff; }
.fake-product.one { background: radial-gradient(circle at 45% 35%, #fff 0 18%, #dfe6ee 19% 24%, #fff 25% 33%, #b6c7d6 34% 42%, #fff 43% 100%); }
.fake-product.two { background: radial-gradient(circle at 58% 45%, #ffffff 0 20%, #dcd7cf 21% 31%, #332f2d 32% 43%, #fff 44% 100%); }
.fake-product.three { background: radial-gradient(circle at 50% 50%, #c93649 0 16%, #ffffff 17% 26%, #cccccc 27% 35%, #fff 36% 100%); }
.card-a { left: 40px; top: 44px; transform: rotate(-7deg); }
.card-b { right: 24px; top: 132px; transform: rotate(5deg); }
.card-c { left: 118px; bottom: 28px; transform: rotate(2deg); }
.search-band { padding: 0 0 40px; }
.search-wrap {
  max-width: 760px;
  margin: 0 auto 18px;
  border-radius: var(--radius-full);
  background: var(--color-pure-white);
  border: 1px solid rgba(5,41,77,.1);
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 4px 4px 4px 20px;
  box-shadow: var(--shadow-sm);
}
.search-wrap input { flex: 1; border: 0; outline: 0; background: transparent; color: #000; font-size: 16px; min-width: 0; }
.search-wrap input::placeholder { color: var(--color-muted-gray); }
.search-wrap button {
  width: 56px; height: 56px;
  border-radius: 9999px;
  border: 0;
  color: white;
  background: var(--color-shop-violet);
  box-shadow: var(--shadow-violet);
  font-size: 24px;
}
.category-pills { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.category-pill {
  border-radius: 9999px;
  border: 1px solid var(--color-faint-border);
  background: var(--color-pure-white);
  box-shadow: var(--shadow-sm);
  padding: 6px 14px 6px 6px;
  display: flex; align-items: center; gap: 9px;
  min-height: 36px;
}
.category-pill i { width: 22px; height: 22px; border-radius: 9999px; display: grid; place-items: center; background: var(--color-canvas-mist); font-style: normal; font-size: 13px; }
.category-pill.active { color: var(--color-shop-violet); border-color: rgba(201,54,73,.28); }
.stats-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 64px; }
.stat-card { background: var(--color-pure-white); border-radius: var(--radius-cards); box-shadow: var(--shadow-card); padding: 24px; }
.stat-card strong { display:block; font-size: 32px; line-height: 1; letter-spacing: -0.05em; font-weight: 400; }
.stat-card span { display:block; color: var(--color-muted-gray); margin-top: 8px; }
.section-header { display:flex; justify-content:space-between; align-items:end; gap: 20px; margin-bottom: 24px; }
.section-header h2 { margin: 0; font-size: 28px; line-height: 1.1; letter-spacing: -0.05em; font-weight: 400; }
.section-header span { color: var(--color-muted-gray); font-size: 14px; }
.product-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.product-card {
  background: var(--color-pure-white);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
}
.product-media {
  aspect-ratio: 1/1;
  margin: 0;
  border: 0;
  padding: 0;
  border-radius: 20px;
  background: linear-gradient(145deg, #ffffff, #eef1f3);
  display:grid;
  place-items:center;
  overflow:hidden;
}
.product-media img { width:100%; height:100%; object-fit:contain; padding: 14px; }
.product-placeholder { width: 74%; height: 74%; border-radius: 38%; border: 20px solid #d9dee2; position: relative; display:grid; place-items:center; color:var(--color-muted-gray); font-size:12px; text-align:center; padding:10px; }
.product-placeholder:after { content:""; position:absolute; inset: 30%; border-radius:999px; background: var(--color-shop-violet); opacity:.16; }
.product-placeholder span { position:relative; z-index:1; max-width:90px; }
.product-info { padding: 14px 16px 16px; display:flex; flex-direction:column; gap: 10px; flex:1; }
.product-category { color: var(--color-muted-gray); font-size: 11px; }
.product-card h3 { font-size: 14px; line-height: 1.18; letter-spacing: -0.014em; font-weight: 400; margin:0; min-height: 50px; }
.product-meta { display:flex; flex-direction:column; gap: 4px; color: var(--color-muted-gray); font-size: 12px; }
.price-line { margin-top:auto; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.price { font-size: 20px; letter-spacing: -0.05em; }
.vat { color: var(--color-muted-gray); font-size: 11px; }
.card-actions { display:flex; gap: 8px; margin-top: 12px; }
.card-actions button { flex:1; min-height: 40px; border-radius:9999px; border:1px solid var(--color-faint-border); background:#fff; }
.card-actions .add { background: var(--color-shop-violet); color:#fff; border-color:transparent; box-shadow: var(--shadow-violet); }
.empty-state { background:#fff; border-radius:28px; padding:40px; text-align:center; box-shadow:var(--shadow-card); }
.seo-category-links { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr); gap:28px; align-items:start; margin:26px 0 12px; padding:28px; border:1px solid var(--color-faint-border); border-radius:28px; background:var(--color-surface); }
.seo-category-links h2 { margin:0 0 8px; font-size:28px; letter-spacing:-.03em; }
.seo-category-links p:not(.eyebrow) { margin:0; color:var(--color-muted-gray); }
.seo-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.seo-category-grid a { padding:14px 16px; border:1px solid var(--color-faint-border); border-radius:16px; background:var(--color-canvas-mist); color:var(--color-text); text-decoration:none; font-size:14px; }
.seo-category-grid a:hover { border-color:var(--color-shop-violet); color:var(--color-shop-violet); }
.benefits { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 80px; }
.benefits article { background:#fff; border-radius:28px; padding:28px; box-shadow:var(--shadow-card); }
.benefits span { color: var(--color-shop-violet); }
.benefits h3 { font-weight:400; font-size:20px; margin: 16px 0 8px; letter-spacing:-0.05em; }
.benefits p { color: var(--color-muted-gray); margin:0; }
.product-dialog { width: min(920px, calc(100vw - 32px)); border:0; border-radius:28px; padding:0; box-shadow: var(--shadow-lg); }
.product-dialog::backdrop { background: rgba(0,0,0,.24); backdrop-filter: blur(4px); }
.modal-close { border:0; background:#fff; width:40px; height:40px; border-radius:9999px; box-shadow:var(--shadow-sm); font-size:22px; }
.product-dialog .modal-close { position:absolute; top: 14px; right:14px; z-index:2; }
.modal-product { display:grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 24px; padding: 24px; }
.modal-product .product-media { border-radius:24px; }
.modal-product h2 { font-size:32px; line-height:1.05; letter-spacing:-0.055em; font-weight:400; margin: 0 48px 12px 0; }
.detail-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin:20px 0; }
.detail-list div { background:var(--color-canvas-mist); border-radius:18px; padding:12px; }
.detail-list span { display:block; color:var(--color-muted-gray); font-size:11px; }
.detail-list strong { font-weight:400; font-size:14px; }
.description { color: var(--color-muted-gray); max-height: 170px; overflow:auto; padding-right:8px; }
.cart-drawer { position:fixed; top:0; right:-440px; width:min(440px, 100vw); height:100vh; overflow-y:auto; background:#fff; z-index:50; transition:.25s ease; box-shadow: var(--shadow-lg); padding:24px 24px 32px; display:flex; flex-direction:column; gap:18px; }
.cart-drawer.open { right:0; }
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.18); opacity:0; pointer-events:none; z-index:40; transition:.2s; }
.overlay.open { opacity:1; pointer-events:auto; }
.drawer-head { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.drawer-head h2 { margin:0; font-size:28px; font-weight:400; letter-spacing:-0.05em; }
.cart-items { flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.cart-empty { color: var(--color-muted-gray); background:var(--color-canvas-mist); padding:18px; border-radius:20px; }
.cart-line { border:1px solid var(--color-faint-border); border-radius:20px; padding:12px; display:grid; gap:8px; }
.cart-line h4 { margin:0; font-weight:400; font-size:14px; }
.cart-line .row { display:flex; justify-content:space-between; gap:8px; color:var(--color-muted-gray); font-size:12px; }
.cart-line-actions { display:flex; align-items:center; gap:10px; }
.remove-button, .text-button { border:0; background:transparent; color:var(--color-muted-gray); padding:2px 0; font-size:12px; text-decoration:underline; }
.remove-button:hover, .text-button:hover { color:var(--color-shop-violet); }
.cart-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:24px; }
.cart-summary { color:var(--color-muted-gray); font-size:12px; }
.qty-controls { display:flex; gap:8px; align-items:center; }
.qty-controls button { width:30px; height:30px; border-radius:9999px; border:1px solid var(--color-faint-border); background:#fff; }
.lead-form { display:grid; gap:10px; border-top:1px solid var(--color-faint-border); padding-top:16px; }
.lead-form label { display:grid; gap:5px; font-size:12px; color:var(--color-muted-gray); }
.lead-form input, .lead-form textarea, .lead-form select { border:1px solid var(--color-faint-border); border-radius:18px; padding:10px 12px; outline:0; color:#000; background:#fff; }
.lead-form textarea { min-height:70px; resize:vertical; }
.lead-form .order-preview { min-height:150px; background:var(--color-canvas-mist); font-size:12px; line-height:1.4; }
.form-note { color: var(--color-muted-gray); font-size:11px; margin:0; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#000; color:#fff; padding:12px 18px; border-radius:9999px; z-index:80; box-shadow:var(--shadow-lg); }
@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; min-height:auto; gap:24px; }
  .hero-constellation { height:320px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stats-row, .benefits, .how-grid { grid-template-columns:1fr; }
  .retail-problem { grid-template-columns:1fr; }
  .retail-problem h2 { font-size:28px; }
  .seo-category-links { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .sidebar { display:none; }
  .page-shell { padding: 0 14px 56px; }
  .hero { padding-top:42px; }
  h1 { font-size: 48px; }
  .product-grid { grid-template-columns:1fr; }
  .modal-product { grid-template-columns:1fr; }
  .floating-card { width:170px; }
  .seo-category-links { padding:20px; border-radius:22px; }
  .seo-category-grid { grid-template-columns:1fr; }
}