/* =========================================================================
   teenage engineering — TX-6 (strona produktu) + sklep
   ========================================================================= */

:root {
  --orange-300: #E5754B;
  --grey-200:   #C6C6C4;

  /* Dwa akcenty z Figmy nie wyrabiały na jasnych tłach i tekst się w nich gubił.
     Przyciemnione w obrębie tego samego odcienia — reszta palety bez zmian.
     Oryginały: --yellow-700 #DE9907, pomarańcz na szarym #DE531E. */
  --yellow-700: #A97400;   /* 2,29:1 → 3,82:1 na #F9F8F8 */
  --orange-ink: #C24410;   /* 2,83:1 → 3,67:1 na #DBDBDB */

  --fs-h4:   clamp(1.25rem, 1.176rem + 0.19vw, 1.375rem);  /* 20 → 22px */
  --fs-h6:   1.1875rem;  /* 19px */
  --fs-body: clamp(1rem, 0.955rem + 0.19vw, 1.1875rem);    /* 16 → 19px */
  --fs-body-sm: 1rem;    /* 16px */
  --fs-caption: 0.875rem;/* 14px */
}

/* h4 (22px) zostaje na 700 — to etykieta stojąca nad tekstem ciągłym i musi
   go przeważyć; przy 400 tytuł karty zlewał się z opisem */
.h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  font-weight: var(--weight-mono);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.4;
  max-width: 554px;
}
.body p + p { margin-top: 1.4em; }

.body--sm { font-size: var(--fs-body-sm); }

.stem { width: 1px; height: 24px; background: currentColor; transform-origin: top; }

/* =========================================================================
   hero — smallest of its kind.
   ========================================================================= */

.p-hero { background: #000; min-height: 100svh; }

.p-hero__media {
  position: absolute;
  left: 24.58%; right: 24.59%;
  top: 29.9%; bottom: -6.15%;
}
.p-hero__media img { width: 100%; height: 100%; object-fit: contain; }

/* na niskim oknie kadr zdjęcia nie może wychodzić poniżej sekcji,
   bo `overflow:hidden` obcinałby spód urządzenia */
@media (max-height: 820px) {
  .p-hero__media { bottom: 0; }
}

.p-hero .pitch {
  top: 26.9%;
  left: 0; right: 0;
  width: auto;
  padding: 0 16px;
}
.p-hero .pitch .h5 { color: var(--orange); }

/* =========================================================================
   opis + spis treści
   ========================================================================= */

/* Układ z Figmy (tekst 156/240, spis treści 360 od góry) odtworzony przez
   grid + padding zamiast `position:absolute` — inaczej na oknie niższym niż
   ~800 px spis treści wychodził poza sekcję i był obcinany. */
.p-desc {
  background: var(--white); color: var(--black);
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr auto;
  column-gap: 40px;
  align-content: start;
  padding: 240px calc(16.667% + 30px) 120px calc(8.3333% + 36px);
}

.p-desc__text {
  grid-column: 1;
  display: flex; flex-direction: column; gap: 56px;
}
/* nagłówek dostaje trochę więcej miejsca niż kolumna tekstu, żeby — tak jak
   w Figmie — złamał się na dwie linie mimo szerszego kroju Input Mono */
.p-desc__text .h2 { max-width: 640px; }

.p-toc {
  grid-column: 3;
  margin-top: 120px;   /* 360 − 240 z Figmy */
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.p-toc a {
  font-family: var(--font-mono);
  font-size: var(--fs-btn); font-weight: var(--weight-mono); line-height: 1;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.p-toc__rule { width: 1px; height: var(--rule); background: var(--black); transform-origin: top; }

/* =========================================================================
   wideo
   ========================================================================= */

.p-video { background: var(--grey-100); }
.p-video .section__media img { object-position: 50% 50%; }
.p-video__cta {
  position: absolute;
  bottom: 60px; left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: var(--fs-btn); font-weight: var(--weight-mono); line-height: 1;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
  transition: color .3s var(--ease);
}

/* =========================================================================
   wprowadzenie
   ========================================================================= */

.p-intro {
  background: var(--grey-100); color: var(--black);
  height: auto;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 554px);
  justify-content: space-between;
  column-gap: 40px;
  align-content: start;
  padding: 120px calc(8.3333% + 35px);
}

.p-intro__media {
  grid-column: 1;
  height: 610px; max-height: 62svh;
  overflow: hidden;
}
.p-intro__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  transform: scale(1.3);
  transition: transform .9s var(--ease);
}
.p-intro__media:hover img { transform: scale(1.36); }

.p-intro__text {
  grid-column: 2;
  margin-top: 180px;   /* 300 − 120 z Figmy */
  display: flex; flex-direction: column; align-items: flex-start; gap: 56px;
  max-width: 554px;
}
.p-intro__text .h2 { color: var(--orange); white-space: normal; }
/* mała etykieta pomarańczowa na szarym tle — bierze przyciemniony wariant */
.p-intro__text .btn-small { color: var(--orange-ink); }

/* =========================================================================
   galeria
   ========================================================================= */

.p-gallery { background: var(--grey-200); }
.p-gallery__media {
  position: absolute;
  left: 20%; right: 20%;
  top: 3.84%; bottom: 0.55%;
}
.p-gallery__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.p-gallery__media img[data-active="true"] { opacity: 1; }

.p-gallery__dots {
  position: absolute;
  left: 0; right: 0; top: 90.6%;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  padding: 12px 0;
}
.p-gallery__dots button {
  width: 8px; height: 8px; border-radius: 1px;
  background: var(--white);
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.p-gallery__dots button[aria-current="true"] { background: var(--orange); transform: scale(1.25); }

/* =========================================================================
   cechy — karuzela
   ========================================================================= */

.p-features {
  background: var(--orange-300); color: var(--white);
  height: auto;
  padding: 196px 0 80px;   /* 215.5 − połowa wysokości h2, jak w Figmie */
}

.p-features__head {
  padding: 0 calc(8.3333% + 35px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.p-features__head .h2 { color: var(--white); white-space: normal; max-width: 740px; }

.p-features__nav { display: flex; gap: 20px; }
.p-features__nav button {
  width: 24px; height: 24px;
  color: var(--black);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.p-features__nav button:hover { transform: scale(1.2); }
.p-features__nav button[disabled] { opacity: .35; cursor: default; }
.p-features__nav svg { width: 10px; height: 19px; }

.p-features__track {
  margin-top: 72px;    /* 307 − (196 + 39) z Figmy */
  display: flex; gap: 136px;
  padding: 0 calc(8.3333% + 35px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* bez tego snap „zjada" lewy padding i pierwsza karta ląduje przy krawędzi */
  scroll-padding-left: calc(8.3333% + 35px);
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.p-features__track::-webkit-scrollbar { display: none; }

.feature {
  flex: 0 0 210px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 20px;
}
.feature__icon { width: 210px; height: 210px; color: var(--white); }
.feature__icon svg,
.feature__icon img { width: 100%; height: 100%; object-fit: contain; }
.feature__body { display: flex; flex-direction: column; gap: 6px; }
.feature__title { color: var(--black); }
.feature__text { color: var(--white); font-size: var(--fs-body-sm); line-height: 1.4; }

/* =========================================================================
   łączność
   ========================================================================= */

.p-conn { background: var(--white); color: var(--black); min-height: 0; padding-bottom: 120px; }

.p-conn__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  padding: 120px calc(8.3333% + 35px) 0;
}
.p-conn__photo { aspect-ratio: 553 / 552; overflow: hidden; background: #000; }
.p-conn__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.p-conn__photo:hover img { transform: scale(1.04); }

.p-conn__text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
  padding: 168px calc(8.3333% + 35px) 0;
}
.p-conn__text .h2 { color: var(--orange); white-space: normal; }

.p-conn__diagrams {
  display: flex; gap: 20px;
  padding: 162px calc(8.3333% + 35px) 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.p-conn__diagrams::-webkit-scrollbar { display: none; }

.diagram { position: relative; flex: 0 0 555px; height: 320px; }
.diagram__img { position: absolute; inset: 0; overflow: hidden; }
.diagram__img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 52%;
  transform: scale(1.6);
}
.diagram__line {
  position: absolute;
  top: 164px; left: var(--x);
  width: 1px; height: var(--h, 80px);
  background: var(--orange);
  transform-origin: top;
}
.diagram__bracket {
  position: absolute;
  top: 244px; left: var(--x);
  width: var(--w); height: 1px;
  background: var(--orange);
  transform-origin: left;
}
.diagram__label {
  position: absolute;
  top: 280px; left: var(--x);
  transform: translateX(-50%);
  font-family: var(--font-sans);
  font-size: var(--fs-caption); font-weight: 400; line-height: 1.1;
  color: var(--orange);
  text-align: center;
  white-space: nowrap;
}

/* =========================================================================
   akcesoria
   ========================================================================= */

.p-acc { background: var(--grey-100); color: var(--black); min-height: 0; padding: 96px 0 0; }
.p-acc__head { padding: 0 40px 40px calc(8.3333% + 35px); }

.p-acc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 440px));
  justify-content: space-between;
  gap: 20px;
  padding: 0 40px 96px;
}

.product-card {
  position: relative;
  aspect-ratio: 440 / 500;
  background: var(--white);
  overflow: hidden;
}
.product-card__media { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.06); }

.product-card__name {
  position: absolute;
  left: 6.36%; right: 6.36%; top: 41.5px;
  transform: translateY(-50%);
  font-size: var(--fs-h6); font-weight: 500; line-height: 1.2;
}
.product-card__price { position: absolute; left: 28px; bottom: 28px; }
.product-card__buy {
  position: absolute; right: 28px; bottom: 28px;
  color: var(--orange);
  font-family: var(--font-mono);
  font-size: var(--fs-btn); font-weight: var(--weight-mono); line-height: 1;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.product-card__buy[data-added="true"]::after { content: " ✓"; }

/* wariant jasny paska display */
.display--light { background: var(--grey-100); color: var(--black); }
.display--light::before { background: var(--black); }
.display--light:hover { color: var(--white); }

/* =========================================================================
   sklep / koszyk
   ========================================================================= */

.nav-cart {
  position: fixed;
  top: 34px; right: 40px;
  z-index: 95;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  color: var(--orange);
  transition: transform .35s var(--ease);
}
.nav-cart:hover { transform: scale(1.1); }
.nav-cart svg { width: 20px; height: 36px; }
.nav-cart span {
  position: absolute;
  top: calc(50% + 1px); left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-weight: var(--weight-mono); font-size: 1.375rem; line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--white);
}

.cart { background: var(--white); color: var(--black); min-height: 0; padding: 120px 0 96px; }

.cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 40px; align-items: center;
  padding: 0 40px;
}

/* kwadrat ograniczony też wysokością okna, żeby kropki galerii nie spadały pod kadr */
.cart__gallery {
  position: relative;
  width: min(100%, 784px, 74svh);
  margin-inline: auto;
  aspect-ratio: 1;
}
.cart__gallery img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; padding: 1%;
  opacity: 0;
  transition: opacity .6s var(--ease), transform .9s var(--ease);
}
.cart__gallery img[data-active="true"] { opacity: 1; }

.cart__dots { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px 0; }
.cart__dots button {
  width: 8px; height: 8px; border-radius: 1px;
  background: var(--grey-100);
  transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.cart__dots button[aria-current="true"] { background: var(--orange); transform: scale(1.25); }

.cart__info { display: flex; flex-direction: column; align-items: flex-end; gap: 56px; }
.cart__title-row { display: flex; gap: 20px; width: 100%; align-items: flex-start; }
.cart__title {
  flex: 1;
  font-family: var(--font-sans); font-size: 2.125rem; font-weight: 500; line-height: 1.1;
}
.cart__price {
  flex: 1;
  font-family: var(--font-mono); font-weight: var(--weight-mono);
  font-size: var(--fs-h2); line-height: 1;
  letter-spacing: var(--tracking-display); text-transform: uppercase;
  color: var(--orange); text-align: right; white-space: nowrap;
}
.cart__desc { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.cart__desc ul { list-style: disc; padding-left: 28px; }
.cart__desc li + li { margin-top: .2em; }

.btn-big {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 32px 9px;
  border-radius: 4px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-mono); font-weight: var(--weight-mono);
  font-size: 2.125rem; line-height: 1;
  text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-big::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--black);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.btn-big:hover::before { transform: scaleX(1); }
.btn-big[data-added="true"]::after { content: " ✓"; }

.related { background: var(--grey-100); color: var(--black); min-height: 0; padding: 60px 0 0; }
/* druga siatka produktów na jasnym tle — żeby sekcje nie zlewały się w jeden
   szary blok. Karty dostają odwrócone tło, inaczej biały na białym gubi kadr. */
.related--white { background: var(--white); padding-bottom: 20px; }
.related--white .product-card { background: var(--grey-100); }
.related--white .product-card__buy { color: var(--orange-ink); }
.related__head { padding: 0 40px 40px calc(8.3333% + 35px); }
.related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 440px));
  justify-content: space-between;
  gap: 20px;
  padding: 0 40px 60px;
}

.cart-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--accent); color: var(--black);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-mono); line-height: 1;
}

/* =========================================================================
   responsywność
   ========================================================================= */

@media (max-width: 1100px) {
  .p-acc__grid, .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* na wąskim ekranie zdjęcie idzie na całą szerokość — przy `contain`
     widać było krawędź czarnego tła fotografii na tle sekcji */
  .p-hero__media { left: 0; right: 0; top: 33%; bottom: 0; }
  .p-hero__media img { object-fit: cover; object-position: 50% 38%; }
  .p-hero .pitch { top: 14%; }

  .p-desc {
    grid-template-columns: 1fr;
    padding: 120px 16px 96px;
    min-height: 0;
  }
  .p-desc__text { grid-column: 1; max-width: none; gap: 32px; }
  .p-toc { grid-column: 1; align-items: flex-start; margin-top: 56px; }
  .p-toc__rule { height: 48px; }

  .p-intro {
    grid-template-columns: 1fr;
    padding: 96px 16px;
    min-height: 0;
  }
  .p-intro__media {
    grid-column: 1;
    height: 52svh; max-height: none;
    margin-bottom: 40px;
  }
  .p-intro__text { grid-column: 1; margin-top: 0; max-width: none; gap: 32px; }

  .p-features {
    min-height: 0;
    padding: 96px 0;
  }
  .p-features__head {
    flex-direction: column; align-items: flex-start;
    padding: 0 16px;
  }
  .p-features__track {
    margin-top: 32px;
    padding: 0 16px; gap: 48px;
    scroll-padding-left: 16px;
  }

  .p-gallery__media { left: 8%; right: 8%; }

  .p-conn__photos, .p-conn__text, .p-conn__diagrams { padding-left: 16px; padding-right: 16px; }
  .p-conn__photos { grid-template-columns: 1fr; padding-top: 96px; }
  .p-conn__text { grid-template-columns: 1fr; padding-top: 72px; gap: 32px; }
  .p-conn__diagrams { padding-top: 72px; }

  .p-acc__head, .related__head { padding-left: 16px; padding-right: 16px; }
  .p-acc__grid, .related__grid { grid-template-columns: 1fr; padding-left: 16px; padding-right: 16px; }

  /* hamburger siedzi przy prawej krawędzi — koszyk odsuwamy w lewo */
  .nav-cart { top: 17px; right: 60px; width: 40px; height: 40px; }
  .nav-cart svg { width: 17px; height: 30px; }
  .nav-cart span { font-size: 1.125rem; }
  .cart { padding: 96px 0 64px; }
  .cart__layout { grid-template-columns: 1fr; padding: 0 16px; }
  .cart__info { align-items: flex-start; gap: 32px; }
  .cart__title-row { flex-direction: column; gap: 8px; }
  .cart__price { text-align: left; }
  .btn-big { font-size: 1.5rem; }
}