/* ==========================================================================
   neocase.pl - motyw wlasny
   Espresso / kosc sloniowa / szampan. Typografia: Bodoni Moda + Jost.
   Sygnatura: kafel o sylwetce etui z pierscieniem aparatu.
   ========================================================================== */

:root {
  /* --- kolory --- */
  --nc-espresso: #241811;
  --nc-espresso-deep: #180F0A;
  --nc-cocoa: #33241A;
  --nc-cocoa-soft: #3E2D21;
  --nc-line: rgba(198, 166, 106, 0.22);
  --nc-line-strong: rgba(198, 166, 106, 0.45);
  --nc-bone: #F2ECE3;
  --nc-bone-warm: #E8DFD1;
  --nc-dim: #B7A895;
  --nc-champagne: #C6A66A;
  --nc-champagne-bright: #E5C88F;

  /* --- typografia --- */
  --nc-display: "Bodoni Moda", "Times New Roman", serif;
  --nc-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* --- rytm --- */
  --nc-gutter: clamp(1.25rem, 4vw, 4rem);
  --nc-max: 1480px;
  --nc-radius: 2.25rem;
  --nc-radius-sm: 1rem;
  --nc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   BAZA
   ========================================================================== */

html { scroll-behavior: smooth; }

body,
body#index,
body.lang-pl {
  background: var(--nc-espresso);
  color: var(--nc-bone);
  font-family: var(--nc-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

#wrapper,
#main,
.container,
#content-wrapper {
  background: transparent;
  box-shadow: none;
}

#wrapper { padding: 0; }
#wrapper .container { max-width: var(--nc-max); padding-inline: var(--nc-gutter); }

a { color: var(--nc-bone); text-decoration: none; transition: color .35s var(--nc-ease); }
a:hover, a:focus { color: var(--nc-champagne-bright); text-decoration: none; }

/* widoczny focus - wymog dostepnosci */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--nc-champagne-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--nc-display);
  font-weight: 400;
  color: var(--nc-bone);
  letter-spacing: -0.015em;
  line-height: 1.05;
}

::selection { background: var(--nc-champagne); color: var(--nc-espresso-deep); }

/* pole monogramowe - delikatna krata na skos, echo wzoru na etui.
   Ma byc wyczuwalne, nie czytelne: zbyt mocna krata robi sie szachownica. */
.nc-monogram-field {
  background-image:
    repeating-linear-gradient(45deg, var(--nc-line) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, var(--nc-line) 0 1px, transparent 1px 22px);
  opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 25%, transparent 72%);
}

/* ==========================================================================
   NAGLOWEK
   ========================================================================== */

#header {
  background: var(--nc-espresso-deep);
  box-shadow: none;
  border-bottom: 1px solid var(--nc-line);
  position: sticky;
  top: 0;
  z-index: 900;
}

#header .header-top,
#header .header-nav {
  background: transparent;
  border: 0;
  max-width: var(--nc-max);
  margin-inline: auto;
  padding-inline: var(--nc-gutter);
}

#header .header-nav {
  border-bottom: 1px solid var(--nc-line);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--nc-dim);
  min-height: 44px;
}

#header .header-nav a,
#header .header-nav span { color: var(--nc-dim); }
#header .header-nav a:hover { color: var(--nc-champagne-bright); }

#header .header-top { padding-block: 1.25rem; }

/* wordmark */
#header .nc-wordmark,
.nc-footer .nc-wordmark,
.nc-wordmark {
  font-family: var(--nc-display);
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--nc-bone);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: .06em;
}
/* pasek nawigacji jest pisany wersalikami - wordmark nie moze go dziedziczyc */
.nc-wordmark { text-transform: none !important; }
#header .nc-wordmark span,
.nc-footer .nc-wordmark span,
.nc-wordmark span { color: var(--nc-champagne); font-style: italic; }
#header .nc-wordmark:hover { color: var(--nc-bone); }
#header h1 { margin: 0; }

/* nawigacja glowna */
.nc-nav {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nc-nav a {
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--nc-bone);
  position: relative;
  padding-block: .35rem;
}
.nc-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--nc-champagne);
  transition: width .4s var(--nc-ease);
}
.nc-nav a:hover::after,
.nc-nav a:focus-visible::after { width: 100%; }

#search_widget form,
#header .search-widget form input[type="text"] {
  background: transparent;
  border: 1px solid var(--nc-line);
  border-radius: 999px;
  color: var(--nc-bone);
  font-family: var(--nc-body);
  font-weight: 300;
}
#header .search-widget form input[type="text"]::placeholder { color: var(--nc-dim); }
#header .search-widget form button[type="submit"] .search,
#header .search-widget form button[type="submit"] i { color: var(--nc-champagne); }

/* pasek naglowka: wordmark | nawigacja | narzedzia */
.nc-header-bar {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}
.nc-header-bar__brand { flex: none; }
.nc-header-bar__nav { flex: 1 1 auto; justify-content: center; }
.nc-header-bar__tools {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nc-header-bar__tools .row { margin: 0; align-items: center; display: flex; }
.nc-nav-note {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nc-dim);
  display: flex;
  align-items: center;
}
.header-nav .row { align-items: center; min-height: 44px; }

@media (max-width: 991px) {
  .nc-header-bar { flex-wrap: wrap; justify-content: space-between; }
  .nc-header-bar__nav { order: 3; width: 100%; justify-content: flex-start; padding-top: .75rem; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.nc-hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 8rem) clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}

.nc-hero__inner {
  max-width: var(--nc-max);
  margin-inline: auto;
  padding-inline: var(--nc-gutter);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.nc-eyebrow {
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--nc-champagne);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-bottom: 1.75rem;
}
.nc-eyebrow::before {
  content: "";
  width: clamp(1.5rem, 4vw, 3.25rem);
  height: 1px;
  background: var(--nc-champagne);
  flex: none;
}

.nc-hero__title {
  font-family: var(--nc-display);
  font-size: clamp(3rem, 7.5vw, 6.75rem);
  line-height: .95;
  letter-spacing: -0.025em;
  margin: 0 0 1.75rem;
}
.nc-hero__title em {
  font-style: italic;
  color: var(--nc-champagne);
}

.nc-hero__lead {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: var(--nc-dim);
  max-width: 46ch;
  margin: 0 0 2.5rem;
  font-weight: 300;
}

.nc-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* kompozycja zdjec - polka butikowa */
.nc-hero__stage {
  position: relative;
  min-height: clamp(360px, 46vw, 620px);
}

.nc-shelf {
  position: absolute;
  border-radius: var(--nc-radius);
  background: var(--nc-bone);
  overflow: hidden;
  box-shadow: 0 40px 80px -28px rgba(0,0,0,.75);
}
.nc-shelf img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  padding: 8%;
  mix-blend-mode: multiply;
}
.nc-shelf--a { inset: 0 26% 22% 0; z-index: 3; }
.nc-shelf--b { inset: 14% 0 8% 34%; z-index: 2; }
.nc-shelf--c { width: 34%; aspect-ratio: 3/4; right: 6%; bottom: -4%; z-index: 4; }

.nc-hero__field {
  position: absolute;
  inset: -10% -20% 20% 30%;
  z-index: 1;
  border-radius: 50%;
  filter: blur(2px);
}

/* ==========================================================================
   SEKCJE
   ========================================================================== */

.nc-section {
  max-width: var(--nc-max);
  margin-inline: auto;
  padding-inline: var(--nc-gutter);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.nc-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  flex-wrap: wrap;
}

.nc-section__title {
  font-family: var(--nc-display);
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  margin: 0;
  line-height: 1;
}

.nc-section__link {
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--nc-champagne);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--nc-ease);
}
.nc-section__link:hover { border-bottom-color: var(--nc-champagne); color: var(--nc-champagne-bright); }

/* pas z obietnica - fakty, nie ozdoba */
.nc-promise {
  border-block: 1px solid var(--nc-line);
  background: var(--nc-espresso-deep);
}
.nc-promise__inner {
  max-width: var(--nc-max);
  margin-inline: auto;
  padding: clamp(1.75rem, 3vw, 2.75rem) var(--nc-gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
}
.nc-promise__item { display: flex; flex-direction: column; gap: .4rem; }
.nc-promise__k {
  font-family: var(--nc-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--nc-champagne);
  line-height: 1;
}
.nc-promise__v {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--nc-dim);
}

/* sekcja dzielona: zdjecie + argument */
.nc-split__inner {
  display: grid;
  grid-template-columns: .8fr 1fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.nc-split__tile {
  background: var(--nc-bone);
  border-radius: var(--nc-radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  box-shadow: 0 40px 80px -32px rgba(0,0,0,.7);
}
.nc-split__tile img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 12%;
  mix-blend-mode: multiply;
}
.nc-split__copy .nc-section__title { margin-bottom: 1.5rem; }
.nc-split__copy .nc-hero__lead { margin-bottom: 1.75rem; }

@media (max-width: 900px) {
  .nc-split__inner { grid-template-columns: 1fr; }
  .nc-split__media { max-width: 340px; }
}

/* ==========================================================================
   SIATKA PRODUKTOW + SYGNATURA
   ========================================================================== */

.products,
#products .products,
.featured-products .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(1.25rem, 2.2vw, 2.25rem);
  margin: 0 !important;
  width: 100%;
}
/* bootstrapowy .row wnosi ujemne marginesy - neutralizujemy */
.products.row, #products .products.row { margin-inline: 0 !important; }

/* Elementem siatki jest owijka .js-product z klasami col-*, nie .product-miniature.
   Bootstrapowe max-width:25% liczyloby sie od szerokosci kolumny gridu i sciskalo
   kafel do kilkudziesieciu pikseli - kasujemy caly uklad kolumnowy. */
.products > .product,
.products > .js-product,
.products > [class*="col-"],
#products .products > .product,
#products .products > .js-product,
#products .products > [class*="col-"] {
  flex: none !important;
  max-width: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
.products > .product > .product-miniature,
.products > .js-product > .product-miniature { width: 100%; }

@media (min-width: 1600px) {
  .products, #products .products { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

.product-miniature,
.js-product-miniature {
  width: auto !important;
  margin: 0 !important;
  padding: 0;
}

/* kafel = sylwetka etui */
.product-miniature .thumbnail-container {
  position: relative;
  width: auto;
  height: auto;
  background: var(--nc-bone);
  border-radius: var(--nc-radius);
  box-shadow: none;
  overflow: hidden;
  padding: 0 0 1.35rem;
  transition: transform .5s var(--nc-ease), box-shadow .5s var(--nc-ease);
  display: flex;
  flex-direction: column;
}
.product-miniature .thumbnail-container:hover,
.product-miniature .thumbnail-container:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 36px 64px -30px rgba(0,0,0,.8);
}

/* pierscien aparatu - element sygnaturowy */
.product-miniature .thumbnail-container::after {
  content: "";
  position: absolute;
  top: 1.15rem; left: 1.15rem;
  width: 30px; height: 30px;
  border: 1px solid rgba(36, 24, 17, .28);
  border-radius: 50%;
  background: transparent;
  transition: background .45s var(--nc-ease), border-color .45s var(--nc-ease), transform .45s var(--nc-ease);
  z-index: 4;
  pointer-events: none;
}
.product-miniature .thumbnail-container:hover::after,
.product-miniature .thumbnail-container:focus-within::after {
  background: var(--nc-champagne);
  border-color: var(--nc-champagne);
  transform: scale(1.12);
}

.product-miniature .thumbnail-container .product-thumbnail {
  display: block;
  padding: 1.75rem 1.25rem .75rem;
  background: transparent;
}
.product-miniature .thumbnail-container .product-thumbnail img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .6s var(--nc-ease);
}
.product-miniature .thumbnail-container:hover .product-thumbnail img { transform: scale(1.05); }

.product-miniature .product-description {
  position: static;
  width: auto;
  background: transparent;
  padding: 0 1.35rem;
  text-align: left;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: auto;
}

.product-miniature .product-title { margin: 0; }
.product-miniature .product-title a {
  font-family: var(--nc-body);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--nc-espresso);
  text-transform: none;
  letter-spacing: 0;
  display: block;
}
.product-miniature .product-title a:hover { color: var(--nc-cocoa); }

.product-miniature .product-price-and-shipping,
.product-miniature .price {
  font-family: var(--nc-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--nc-espresso);
  letter-spacing: 0;
}
.product-miniature .regular-price {
  font-family: var(--nc-body);
  font-size: .85rem;
  color: #8A7A69;
  text-decoration: line-through;
  margin-right: .5rem;
}

/* plakietki - lewy gorny rog zajmuje pierscien aparatu, wiec ida na dol zdjecia,
   a prawy gorny zostaje dla przycisku listy zyczen */
.product-miniature .product-flags {
  top: auto;
  bottom: 6.5rem;
  left: 1.15rem;
  right: auto;
  margin: 0;
  z-index: 5;
  display: flex;
  gap: .4rem;
}
.product-miniature .wishlist-button-add,
.product-miniature .wishlist-button-product {
  top: 1rem;
  right: 1rem;
  z-index: 6;
  box-shadow: none;
  border: 1px solid rgba(36,24,17,.12);
}
.product-miniature .product-flags li.product-flag {
  background: var(--nc-espresso);
  color: var(--nc-bone);
  font-family: var(--nc-body);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  border-radius: 999px;
  padding: .35rem .85rem;
  box-shadow: none;
  min-height: 0;
  line-height: 1.4;
}
.product-miniature .product-flags li.product-flag.discount,
.product-miniature .product-flags li.product-flag.on-sale {
  background: var(--nc-champagne);
  color: var(--nc-espresso-deep);
}

/* szybkie akcje - chowamy halasliwe elementy classic */
.product-miniature .highlighted-informations,
.product-miniature .quick-view,
.product-miniature .variant-links { display: none !important; }

/* ==========================================================================
   PRZYCISKI
   ========================================================================== */

.btn-primary,
.btn.btn-primary,
.nc-btn {
  background: var(--nc-champagne);
  border: 1px solid var(--nc-champagne);
  color: var(--nc-espresso-deep);
  font-family: var(--nc-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 1rem 2.1rem;
  box-shadow: none;
  transition: background .35s var(--nc-ease), color .35s var(--nc-ease), transform .35s var(--nc-ease);
}
.btn-primary:hover, .btn.btn-primary:hover, .nc-btn:hover {
  background: var(--nc-champagne-bright);
  border-color: var(--nc-champagne-bright);
  color: var(--nc-espresso-deep);
  transform: translateY(-2px);
}

.nc-btn--ghost {
  background: transparent;
  color: var(--nc-bone);
  border: 1px solid var(--nc-line-strong);
}
.nc-btn--ghost:hover {
  background: transparent;
  border-color: var(--nc-champagne);
  color: var(--nc-champagne-bright);
}

.btn-secondary, .btn.btn-secondary {
  background: transparent;
  border: 1px solid var(--nc-line-strong);
  color: var(--nc-bone);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .76rem;
}

/* ==========================================================================
   STRONA PRODUKTU
   ========================================================================== */

#product #content-wrapper { padding-top: clamp(2rem, 5vw, 4rem); }

#product .product-cover,
#product .images-container .product-cover img {
  border-radius: var(--nc-radius);
  background: var(--nc-bone);
  box-shadow: none;
}
#product .images-container .product-cover img { padding: 6%; mix-blend-mode: multiply; }

/* Miniatura sama w sobie jest obrazkiem - multiply mieszalby ja z ciemnym tlem
   strony i przygaszal zdjecie. Zamiast tego jasne tlo pod samym obrazkiem. */
#product .product-images > li.thumb-container > .thumb,
#product .js-qv-product-images .thumb {
  border-radius: var(--nc-radius-sm);
  background: var(--nc-bone);
  border: 1px solid transparent;
  padding: 6%;
  mix-blend-mode: normal;
}
#product .product-images > li.thumb-container > .thumb.selected,
#product .product-images > li.thumb-container > .thumb:hover { border-color: var(--nc-champagne); }

/* Nazwa produktu to nie naglowek redakcyjny - idzie krojem tekstowym.
   Bodoni Moda w zaladowanym podzbiorze nie ma myslnika, a nazwy go zawieraja. */
#product h1.h1, #product .product-title, #product h1 {
  font-family: var(--nc-body);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none !important;
  color: var(--nc-bone);
  margin-bottom: 1rem;
}

/* plakietki na stronie produktu - domyslny cyjan nie nalezy do tej palety */
.product-flags li.product-flag,
#product .product-flags li.product-flag {
  background: var(--nc-espresso) !important;
  color: var(--nc-bone) !important;
  font-family: var(--nc-body);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: .35rem .85rem;
  box-shadow: none;
}
.product-flags li.product-flag.discount,
.product-flags li.product-flag.on-sale,
.product-flags li.product-flag.discount-percentage {
  background: var(--nc-champagne) !important;
  color: var(--nc-espresso-deep) !important;
}
#product .product-flags { top: 1.25rem; left: 1.25rem; }

/* miniatury galerii - maly, rowny pasek pod zdjeciem glownym */
#product .product-images {
  display: flex;
  gap: .6rem;
  padding: 0;
  margin-top: 1rem;
  list-style: none;
  flex-wrap: nowrap;
  overflow-x: auto;
}
#product .product-images > li.thumb-container {
  flex: 0 0 auto;
  width: 84px;
  padding: 0;
  margin: 0;
}
#product .product-images > li.thumb-container > .thumb {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin: 0;
}

#product .product-prices,
#product .product-information,
#product .product-actions,
#product .tabs,
#product .product-tabs {
  background: transparent;
  box-shadow: none;
  border: 0;
  color: var(--nc-bone);
}

#product .product-price,
#product .current-price span,
#product .product-prices .price {
  font-family: var(--nc-display);
  font-size: clamp(1.9rem, 3vw, 2.6rem);
  color: var(--nc-champagne);
  font-weight: 500;
}

#product .product-description,
#product .product-description p,
#product .tabs .tab-content,
#product .product-information .product-description {
  color: var(--nc-dim);
  font-weight: 300;
  line-height: 1.8;
}
#product .product-description h2 {
  font-family: var(--nc-display);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  color: var(--nc-bone);
  margin-top: 2.5rem;
  margin-bottom: .85rem;
}
#product .product-description ul { padding-left: 1.1rem; }
#product .product-description li { margin-bottom: .5rem; }
#product .product-description b, #product .product-description strong { color: var(--nc-bone); font-weight: 500; }

#product .tabs .nav-tabs { border-bottom: 1px solid var(--nc-line); }
#product .tabs .nav-tabs .nav-link {
  color: var(--nc-dim);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 1px solid transparent;
}
#product .tabs .nav-tabs .nav-link.active {
  color: var(--nc-champagne);
  border-bottom-color: var(--nc-champagne);
  background: transparent;
}

#product .product-quantity .qty input,
#product .input-group.bootstrap-touchspin input {
  background: transparent;
  border: 1px solid var(--nc-line-strong);
  color: var(--nc-bone);
  border-radius: var(--nc-radius-sm);
}

#product .product-reference,
#product .product-availability,
#product #product-details .label { color: var(--nc-dim); }

/* Kolumna z cena jedzie za uzytkownikiem - opisy sa dlugie (5-6 tys. znakow),
   a przycisk zakupu nie moze uciekac poza ekran. */
@media (min-width: 992px) {
  #product .product-container > .row > .col-md-6:last-child,
  #product #content-wrapper .product-information { position: sticky; top: 7.5rem; align-self: start; }
}

/* cena + informacja o podatku jako jeden blok */
#product .product-prices { margin-block: .5rem 1.5rem; }
#product .product-prices .tax-shipping-delivery-label {
  color: var(--nc-dim);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-top: .35rem;
}

/* krotki opis nad przyciskiem - wyrozniony, ale spokojny */
#product #product-description-short,
#product .product-information > .product-description {
  color: var(--nc-dim);
  font-size: 1rem;
  line-height: 1.75;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--nc-line);
}

/* blok zakupu */
#product .product-actions .product-add-to-cart {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
#product .product-quantity { display: flex; align-items: center; gap: 1rem; margin: 0; }
#product .add-to-cart { padding-inline: 2.5rem; }
#product .product-actions .control-label {
  color: var(--nc-dim);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* tabela szczegolow */
#product-details .data-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
}
#product-details .data-sheet dt,
#product-details .data-sheet dd {
  background: transparent;
  border-bottom: 1px solid var(--nc-line);
  padding: .85rem 0;
  margin: 0;
  font-weight: 400;
}
#product-details .data-sheet dt.name {
  color: var(--nc-dim);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#product-details .data-sheet dd.value { color: var(--nc-bone); text-align: right; }
#product-details .product-reference label,
#product-details .product-quantities label { color: var(--nc-dim); }

/* zakladki - wiecej powietrza pod trescia */
#product .tabs { padding: 0; margin-top: 2.5rem; }
#product .tabs .tab-content { padding-top: 1.75rem; }

/* przyciski udostepniania - domyslnie jasne kola */
#product .social-sharing li a,
.social-sharing li a {
  background-color: transparent;
  border: 1px solid var(--nc-line-strong);
  filter: none;
}
#product .social-sharing li a:hover { border-color: var(--nc-champagne); }
#product .social-sharing { align-items: center; gap: .5rem; }

/* produkty powiazane pod karta */
#product .featured-products,
#product .product-accessories { margin-top: clamp(3rem, 6vw, 5rem); }
#product .featured-products .products-section-title,
#product .product-accessories .products-section-title {
  display: block !important;
  font-family: var(--nc-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--nc-bone);
  text-transform: none;
  text-align: left;
  margin-bottom: 2rem;
  font-weight: 400;
}

/* ==========================================================================
   KATEGORIA / LISTA
   ========================================================================== */

#category #js-product-list-header,
.block-category {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 2rem;
}
/* wersaliki zamienialyby "iPhone" w "IPHONE" - zapis marki ma zostac */
#category h1, .block-category h1, #category #js-product-list-header h1 {
  font-family: var(--nc-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--nc-bone);
  text-transform: none !important;
}
#category .block-category .category-description { color: var(--nc-dim); max-width: 60ch; }
/* classic rezerwuje miejsce na obrazek kategorii, ktorego nie uzywamy */
#category .block-category { min-height: 0 !important; padding-bottom: 0; }
#category #js-product-list-header { margin-bottom: 1rem; }

/* pola formularzy w ciemnym motywie - domyslne biale prostokaty odstaja */
.products-selection select,
#js-product-list-top select,
.products-sort-order .select-title,
select.form-control,
.form-control:not([type="checkbox"]):not([type="radio"]) {
  background: transparent;
  border: 1px solid var(--nc-line-strong);
  border-radius: 999px;
  color: var(--nc-bone);
  box-shadow: none;
  font-family: var(--nc-body);
  font-size: .85rem;
  padding: .7rem 1.15rem;
}
.products-selection select option,
select.form-control option { background: var(--nc-espresso-deep); color: var(--nc-bone); }
.products-sort-order .select-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.products-sort-order .dropdown-menu {
  background: var(--nc-espresso-deep);
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius-sm);
}
.products-sort-order .dropdown-menu .select-list { color: var(--nc-bone); }
.products-sort-order .dropdown-menu .select-list:hover { background: var(--nc-cocoa); color: var(--nc-champagne-bright); }
#js-product-list-top .total-products p, .products-selection .total-products p { color: var(--nc-dim); font-size: .85rem; }
#category #left-column, #category #search_filters,
.products-selection, #js-product-list-top {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--nc-dim);
}
#search_filters .facet-title, #search_filters .h6 {
  font-family: var(--nc-body);
  font-size: .76rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nc-champagne);
}
#search_filters { border-top: 1px solid var(--nc-line); padding-top: 1.5rem; }
.pagination .page-list { background: transparent; }
.pagination a, .pagination .current a { color: var(--nc-bone); }
.pagination .current a { color: var(--nc-champagne); }

.breadcrumb, #wrapper .breadcrumb { background: transparent; padding-left: 0; }
.breadcrumb li a, .breadcrumb li span, .breadcrumb li::after {
  color: var(--nc-dim);
  font-size: .78rem;
  letter-spacing: .1em;
}
.breadcrumb li a { color: var(--nc-bone); opacity: .78; }
.breadcrumb li a:hover { color: var(--nc-champagne-bright); opacity: 1; }

/* ==========================================================================
   POWIERZCHNIE: KOSZYK, KASA, MODALE
   Motyw bazowy rysuje biale karty i cyjanowe akcenty (#24b9d7) - na ciemnym
   tle wygladaja jak obcy element. Sprowadzamy wszystko do jednej palety.
   ========================================================================== */

.card,
.cart-grid-body .card,
.cart-grid-right .card,
#checkout .card,
.js-cart,
.cart-summary,
.cart-detailed-totals,
.block-promo,
#order-details,
.order-confirmation-table,
.page-customer-account #content,
.page-authentication #content {
  background: var(--nc-cocoa) !important;
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius-sm);
  box-shadow: none;
  color: var(--nc-bone);
}
.card-block, .card-body, .card-header, .card-footer {
  background: transparent !important;
  border-color: var(--nc-line) !important;
  color: var(--nc-bone);
}

/* nagloweki sekcji koszyka/kasy */
.cart-grid .card-block h1,
#main .cart-grid h1,
.checkout-step .step-title,
#checkout h1, #cart h1 {
  font-family: var(--nc-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  color: var(--nc-bone);
  text-transform: none !important;
  letter-spacing: 0;
}

/* pozycje w koszyku */
.cart-item { border-bottom: 1px solid var(--nc-line); padding-block: 1.25rem; }
.cart-item:last-child { border-bottom: 0; }
.cart-grid-body .product-line-grid-left img,
.cart-item .product-image img {
  background: var(--nc-bone);
  border-radius: var(--nc-radius-sm);
  padding: 6%;
}
.product-line-info a.label, .product-line-info .label,
.cart-item .product-line-info > a {
  color: var(--nc-bone) !important;
  font-family: var(--nc-body);
  font-weight: 400;
  font-size: .95rem;
  text-transform: none;
}
.product-line-info a.label:hover { color: var(--nc-champagne-bright); }
.product-line-info .product-price,
.product-line-grid-body .product-price strong,
.cart-item .price {
  color: var(--nc-champagne) !important;
  font-family: var(--nc-display);
  font-size: 1.15rem;
}
/* prawa kolumna pozycji: cena i kosz byly ciemne na ciemnym */
.product-line-grid-right .product-price,
.product-line-grid-right .price,
.cart-items .product-price {
  color: var(--nc-bone) !important;
  font-family: var(--nc-display);
  font-size: 1.25rem;
}
.cart-line-product-actions .remove-from-cart,
.product-line-actions .remove-from-cart,
.cart-line-product-actions .remove-from-cart i,
.product-line-grid-right .remove-from-cart i {
  color: var(--nc-dim) !important;
  opacity: 1;
}
.cart-line-product-actions .remove-from-cart:hover,
.cart-line-product-actions .remove-from-cart:hover i { color: var(--nc-champagne-bright) !important; }

/* karta w karcie dawala podwojna ramke */
.cart-grid-body .card .card,
.cart-grid-body .card > .cart-overview {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0;
}
.cart-grid-body > .card + .card { margin-top: 1rem; }

/* podsumowanie */
.cart-summary-line,
#blockcart-modal .cart-summary-line,
.cart-summary-line.cart-total {
  border: 0;
  background: transparent !important;
  color: var(--nc-dim);
}
.cart-summary-line .label,
.cart-summary-line .value,
#blockcart-modal .cart-summary-line .label,
#blockcart-modal .cart-summary-line span { color: var(--nc-dim) !important; }
#blockcart-modal .cart-summary-line .value { color: var(--nc-bone) !important; }
#blockcart-modal .cart-summary-line.cart-total .label,
#blockcart-modal .cart-summary-line.cart-total .value {
  color: var(--nc-bone) !important;
  font-family: var(--nc-display);
  font-size: 1.2rem;
}
.cart-summary-line.cart-total { border-top: 1px solid var(--nc-line); padding-top: 1rem; margin-top: .5rem; }
.cart-summary-line.cart-total .label,
.cart-summary-line.cart-total .value {
  color: var(--nc-bone);
  font-family: var(--nc-display);
  font-size: 1.3rem;
}
.cart-summary-line .value.free,
.cart-summary-line .free { color: var(--nc-champagne) !important; }
.cart-detailed-actions .btn, .checkout .btn { width: 100%; }

/* pola ilosci */
.bootstrap-touchspin input.form-control,
.bootstrap-touchspin input.js-cart-line-product-quantity,
.product-quantity input {
  background: transparent !important;
  border: 1px solid var(--nc-line-strong) !important;
  color: var(--nc-bone) !important;
  border-radius: var(--nc-radius-sm);
}
.bootstrap-touchspin .btn-touchspin,
.bootstrap-touchspin .input-group-btn > .btn {
  background: transparent !important;
  border: 1px solid var(--nc-line) !important;
  color: var(--nc-dim) !important;
}
.bootstrap-touchspin .btn-touchspin:hover { color: var(--nc-champagne-bright) !important; }

/* modal "dodano do koszyka" */
#blockcart-modal .modal-content,
.modal-content {
  background: var(--nc-espresso-deep);
  border: 1px solid var(--nc-line-strong);
  border-radius: var(--nc-radius);
  color: var(--nc-bone);
}
#blockcart-modal .modal-header,
#blockcart-modal .modal-body,
#blockcart-modal .modal-footer,
.modal-header, .modal-body, .modal-footer {
  background: transparent;
  border-color: var(--nc-line);
}
#blockcart-modal .modal-title,
#blockcart-modal .product-name,
#blockcart-modal h6 {
  color: var(--nc-bone) !important;
  font-family: var(--nc-body);
  font-weight: 400;
}
#blockcart-modal .modal-title i.material-icons { color: var(--nc-champagne); }
#blockcart-modal .product-price { color: var(--nc-champagne) !important; font-family: var(--nc-display); }
/* Modal ma wlasna strukture: .cart-content p + .label/.value oraz p.product-total,
   ktore motyw bazowy maluje na kremowy pasek z ciemnym tekstem. */
#blockcart-modal .cart-content p { color: var(--nc-dim); }
#blockcart-modal .cart-content .label,
#blockcart-modal .cart-content p > span:first-child { color: var(--nc-dim) !important; }
#blockcart-modal .cart-content .value,
#blockcart-modal .cart-content .subtotal,
#blockcart-modal .cart-content .shipping { color: var(--nc-bone) !important; }
#blockcart-modal .cart-content .shipping.value { color: var(--nc-champagne) !important; }
#blockcart-modal .product-total {
  background: transparent !important;
  border-top: 1px solid var(--nc-line);
  padding-top: .9rem;
  margin-top: .5rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
#blockcart-modal .product-total .label,
#blockcart-modal .product-total .value {
  color: var(--nc-bone) !important;
  font-family: var(--nc-display);
  font-size: 1.2rem;
}
#blockcart-modal .cart-products-count { color: var(--nc-bone) !important; }
#blockcart-modal .product-quantity { color: var(--nc-dim); }
#blockcart-modal .cart-content-btn { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
#blockcart-modal .cart-content .cart-products-count,
#blockcart-modal .cart-content .cart-content-btn .btn { color: var(--nc-bone); }
#blockcart-modal .divide-right { border-right: 1px solid var(--nc-line); }
#blockcart-modal .product-image {
  background: var(--nc-bone);
  border-radius: var(--nc-radius-sm);
  padding: 4%;
}
#blockcart-modal .close, .modal .close { color: var(--nc-bone); opacity: .7; text-shadow: none; }
#blockcart-modal .close:hover { opacity: 1; color: var(--nc-champagne-bright); }
/* "Kontynuuj zakupy" bylo jasnym tekstem na jasnym tle */
#blockcart-modal .btn-secondary,
#blockcart-modal .cart-content-btn .btn-secondary {
  background: transparent !important;
  border: 1px solid var(--nc-line-strong) !important;
  color: var(--nc-bone) !important;
}

/* licznik koszyka w naglowku - domyslnie cyjanowy kafel */
#_desktop_cart .header, .blockcart, .blockcart.active,
#header .blockcart {
  background: transparent !important;
  color: var(--nc-bone) !important;
}
#header .blockcart a, #header .blockcart .cart-products-count { color: var(--nc-bone) !important; }
#header .blockcart:hover a { color: var(--nc-champagne-bright) !important; }
#header .blockcart .shopping-cart { color: var(--nc-champagne); }

/* wszystko co motyw bazowy maluje na cyjan */
a.text-primary, .text-primary, .link-primary,
.product-line-info a, .btn-link, .custom-checkbox input[type="checkbox"] + span.color,
#checkout .step-edit, .checkout-step .step-number { color: var(--nc-champagne) !important; }
.custom-checkbox input[type="checkbox"] + span,
.custom-radio { border-color: var(--nc-line-strong); }
.custom-checkbox input[type="checkbox"]:checked + span,
.custom-radio input[type="radio"]:checked + span { background: var(--nc-champagne); border-color: var(--nc-champagne); }
.alert-success { background: rgba(198,166,106,.12); border-color: var(--nc-line-strong); color: var(--nc-bone); }

/* kroki kasy */
#checkout .checkout-step { border-bottom: 1px solid var(--nc-line); }
#checkout .checkout-step .step-title { color: var(--nc-bone); }
#checkout .checkout-step.-current .step-title { color: var(--nc-champagne); }

/* naglowek kasy */
.nc-checkout-nav { padding-block: 1.25rem; border-bottom: 1px solid var(--nc-line); }
.nc-checkout-nav__note {
  color: var(--nc-dim);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* numer kroku - domyslnie zielony znacznik motywu bazowego */
#checkout .checkout-step .step-number,
#checkout .checkout-step.-current .step-number,
#checkout .checkout-step.-reachable.-complete .step-number {
  background: var(--nc-champagne) !important;
  color: var(--nc-espresso-deep) !important;
  border: 0;
  font-family: var(--nc-body);
  font-weight: 500;
}
#checkout .checkout-step:not(.-current):not(.-complete) .step-number {
  background: transparent !important;
  color: var(--nc-dim) !important;
  border: 1px solid var(--nc-line-strong);
}
/* nieaktywne kroki maja byc przygaszone, ale nadal czytelne */
#checkout .checkout-step:not(.-current) .step-title { color: var(--nc-dim); opacity: .85; }
#checkout .checkout-step .step-title .done { color: var(--nc-champagne); }

/* przycisk "Pokaz" przy hasle */
#checkout .input-group-btn .btn,
.input-group .btn-secondary,
button[data-action="show-password"] {
  background: transparent !important;
  border: 1px solid var(--nc-line-strong) !important;
  color: var(--nc-dim) !important;
  border-radius: var(--nc-radius-sm);
  letter-spacing: .12em;
}
button[data-action="show-password"]:hover { color: var(--nc-champagne-bright) !important; }

/* stopka kasy */
.nc-checkout-footer,
#checkout #footer .container,
.page-order #footer p {
  color: var(--nc-dim);
  font-size: .78rem;
  letter-spacing: .1em;
  padding-block: 2rem;
}
.nc-checkout-footer a { color: var(--nc-dim); }
.nc-checkout-footer a:hover { color: var(--nc-champagne-bright); }

/* podsumowanie zamowienia z boku */
#checkout .cart-summary .media-body,
#checkout .cart-summary .product-name { color: var(--nc-bone); }
#checkout .cart-summary .product-price { color: var(--nc-champagne); }
#checkout #cart-summary-product-list .media-list .media img {
  background: var(--nc-bone);
  border-radius: var(--nc-radius-sm);
  padding: 4%;
}
#checkout .js-cart-summary-subtotals-container,
#checkout .cart-summary-subtotals-container { border-top: 1px solid var(--nc-line); }
#checkout a[data-link-action="show-summary"],
#checkout .show-details { color: var(--nc-champagne); }
#checkout .delivery-option, #checkout .payment-option {
  background: transparent;
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius-sm);
  margin-bottom: .75rem;
  padding: 1rem;
}
#checkout .delivery-option:hover, #checkout .payment-option:hover { border-color: var(--nc-line-strong); }

/* etykiety i pola formularzy */
.form-control-label, label, .form-control-comment { color: var(--nc-dim); }
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], textarea {
  background: transparent;
  border: 1px solid var(--nc-line-strong);
  color: var(--nc-bone);
  border-radius: var(--nc-radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--nc-dim); }

/* pusty koszyk */
#cart .cart-grid-body .card-block p { color: var(--nc-dim); }
.cart-grid-body .label, #cart .card-block a { color: var(--nc-bone); }

/* ==========================================================================
   STOPKA
   ========================================================================== */

#footer { background: transparent; padding: 0; }

.nc-footer {
  border-top: 1px solid var(--nc-line);
  background: var(--nc-espresso-deep);
  margin-top: clamp(3rem, 7vw, 6rem);
}
.nc-footer__inner {
  max-width: var(--nc-max);
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 5rem) var(--nc-gutter) 2rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.nc-footer__note { color: var(--nc-dim); max-width: 40ch; margin-top: 1.25rem; font-size: .92rem; }
.nc-footer h4 {
  font-family: var(--nc-body);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--nc-champagne);
  margin-bottom: 1.1rem;
}
.nc-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.nc-footer a { color: var(--nc-dim); font-size: .95rem; }
.nc-footer a:hover { color: var(--nc-bone); }
.nc-footer__bottom {
  border-top: 1px solid var(--nc-line);
  max-width: var(--nc-max);
  margin-inline: auto;
  padding: 1.5rem var(--nc-gutter);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--nc-dim);
}

#footer .block-contact, #footer .links, #footer .block_newsletter {
  background: transparent;
  box-shadow: none;
  border: 0;
  color: var(--nc-dim);
}
#footer .block_newsletter input[type="email"] {
  background: transparent;
  border: 1px solid var(--nc-line-strong);
  border-radius: 999px;
  color: var(--nc-bone);
  padding: .85rem 1.25rem;
}

/* ==========================================================================
   RUCH
   ========================================================================== */

.nc-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--nc-ease), transform .9s var(--nc-ease);
}
.nc-reveal.is-in { opacity: 1; transform: none; }
.nc-reveal[data-delay="1"] { transition-delay: .09s; }
.nc-reveal[data-delay="2"] { transition-delay: .18s; }
.nc-reveal[data-delay="3"] { transition-delay: .27s; }
.nc-reveal[data-delay="4"] { transition-delay: .36s; }

/* sekwencja wejscia hero */
.nc-hero .nc-shelf {
  opacity: 0;
  transform: translateY(36px) scale(.97);
  animation: nc-shelf-in 1.1s var(--nc-ease) forwards;
}
.nc-hero .nc-shelf--a { animation-delay: .15s; }
.nc-hero .nc-shelf--b { animation-delay: .3s; }
.nc-hero .nc-shelf--c { animation-delay: .45s; }

@keyframes nc-shelf-in {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .nc-reveal { opacity: 1; transform: none; }
  .nc-hero .nc-shelf { opacity: 1; transform: none; }
}

/* ==========================================================================
   RESPONSYWNOSC
   ========================================================================== */

@media (max-width: 1024px) {
  .nc-hero__inner { grid-template-columns: 1fr; }
  .nc-hero__stage { min-height: 400px; order: -1; }
  .nc-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nc-promise__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .nc-footer__inner { grid-template-columns: 1fr; }
  .nc-section__head { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .nc-hero__stage { min-height: 320px; }
  .nc-shelf--c { display: none; }
  .nc-nav { gap: 1.1rem; flex-wrap: wrap; }
  .nc-nav a { font-size: .7rem; letter-spacing: .14em; }
  .products, #products .products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .9rem; }
  .product-miniature .thumbnail-container { border-radius: 1.5rem; }
  .product-miniature .thumbnail-container::after { width: 22px; height: 22px; top: .85rem; left: .85rem; }
  .product-miniature .product-description { padding-inline: 1rem; }
}

/* elementy classic ktore nie pasuja do tego motywu */
#header .header-top .menu, .header-top #_desktop_logo img { max-height: 46px; }
.header-banner { display: none; }
/* wlasny naglowek sekcji zastepuje ten z modulu */
.featured-products > .products-section-title,
.featured-products > h2.products-section-title { display: none !important; }
/* classic liczy wysokosc kafla od stalej stopki - u nas uklad jest plynny */
.product-miniature .thumbnail-container .product-thumbnail { height: auto !important; }
.product-miniature .thumbnail-container .thumbnail-top { position: static; }