/* ============ TOKENS ============ */
:root{
  --ink: #16171B;
  --gray-700: #34363E;
  --gray-600: #5B5E68;
  --gray-400: #9497A1;
  --gray-300: #D6D7DC;
  --gray-150: #ECECEF;
  --gray-100: #F5F5F7;
  --white: #FFFFFF;
  --orange: #b64d14;
  --orange-dark: #D9540E;
  --orange-tint: #FFEDE0;

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 28px;
  --wrap: 1180px;

  /* ===== Theme tokens (DARK = default) ===== */
  --page-bg: #0B0C0F;
  --dropdown-bg-item: #F5F5F7;
  --surface-bg: #1A1B20;
  --page-bg-alt: #c4c4c4;
  --personalizacja-bg: #1A1B20;
  --text-primary: #F3F3F5;
  --text-secondary: #A6A9B2;
  --text-tertiary: #75787F;
  --border-color: #2A2C33;
  --border-soft: #232429;
  --input-bg: #16171B;
  --header-bg: black;
  --footer-bg: black;
  --nav-dropdown-bg: white;
  --calc-bg: black;
  --slider: white;
}

/* ===== Theme tokens (LIGHT override) ===== */
:root[data-theme="light"]{
  --page-bg: #FFFFFF;
  --dropdown-bg-item: #F5F5F7;
  --page-bg-alt: #F5F5F7;
  --personalizacja-bg: #F5F5F7;
  --surface-bg: #FFFFFF;
  --surface-bg-alt: #F5F5F7;
  --text-primary: #16171B;
  --text-secondary: #5B5E68;
  --text-tertiary: #9497A1;
  --border-color: #D6D7DC;
  --border-soft: #ECECEF;
  --input-bg: #FFFFFF;
  --header-bg: black;
  --footer-bg: black;
  --calc-bg: rgb(213, 213, 213);
  --slider-bg: black;
}


:root[data-theme="light"] .tscart-btn{
    background:#ffffff;
    color:#000000;
    border-color:#d9d9d9;
}

:root[data-theme="light"] .tscart-btn svg{
    stroke:currentColor;
}

:root[data-theme="dark"] .tscart-btn{
    background:#fefefe;
    color:rgb(0, 0, 0);
    border-color:#d9d9d9;
}

:root[data-theme="dark"] .tscart-btn svg{
    stroke:currentColor;
}

:root[data-theme="dark"] #ideaSuccess h3 {
    color: white;
}

:root[data-theme="dark"] #ideaSuccess p {
    color: white;
}

:root[data-theme="light"] #ideaSuccess h3 {
    color: rgb(0, 0, 0);
}

:root[data-theme="light"] #ideaSuccess p {
    color: rgb(0, 0, 0);
}


*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease, color .25s ease;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;display:block;}
button, input, select, textarea{font-family:inherit;font-size:inherit;color:inherit;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 32px;
}

.text-orange{color:var(--orange);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange-dark);
  margin:0 0 14px;
}

.section-lead{
  max-width:520px;
  color:var(--text-secondary);
  font-size:1.05rem;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:var(--orange);
  color:var(--white);
}
.btn-primary:hover{background:var(--orange-dark);}
.btn-ghost{
  background:transparent;
  border-color:var(--border-color);
  color:var(--text-primary);
}
.btn-ghost:hover{border-color:var(--text-primary);}
.btn-small{padding:10px 20px;font-size:.85rem;}
.btn-large{padding:16px 34px;font-size:1rem;}

/* ============ HEADER ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
  transition:background-color .25s ease, border-color .25s ease;
}
.header-inner{
  position:relative;
  display:flex;
  align-self: center;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  height:90px;
}
.logo{display:flex;align-items:center;gap:10px;flex:0 1 auto;min-width:0;}
.logo-img{
  width:clamp(120px, 22vw, 230px);
  height:auto;
  max-height:64px;
  object-fit:contain;
  flex:0 1 auto;
}
.logo-mark{
  width:34px;height:34px;
  border-radius:10px;
  background:var(--ink);
  color:var(--orange);
  font-family:var(--font-mono);
  font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
}
.logo-text{font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.01em;color:var(--text-primary);}
.logo-text strong{font-weight:700;}

.main-nav{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  justify-content:center;
}
.main-nav a{
  font-size: 1rem;
  font-weight:500;
  color: white;
  transition:color .15s ease;
}
.main-nav a:hover{color:var(--orange);}

/* ---- Dropdown menu (Pomysł / Projekt / Personalizacja) ---- */
.nav-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px, 3vw, 36px);
  list-style:none;
  margin:0;
  padding:0;
  min-width:0;
  max-width:100%;
}
.nav-item{
  position:relative;
  /* niewidoczny "most" pod linkiem, żeby kursor nie tracił hovera zjeżdżając do dropdownu */
}
.nav-link{
  display:inline-block;
  padding:6px 2px;
  font-family:var(--font-mono);
  font-size: clamp(.72rem, 1.7vw, 1rem);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color: white;
  white-space:nowrap;
}
.nav-item:hover .nav-link,
.nav-item:focus-within .nav-link{
  color: var(--orange);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);

  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;

  padding: 5px;
  min-width: 200px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 180ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1);

  z-index: 100;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}


/* Dropdown links */
.nav-dropdown a {
  display: block;

  border-radius: 14px;
  padding: 10px 20px;

  color: var(--text-primary);
  text-decoration: none;

  font-family: 'Archivo', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;

  white-space: nowrap;

  transition:
    background 180ms cubic-bezier(0.4, 0, 0.2, 1),
    color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* Hover */
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: #c81e2c;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  border: 1.5px solid var(--border-color);
  background: var(--surface-bg);
  color: var(--text-primary);
}
.nav-toggle span{width:22px;height:2px;background:#ffffff;border-radius:2px;}


/* ============ LANGUAGE SWITCH (PL / EN) ============ */
.lang-switch{
  display:flex;
  gap:4px;
  background:var(--gray-300);
  padding:4px;
  border-radius:999px;
  flex:0 0 auto;
}

.lang-switch__btn{
  display:flex;
  align-items:center;
  gap:6px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:6px 12px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:600;
  color:var(--gray-700);
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}

.lang-switch__btn:hover{
  color:var(--ink);
}

.lang-switch__btn.is-active{
  background:var(--white);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(22,23,27,.08);
}

.lang-switch__code{
  font-size:.75rem;
  color:#040404;
}

/* ============ THEME TOGGLE ============ */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1.5px solid var(--border-color);
  background:var(--surface-bg);
  color:var(--text-primary);
  cursor:pointer;
  padding:0;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
  flex:0 0 auto;
}

/* DARK MODE */
:root[data-theme="dark"] .theme-toggle {
  background: #000000;
  color: #ffffff;
  border-color: #333333;
}

:root[data-theme="dark"] .theme-toggle svg {
  stroke: #ffffff;
}

/* LIGHT MODE */
:root[data-theme="light"] .theme-toggle {
  background: #ffffff;
  color: #000000;
  border-color: #d9d9d9;
}

:root[data-theme="light"] .theme-toggle svg {
  stroke: #000000;
}

/* CART — DARK MODE */
:root[data-theme="dark"] .tscart-btn {
  background: #000000;
  color: #ffffff;
  border-color: #333333;
}

:root[data-theme="dark"] .tscart-btn svg {
  stroke: #ffffff;
}

/* CART — LIGHT MODE */
:root[data-theme="light"] .tscart-btn {
  background: #ffffff;
  color: #000000;
  border-color: #d9d9d9;
}

:root[data-theme="light"] .tscart-btn svg {
  stroke: #000000;
}

/* =========================================
   LANGUAGE SWITCH — DARK / LIGHT MODE
   ========================================= */

/* DARK MODE — black container */
:root[data-theme="dark"] .lang-switch {
  background: #000000;
  border: 1px solid #333333;
}

/* Inactive language */
:root[data-theme="dark"] .lang-switch__btn {
  background: transparent;
  color: #ffffff;
}

/* Active language */
:root[data-theme="dark"] .lang-switch__btn.is-active {
  background: #ffffff;
  color: #000000;
}

/* Make sure PL / EN inherits the button color */
:root[data-theme="dark"] .lang-switch__code {
  color: inherit;
}


/* LIGHT MODE — white container */
:root[data-theme="light"] .lang-switch {
  background: #ffffff;
  border: 1px solid #d9d9d9;
}

/* Inactive language */
:root[data-theme="light"] .lang-switch__btn {
  background: transparent;
  color: #777777;
}

/* Active language */
:root[data-theme="light"] .lang-switch__btn.is-active {
  background: #000000;
  color: #ffffff;
}

/* Make sure PL / EN inherits the button color */
:root[data-theme="light"] .lang-switch__code {
  color: inherit;
}

.theme-toggle:hover{border-color:var(--orange);}
.theme-toggle:active{transform:translateY(1px);}
.theme-toggle svg{
  width:19px;
  height:19px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.theme-toggle .icon-moon{display:block;}
.theme-toggle .icon-sun{display:none;}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none;}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block;}

/* ============ HERO (proste zestawienie produktów) ============ */
.hero-simple{
  padding:76px 0 60px;
  text-align:center;
}
.hero-simple .eyebrow{display:flex;justify-content:center;}
.hero-simple h1{
  font-size:clamp(2.2rem, 3.6vw, 3.35rem);
  margin-bottom:14px;
}
.hero-simple .section-lead{
  margin:0 auto;
  max-width:560px;
}

.shop-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  text-align:left;
}
.shop-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:22px 26px;
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-l);
  background:var(--surface-bg);
  text-decoration:none;
  color:var(--text-primary);
  transition:border-color .18s ease, transform .18s ease, background-color .25s ease;
}
.shop-card:hover{
  border-color:var(--orange);
  transform:translateY(-4px);
}
.shop-card-visual{
  width:100%;
  height:170px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 43%, var(--orange-tint), transparent 50%),
    var(--page-bg-alt);
  border-radius:var(--radius-m);
  transition:background-color .25s ease;
}

.card-gradient-c {
  background:
    radial-gradient(circle at 50% 43%, var(--orange-tint), transparent 50%),
    var(--page-bg-alt);
}

.card-gradient-p {
  background:
    radial-gradient(circle at 50% 50%, var(--orange-tint), transparent 55%),
    var(--page-bg-alt);
}

.card-gradient-k {
  background:
    radial-gradient(circle at 50% 50%, var(--orange-tint), transparent 45%),
    var(--page-bg-alt);
}

.card-gradient-l {
  background:
    radial-gradient(circle at 50% 50%, var(--orange-tint), transparent 50%),
    var(--page-bg-alt);
}

/* Wiersz z 4. kartą (Logo) — wyśrodkowana w środkowej kolumnie siatki */
.shop-card-center{
  grid-column: 2 / 3;
}

.shop-card h3{font-size:1.5rem; padding: 10px 0px 0px 0px; margin: 0;}
.shop-card-cta{
  margin: 50px 0 0 0;
  font-weight:600;
  font-size:.9rem;
  color:var(--orange-dark);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* ============ STORY ============ */
.story{
  background:var(--ink);
  color:var(--white);
  padding:44px 0;
}
.story-inner{max-width:820px;}
.story-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--orange);
  border:1px solid rgba(255,106,26,.4);
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:16px;
}
.story-text{
  font-size:1.08rem;
  color:var(--gray-300);
  margin:0;
}
.story-text strong{color:var(--white);}

/* ============ SECTIONS ============ */
.section{padding:96px 0;}
.section-alt{background:var(--personalizacja-bg);transition:background-color .25s ease;}
.section h2{font-size:clamp(1.8rem, 2.6vw, 2.4rem);}

/* Steps */
.steps{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--border-color);
}
.step{
  padding:28px 22px 0 0;
  border-right:1px solid var(--border-color);
  margin-right: 15px;
}
.step:last-child{border-right:none;}
.step-num{
  display:block;
  font-family:var(--font-mono);
  font-size:.85rem;
  color:var(--orange-dark);
  font-weight:600;
  margin-bottom:14px;
}
.step h3{font-size:1.15rem;margin-bottom:8px;}
.step p{color:var(--text-secondary);font-size:.92rem;margin:0;}

/* ============ CREATOR ============ */
.back-link{
  display:inline-flex;
  margin-bottom:28px;
}
.creator{
  margin-top:48px;
  display:grid;
  grid-template-columns:.95fr 1fr;
  gap:56px;
  align-items:start;
}
.creator-controls{display:flex;flex-direction:column;gap:22px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field-wide{grid-column:1 / -1;}
.field label, .field-label{
  font-size:.85rem;
  font-weight:600;
  color:var(--text-primary);
}
.field-hint{
  font-size: 0.9rem;
  color: white;
  margin:10px 0 0;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea{
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-s);
  padding:12px 14px;
  background:var(--input-bg);
  color:var(--text-primary);
  transition:border-color .15s ease, background-color .25s ease, color .25s ease;
  width:100%;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--orange);
}
textarea{resize:vertical;min-height:100px;}

.upload-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
input[type="file"]{
  flex:1;
  min-width:180px;
  font-size:.85rem;
}

.pill-group{display:flex;gap:10px;}
.pill{
  padding:10px 18px;
  border-radius:999px;
  border:1.5px solid var(--border-color);
  background:var(--input-bg);
  color:var(--text-primary);
  cursor:pointer;
  font-size:.85rem;
  font-weight:500;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.pill.is-active{
  border-color:var(--orange);
  background:var(--orange);
  color:var(--white);
}

.color-group{display:flex;gap:12px;}
.swatch{
  width:34px;height:34px;
  border-radius:50%;
  border:2px solid var(--border-color);
  background:var(--sw);
  cursor:pointer;
  position:relative;
  transition:border-color .15s ease, transform .15s ease;
}
.swatch:hover{transform:translateY(-2px);}
.swatch.is-active{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-tint);}

/* Tag mock preview */
.creator-preview{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.preview-stage{
  width:100%;
  min-height:380px;
  background:
    var(--personalizacja-bg);
  border-radius:var(--radius-l);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  transition:background-color .25s ease;
}
.preview-stage.card-gradient-c{
  background:
    radial-gradient(circle at 50% 43%, var(--orange-tint), transparent 50%),
    var(--personalizacja-bg);
}
.preview-stage.card-gradient-p{
  background:
    radial-gradient(circle at 50% 50%, var(--orange-tint), transparent 55%),
    var(--personalizacja-bg);
}
.preview-stage.card-gradient-k{
  background:
    radial-gradient(circle at 50% 50%, var(--orange-tint), transparent 45%),
    var(--personalizacja-bg);
}
.tag-mock{
  width:420px;
  height:420px;
  background:var(--ink);
  color:var(--white);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:18px;
  position:relative;
  box-shadow:0 24px 46px -18px rgba(22,23,27,.4);
  transition:background .2s ease, color .2s ease, border-radius .2s ease;
  text-align:center;
}


.tag-mock.is-round{border-radius:50%;}
.tag-mock.is-square{border-radius:26px;}
.tag-mock.is-rect{border-radius:22px;}
.tag-mock.is-logo{border-radius:26px;}
.tag-mock.is-black{background:var(--ink);color:var(--white);}
.tag-mock.is-white{background:var(--white);color:var(--ink);border:1.5px solid var(--gray-300);}
.tag-mock.is-gray{background:#8B8E97;color:var(--white);}
.tag-mock.is-orange{background:var(--orange);color:var(--white);}

.tag-editable-layer{
  position:absolute;
  inset:0;
  z-index:1;
}

/* Zdjęcie fizycznego taga wyświetlane pod personalizacją (logo/tekst/plakietka) */
.tag-mock.has-shape-image{background:transparent;box-shadow:none;}
.tag-shape-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:0;
  pointer-events:none;
}
.tag-mock > *:not(.tag-shape-image):not(.tag-editable-layer){
  position:relative;
  z-index:1;
}
.tag-editable-layer{z-index:1;}


.tag-master-badge{
  position:absolute;
  top:16px;
  right:16px;
  font-family:var(--font-mono);
  font-size:.6rem;
  letter-spacing:.1em;
  background:var(--orange);
  color:var(--white);
  padding:3px 8px;
  border-radius:999px;
}
.tag-mock.is-orange .tag-master-badge{background:var(--ink);}

.tag-nfc-icon svg{
  width:26px;height:26px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  opacity:.85;
}
.tag-logo-slot{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%, -50%);
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  border:1.5px dashed transparent;
  border-radius:12px;
  transition:border-color .15s ease;
}
.tag-logo-slot:hover{border-color:rgba(255,106,26,.55);}
.tag-logo-slot.is-dragging{cursor:grabbing;border-color:var(--orange);}
.tag-mock.is-white .tag-logo-slot{background:rgba(22,23,27,.07);}
.tag-logo-placeholder{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.08em;
  opacity:.7;
  pointer-events:none;
}
.tag-logo-slot img{width:100%;height:100%;object-fit:contain;pointer-events:none;}
.resize-handle{
  position:absolute;
  right:-7px;
  bottom:-7px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--orange);
  border:2px solid var(--white);
  cursor:nwse-resize;
  touch-action:none;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.tag-company{
  position:absolute;
  transform:translate(-50%, -50%);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  margin:0;
  padding:3px 8px;
  white-space:nowrap;
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  border:1.5px dashed transparent;
  border-radius:6px;
  transition:border-color .15s ease;
}
.tag-company:hover{border-color:rgba(255,106,26,.55);}
.tag-company.is-dragging{cursor:grabbing;border-color:var(--orange);}
.tag-company:empty{padding:0;}
.tag-text{
  font-size:.72rem;
  opacity:.75;
  margin:0;
}
.preview-caption{
  font-size:.78rem;
  color:var(--text-tertiary);
  text-align:center;
  max-width:420px;
}

/* ============ CALCULATOR ============ */
.calc{
  margin-top:44px;
  background: var(--calc-bg);
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-l);
  padding:38px;
  transition:background-color .25s ease, border-color .25s ease;
}
.calc-row label{
  font-size:.85rem;
  font-weight:600;
  display:block;
  margin-bottom:14px;
}
.calc-range{
  display:flex;
  align-items:center;
  gap:18px;
}
input[type="range"]{
  flex:1;
  accent-color:var(--slider);
  color: var(--slider);
  height:4px;
  background-color: var(--slider);
}

#qtyRange {
  background-color: var(--slider) !important;
  accent-color: var(--slider) !important;
  color: var(--slider) !important;
}

#qtyOutput{
  font-family:var(--font-mono);
  font-weight:600;
  background:var(--ink);
  color:var(--white);
  padding:6px 12px;
  border-radius:999px;
  font-size:.85rem;
  min-width:78px;
  text-align:center;
}
.calc-grid{
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--border-color);
  border-radius:var(--radius-m);
  overflow:hidden;
}
.calc-card{
  background:var(--surface-bg);
  padding:22px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:background-color .25s ease;
}
.calc-label{font-size:.9rem;color:white;}
.calc-value{font-family:var(--font-display);font-size:1.15rem;font-weight:600; color: white;}

/* Wycena card — normal background */
.calc-total{
  color: var(--text-primary);
}

.calc-total .calc-label{
  color: var(--text-secondary);
}

.calc-total .calc-value{
  color: var(--text-primary);
}
.calc-note{
  margin:26px 0 0;
  font-size:.8rem;
  color:var(--text-secondary);
}

/* ============ ORDER FORM ============ */
.order-form{margin-top:44px;max-width:760px;}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-bottom:22px;
}
.checkbox-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.85rem;
  color:var(--text-secondary);
  margin-bottom:26px;
}
.checkbox-row input{margin-top:3px;accent-color:var(--orange);}
.form-note{
  font-size:.78rem;
  color:var(--text-tertiary);
  margin-top:0px;
}

.order-success{
  margin-top:32px;
  max-width:760px;
  border:1.5px solid black;
  border-radius: 10px;
  padding:26px 30px;
}
.order-success h3{margin-bottom:8px;color: white;}
.order-success p{margin:0;color: white;}

/* ============ FOOTER ============ */
.site-footer{
  background-color: var(--footer-bg);
  padding: 10px 0 10px 0;
}
.footer-inner{display:flex;flex-direction:column;gap:14px;}
.footer-brand{display:flex;align-items:center;gap:10px;}
.site-footer .logo-text{color:var(--white);}
.site-footer .logo-text strong{color:var(--orange);}
.footer-copy{max-width:520px;font-size:.88rem;}
.footer-legal{font-size:.78rem;color:var(--gray-600);margin:0;}

/* ============ RESPONSIVE ============ */
@media (max-width: 960px){
  .shop-grid{grid-template-columns:1fr 1fr;}
  .shop-card-center{grid-column:1 / -1;max-width:340px;width:100%;margin:0 auto;}
  .steps{grid-template-columns:1fr 1fr;row-gap:32px;}
  .step{border-right:none;border-bottom:1px solid var(--border-color);padding-bottom:24px;}
  .creator{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .calc-grid{grid-template-columns:1fr;}
}

/* ---- Header/nav switches to the hamburger menu earlier than the rest
     of the layout, so nav links never get squeezed against the logo ---- */
@media (max-width: 860px){
  .header-inner{gap:10px;}
  .logo-img{width:clamp(100px, 26vw, 180px);max-height:56px;}
  .main-nav{
    display:none;
    position:static;
    transform:none;
    width:100%;
    flex:0 0 auto;
  }
  .main-nav.is-open{
    display:block;
    position:absolute;
    top:90px;
    left:0;
    right:0;
    background:var(--header-bg);
    border-bottom:1px solid var(--border-soft);
    padding:8px 20px 18px;
    z-index:55;
    max-height:calc(100vh - 90px);
    overflow-y:auto;
  }
  .nav-menu{flex-direction:column;align-items:stretch;gap:0;}
  .nav-item{
    padding-bottom:0;
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .nav-item:last-child{border-bottom:none;}
  .nav-link{
    display:block;
    width:100%;
    padding:14px 2px;
    font-size:.95rem;
    white-space:normal;
  }
  .nav-dropdown{
    position:static;
    display:block;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    box-shadow:none;
    border:none;
    background:transparent;
    min-width:0;
    padding:0 0 12px 12px;
  }
  .nav-dropdown a{
    color:white;
    padding:8px 12px;
    border-radius:var(--radius-s);
  }
  .nav-dropdown a:hover,
  .nav-dropdown a:focus-visible{
    background:rgba(255,255,255,.1);
    color:var(--orange);
  }
  .nav-toggle{display:flex;}
  .nav-toggle span{background:#ffffff;}
  .header-inner .btn-small{display:none;}
  .header-actions{gap:8px;}
}

@media (max-width: 680px){
  .wrap{padding:0 20px;}

  .lang-switch__btn{padding:6px 9px;}

  .header-inner{gap:8px;}
  .logo-img{width:clamp(90px, 30vw, 150px);max-height:48px;}
  .steps{grid-template-columns:1fr;}
  .shop-grid{grid-template-columns:1fr;}
  .hero-simple{padding:48px 0 40px;}
  .section{padding:64px 0;}
  .calc{padding:26px;}
  .shop-card-center{grid-column:auto;max-width:none;margin:0;}
}

/* ============ IDEA FORM (podstrona "Pomysł") ============ */
.idea-section h1{
  font-size:clamp(2rem, 3.2vw, 2.9rem);
}
.idea-form{
  margin-top:44px;
  max-width:760px;
  display:flex;
  flex-direction:column;
  gap:26px;
}
.idea-form textarea{
  min-height:220px;
  font-family:var(--font-body);
  line-height:1.6;
}

/* ---- Strefa przeciągania plików ---- */
.dropzone{
  border:1.5px dashed var(--border-color);
  border-radius:var(--radius-m);
  background:var(--surface-bg);
  padding:36px 24px;
  text-align:center;
  cursor:pointer;
  transition:border-color .18s ease, background-color .2s ease;
}
.dropzone:hover,
.dropzone:focus-visible{
  border-color:var(--orange);
  outline:none;
}
.dropzone.is-dragover{
  border-color:var(--orange);
  background:var(--orange-tint);
}
.dropzone-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.dropzone-icon{
  width:30px;
  height:30px;
  stroke:var(--orange-dark);
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.dropzone-text{
  margin:0;
  font-size:.95rem;
  color:var(--text-primary);
}
.dropzone-browse{
  color:var(--orange-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  pointer-events:auto;
}
.dropzone .field-hint{margin:0;}

/* ---- Lista dodanych plików ---- */
.file-list{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.file-chip{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border:1.5px solid var(--border-color);
  border-radius:var(--radius-s);
  background:var(--surface-bg);
  font-size:.85rem;
}
.file-chip-icon{
  font-family:var(--font-mono);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--white);
  background:var(--orange);
  border-radius:6px;
  padding:4px 7px;
  flex:0 0 auto;
}
.file-chip-name{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-primary);
}
.file-chip-size{
  color:var(--text-tertiary);
  font-size:.78rem;
  flex:0 0 auto;
}
.file-chip-remove{
  flex:0 0 auto;
  background:none;
  border:none;
  color:var(--text-tertiary);
  cursor:pointer;
  font-size:1.1rem;
  line-height:1;
  padding:2px 4px;
  transition:color .15s ease;
}
.file-chip-remove:hover{color:var(--orange);}

@media (max-width: 680px){
  .dropzone{padding:26px 16px;}
}

/* ============ LIGHT THEME SLIDER FIX ============ */

/* Make the slider track & handle black in light mode */
:root[data-theme="light"] input[type="range"] {
  accent-color: #000000;
}

/* Ensure cross-browser black handle */
:root[data-theme="light"] input[type="range"]::-webkit-slider-thumb {
  background-color: #000000;
}

:root[data-theme="light"] input[type="range"]::-moz-range-thumb {
  background-color: #000000;
}