@charset "UTF-8";
@import url("//hello.myfonts.net/count/340d13");
* {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  margin: 0;
  padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block; }

audio, canvas, video {
  display: inline-block;
  *display: inline;
  *zoom: 1; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 1em; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden] {
  display: none; }

html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */ }

html, button, input, select, textarea {
  font-family: sans-serif; }

a, a:active, a:hover {
  outline: 0;
  text-decoration: none; }

abbr[title] {
  border-bottom: 1px dotted; }

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

mark {
  background: #ff0;
  color: #000; }

code, kbd, pre, samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

q {
  quotes: none; }

q:before, q:after {
  content: '';
  content: none; }

small {
  font-size: 75%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

dl, menu, ol, ul {
  list-style: none; }

img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */ }

svg:not(:root) {
  overflow: hidden; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  /* 1 */
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */ }

button, input, select, textarea {
  font-size: 100%;
  /* 1 */
  vertical-align: baseline;
  /* 3 */
  *vertical-align: middle;
  /* 3 */ }

button, input {
  line-height: normal; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
  *overflow: visible;
  /* 4 */ }

button[disabled],
input[disabled] {
  cursor: default; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */ }

input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@keyframes rotation {
  0% {
    transform: rotate(-90deg); }
  100% {
    transform: rotate(0deg); } }

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(-90deg); }
  100% {
    -webkit-transform: rotate(0deg); } }

@-webkit-keyframes $animation-name {
  0% {
    transform: rotate(0deg); }
  33% {
    transform: rotate(-45deg); }
  66% {
    transform: rotate(45deg); }
  100% {
    transform: rotate(0deg); } }

@-moz-keyframes $animation-name {
  0% {
    transform: rotate(0deg); }
  33% {
    transform: rotate(-45deg); }
  66% {
    transform: rotate(45deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes $animation-name {
  0% {
    transform: rotate(0deg); }
  33% {
    transform: rotate(-45deg); }
  66% {
    transform: rotate(45deg); }
  100% {
    transform: rotate(0deg); } }

/**
 * @license
 * MyFonts Webfont Build ID 3411219, 2017-06-25T11:42:08-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: HelveticaLTWXX-Light by Linotype
 * URL: https://www.myfonts.com/fonts/linotype/helvetica/pro-light/
 * Copyright: Copyright © 2014 Monotype Imaging Inc. All rights reserved.
 * Licensed pageviews: 250,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3411219
 * 
 * © 2017 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@font-face {
  font-family: 'HelveticaLTWXX-Light';
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/340D13_0_0.eot");
  src: url("../fonts/340D13_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/340D13_0_0.woff2") format("woff2"), url("../fonts/340D13_0_0.woff") format("woff"), url("../fonts/340D13_0_0.ttf") format("truetype"); }

html, body {
  height: 100%; }

body {
  line-height: 1.6;
  font-size: 24px;
  font-family: 'HelveticaLTWXX-Light', sans-serif;
  color: #000;
  text-align: left;
  background-color: #fff; }
  @media (max-width: 1440px) {
    body {
      font-size: 21px; } }
  @media (max-width: 960px) {
    body {
      font-size: 18px; } }
  @media (max-width: 640px) {
    body {
      font-size: 16px; } }

a, a:visited, a:focus {
  text-decoration: none;
  color: #000;
  outline: none; }

.entry-content a, a:hover, a:hover > * {
  color: #0000ff !important; }

img {
  display: inline-block;
  max-width: 100%;
  height: auto; }

.left {
  float: left; }

.right {
  float: right; }

.one {
  width: 100%; }

.one-two {
  width: 50%; }
  @media (max-width: 640px) {
    .one-two {
      width: 100%; } }

.one-three {
  width: 33.333333%; }
  @media (max-width: 640px) {
    .one-three {
      width: 100%; } }

.two-three {
  width: 66.666666%; }
  @media (max-width: 640px) {
    .two-three {
      width: 100%; } }

.hide {
  display: none; }

.show {
  display: block; }

.wrapper {
  margin: 0 auto;
  max-width: 50em;
  padding: 0 2em;
  position: relative;
  *zoom: 1; }
  .wrapper:before, .wrapper:after {
    content: "";
    display: table; }
  .wrapper:after {
    clear: both; }
  @media (max-width: 640px) {
    .wrapper {
      padding: 0 1.5em; } }

.full-height {
  max-height: 100%;
  overflow: hidden;
  position: relative; }

.full-height video {
  display: block;
  width: 100%;
  height: auto; }
  @media (max-width: 960px) {
    .full-height {
      height: auto; } }
  @media screen and (max-aspect-ratio: 4 / 3) {
    .full-height {
      height: auto; } }

.black {
  color: #000; }
  .black a, .black a:visited, .black a:focus {
    color: #000; }

.white {
  color: #fff; }
  .white a, .white a:visited, .white a:focus {
    color: #fff; }

.light-grey {
  color: #B4B4B4; }
  .light-grey a, .light-grey a:visited, .light-grey a:focus {
    color: #B4B4B4; }

.dark-grey {
  color: #464646; }
  .dark-grey a, .dark-grey a:visited, .dark-grey a:focus {
    color: #464646; }

.middle-grey {
  color: #7A7A7A; }
  .middle-grey a, .middle-grey a:visited, .middle-grey a:focus {
    color: #7A7A7A; }

.entry-categories {
  margin: 1.25em 0 0 0.3em; }

.columns-two {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em; }
  @media (max-width: 640px) {
    .columns-two {
      -webkit-columns: 1;
      -moz-columns: 1;
      columns: 1; } }

.big-title {
  display: inline-block;
  font-size: 4em;
  line-height: 1;
  word-wrap: break-word; }
  @media (max-width: 780px) {
    .big-title {
      font-size: 4em; } }
  @media (max-width: 640px) {
    .big-title {
      font-size: 2.5em; } }
  @media (max-width: 380px) {
    .big-title {
      font-size: 2.0em; } }

.single-title, .home-entry-header {
  position: absolute;
  left: 5%;
  top: 10%;
  width: 90%; }
  @media (max-width: 960px) {
    .single-title, .home-entry-header {
      top: 4em; } }
  @media (max-width: 780px) {
    .single-title, .home-entry-header {
      top: 3em; } }
  @media (max-width: 640px) {
    .single-title, .home-entry-header {
      top: 60%; } }
  @media screen and (max-aspect-ratio: 4 / 3) {
    .single-title, .home-entry-header {
      position: absolute; } }

/*
 *	------------------------------------------------------- 	MENU
 */
.logged-in #access {
  top: 32px; }

.category #access + *, .page-template-info #access + *, .blog #access + * {
  padding-top: 170px; }
  @media (max-width: 640px) {
    .category #access + *, .page-template-info #access + *, .blog #access + * {
      padding-top: 170px; } }

#access {
  position: fixed;
  z-index: 8; }
  #access ul {
    position: fixed;
    top: 40px;
    padding: 20px 0;
    display: block;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 9;
    text-align: center; }
  #access li {
    display: inline-block;
    padding: 0 1.4em; }
    @media (max-width: 780px) {
      #access li {
        padding: 0 .75em; } }
    @media (max-width: 640px) {
      #access li {
        padding: 0 .5em; } }
    @media (max-width: 380px) {
      #access li {
        padding: 0 .3em; } }
    @media (max-width: 340px) {
      #access li {
        padding: 0 .25em; } }
  #access li:first-child {
    padding-left: 0; }
  #access li:last-child {
    padding-right: 0; }
    #access li:last-child a {
      text-transform: uppercase; }
  #access a {
    float: left;
    display: block;
    text-shadow: 0 0 1px #fff;
    color: #000;
    /* czas hoveru 0,3 s ease-out — ten sam co w CTA i w navbarze sklepu,
       z pliku prototypu XD; `transition` na kolorze nie rusza układu */
    transition: color 0.3s ease-out; }
  /* Hover = przygaszenie, nie firmowy niebieski — zgł. klienta 09.10.2026:
     „w navbarze też to wprowadź" (sklep) i „zmień też żółty hover w navbarze
     studia na wyciemnienie". Ten blok to wariant bez `mix-blend-mode` (fallback
     dla przeglądarek bez obsługi blendu), więc tutaj zwykła czerń 50 %. */
  #access a:hover {
    color: rgba(0, 0, 0, 0.5) !important; }

/* If property is supported */
@supports (mix-blend-mode: difference) {
  #access {
    mix-blend-mode: difference; }
    #access ul {
      mix-blend-mode: difference; }
    #access a {
      color: #fff;
      text-shadow: none; }
    /* Hover = wyciemnienie, nie żółty (zgł. klienta 09.10.2026: „w navbarze też
       to wprowadź" + „zmień też żółty hover w navbarze studia na wyciemnienie").
       UWAGA — ten navbar ma `mix-blend-mode: difference`, więc biel 50 % nie jest
       tu zwykłą półprzezroczystą bielą: przy difference
       wynik = (1−α)·tło + α·|tło − źródło|, a dla źródła białego i α = 0,5 daje to
       STAŁĄ szarość 50 % (#808080) NIEZALEŻNIE od tła — czyli dokładnie ten sam
       stopień przygaszenia co w sklepie, tyle że sam się dopasowuje do jasnych
       i ciemnych partii zdjęć pod navbarem.
       Zmierzone przed zmianą: `#ffff00` nad białym tłem renderował się jako
       czysty niebieski rgb(0, 0, 255) (odwrotność żółtego) — dlatego klient
       widział w navbarze studia niebieski hover. Po zmianie: (128, 128, 128)
       na każdym tle. */
    #access a:hover {
      color: rgba(255, 255, 255, 0.5) !important; }
    #access li.is-active a {
      color: #ffff00 !important; } }

/*
 *	------------------------------------------------------- 	HOME
 */

/* Hero cards */
.home-entry {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
  color: #000; }

.home-entry a {
  color: #000; }

.home-entry a:hover {
  color: #0000ff !important; }

/* Desktop: a card flagged .white (dark photo) must render its title and
   category links white. The rule above (.home-entry a, same specificity,
   later in the file) otherwise beats .white a and keeps them black.
   Desktop only — ≤1024px forces black card titles on purpose. */
@media (min-width: 1025px) {
  .home-entry-header.white a,
  .home-entry-header.white a:visited,
  .home-entry-header.white a:focus {
    color: #fff; } }

.home-entry-img-link {
  display: flex;
  flex-direction: column;
  height: 100%; }

.home-entry-title-link {
  display: block;
  pointer-events: auto; }

.home-entry img,
.home-entry video {
  width: 100%;
  display: block;
  flex: 1;
  height: 100%;
  object-fit: cover; }

@media (max-width: 1024px) {
  .home-entry {
    height: 100svh; }

  .home-entry-header,
  .home-entry-header.white,
  .home-entry-header.white a,
  .home-entry-header.white a:visited {
    color: #000; }

  .home-entry-img-link {
    height: 100%;
    display: flex;
    flex-direction: column; }

  .home-entry img,
  .home-entry video {
    flex: 1;
    height: 100%;
    object-fit: cover; } }

/* Overlaid title/cats */
.home-entry-header {
  position: absolute;
  left: 5%;
  top: 160px;
  width: 90%;
  pointer-events: none; }

.home-entry-header .home-entry-title-link,
.home-entry-header .big-title {
  pointer-events: auto; }

.home-entry-header .entry-cats {
  display: block;
  margin-top: 1em;
  margin-left: 0.3em;
  font-size: 1em;
  pointer-events: auto; }

.home-entry-header .entry-cats a {
  display: inline;
  pointer-events: auto; }

/* About / contact section */
.home-info {
  background-color: #fff;
  padding-top: 4em; }

.home-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em; }

.home-info-grid--contact {
  margin-top: 3em; }

.home-info-grid p {
  margin-bottom: 1em; }

.home-info-grid p:last-child {
  margin-bottom: 0; }

.contact-block h4 {
  margin-bottom: 1.25em; }

.contact-list p {
  margin: 0; }

@media (max-width: 640px) {
  .home-info-grid {
    grid-template-columns: 1fr;
    gap: 2em; } }

/* Legacy (kept for compatibility) */
.full-thumbnail {
  width: 100%;
  display: block;
  height: auto; }

/*
 *	------------------------------------------------------- 	CIRCLE
 */
.kolo-wrap {
  padding: 120px 0;
  text-align: center;
  background-color: #fff; }
  @media (max-width: 960px) {
    .kolo-wrap {
      width: 100%;
      padding: 7em 0 5em; } }
  @media (max-width: 640px) {
    .kolo-wrap {
      padding: 5em 0 2em;
      overflow: hidden;
      text-align: left; } }


#kolo {
  display: inline-block;
  width: auto;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  transform: scale(1.05);
  transform-origin: center center;
  cursor: grab; }
  @media (max-width: 960px) {
    #kolo {
      width: 83.33%;
      height: auto;
      float: none; } }
  @media (max-width: 640px) {
    #kolo {
      width: 145%;
      height: auto;
      max-width: none;
      max-height: none;
      margin-left: -72.5%;
      transform: none;
      float: none; } }
  #kolo a {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; }

.kolo-wrap.is-dragging #kolo {
  cursor: grabbing; }

.pizza-slice .pizza-slice-bg {
  fill: #fff;
  transition: fill 0.2s linear; }

.pizza-slice:hover .pizza-slice-bg {
  fill: #0000ff !important; }

.pizza-slice:hover g {
  fill: #fff; }

.pizza-slice-child.active .pizza-slice-bg {
  fill: #0000ff !important;
  transition: fill 0.2s linear; }

.pizza-slice-child.active g {
  fill: #fff; }

.pizza-slice.is-center .pizza-slice-bg {
  fill: #0000ff !important;
  transition: fill 0.2s linear; }

.pizza-slice.is-center g {
  fill: #fff; }

@media (max-width: 640px) {
  .slice-label {
    font-family: 'HelveticaLTWXX-Light', sans-serif;
    font-size: 18px;
    fill: #000;
    pointer-events: none; }
  .pizza-slice-parent .slice-label {
    font-size: 22px; }
  .pizza-slice.is-center .slice-label {
    fill: #000; }
  .pizza-slice:hover .pizza-slice-bg,
  .pizza-slice-child.active .pizza-slice-bg,
  .pizza-slice.is-center .pizza-slice-bg {
    fill: #fff !important; }
  .pizza-slice:hover g,
  .pizza-slice-child.active g,
  .pizza-slice.is-center g {
    fill: inherit; } }

/*
 *	------------------------------------------------------- 	WHEEL
 */
.kolo-fortuna {
  position: relative;
  max-width: 669px;
  margin: 0 auto; }

/*
 *	------------------------------------------------------- 	SINGLE & 404
 */
.error404 .full-height {
  height: 100%; }

.error404 .bg-cover {
  background-image: url(../images/404.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 4em 0; }

.error404 #footer {
  margin-top: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 4; }

.single .entry-footer span, .error404 .entry-footer span {
  display: block; }

.single .entry-categories {
  margin: 0; }

/* Same distance below the menu as the project titles on the home page, which
   sit at a flat 160px (.home-entry-header) at every width. The old 0.8em was
   relative to the title's own 4em font-size, so it worked out to roughly 67px
   and shifted around as the body font-size changed across breakpoints. */
.single-title {
  top: 160px; }

.single-title.affix {
  position: absolute;
  left: 5%;
  top: auto;
  bottom: 60px; }

.single-title.affix-top {
  position: fixed; }

.single-content {
  padding: 3.5em 0;
  background-color: #fff; }
  .single-content .entry-content {
    margin: 0.625em 0 2em; }

/* Mobile project pages: hero photo takes ~70% of the first screen (client:
   full screen or at least ~half; full screen would hide the description
   entirely, so ~70% is the compromise). The title stays inside the photo,
   the description starts at ~70vh so part (usually all) of it is visible,
   and the white content section stretches to the fold when a black gallery
   follows, so the black section never peeks into the first screen. */
@media (max-width: 640px) {
  .single .full-height {
    height: 70vh;
    height: 70svh; }
  .single .full-height img,
  .single .full-height video {
    height: 100%;
    object-fit: cover; }
  .single .single-content:has(+ .single-gallery) {
    min-height: 30vh;
    min-height: 30svh; } }

/* Tablets (641-1024): same treatment as mobile (client 2026-08-26) — the
   hero photo gets bigger so the first screen ends with the white
   description, and the black gallery is pushed below the fold. */
@media (min-width: 641px) and (max-width: 1024px) {
  .single .full-height {
    height: 70vh;
    height: 70svh; }
  .single .full-height img,
  .single .full-height video {
    height: 100%;
    object-fit: cover; }
  .single .single-content:has(+ .single-gallery) {
    min-height: 30vh;
    min-height: 30svh; } }

.single-gallery {
  background-color: #000;
  color: #fff; }
  @media (max-width: 640px) {
    .single-gallery {
      padding-bottom: 1.5em; } }

.single-videos > * {
  margin: 1.5em 0; }
  @media (max-width: 640px) {
    .single-videos > * {
      margin-bottom: 0; } }

.gallery-item {
  margin: 1.5em 0;
  clear: both;
  max-width: 580px; }

.gallery-item video {
  display: block;
  width: 100%;
  height: auto; }
  @media (max-width: 640px) {
    .gallery-item {
      margin-bottom: 0; } }
  .gallery-item figcaption {
    margin-top: 1em; }

/*
 *	------------------------------------------------------- 	PROJECTS GRID
 */

/* Outer two-column: sidebar + grid */
.page-projects {
  display: grid;
  grid-template-columns: 24vw 1fr;
  align-items: start;
  padding-top: 170px;
  max-width: 100%;
  box-sizing: border-box; }

/* Sticky category sidebar */
.projects-sidebar {
  position: sticky;
  top: 170px;
  align-self: start;
  display: flex;
  justify-content: center; }

.projects-nav {
  padding: 0;
  /* Desktop: the list is sticky under the fixed menu — if it ever grows
     taller than the viewport (short laptop screens), scroll the list
     itself instead of letting the last filters get buried below the
     fold. */
  max-height: calc(100vh - 170px);
  overflow-y: auto; }

.projects-nav ul {
  list-style: none;
  margin: 0;
  padding: 0; }

.projects-nav > ul > li {
  padding: calc(0.9em + 6px) 0 0; }

.projects-nav > ul > li:first-child {
  padding-top: 0; }

.projects-nav > ul > li > ul > li {
  padding: calc(0.4em + 4px) 0 0; }

.projects-nav li a {
  display: block;
  text-align: left;
  font-size: 0.85em; }

.projects-nav li a:hover,
.projects-nav li a.active-filter {
  color: #0000ff; }

/* Indent child categories */
.projects-nav .children {
  padding-left: 1em; }

/* 3-column grid */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 52vw;
  justify-self: start; }

.project-card {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  position: relative; }

.project-card-inner {
  width: 100%;
  height: 100%;
  position: relative; }

.project-card-front {
  width: 100%;
  height: 100%; }

.project-card img,
.project-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; }

.project-card-back {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease; }

.project-card:hover .project-card-back {
  opacity: 1; }

.project-card-title {
  color: #fff;
  font-size: 1em;
  text-align: center;
  padding: 0 1em; }

@media (pointer: coarse) and (min-width: 641px) {
  #access ul {
    top: 50px; }

  #access li {
    padding: 0 1.4em; }

  #access a {
    font-size: 1.2em; }

  .projects-nav li a {
    font-size: 1.2em; }

  .projects-nav > ul > li {
    padding: 0.8em 0 0; }

  .page-projects {
    display: flex;
    flex-direction: column;
    padding: 130px 0 0 !important; }

  /* Transparent like the phone layout (client 2026-10-06): neither the
     band nor the menu zone above it has a background, so photos scroll
     behind both. Difference blending keeps the filter text readable on any
     photo — over the white page background it reads black, over a photo
     white — exactly like the navbar. */
  .projects-sidebar {
    position: sticky;
    top: 130px !important;
    z-index: 7;
    align-self: stretch;
    padding: 0 1em 0.5em; }

  @supports (mix-blend-mode: difference) {
    .projects-sidebar {
      mix-blend-mode: difference; }
    .projects-sidebar a {
      color: #fff !important; }
    .projects-sidebar a:hover,
    .projects-sidebar li.is-open > a,
    .projects-sidebar a.active-filter {
      color: #ffff00 !important; } }

  .projects-nav {
    width: 100%; }

  .projects-nav > ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0 1.5em;
    list-style: none;
    margin: 0;
    padding: 0; }

  .projects-nav > ul > li {
    padding: 0.6em 0 0;
    list-style: none; }

  .projects-nav > ul > li:first-child {
    padding-top: 0.6em; }

  .projects-nav > ul > li > ul.children {
    display: none; }

  .projects-nav > ul > li.is-open > a {
    color: #0000ff; }

  .mobile-sub-nav {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 0 1.5em;
    list-style: none;
    margin: 0;
    padding: 0.6em 0 0; }

  .mobile-sub-nav.is-visible {
    display: flex; }

  .mobile-sub-nav li {
    list-style: none;
    padding: 0; }

  /* Same size as the main filter row (1.2em) — client 2026-08-26: both
     filter rows must match after expanding. */
  .mobile-sub-nav li a {
    font-size: 1.2em; }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 70%;
    margin: 2.5em auto 0; } }

@media (max-width: 640px) {
  /* Block (not flex) parent: position:sticky on a flex item is broken in
     Safari — the filter band would scroll away instead of sticking. */
  .page-projects {
    display: block;
    padding: 161px 0 0 !important; }

  .projects-sidebar {
    position: sticky;
    top: 161px !important;
    z-index: 7;
    width: 100%;
    padding: 0 1em 0.5em; }

  /* JS pins the band with position:fixed (works on every mobile browser,
     unlike sticky, which some flex/block contexts on iOS ignore) — sticky
     remains the no-JS fallback. */
  .projects-sidebar.is-fixed {
    position: fixed;
    left: 0;
    right: 0; }

  /* Transparent top: the band and the menu zone above it have no
     background — photos scroll behind them. Difference blending keeps the
     white filter text readable on any photo, exactly like the navbar. */
  @supports (mix-blend-mode: difference) {
    .projects-sidebar {
      mix-blend-mode: difference; }
    .projects-sidebar a {
      color: #fff !important; }
    .projects-sidebar a:hover,
    .projects-sidebar li.is-open > a,
    .projects-sidebar a.active-filter {
      color: #ffff00 !important; } }

  .projects-nav {
    width: 100%;
    /* Mobilny pasek filtrów to jedna-dwie krótkie linie — nic tu nie wymaga
       pionowego przewijania, a reguła desktopowa (max-height/overflow-y:auto)
       rysowała wewnętrzny scrollbar przy filtrach: hitboxy linków z ujemnymi
       marginesami (0.7em) wystają ~3 px poza listę i wystarczyły, by w wąskim
       oknie / klasycznych scrollbarach pojawiał się pasek przewijania.
       Desktop (także niski, gdzie lista filtrów naprawdę się nie mieści)
       zostaje bez zmian — tam scroll listy jest celowy. */
    max-height: none;
    overflow: visible; }

  .projects-nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.5em;
    list-style: none;
    margin: 0;
    padding: 0; }

  .projects-nav > ul > li {
    padding: 0.5em 0 0;
    list-style: none; }

  .projects-nav > ul > li:first-child {
    padding-top: 0.5em; }

  /* hide nested children — shown via .mobile-sub-nav instead */
  .projects-nav > ul > li > ul.children {
    display: none; }

  .projects-nav > ul > li.is-open > a {
    color: #0000ff; }

  /* Bigger tap targets — padding grows the hitbox, the matching
     negative margins keep the visual spacing identical. Font slightly
     smaller than the navbar (16px at this breakpoint). */
  .projects-nav li a {
    font-size: 0.95em;
    padding: 0.7em 0.7em;
    margin: -0.7em -0.7em;
    touch-action: manipulation; }

  /* The extra 0.5em padding below the filter row applies ALWAYS —
     in the collapsed state it widens the filters→photo gap, and in the
     expanded state it keeps the same margin above the subcategory row. */
  .projects-nav > ul {
    padding-bottom: 0.5em; }

  /* second row that JS populates */
  /* .projects-nav ul { padding: 0 } (0,1,1) would beat a bare
     .mobile-sub-nav (0,1,0), so repeat the class to win */
  .projects-nav .mobile-sub-nav {
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 0 1.5em;
    list-style: none;
    margin: 0;
    /* 1.25em top = visual gap filters→sub-row (with the 0.5em main-row
       padding above it); 0.5em bottom = visual gap sub-row→photo */
    padding: 1.25em 0 0.5em; }

  .mobile-sub-nav.is-visible {
    display: flex; }

  .mobile-sub-nav li {
    list-style: none;
    padding: 0; }

  .mobile-sub-nav li a {
    font-size: 0.95em;
    padding: 0.7em 0.7em;
    margin: -0.7em -0.7em;
    touch-action: manipulation; }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 6px;
    width: 75%;
    margin: 1.5em auto 0; } }

/*
 *	------------------------------------------------------- 	INFO
 */
.info {
  background-color: #fff; }
  .info .one-two header {
    margin-bottom: 1.25em; }
  .info .studio header {
    margin-bottom: 0; }
  .info .one-two.right {
    padding-left: 1.25em; }
    @media (max-width: 640px) {
      .info .one-two.right {
        margin-top: 1.25em;
        padding-left: 0; } }
  .info .one-two.left {
    padding-right: 1.25em; }
    @media (max-width: 640px) {
      .info .one-two.left {
        padding-right: 0; } }
  .info .studio {
    clear: right; }
  .info .exhibitions .info-section-title:hover {
    color: #0000ff; }

.page-template-info .info-section-title {
  cursor: pointer; }

.page-template-info .info-section-content {
  display: none;
  margin-bottom: 1.25em; }

.page-template-info article {
  margin-bottom: 2.5em; }

.page-template-info article.exhibitions {
  margin-bottom: 0; }

.page-template-info .roberto {
  padding: 3em 2em 0 3em; }
  @media (max-width: 960px) {
    .page-template-info .roberto {
      padding: 3em 2em 0 2em; } }

.page-template-info #footer {
  margin-top: 0; }

#map {
  margin-top: 2.5em;
  height: 600px;
  height: 60vh; }

/*
 *	------------------------------------------------------- 	FOOTER
 */
.single #footer {
  margin-top: 0; }

#footer {
  background-color: #000;
  margin-top: 4em; }
  #footer .wrapper {
    padding-top: 1.2em;
    padding-bottom: 1.2em; }
  #footer p {
    font-size: 0.8em; }
  #footer p, #footer a {
    color: #fff; }
  @media (max-width: 640px) {
    #footer p.right {
      width: 100%;
      float: left;
      padding-top: 1em; } }
  #footer p.right, #footer p.right a {
    color: #777; }
  #footer a:visited, #footer a:focus {
    color: #777; }
  #footer a:hover {
    color: #ccc; }

.category #footer {
  margin-top: 0; }

/* Sticky footer via flexbox. The old fixed height + negative margin trick
   forced the footer box (3.4em/5.2em) shorter than its real content, so the
   black box ended above the page bottom and left a white strip below it.
   Flex sizes the footer to its content and pins it to the bottom on short
   pages; dvh tracks the collapsing mobile URL bar (vh fallback). */
body.category {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; }

.category .sticky-footer-wrapper {
  flex: 1 0 auto; }

/* Spacer only needed by the old height-based trick */
.category .footer-push {
  display: none; }

.category #footer {
  flex: 0 0 auto;
  height: auto; }

/*
 * ------------------------------------------------------- PROCESS PAGE
 */

/*
 *	------------------------------------------------------- 	RPDS
 */

html.rpds-snap {
  scroll-behavior: smooth; }

.page-rpds {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  box-sizing: border-box;
  padding: 120px 2em 20px; }
  /* Match .home-entry so every section tiles to the same height */
  @media (max-width: 1024px) {
    .page-rpds {
      height: 100svh; } }
  @media (max-width: 640px) {
    .page-rpds {
      padding-left: 0;
      padding-right: 0; } }

.page-rpds .kolo-wrap {
  padding: 0; }

.rpds-wheel {
  width: min(90vh, 95vw);
  max-width: 900px;
  height: auto;
  display: block; }

.rpds-wheel text {
  font-size: 13px;
  font-family: inherit;
  fill: #000; }

.rpds-scroll-down {
  position: fixed;
  left: auto;
  right: 1.2em;
  bottom: 1.2em;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4em;
  height: 3.4em;
  padding: 0;
  border: 1px solid #0000ff;
  border-radius: 50%;
  background: transparent;
  color: #0000ff;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, color 0.2s, opacity 0.3s, visibility 0.3s; }
  .rpds-scroll-down svg {
    display: block;
    width: 1.3em;
    height: 1.3em; }
  .rpds-scroll-down:hover {
    background: #0000ff;
    color: #fff; }
  .rpds-scroll-down.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; }
  /* Touch only — desktop scrolls freely and has no snapping to step through */
  @media (min-width: 1025px) {
    .rpds-scroll-down {
      display: none; } }
  /* Same bottom-right corner on every breakpoint; on phones the circle is
     smaller and lifted so the gap below it equals the gap above the menu
     (client 2026-08-26). The menu ul sits at top:50px plus 20px of its own
     top padding, so its visible text starts 70px below the top edge — the
     circle mirrors that: 70px above the bottom edge. */
  @media (max-width: 640px) {
    .rpds-scroll-down {
      width: 3em;
      height: 3em;
      bottom: 70px; } }

/*
 *	------------------------------------------------------- 	PROCESS
 *  UWAGA: każdy zakres jest osobno "zablokowany" na końcu sekcji:
 *  DESKTOP LOCK (min-1025), TABLET LOCK (641-1024), MOBILE LOCK (max-640).
 *  Zmiany dla danego urządzenia rób w jego bloku LOCK (lub w istniejącym
 *  bloku media dla tego zakresu) — reguły bazowe są tylko fallbackiem.
 */

/* Wider content wrapper scoped to the process page */
.page-process .wrapper {
  max-width: 64em; }

.page-process {
  padding-top: calc(14vh - 20px); }

/* Sections */
.process-section {
  margin-bottom: 22vh; }

/* Two-column row */
.process-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-items: start;
  min-height: 55vh; }

.process-row > div:first-child {
  align-self: start; }

.process-row > div:last-child {
  align-self: start; }

.process-row > div.process-col--bottom {
  align-self: end; }

.process-row h2 {
  font-family: 'HelveticaLTWXX-Light', sans-serif;
  font-size: 2.5em;
  line-height: 1;
  font-weight: normal;
  margin-bottom: 0.5em; }

/* Right-aligned heading (separate class avoids conflict with existing .right float).
   max-width forces the two-line break ("Research &" / "certification") on wide
   screens, where the 50% column alone would be wider than the heading. */
.process-h2-right {
  font-size: 2.5em;
  max-width: 7em;
  /* keep the shrunken box pinned to the column's right edge */
  margin-left: auto;
  line-height: 1;
  font-weight: 300;
  margin-bottom: 0.5em;
  text-align: right; }

/* Spacing between consecutive rows */
.process-row + .process-row {
  margin-top: 70vh; }

.research-img-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 200px; }

/* Research & certification desktop — mock: heading top-right, text in the
   left column ~2 cells (240px) below the heading's top, tall image pinned
   to the right margin ~2 cells below the text block. Fixed px instead of
   the vh-based row height so the offsets hold on any viewport. */
@media (min-width: 1025px) {
  .process-section--research .process-row {
    min-height: 0; }

  .process-section--research .process-row > div.process-col--bottom {
    align-self: start;
    padding-top: 240px; }

  .process-section--research .research-img-wrap {
    margin-top: 240px; }
}

/* Funding: nagłówek→tekst = 1 kratka (120px), tekst→kwadrat = 2 kratki (240px) */
@media (min-width: 1025px) {
  .process-section--funding .process-row {
    min-height: 0; }

  .process-section--funding .process-row > div.process-col--bottom {
    align-self: start;
    /* delikatnie więcej niż 1 kratka — larger heading→text gap */
    padding-top: 160px; }

  .process-section--funding .process-row + .process-row {
    margin-top: 240px; }

  /* Funding: kwadrat 4 szerokości × 5 wysokości (480×600) */
  .process-section--funding .process-row .placeholder-box,
  .process-section--funding .process-row .process-image {
    width: 480px;
    height: 600px;
    /* na maksa do prawej */
    margin-left: auto; }

  /* Przerwa pod kwadratem Funding = 1 kratka (120px) */
  .process-section--funding {
    margin-bottom: 120px; }
}

/* Kwadrat Prototyping: 5 kratek szerokości × 4 wysokości (600×480),
   zakotwiczony 1 kratkę niżej (120px) */
@media (min-width: 1025px) {
  .process-row + .process-row--prototyping-img {
    margin-top: 120px; }

  .process-row--prototyping-img .placeholder-box,
  .process-row--prototyping-img .process-image {
    width: 600px;
    height: 480px; }

  .process-row--prototyping-img > div:first-child {
    padding-top: 120px; }
}

.process-row p {
  margin-bottom: 0.8em;
  line-height: 1.45; }

.process-row p:last-child {
  margin-bottom: 0; }

/* Placeholder boxes (purple #7F7FFF, to be replaced with real photos via ACF) */
.placeholder-box {
  background: #7f7fff;
  width: 480px;
  height: 480px; }

.process-section > .placeholder-box,
.process-row + .placeholder-box {
  margin-top: 35vh; }

.placeholder-box + .process-row {
  margin-top: 14vh; }

.process-row .placeholder-box {
  margin: 0; }

.placeholder-box--tall  { width: 480px; height: 600px; }
.placeholder-box--short { width: 480px; height: 480px; }
.placeholder-box--wide  { width: 100%; height: 720px; }

/* Real images replacing placeholders (ACF: `*_image` / `*_video` — wideo
   zachowuje się jak zdjęcie, więc dostaje to samo ograniczenie szerokości,
   które zdjęcia mają z globalnego `img { max-width: 100% }`) */
.process-image {
  width: 480px;
  max-width: 100%;
  display: block;
  object-fit: cover;
  height: 480px; }

.process-section > .process-image,
.process-row + .process-image {
  margin-top: 35vh; }

.process-image + .process-row {
  margin-top: 14vh; }

.process-row .process-image {
  margin: 0; }

.process-image--tall  { width: 480px; height: 600px; }
.process-image--short { width: 480px; height: 480px; }
.process-image--wide  { width: 100%; height: 720px; }

/* Areas sub-items */
.process-area-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  margin-bottom: 14vh;
  align-items: start; }

.process-area-title {
  font-size: 1em;
  font-weight: normal;
  text-align: right;
  margin-bottom: 0.5em; }

.process-row + .process-area-item {
  margin-top: -15vh; }

.process-row--area-img {
  margin-top: -25vh; }

/* Areas desktop: kwadraty przy lewym marginesie, stały rytm 120px-grid
   (zamiast nakładających się ujemnych vh): tekst→obrazek / obrazek→tekst /
   tekst→tekst po 1 kratce (120px) */
@media (min-width: 1025px) {
  .process-row--area-img .placeholder-box,
  .process-row--area-img .process-image {
    width: 480px;
    margin: 0; }

  .process-row--area-img {
    margin-top: 120px;
    /* base .process-row forces min-height:55vh — a huge empty block under
       the 480px square; size the row to its content instead */
    min-height: 0; }

  .process-section--areas .process-area-item {
    margin-bottom: 0; }

  .process-section--areas .process-row + .process-area-item {
    /* podnieś tekst obok kwadratu: 120px nad jego dolną krawędzią */
    margin-top: -120px; }

  .process-section--areas .process-area-item + .process-area-item {
    margin-top: 240px; }

  /* Micro-living: ostatnia linijka dochodzi do górnej krawędzi szerokiego
     kwadratu (zerwiemy odstęp wiersza obrazka) */
  .process-section--areas > .process-row--area-img:nth-child(6) {
    margin-top: 0; }

  /* Areas: przerwa pod nagłówkiem = 1 kratka (120px) */
  .process-section--areas .process-row:first-child {
    min-height: auto; }

  .process-section--areas > .process-row:first-child + .process-area-item {
    margin-top: 120px; }

  .process-section--areas > .process-row:first-child h2 {
    margin-bottom: 0; }
}

.process-area-item p {
  margin-bottom: 0.8em;
  line-height: 1.45;
  /* wrap like the mock's ~560px text column and keep the block's right
     edge flush with the wrapper's right margin */
  max-width: 23.5em;
  margin-left: auto; }

.process-area-item p:last-child {
  margin-bottom: 0; }

/* Design section — proportions taken from the mock: heading cap-top ~320px
   from the top, text ~480px, body copy at 1em/1.45, heading ~2.5em.
   Verticals stay pinned to the 120px grid; horizontals are proportional. */
@media (min-width: 1025px) {
  /* 900 of 1200 = 75%, i.e. the mock's 12.5% margin on each side */
  .page-process .wrapper {
    max-width: none;
    width: 75%;
    padding: 0; }

  /* One cell down from the top of the page; the fixed nav sits above this.
     Replaces calc(14vh - 20px), which moved with the window height and so
     could not hold a fixed grid. */
  .page-process {
    padding-top: 120px; }

  /* 16 : 14 is 480 : 420 */
  .process-section--design .process-row {
    grid-template-columns: 16fr 14fr;
    gap: 0; }

  /* Mock: heading 2 cells down (120px page padding + 200px), text column
     one cell below the heading's top. */
}

/* .page-process contributes the first cell, so these add the rest: the
   heading lands ~320px down, the text ~480px (mock: 318 / 480 on a 920px
   viewport). */
.process-section--design .process-row > div:first-child {
  padding-top: 200px; }

.process-section--design .process-row > div:last-child {
  padding-top: 360px; }

/* Cooperation section — compact rows, full width */
.process-section--coop .process-row {
  min-height: auto;
  grid-template-columns: 1fr; }

.process-section--coop .process-row > div:first-child {
  display: none; }

@media (min-width: 1025px) {
  .process-section--coop {
    /* 5 kratek (600px) pod kwadratem Areas */
    margin-top: 600px; }

  /* Cooperation: między tekstami po 4 kratki (480px) */
  .process-section--coop .process-row + .process-row {
    margin-top: 480px; }

  /* Cooperation: nagłówek→pierwszy tekst = 1 kratka (120px) */
  .process-section--coop > .process-row:first-child h2 {
    margin-bottom: 0; }

  .process-section--coop > .process-row:first-child + .process-row {
    margin-top: 120px; }
}

/* Cooperation lists — same size and leading as every other body paragraph
   (.process-row p); they used to be set 0.85em/1.45 and so read smaller than
   the rest on desktop. */
.process-coop-list {
  line-height: 1.45;
  margin-bottom: 0.75em; }

.process-coop-list strong {
  font-weight: 400; }

/* Contact section — reduced bottom space */
#contact {
  /* 5 kratek (600px) pod ostatnim tekstem Cooperation */
  margin-top: 600px;
  margin-bottom: 0; }

#contact .process-row {
  min-height: auto; }

#contact .process-row:first-child {
  padding-top: 0; }

#contact h2 {
  margin-top: 160px; }

#contact .process-row--contact-form {
  margin-top: 100px; }

/* Contact form */
.process-contact-form {
  max-width: 22em;
  margin-left: auto; }

.process-field {
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2em; }

.process-field input,
.process-field textarea {
  font-family: 'HelveticaLTWXX-Light', sans-serif;
  font-size: 0.9em;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.4em 0;
  width: 100%;
  text-align: right;
  color: #b4b4b4;
  resize: none; }

.process-field input::placeholder,
.process-field textarea::placeholder {
  color: #b4b4b4; }

.process-field textarea {
  min-height: 4em; }

.process-field--submit {
  border-bottom: none;
  justify-content: flex-end;
  margin-top: 0.75em; }

.process-field--submit button {
  font-family: 'HelveticaLTWXX-Light', sans-serif;
  font-size: 0.85em;
  background: none;
  border: 1px solid #7f7fff;
  color: #7f7fff;
  padding: 0.4em 1.4em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s; }

.process-field--submit button:hover {
  background: #7f7fff;
  color: #fff; }

.process-form-success {
  color: #7f7fff;
  font-size: 0.85em; }

.process-form-error {
  font-size: 0.8em;
  color: #cc0000;
  margin-top: 0.4em; }

/* Floating "Get in touch" circle (fixed, vertically centred, left of wrapper) */
.process-cta-circle,
.process-cta-circle:visited,
.process-cta-circle:focus {
  color: #0000ff; }

.process-cta-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7em;
  height: 7em;
  border-radius: 50%;
  border: 2px solid #0000ff;
  color: #0000ff;
  text-align: center;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, opacity 0.3s, visibility 0.3s, transform 0.2s;
  position: fixed;
  /* Pozycja X ustawiana w media query (desktop: przy lewym marginesie
     wrappera; tablet: przy prawej krawędzi; mobile: lewy margines 3em). */
  bottom: 240px;
  background: transparent;
  box-shadow: none;
  z-index: 999; }

.process-cta-circle:hover,
.process-cta-circle:hover:visited {
  background: #0000ff;
  color: #fff !important; }

/* Desktop — mock: circle ~190px (8em), aligned with the wrapper's left
   margin, ~10% of the viewport height above the bottom edge. Sits after
   the base rule so it wins the cascade. */
@media (min-width: 1025px) {
  .process-cta-circle {
    left: 12.5vw;
    bottom: 10vh;
    width: 8em;
    height: 8em; } }

.process-cta-circle.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; }

/* The circle carries two labels: "Get in touch!" until the form scrolls on
   screen, then it morphs into "Send" (the form's submit action). */
.process-cta-label-send {
  display: none; }

.process-cta-circle.is-send .process-cta-label-get {
  display: none; }

.process-cta-circle.is-send .process-cta-label-send {
  display: inline; }

/* Send state — same outline look as "Get in touch!": transparent with the
   thin blue border and thin blue text; hover fills blue exactly like the
   base state. */
.process-cta-circle.is-send,
.process-cta-circle.is-send:visited,
.process-cta-circle.is-send:focus {
  background: transparent;
  color: #0000ff; }

.process-cta-circle.is-send:hover,
.process-cta-circle.is-send:hover:visited {
  background: #0000ff;
  color: #fff !important; }

/* The theme's global `a:hover > * { color: #0000ff !important }` rule turns
   the label spans blue on hover, drowning them in the blue fill — force
   the label white on hover (applies to both "Get in touch!" and "Send"). */
.process-cta-circle:hover > * {
  color: #fff !important; }

/* Squares stay grid-fixed on desktop; on small screens they become fluid so
   the fixed 480px / 600px boxes cannot overflow the viewport. */
@media (max-width: 640px) {
  .process-row .placeholder-box,
  .process-row .process-image,
  .placeholder-box--tall,
  .placeholder-box--short,
  .process-image--tall,
  .process-image--short {
    width: 100%;
    height: 100vw; }
  .placeholder-box--wide,
  .process-image--wide {
    width: 100%;
    height: 70vw; }
  .process-row--area-img .placeholder-box,
  .process-row--area-img .process-image {
    width: 100%; } }

@media (max-width: 1024px) {
  .process-cta-circle {
    left: 2em;
    bottom: 2em;
    font-size: 1em;
    width: 7em;
    height: 7em; } }

/* Wider side margins on tablets — double the default 2em wrapper gutter
   so the whole Process page has more breathing room on both sides. */
@media (min-width: 641px) and (max-width: 1024px) {
  .page-process .wrapper {
    padding: 0 4em; }

  /* Get in touch button — 1.5x size (width/height stay 7em, but scale up
     via font-size so text grows with it), anchored near the bottom of
     the viewport instead of vertically centred so it sits lower on the
     page (bottom-anchored like the mobile breakpoint, so it can't be
     clipped off-screen on short landscape tablets). */
  .process-cta-circle {
    /* wrapper ma padding 0 4em (em body); okrąg ma font-size 1.5em, więc
       4em / 1.5 = 2.6667em — lewa krawędź okręgu licuje się z lewym
       marginesem tekstów i kwadratów niezależnie od szerokości tabletu */
    left: 2.6667em;
    font-size: 1.5em;
    top: auto;
    bottom: 3em;
    transform: none; } }

/* Design section on tablets — the desktop offsets (290px / calc(9em + 200px))
   assume a much taller viewport; on tablets they push the title and text
   far down the page with a large empty gap below the nav. */
@media (min-width: 641px) and (max-width: 1024px) {
  .process-section--design .process-row > div:first-child {
    padding-top: 6em; }

  .process-section--design .process-row > div:last-child {
    padding-top: 12em; } }

/* Description text on tablets — match the Design section's font size
   across all sections for consistent typography. */
@media (min-width: 641px) and (max-width: 1024px) {
  .process-row p,
  .process-area-item p {
    font-size: 1.35em; } }

/* Rectangles (placeholder boxes / real images) on tablets — reuse the
   same proportions as mobile instead of the desktop heights
   (55vh/70vh/80vh/40vh), which look oversized and near-square on the
   narrower tablet viewport. */
@media (min-width: 641px) and (max-width: 1024px) {
  .placeholder-box        { height: 50vh; }
  .placeholder-box--wide  { height: 38vw; }
  .placeholder-box--tall  { height: 30vh; }
  .placeholder-box--short { height: 35vh; }

  .process-image         { height: 50vh; }
  .process-image--wide   { height: 38vw; }
  .process-image--tall   { height: 30vh; }
  .process-image--short  { height: 35vh; }

  .process-row + .process-row--prototyping-img {
    margin-top: 12vh; }

  /* the base .process-row rule forces min-height:55vh on every row,
     including this one — that reserved a huge block of empty space
     below the (much shorter) rotated rectangle, which is why shrinking
     the section's margin-bottom alone never visibly closed the gap
     before "Funding". Letting the row size to its content fixes that. */
  .process-row--prototyping-img {
    min-height: auto; }

  /* Prototyping heading row inherits the base .process-row min-height:55vh,
     which reserves a tall empty block below a heading that only needs a
     couple of lines — collapse it (same fix as the Areas heading row). */
  .process-section--prototyping .process-row:first-child {
    min-height: auto; }

  .process-row--prototyping-img .process-image,
  .process-row--prototyping-img .placeholder-box {
    /* width becomes the rectangle's visual height once rotated 90deg —
       65% is the 50% base bumped up 30% (0.5 * 1.3) to make it taller. */
    width: 65%;
    height: 25vh;
    /* rotating around the default centre shifts the visual box left of
       the column's edge (the box is taller than it is wide before the
       rotation swaps them); nudge it back so it hugs the margin. */
    margin-left: calc(12.5vh - 32.5%);
    transform: rotate(90deg); }

  .process-section--prototyping {
    margin-bottom: 8vh; }

  /* default .process-row + .process-row spacing (70vh) is meant for the
     desktop-scale rows; on tablets it pushes the funding image far down
     the page, so pull it up closer to the text/heading above it. */
  .process-section--funding .process-row + .process-row {
    margin-top: 12vh;
    /* same min-height:55vh dead-space bug as the prototyping row — the
       scale() transform only shrinks the box visually, so the row still
       reserved its full unscaled height below it. */
    min-height: auto; }

  .process-section--funding .process-image,
  .process-section--funding .placeholder-box {
    transform: scale(0.6667);
    transform-origin: right top;
    /* transform is paint-only — the un-transformed box (full 50vh) still
       counts towards the row's auto height, leaving a gap below the
       visually-shrunk box the size of the height scale() removed
       (50vh * (1 - 0.6667) = ~16.67vh). Pull it back with a negative
       margin so the row hugs the box's visual size instead. */
    margin-bottom: -14.67vh; }

  .process-section--funding {
    margin-bottom: 0vh; }

  /* Funding heading row — collapse the 55vh dead-space so the heading and
     its text sit close together on tablets (the desktop rules that pull
     the text down are desktop-only). */
  .process-section--funding .process-row:first-child {
    min-height: auto; }

  .process-row--area-img {
    margin-top: -15vh;
    /* same min-height:55vh dead-space bug hit elsewhere — the row was
       reserving ~320px below the actual (much shorter) square. */
    min-height: auto; }

  .process-section--areas {
    margin-bottom: 14vh; }

  .process-row--area-img .placeholder-box,
  .process-row--area-img .process-image {
    /* on mobile these end up square more or less by coincidence (35vh
       happens to be close to the column width at phone sizes); force it
       explicitly here so both boxes are true, equal squares regardless
       of viewport. Bigger than the 55%-width/0.6-scale desktop combo
       (which made them tiny on tablets), closer to the reference size. */
    width: 85%;
    height: auto;
    aspect-ratio: 1;
    transform: none; }

  .research-img-wrap {
    width: 37.8%;
    margin-left: auto; }

  /* Areas heading row inherits the base .process-row min-height:55vh,
     which (like the prototyping row) reserves a tall empty block below
     a heading that only needs a couple of lines — collapse it so the
     first area item follows right after with minimal space. */
  .process-section--areas .process-row:first-child {
    min-height: auto; }

  .process-section--areas .process-row + .process-area-item {
    margin-top: 2.5vh; }

  /* Contact heading — the desktop #contact margin-top:30vh plus the
     h2's own margin-top:160px push it much further down than tablets
     need. */
  #contact {
    margin-top: 8vh; }

  #contact h2 {
    margin-top: 40px; }

  /* Cooperation heading to "Clients:" — desktop's calc(3em + 250px) is
     way more than tablets need between a heading and the text right
     under it. */
  .process-section--coop .process-row + .process-row {
    margin-top: 2em; }

  /* Contact form — bigger on tablets (client request), but VERTICALLY:
     the compact 22em right-column footprint stays (a wider form was
     rejected), so it grows in height instead — taller fields, a high
     message box, a larger button. margin-top drops from 440px so the
     form starts higher up instead of floating below a void. */
  #contact .process-row--contact-form {
    margin-top: 120px; }

  .process-field input,
  .process-field textarea {
    font-size: 1em;
    padding: 0.6em 0; }

  .process-field {
    margin-bottom: 2.6em; }

  .process-field textarea {
    min-height: 10em; }

  .process-field--submit button {
    font-size: 1em;
    padding: 0.55em 2em; } }

@media (max-width: 640px) {
  /* CTA circle — fixed bottom-left */
  .process-cta-circle {
    top: auto;
    bottom: 5.5em;
    left: 3em;
    transform: none;
    font-size: 1em;
    width: 7em;
    height: 7em;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08); }

  /* Single-column rows */
  .process-row {
    grid-template-columns: 1fr;
    gap: 2em;
    min-height: 0; }

  /* Between consecutive rows: ~50% of desktop 70vh */
  .process-row + .process-row {
    margin-top: 35vh; }

  /* Section bottom spacing: mirrors desktop 22vh */
  .process-section {
    margin-bottom: 20vh; }

  /* Headings */
  .process-row h2 {
    font-size: 2.5em; }

  .process-h2-right {
    text-align: left;
    font-size: 2.5em; }

  /* Design section — small offset preserved */
  .process-section--design .process-row > div:first-child {
    padding-top: 10vh; }

  .process-section--design .process-row > div:last-child {
    padding-top: 0; }

  /* Title and text indented to match the new 3em margin (aligned with CTA button) */
  .process-section--design .process-row h2 {
    margin-left: 0.5em;
    margin-right: 0.5em; }

  .process-section--design .process-row > div:last-child {
    margin-left: 1.5em;
    margin-right: 1.5em; }

  /* Images and placeholders below rows: ~55% of desktop 35vh */
  .process-section > .placeholder-box,
  .process-row + .placeholder-box,
  .process-section > .process-image,
  .process-row + .process-image {
    margin-top: 20vh; }

  .process-section--design > .placeholder-box--wide,
  .process-section--design > .process-image--wide {
    margin-top: 60vh;
    margin-left: 1.5em;
    width: calc(100% - 3em); }

  /* Research & certification — heading above text on mobile */
  .process-section--research .process-row > div:first-child {
    order: 2; }

  .process-section--research .process-row > div:last-child {
    order: 1; }

  .process-section--research .process-h2-right {
    text-align: right;
    margin-right: 0; }

  .process-section--research .process-row > div:first-child {
    margin-left: 1.5em;
    margin-right: 1.5em; }

  /* Funding — heading above text, left-aligned on mobile */
  .process-section--funding .process-row > div:first-child {
    order: 2; }

  .process-section--funding .process-row > div:last-child {
    order: 1; }

  .process-section--funding .process-h2-right {
    text-align: right;
    margin-right: 0.5em; }

  .process-section--funding .process-row > div:first-child {
    margin-left: 1.5em;
    margin-right: 1.5em; }

  .process-section--funding .process-image,
  .process-section--funding .placeholder-box {
    margin-left: 1.5em;
    margin-right: 1.5em;
    width: calc(100% - 3em);
    transform: scale(0.6667);
    transform-origin: right top; }

  .process-section--funding {
    margin-bottom: 0vh; }

  /* Placeholder heights scaled from desktop */
  .placeholder-box       { height: 50vh; }
  .placeholder-box--wide { height: 38vw; }
  .placeholder-box--tall { height: 30vh; }
  .placeholder-box--short{ height: 35vh; }

  /* Image heights scaled from desktop */
  .process-image         { height: 50vh; }
  .process-image--wide   { height: 38vw; }
  .process-image--tall   { height: 30vh; }
  .process-image--short  { height: 35vh; }

  /* Prototyping image row */
  .process-row + .process-row--prototyping-img {
    margin-top: 300px; }

  .process-row--prototyping-img .process-image,
  .process-row--prototyping-img .placeholder-box {
    width: 50%;
    height: 25vh;
    margin-left: 2.5em;
    margin-right: 4em;
    transform: rotate(90deg); }

  .process-section--prototyping {
    margin-bottom: 8vh; }

  /* Title and description aligned with the rest of the page */
  .process-section--prototyping .process-row h2 {
    margin-left: 0.5em;
    margin-right: 1.5em; }

  .process-section--prototyping .process-col--bottom {
    margin-left: 1.5em;
    margin-right: 1.5em; }

  /* Research image — right-aligned on mobile */
  .research-img-wrap {
    margin-left: auto;
    margin-right: 1.5em;
    margin-top: 30vh;
    width: 54%; }

  /* Areas — title, sub-items and images aligned with the rest of the page */
  .process-section--areas .process-row h2 {
    margin-left: 0.5em;
    margin-right: 1.5em; }

  .process-area-item {
    grid-template-columns: 1fr;
    gap: 2em;
    /* przerwa między tekstami (i tekstem a kwadratem) x2 */
    margin-bottom: 20vh; }

  .process-area-item > div:last-child {
    margin-left: 1.5em;
    margin-right: 1.5em; }

  .process-row + .process-area-item {
    /* przerwa po kwadracie / nagłówku x2 */
    margin-top: 1vh; }

  /* Większa przerwa nad Science (pierwszy tekst po kwadracie Areas) —
     wyrównana do pozostałych odstępów w sekcji */
  .process-section--areas .process-row--area-img + .process-area-item {
    margin-top: 20vh; }

  .process-area-title {
    text-align: left; }

  /* Science + Micro-living: tytuł przy prawym marginesie */
  .process-section--areas .process-area-item ~ .process-area-item .process-area-title {
    text-align: right; }

  /* ...i wyżej: bez pustego pierwszego diva i gap:2em, które spychały
     tytuł ~32px w dół */
  .process-section--areas .process-area-item ~ .process-area-item {
    gap: 0; }

  /* Area image rows — no negative overlap on mobile */
  .process-row--area-img {
    margin-top: 5vh; }

  /* Areas: kwadrat 1:1 (jak w mocku) — wysokość wynika z szerokości.
     Usunięty transform: scale(0.6), który zostawiał pustą przestrzeń
     pod kwadratem i robił z niego mały prostokąt.
     Wcześniej 2/3 szerokości przy lewym marginesie (nierówne marginesy) —
     teraz mniejszy i wyśrodkowany, z równymi marginesami. */
  .process-row--area-img .placeholder-box,
  .process-row--area-img .process-image {
    margin-left: auto;
    margin-right: auto;
    width: calc((100% - 3em) * 0.55);
    height: auto;
    aspect-ratio: 1;
    transform: none; }

  /* Cooperation rows */
  .process-section--coop .process-row + .process-row {
    margin-top: 7em; }

  /* przerwa pod nagłówkiem Cooperation — o połowę mniejsza (3.5em) */
  .process-section--coop .process-row:nth-of-type(2) {
    margin-top: 3.5em; }

  /* przerwa pod Clients (14em) */
  .process-section--coop .process-row:nth-of-type(3) {
    margin-top: 14em; }

  /* przerwa pod Lectures (kończy się na "...in Warsaw") — delikatnie większa */
  .process-section--coop .process-row:nth-of-type(4) {
    margin-top: 9em; }

  .process-section--coop .process-h2-right {
    text-align: right;
    margin-right: 0.5em; }

  .process-section--coop .process-row > div:last-child {
    margin-left: 1.5em;
    margin-right: 1.5em; }

  /* Contact section — jeszcze niżej (margin-top 60vh) */
  #contact {
    margin-top: 60vh;
    margin-bottom: 6em; }

  /* Nagłówek Contact niżej, żeby po przeskoczeniu do sekcji (CTA / wysłanie
     formularza) nie chował się pod fixed navbarem (~106px, dół ~156px) */
  #contact h2 {
    margin-top: calc(1.5em + 120px);
    margin-left: 0.5em;
    margin-right: 1.5em; }

  #contact .process-row--contact-form {
    margin-top: 3em; }

  /* Contact form — full width, left-aligned */
  .process-contact-form {
    max-width: calc(100% - 3em);
    margin-left: 1.5em;
    margin-right: 1.5em; }

  .process-field {
    justify-content: flex-end; }

  .process-field input,
  .process-field textarea {
    text-align: right; }

  .process-field--submit {
    justify-content: flex-end; } }

/*
 *	------------------------------------------------------- 	STORE
 */
.page-store {
  background-color: #fff; }
  @media (max-width: 640px) {
    .page-store {
      padding-top: 0; } }

.store-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 4vw; }

.store-hero-inner {
  max-width: 62em; }

.store-hero-title {
  /* Fluid size tuned so the full slogan fits on one line (PL is the longest).
     PL needs <= ~2.6vw of hero width; cap stays under the 62em inner wrapper. */
  font-size: clamp(1rem, 2.4vw, 2rem);
  font-weight: bold;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  margin: 0; }

/* Second (looping) copy of the hero slogan — the mobile marquee's spare half.
   Hidden ≥641px so desktop/tablet keep exactly one static title. */
.store-hero-title--clone {
  display: none; }

.store-hero-cta {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  transform: translateX(-50%);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid #fff;
  padding-bottom: 0.4em; }
  /* Podkreślenia CTA są w XD osobnymi liniami (shape) o grubości 0.1em: 3 px przy 30 px,
     2 px przy 20 px. border-bottom nie nadaje się do rysowania takiej grubości (Chrome
     zaokrągla jego szerokość w dół — przy 20 px zostałby 1 px — a pogrubienie zmieniłoby
     wysokość boxa i cały układ). Dlatego grubą linię rysuje gradient tła o wysokości 0.1em,
     wyrównany do dolnej krawędzi border-boxa: nie wpływa na układ, skaluje się z fontem,
     a kolor bierze z `currentColor` (czyli także z hoverów). 1 px borderu zostaje pod nim. */
  /* Global theme rule (`a:hover { color: #0000ff !important; }`) turns every
     link blue on hover — keep the hero CTA white in all link states. */
  .store-hero-cta:visited,
  .store-hero-cta:focus {
    color: #fff; }
  /* Hover = delikatna transparentność zamiast żółtego podświetlenia
     (zgł. klienta 09.10.2026: „popraw podświetlenie po najechaniu na to żeby
     zamiast z żółtego, na po prostu wyciemnienie/delikatną transparentność”).
     Biel 50 % na ciemnym tle gaśnie o połowę kontrastu — to lustrzane odbicie
     `rgba(0, 0, 0, 0.5)` (= #808080 na bieli) z pozostałych CTA sklepu, patrz
     komentarz przy `.store-section-block-link:hover`. Wcześniej było 70 %
     (#b3b3b3), zestrojone z szarą linią „design:” w stopce (#afafaf);
     zgł. klienta 09.10.2026 (druga tura) prosiło o mocniejsze przygaszenie,
     więc cała rodzina CTA zeszła z 0.7 na 0.5. Linia podkreślenia 0.1em bierze
     kolor z `currentColor` (wspólna reguła niżej), więc wystarczy zdjąć żółty
     gradient i przyciemnić kolor. 2-px border ustawiamy na przezroczysty
     (zgł. 09.10.2026: „podkreślenia też powinny się transparentować”) —
     leży dokładnie pod gradientem 0.1em, więc przy kryciu nakładałby się
     na niego i dolne wiersze linii zostawałyby jaśniejsze od tekstu
     (przy 30-px foncie 0.1em = 3 px pokrywa cały 2-px border). */
  .store-hero-cta:hover {
    color: rgba(255, 255, 255, 0.5) !important;
    border-bottom-color: transparent; }

/* Podkreślenie CTA z XD: linia 0.1em przyklejona do dolnej krawędzi boxa (patrz komentarz
 * przy .store-hero-cta). Lista obejmuje wszystkie CTA sklepu rysowane borderem; linki
 * z `text-decoration` (karty obiektów, „WRÓĆ DO…”, koszyk) mają tę samą grubość ustawioną
 * jako `text-decoration-thickness: 0.1em`. */
.store-hero-cta,
.store-section-block-link,
.store-studio-btn,
.store-feature .collections-shop-btn,
.collections-shop-btn,
.product-buy-cta,
.product-custom-cta,
.about-cta,
.about-card-buy,
.product-notify-submit {
  /* 1 px borderu zostaje w układzie pod gradientem (ta sama barwa), dzięki czemu
     podkreślenie nigdy nie zmienia wysokości boxa */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-origin: border-box;
  background-size: 100% 0.1em; }

/* CZAS PRZEJŚCIA HOVERÓW CTA — z makiety, nie „na oko”. W pliku prototypu XD
 * (_xd-f550687d.json, sekcja `interactions`) KAŻDY komponent CTA — „EXPLORE OBJECTS”
 * (Component 19), „EXPLORE COLLECTIONS” (20), „SHOP NOW” 30 px (21, 22), „SHOP NOW”
 * 20 px (23) i „VISIT THE STUDIO” (24) — ma interakcję `hover` → `state-transition`
 * z parametrami: `transition: auto-animate`, `duration: 0.3 s`, `easing: ease-out`
 * (identyczne we wszystkich 25 interakcjach hover w pliku, także w pozycjach menu).
 * Dlatego hover CTA trwa 0,3 s i zwalnia na końcu (`ease-out`), a nie „strzela”
 * (wcześniej 0 s dla wszystkich CTA poza kaflami) ani nie idzie liniowo
 * (kafle miały `transition: color 0.2s linear`).
 * Zgł. klienta 09.10.2026: „przechodzenie w transparentność było dłuższe
 * … tak jak na makiecie”.
 * Przejście obejmuje `color` (tekst) i `border-bottom-color` (1-px linia CTA, która
 * w hoverze staje się przezroczysta — patrz `.store-section-block-link:hover`).
 * Grube podkreślenie 0.1em to gradient z `currentColor`, więc animuje się razem z kolorem;
 * kafle (`.object-card-buy`) rysują linię `text-decoration`, której kolor też idzie
 * za `currentColor`. */
.store-hero-cta,
.store-section-block-link,
.store-studio-btn,
.collections-shop-btn,
.object-card-buy,
.about-card-buy,
.about-cta,
.product-buy-cta,
.product-custom-cta,
.product-notify-submit,
.collections-objects-all {
  transition: color 0.3s ease-out, border-bottom-color 0.3s ease-out; }

@media (max-width: 640px) {
  .store-hero {
    height: 100svh;
    min-height: 100svh;
    padding: 0; }
  /* Mobile hero title = infinite ticker: the big slogan rides across to the
     RIGHT and loops (client request: „jeżdżący” napis). .store-hero-track
     holds two identical copies; sliding it by exactly half its width
     (-50% → 0) lands on identical pixels, so the loop never jumps. */
  .store-hero-inner {
    max-width: none;
    width: 100%;
    overflow: hidden; }
  .store-hero-track {
    display: flex;
    width: max-content;
    animation: rp-store-hero-marquee 24s linear infinite;
    will-change: transform; }
  .store-hero-title {
    flex: 0 0 auto;
    font-size: clamp(1.5rem, 9vw, 2.5rem);
    white-space: nowrap;
    padding-right: 2.5em; }
  .store-hero-title--clone {
    display: block; }
  .store-hero-cta {
    font-size: 1.25rem;
    letter-spacing: 0.14em;
    bottom: 7vh; } }

@keyframes rp-store-hero-marquee {
  from {
    transform: translateX(-50%); }
  to {
    transform: translateX(0); } }

/* Reduced motion: no ticker — fall back to the previous static, fully
   readable small title (and restore the hero side padding). */
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .store-hero {
    padding: 0 4vw; }
  .store-hero-track {
    display: block;
    width: auto;
    animation: none;
    will-change: auto; }
  .store-hero-title {
    font-size: clamp(0.85rem, 2.45vw, 1.25rem);
    white-space: normal;
    padding-right: 0; }
  .store-hero-title--clone {
    display: none; } }

@media (max-width: 380px) {
  .store-hero-cta {
    font-size: 1.1rem;
    letter-spacing: 0.12em; } }

/*
 *	------------------------------------------------------- 	STORE SECTIONS (sekcje po hero — wg makiety)
 *	media (małe | duże zdjęcie, oba pionowe 3:4) | opis; co druga sekcja reverse
 */
.store-sections {
  background-color: #fff; }

.store-section {
  min-height: 100vh;
  /* Generous top/bottom padding so the section reads alone on screen:
     visible white space above and below the content, no neighbouring
     sections peeking in while it fills the viewport. */
  padding: 8em 0;
  display: grid;
  /* Zasada osi środka: kolumna zdjęć = dokładnie 50% szerokości strony,
     kolaż styka się z pionową osią środka; tekst wcięty 2em od osi. */
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: end;
  box-sizing: border-box; }
  @media (max-width: 900px) {
    .store-section {
      min-height: auto;
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
      gap: 1.5em;
      padding: 5em 1.5em;
      align-items: stretch; } }
.store-section--reverse .store-section-body {
  order: 1; }
.store-section--reverse .store-section-media {
  order: 2; }
  @media (max-width: 900px) {
    .store-section--reverse .store-section-body {
      order: 2; }
    .store-section--reverse .store-section-media {
      order: 1; } }

.store-section-media {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 0.6em;
  align-items: start;
  /* Top-aligned like About: duże zdjęcia zaczynają się u góry sekcji
     i schodzą w dół przez środek strony (naturalny rozmiar z szerokości). */
  align-self: start; }
  .store-section--reverse .store-section-media {
    justify-self: end;
    /* full column width — justify-self:end switches off stretching */
    width: 100%;
    /* Duże zdjęcie bliżej środka strony, małe przy prawej krawędzi */
    grid-template-columns: 1fr 0.7fr; }
  @media (max-width: 640px) {
    .store-section-media {
      gap: 0.4em; } }
  .store-section--reverse .store-section-media .store-section-img--main,
  .store-section--reverse .store-section-media .store-section-mock--main {
    order: -1; }
  /* Odbicie lustrzane sekcji wyżej: podpisy zostają pod małym zdjęciem,
     ale przyklejone do krawędzi przy dużym zdjęciu. */
  .store-section--reverse .store-section-label-row {
    justify-content: flex-start; }

.store-section-media-small {
  display: flex;
  flex-direction: column;
  /* min-width: 0 — podpisy nie rozpychają kolumn siatki zdjęć */
  min-width: 0; }

.store-section-img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover; }

/* Placeholder w miejscu zdjęcia (SATURN / CIRCULAR — zdjęcia wkrótce) */
.store-section-mock {
  aspect-ratio: 3 / 4;
  height: auto;
  /* min-width: 0 — tekst makiety nie rozpycha kolumn siatki zdjęć */
  min-width: 0; }
.store-section-mock .store-mock-name {
  font-size: 1.1em;
  letter-spacing: 0.1em; }

.store-section-labels {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 12px; }

/* Podpisy pod zdjęciami — styl jak na stronie Collections:
   0.75em, waga 600, linia 1.35, para dosunięta do prawej krawędzi zdjęcia. */
.store-section-label-row {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.9em;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.35; }

.store-section-label {
  text-transform: uppercase; }

.store-section-body {
  padding-right: 8vw;
  padding-left: 2em; }
  .store-section--reverse .store-section-body {
    justify-self: end;
    padding-right: 2em;
    padding-left: 8vw; }

@media (max-width: 900px) {
  .store-section-body,
  .store-section--reverse .store-section-body {
    padding-left: 0;
    padding-right: 0; } }

.store-section-desc {
  font-size: 0.9em;
  line-height: 1.35;
  font-weight: 500; }

/* Manifest pod hero + bloki OBJECTS:/COLLECTIONS: (pierwsza sekcja sklepu
   i sekcja z blokami) — grubsza czcionka, wspólne parametry */
.store-section:first-child .store-section-desc,
.store-section--blocks .store-section-desc {
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1.5;
  word-spacing: 0.06em;
  max-width: 19em; }

/* Sekcja z blokami (OBJECTS: / COLLECTIONS:): teksty rozłożone w pionie —
   pierwszy blok zaczyna się na górnej krawędzi zdjęcia, ostatni kończy się
   dokładnie tam, gdzie kończy się zdjęcie. */
.store-section--blocks .store-section-body {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
@media (max-width: 900px) {
  .store-section--blocks .store-section-body {
    align-self: auto;
    display: block; } }

/* Bloki OBJECTS: / COLLECTIONS: z linkami EXPLORE (sekcja 3 sklepu, wg makiety) */
.store-section-block {
  margin-bottom: 2.5em; }
  .store-section-block:last-child {
    margin-bottom: 0; }
.store-section-block-title {
  font-weight: bold; }
.store-section-block-link {
  display: inline-block;
  margin-top: 1.4em;
  font-size: 1.15em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #000;
  text-decoration: none;
  /* podkreślenie CTA: wspólna reguła gradientu (0.1em) przy .store-hero-cta;
     `currentColor` w borderze, żeby linia szła za kolorem także w hoverze */
  border-bottom: 1px solid currentColor; }
  /* Hover CTA = przygaszenie, nie firmowy niebieski — zgł. klienta 09.10.2026:
     „to też dotyczy przycisków explore discover buy now". Czarne CTA na jasnym
     tle bledną do POŁOWY krycia (czerń 0.5 na bieli = #808080), czyli o połowę
     kontrastu — dokładnie tak samo, jak biel 0.5 na ciemnym tle w .store-hero-cta
     (ten sam lustrzany język hoveru w całym sklepie).
     Zgł. klienta 09.10.2026 (druga tura): „przechodzenie w transparentność było
     dłuższe … tak jak na makiecie" + wybór „mocniejsze przygaszenie: 70 % → 50 %".
     Wcześniej było `rgba(0, 0, 0, 0.7)` = #4d4d4d (zmierzone pikselowo #4C4C4C).
     Kolor musi być `!important`, bo globalna reguła
     `a:hover { color: #0000ff !important; }` (linia 274) inaczej przejmuje hover
     każdego linku w sklepie; przy `!important` rozstrzyga specyficzność, a ta
     klasa wygrywa z `a:hover`.
     Border robimy PRZEZROCZYSTYM, nie `currentColor` — zgł. klienta 09.10.2026:
     „podkreślenia też powinny się transparentować". 1-px border leży dokładnie
     pod gradientem 0.1em (ten sam obszar border-boxa), więc przy kryciu
     malował się DRUGI raz na wierzchu i dolny wiersz linii wychodził ciemniejszy
     od tekstu (przy 0.7: `rgba(0,0,0,0.91)` = #161616, zmierzone pikselowo).
     Gradient 0.1em pokrywa całą strefę borderu (0.1em ≥ 1 px przy każdej
     wielkości fontu CTA), więc po przezroczystym borderze linia jest jednolita
     i ma dokładnie ten sam kolor co tekst — bez zmiany grubości ani wysokości
     boxa (border nadal zajmuje 1 px w układzie).
     Czas przejścia (0,3 s ease-out) ustawia wspólna reguła niżej. */
  .store-section-block-link:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent; }

/*
 *	------------------------------------------------------- 	STORE FEATURE (jedno zdjęcie + SHOP NOW)
 */
.store-feature {
  min-height: 100vh;
  padding: 8em 0;
  display: grid;
  /* Zdjęcie = dokładnie 50% szerokości — styka się z osią środka strony. */
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: end;
  box-sizing: border-box; }
  @media (max-width: 900px) {
    .store-feature {
      grid-template-columns: 1fr;
      gap: 1.5em;
      padding: 5em 1.5em;
      align-items: stretch; } }

.store-feature-media {
  align-self: start;
  min-width: 0; }

.store-feature-img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover; }

.store-feature-body {
  align-self: end;
  padding-left: 2em;
  padding-right: 5vw; }

.store-feature-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.1;
  margin: 0 0 2em; }

.store-feature-desc {
  font-size: 22px;
  line-height: 1.5;
  font-weight: bold;
  max-width: 500px;
  margin: 0; }

/* SHOP NOW — wygląd jak tytuł (bold), rozmiar jak akapit (wg makiety sekcji SATURN) */
.store-feature .collections-shop-btn {
  font-size: 22px;
  font-weight: 400;
  margin-top: 48px; }
  @media (max-width: 640px) {
    .store-feature-title {
      font-size: 20px; }
    .store-feature-desc {
      font-size: 18px; }
    .store-feature .collections-shop-btn {
      font-size: 20px;
      margin-top: 32px; } }

/* Odbicie lustrzane (2. sekcja, SATURN): tekst z lewej, zdjęcie z prawej;
 * tekst zaczyna się od góry sekcji (jak w makiecie). */
.store-feature--reverse .store-feature-body {
  order: 1;
  justify-self: end;
  align-self: start;
  padding-left: 5vw;
  padding-right: 2em; }
.store-feature--reverse .store-feature-media {
  order: 2; }
  @media (max-width: 900px) {
    .store-feature--reverse .store-feature-media {
      order: 1; }
    .store-feature--reverse .store-feature-body {
      order: 2;
      justify-self: stretch;
      padding-left: 2em;
      padding-right: 5vw; } }

@media (max-width: 900px) {
  .store-feature-body,
  .store-feature--reverse .store-feature-body {
    padding-left: 0;
    padding-right: 0; } }

/* Placeholder w miejscu zdjęcia (SATURN / CIRCULAR — zdjęcia wkrótce). */
.store-feature-mock {
  aspect-ratio: 4 / 3;
  height: auto; }
.store-feature-mock .store-mock-name {
  font-size: 1.6em; }

/*
 *	------------------------------------------------------- 	STORE PICKS (tekst + 2 produkty — pod sekcjami kolekcji)
 */
.store-picks {
  min-height: 100vh;
  padding: 8em 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
  /* Rząd siatki = wysokość treści (zdjęć), więc tekst wyrównany do dołu
   * kończy się dokładnie tam, gdzie kończą się kafelki ze zdjęciami. */
  align-content: start;
  box-sizing: border-box; }
  @media (max-width: 900px) {
    .store-picks {
      grid-template-columns: 1fr;
      min-height: auto;
      gap: 2.5em;
      padding: 5em 1.5em; } }

/* Zdjęcia: po prawej, razem dokładnie od połowy strony do prawej krawędzi
 * (jak media w lustrzanej sekcji SATURN); tekst po lewej. */
.store-picks-products {
  order: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
  padding: 0; }
  @media (max-width: 900px) {
    .store-picks-products {
      grid-template-columns: 1fr;
      gap: 2.5em; } }

.store-picks-body {
  order: 1;
  /* Forma jak sekcje wyżej (SATURN): blok tekstu dociągnięty do osi środka,
   * wyrównany do dołu sekcji — ale kończący się na dolnej krawędzi ZDJĘCIA,
   * nie podpisów pod nim (podpisy = stałe 2.8em, wg .object-card-*). */
  justify-self: end;
  align-self: end;
  margin-bottom: 2.8em;
  padding-left: 5vw;
  padding-right: 2em; }
  @media (max-width: 900px) {
    .store-picks-body {
      justify-self: stretch;
      margin-bottom: 0;
      padding-left: 0;
      padding-right: 0; } }

/* Odbicie lustrzane (2. sekcja): zdjęcia po lewej — od krawędzi strony do osi,
 * tekst po prawej, dociągnięty do osi i zaczynający się u góry sekcji (jak SATURN). */
.store-picks--mirror .store-picks-products {
  order: 1; }
.store-picks--mirror .store-picks-body {
  order: 2;
  justify-self: start;
  align-self: start;
  padding-left: 2em;
  padding-right: 5vw; }
  @media (max-width: 900px) {
    .store-picks--mirror .store-picks-body {
      justify-self: stretch;
      padding-left: 0;
      padding-right: 0; } }

/* W blokach lustrzanych zdjęcia są przyklejone do LEWEJ krawędzi okna, więc
 * podpis lewego kafla dostaje wąskie wcięcie 15 px (spójnie z tabletem; ten
 * układ nie występuje w makiecie desktopowej — zgł. klienta 06.10.2026).
 * Prawy kafel zostaje wyrównany do krawędzi swojego zdjęcia. */
@media (min-width: 1025px) {
  .store-picks--mirror .store-picks-products > .object-card:first-child .object-card-meta {
    padding-left: 15px; } }

.store-picks-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.1;
  margin: 0 0 2em; }

.store-picks-desc {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  max-width: 500px;
  margin: 0; }

@media (max-width: 640px) {
  .store-picks-title {
    font-size: 20px; }
  .store-picks-desc {
    font-size: 18px; } }

.store-picks-products {
  order: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em;
  align-items: start;
  padding: 0; }
  @media (max-width: 900px) {
    .store-picks-products {
      grid-template-columns: 1fr;
      gap: 2.5em; } }

/* Kafle produktów = dokładnie te same klasy co Objects (.object-card *) —
 * ich style są wspólne, zdefiniowane przy sekcji OBJECTS. */

/*
 *	------------------------------------------------------- 	STORE MATERIALS (THE LOGIC OF MATERIALS)
 */
.store-materials {
  min-height: 100vh;
  padding: 8em 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
  /* Rząd = wysokość zdjęć, więc tekst wyrównany do dołu kończy się
   * dokładnie na dolnej krawędzi dużego zdjęcia (jak sekcje produktów). */
  align-content: start;
  box-sizing: border-box; }
  @media (max-width: 900px) {
    .store-materials {
      grid-template-columns: 1fr;
      gap: 2.5em;
      padding: 5em 1.5em;
      align-items: start; } }

.store-materials-body {
  /* Blok tekstu dociągnięty do osi środka — tuż przy zdjęciach,
   * wyrównany do dolnej krawędzi zdjęcia. */
  justify-self: end;
  align-self: end;
  padding-left: 5vw;
  padding-right: 2em; }
  @media (max-width: 900px) {
    .store-materials-body {
      justify-self: stretch;
      padding-left: 0;
      padding-right: 0; } }

.store-materials-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.1;
  margin: 0 0 2em; }

.store-materials-desc {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  max-width: 500px;
  margin: 0; }

@media (max-width: 640px) {
  .store-materials-title {
    font-size: 20px; }
  .store-materials-desc {
    font-size: 18px; }
  .store-materials-media {
    gap: 10px; } }

/* duże zdjęcie materiału + węższe pionowe; podpisy pod małym (Top / Right) */
.store-materials-media {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start; }

.store-materials-fig {
  margin: 0; }

/* Zdjęcia materiałów (29.09 — zamiast makiet): proporcje jak poprzednie
   makiety — duże 4:5, małe 3:4; na ≤640 blok wyżej ujednolica do 3:4. */
.store-materials-img {
  width: 100%;
  display: block;
  object-fit: cover; }
.store-materials-fig--big .store-materials-img {
  aspect-ratio: 4 / 5; }
.store-materials-fig--small .store-materials-img {
  aspect-ratio: 3 / 4; }

/*
 *	------------------------------------------------------- 	STORE STUDIO (FROM STUDIO TO SPACE)
 *	Portret full-bleed w lewej połowie, pionowa linia na osi, tekst w prawej.
 */
.store-studio {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  box-sizing: border-box; }
  .store-studio::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
    background-color: #000; }
  @media (max-width: 900px) {
    .store-studio {
      grid-template-columns: 1fr;
      align-items: start; }
      .store-studio::before {
        display: none; } }

.store-studio-portrait {
  margin: 0;
  min-width: 0; }
  .store-studio-portrait img {
    width: 100%;
    /* Zdjęcie wypełnia sekcję, ale nigdy nie przekracza jednego ekranu (100vh). */
    height: 100%;
    max-height: 100vh;
    max-height: 100svh;
    display: block;
    object-fit: cover; }
  @media (max-width: 900px) {
    .store-studio-portrait img {
      /* Tablet/mobile też dokładnie 100vh — pełna wysokość ekranu. */
      height: 100vh;
      height: 100svh; } }

.store-studio-body {
  display: flex;
  flex-direction: column;
  /* Tekst dokładnie na równi z górną krawędzią zdjęcia. */
  justify-content: flex-start;
  padding: 0 5vw 0 2em; }
  @media (max-width: 900px) {
    .store-studio-body {
      padding: 5em 1.5em; } }

.store-studio-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.1;
  margin: 0 0 2em; }

.store-studio-desc {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.5;
  max-width: 500px;
  margin: 0; }

.store-studio-btn {
  display: inline-block;
  /* Kolumna jest flexem — bez tego link rozciąga się na całą szerokość,
   * a podkreślenie byłoby dłuższe niż tekst. */
  align-self: flex-start;
  margin-top: 48px;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid #000;
  padding-bottom: 4px; }
  /* hover = przygaszenie (zgł. klienta 09.10.2026 — patrz .store-section-block-link);
     border przezroczysty, żeby nie nakładał się na gradient (podwójne krycie) */
  .store-studio-btn:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent; }

@media (max-width: 640px) {
  .store-studio-title {
    font-size: 20px; }
  .store-studio-desc {
    font-size: 18px; }
  .store-studio-btn {
    font-size: 20px;
    margin-top: 32px; } }

/* Ujednolicona typografia podstrony Store: ta sama czcionka co manifest pod
   hero i bloki OBJECTS:/COLLECTIONS: — dla pozostałych tekstów podstrony
   (poza podpisami pod zdjęciami). */
.store-feature-title,
.store-feature-desc,
.store-feature .collections-shop-btn,
.store-picks-title,
.store-picks-desc,
.store-materials-title,
.store-materials-desc,
.store-studio-title,
.store-studio-desc,
.store-studio-btn {
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1.5;
  word-spacing: 0.06em; }

.store-feature-desc,
.store-picks-desc,
.store-materials-desc,
.store-studio-desc {
  max-width: 19em; }

/* Podpis Top/Right w sekcji THE LOGIC OF MATERIALS — czcionka jak podpisy
   pod zdjęciami w sekcjach wyżej (.store-section-label-row). */
.store-materials .about-pos {
  font-size: 0.75em;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0; }

/* ==========================================================================
   STORE HOME — MOBILE (≤640 px) wg XD „RPDS STORE Mobile 14.09.2026"
   (ekran Store, segmenty seg-1-01..05): zdjęcia pełnym bleedem, kolaż
   małe 36vw + duże 1fr (odstęp 7px), teksty na marginesie 10vw,
   typografia 15px / linia 30px, podpisy 10px, rytm sekcji ~116–150px.
   Tablet 641–900 i desktop bez zmian.
   ========================================================================== */
@media (max-width: 640px) {
  /* — hero → pierwsza sekcja (XD: 116px) — */
  .page-store .store-sections {
    margin-top: 116px; }

  /* — sekcje opisowe (manifest / OBJECTS: / COLLECTIONS:) — */
  .page-store .store-section {
    padding: 0;
    gap: 64px; }
  .page-store .store-section + .store-section {
    margin-top: 148px; }
  .page-store .store-section-media {
    grid-template-columns: 36vw 1fr;
    gap: 7px; }
  .page-store .store-section--reverse .store-section-media {
    grid-template-columns: 1fr 36vw; }
  .page-store .store-section-labels {
    padding-top: 6px; }
  .page-store .store-section-label-row {
    /* 2026-10-01 („na mobile powiększ czcionkę bo jest nieczytelnie mała”):
       10 px → 13 px — podpisy „Collections … / Objects …” pod zdjęciami.
       flex-wrap: dłuższe wartości (np. LABORATORY) spadają do 2. linii
       zamiast wystawać poza kolumnę (36vw) i rozpychać stronę. */
    font-size: 13px;
    line-height: 1.4;
    flex-wrap: wrap; }
  .page-store .store-section-body {
    margin: 0 10vw;
    padding: 0; }
  .page-store .store-section .store-section-desc {
    font-size: 15px;
    line-height: 2;
    max-width: none; }
  .page-store .store-section-block {
    margin-bottom: 56px; }
  .page-store .store-section-block:last-child {
    margin-bottom: 0; }
  .page-store .store-section-block-link {
    font-size: 15px;
    letter-spacing: 0;
    margin-top: 40px; }

  /* — sekcje kolekcji (WEDGE / SATURN / CIRCULAR) — */
  .page-store .store-features {
    margin-top: 120px; }
  .page-store .store-feature {
    min-height: auto;
    padding: 0;
    gap: 30px; }
  .page-store .store-feature + .store-feature {
    margin-top: 120px; }
  .page-store .store-feature-img,
  .page-store .store-feature-mock {
    aspect-ratio: 390 / 354; }
  .page-store .store-feature-body,
  .page-store .store-feature--reverse .store-feature-body {
    margin: 0 10vw;
    padding: 0; }
  .page-store .store-feature-title {
    font-size: 15px;
    line-height: 2;
    margin: 0 0 26px; }
  .page-store .store-feature-desc {
    font-size: 15px;
    line-height: 2;
    max-width: none; }
  .page-store .store-feature .collections-shop-btn {
    font-size: 15px;
    letter-spacing: 0;
    margin-top: 40px; }

  /* — WYRÓŻNIONE PRODUKTY: kafle 2×, tekst pod spodem — */
  /* 120px pod ostatnią sekcją CIRCULAR (klient 29.09: „przerwa nieco
     większa"; XD ~92px) — kolejne bloki zbija reguła „+ .store-picks". */
  .page-store .store-picks {
    min-height: auto;
    padding: 0;
    gap: 64px;
    margin-top: 120px; }
  .page-store .store-picks + .store-picks {
    margin-top: 64px; }
  .page-store .store-picks-products {
    order: 1;
    grid-template-columns: 1fr 1fr;
    gap: 14px; }
  /* Podpisy pod zdjęciami (XD 390, store home): kafle są full-bleed, więc
     podpis LEWEGO kafla dostaje wcięcie 10 px (XD: x=10 przy zdjęciu od x=0),
     a PRAWY zostaje wyrównany do krawędzi swojego zdjęcia (XD: x=203 przy
     zdjęciu od x=203). Bez tego podpis lewego kafla siedzi na samej krawędzi
     ekranu (zgł. klienta 06.10.2026). */
  .page-store .store-picks-products > .object-card:first-child .object-card-meta {
    padding-left: 10px; }
  .page-store .store-picks-body {
    order: 2;
    justify-self: stretch;
    align-self: start;
    margin: 0 10vw;
    padding: 0; }
  .page-store .store-picks-title {
    font-size: 15px;
    line-height: 2;
    margin: 0 0 26px; }
  .page-store .store-picks-desc {
    font-size: 15px;
    line-height: 2;
    max-width: none; }

  /* — LOGIKA MATERIAŁÓW: zdjęcia nad tekstem — */
  .page-store .store-materials {
    min-height: auto;
    padding: 0;
    gap: 50px;
    margin-top: 120px; }
  .page-store .store-materials-media {
    order: 1;
    grid-template-columns: 1fr 36vw;
    gap: 7px; }
  .page-store .store-materials-media .about-mock,
  .page-store .store-materials-media .store-materials-img {
    aspect-ratio: 3 / 4;
    height: auto; }
  .page-store .store-materials .about-pos {
    margin-top: 4px;
    padding-top: 0;
    font-size: 10px;
    line-height: 1.4; }
  .page-store .store-materials-body {
    order: 2;
    margin: 0 10vw;
    padding: 0; }
  .page-store .store-materials-title {
    font-size: 15px;
    line-height: 2;
    margin: 0 0 26px; }
  .page-store .store-materials-desc {
    font-size: 15px;
    line-height: 2;
    max-width: none; }

  /* — OD STUDIA DO PRZESTRZENI — */
  /* padding-bottom 162px: biała przerwa między „VISIT THE STUDIO" a czarną
     stopką — pomiar XD mobile 14.09: baseline linku 8682 → krawędź czerni
     8854 = 172 px (box → czarny = 162). */
  .page-store .store-studio {
    min-height: auto;
    margin-top: 120px;
    padding-bottom: 162px; }
  .page-store .store-studio-portrait img {
    height: auto;
    aspect-ratio: 9 / 10; }
  .page-store .store-studio-body {
    padding: 26px 10vw 0; }
  .page-store .store-studio-title {
    font-size: 15px;
    line-height: 2;
    margin: 0 0 26px; }
  .page-store .store-studio-desc {
    font-size: 15px;
    line-height: 2;
    max-width: none; }
  .page-store .store-studio-btn {
    font-size: 15px;
    letter-spacing: 0;
    margin-top: 40px; }
}

.store-products {
  max-width: 62em;
  margin: 0 auto;
  padding: 0 1.5em; }

.store-product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-items: center;
  padding: 3em 0;
  border-top: 1px solid #e5e5e5; }
  .store-product:first-of-type {
    border-top: 0; }
  @media (max-width: 640px) {
    .store-product {
      grid-template-columns: 1fr;
      gap: 1.5em;
      padding: 2em 0; } }

.store-product-gallery {
  position: relative; }

.store-product-media {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover; }

.store-product-media.is-hidden {
  display: none; }

.store-product-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em; }

.store-product-name {
  font-size: 2em;
  font-weight: bold; }

.store-product-price {
  font-size: 1.2em; }

.store-product-desc {
  font-size: 0.95em;
  line-height: 1.6; }

.store-product-buy {
  display: inline-block;
  border: 2px solid #000;
  color: #000;
  padding: 0.6em 2em;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.2s linear, color 0.2s linear; }
  .store-product-buy:hover {
    background-color: #000;
    color: #fff !important; }

.store-contact {
  background-color: #000;
  color: #fff;
  text-align: center;
  padding: 4em 1.5em;
  margin-top: 3em; }
  .store-contact h2 {
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 0.6em; }
  .store-contact p {
    margin-bottom: 0.6em; }
  .store-contact a {
    color: #fff; }
  .store-contact a:hover {
    /* zgł. klienta 09.10.2026 — jak w stopce: przyciemnienie zamiast żółtego */
    color: rgba(255, 255, 255, 0.7); }

.store-contact-mail {
  font-size: 1.1em; }

/*
 *	------------------------------------------------------- 	STORE COLLECTIONS (sekcja kolekcji)
 */
.store-collections {
  max-width: 72em;
  margin: 0 auto;
  padding: 0 1.5em 4em; }

.store-eyebrow {
  font-size: 0.85em;
  font-weight: bold;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #464646;
  margin-bottom: 0.5em; }

.store-collections-title {
  font-size: 2.4em;
  font-weight: bold;
  line-height: 1.1;
  margin-bottom: 0.5em; }
  @media (max-width: 640px) {
    .store-collections-title {
      font-size: 1.7em; } }

.store-collections-intro {
  font-size: 1em;
  color: #464646;
  max-width: 46em;
  margin-bottom: 2.5em; }

.store-collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em; }
  @media (max-width: 900px) {
    .store-collections-grid {
      grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) {
    .store-collections-grid {
      grid-template-columns: 1fr;
      gap: 2.5em; } }

.store-collection-card {
  position: relative;
  border-top: 1px solid #e5e5e5;
  padding-top: 1.5em; }

.store-collection-index {
  position: absolute;
  top: 1.5em;
  right: 0;
  font-size: 0.9em;
  font-weight: bold;
  color: #a0a0a0; }

.store-collection-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #f2f2f2;
  margin-bottom: 1.2em; }

.store-collection-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; }

.store-collection-cat {
  font-size: 0.8em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 0.4em; }

.store-collection-name {
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 0.5em; }

.store-collection-desc {
  font-size: 0.9em;
  line-height: 1.55;
  color: #464646;
  margin-bottom: 1.2em; }

.store-collection-link {
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85em;
  border-bottom: 2px solid #000;
  padding-bottom: 0.2em; }
  .store-collection-link:hover {
    color: #0000ff;
    border-bottom-color: #0000ff; }

.store-arrow {
  display: inline-block;
  margin-left: 0.3em; }

/*
 *	------------------------------------------------------- 	STORE PRODUCTS GRID (siatka produktów)
 */
.store-products {
  max-width: 72em;
  margin: 0 auto;
  padding: 0 1.5em 4em; }

.store-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em; }
  @media (max-width: 900px) {
    .store-products-grid {
      grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) {
    .store-products-grid {
      grid-template-columns: 1fr;
      gap: 2em; } }

.store-product-card {
  border-top: 1px solid #e5e5e5;
  padding-top: 1.5em; }

.store-product-media {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #f2f2f2;
  margin-bottom: 1em; }

.store-product-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; }

.store-product-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4em; }

.store-product-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1em; }

.store-product-titles {
  min-width: 0; }

.store-product-name {
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.store-product-price {
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.35;
  color: #464646;
  text-transform: lowercase; }

.store-product-buy {
  display: inline-block;
  color: #000;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  transition: color 0.2s linear; }
  .store-product-buy:hover {
    color: #0000ff; }

/*
 *	------------------------------------------------------- 	STORE MOCK (placeholder zdjęcia)
 */
.store-mock {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  background: linear-gradient(135deg, #f2f2f2 0%, #e2e2e2 100%);
  border: 1px dashed #cfcfcf;
  box-sizing: border-box; }

.store-mock-name {
  font-size: 1.3em;
  font-weight: bold;
  letter-spacing: 0.15em; }

.store-mock-note {
  font-size: 0.8em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a8a; }

/*
 *	------------------------------------------------------- 	STORE NAVBAR (navbar sklepu — wg makiety)
 *	RPDS STORE | Objects + | Collections + | About | HOME | PL
 */
#access.store-nav {
  position: fixed;
  z-index: 8;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  /* przezroczyste tło — sam czarny tekst */
  background-color: transparent;
  border-bottom: 0;
  /* anulujemy mix-blend z oryginalnego #access — tekst ma być czarny */
  mix-blend-mode: normal; }

#access.store-nav ul.header-menu {
  list-style: none;
  margin: 0;
  padding: 50px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1.6em;
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  z-index: auto;
  mix-blend-mode: normal; }

#access.store-nav ul.header-menu > li {
  padding: 0;
  position: relative; }

#access.store-nav ul.header-menu > li > a {
  display: inline-block;
  float: none;
  color: #000;
  letter-spacing: normal;
  font-weight: 400;
  white-space: nowrap;
  text-shadow: none; }

/* Hover pozycji navbaru sklepu = PRZYGASZENIE, nie firmowy niebieski —
   zgł. klienta 09.10.2026: „w navbarze też to wprowadź". Ten sam język co
   w CTA (patrz .store-section-block-link:hover): czerń 50 % = #808080 na białym
   tle. Wcześniej `#0000ff` z globalnej reguły `a:hover { color: #0000ff
   !important; }` (linia 274), stąd `!important` — bez niego globalna reguła
   przejmuje hover (jest też `!important`, więc rozstrzyga specyficzność,
   a ta klasa jest mocniejsza od `a:hover`).
   Nad ciemnym hero (.rp-nav-on-hero, tablet 641–1024) tekst jest biały —
   lustrzane `rgba(255, 255, 255, 0.5)`, patrz blok TABLET niżej.
   Czas przejścia (0,3 s ease-out) ustawia wspólna reguła niżej. */
#access.store-nav ul.header-menu > li > a:hover {
  color: rgba(0, 0, 0, 0.5) !important; }

/* wersaliki jak w makiecie: brand, HOME/START, przełącznik języka */
#access.store-nav .store-nav-brand > a,
#access.store-nav .store-nav-home > a,
#access.store-nav ul.header-menu > li:last-child > a {
  text-transform: uppercase;
  font-weight: 400; }

/* aktywna strona bez żółtego podświetlenia (w makiecie wszystkie pozycje są tego samego koloru) */
#access.store-nav li.is-active > a {
  color: #000 !important; }

/* kategoria z rozwijanym "+" */
.store-nav-cat {
  display: inline-flex;
  align-items: center; }

/* CZAS PRZEJŚCIA HOVERÓW W NAVBARZE SKLEPU — 0,3 s ease-out, dokładnie jak
 * w CTA i jak w pliku prototypu XD (_xd-f550687d.json): KAŻDA pozycja menu ma
 * tam hover `auto-animate` 0,3 s `ease-out` (tak samo jak komponenty CTA).
 * Zgł. klienta 09.10.2026: „w navbarze też to wprowadź".
 * Jeden wspólny blok, żeby czas miał jedno źródło — dotyczy desktopu, tabletu,
 * paska mobilnego (brand) i kurtyny mobilnej (pozycje + brand + subpozycje).
 * `transition` na kolor nie wpływa na układ, więc jest bezpieczny na wszystkich
 * szerokościach. */
#access.store-nav ul.header-menu > li > a,
#access.store-nav .store-nav-toggle,
#access.store-nav .store-nav-subs a,
.rp-mbar--store .rp-mbar-brand,
.rp-menu--store .rp-menu-brand,
.rp-menu--store .rp-menu-list a,
.rp-menu--store .store-nav-toggle,
.rp-menu--store .store-nav-subs a {
  transition: color 0.3s ease-out; }

.store-nav-toggle {
  background: none;
  border: 0;
  padding: 0 0 0 0.45em;
  margin: 0;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  color: #000; }
  .store-nav-toggle:focus {
    outline: none; }

.store-nav-toggle-icon {
  display: inline-block;
  transition: transform 0.25s ease; }

/* po rozwinięciu ikona "+" zamienia się w "−" (tekst podmienia scripts.js) — bez rotacji */
.store-nav-cat.is-open .store-nav-toggle-icon {
  transform: none; }

/* dropdown podkategorii — bez ramki, wyrównany do lewej, dokładnie pod swoją kategorią */
#access.store-nav .store-nav-subs {
  position: absolute;
  top: 100%;
  left: 0;
  transform: none;
  min-width: 0;
  width: auto;
  margin-top: 0.15em;
  padding: 0.25em 0;
  background: transparent;
  display: none;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  z-index: 10; }
  #access.store-nav .store-nav-cat.is-open .store-nav-subs {
    display: flex; }
  #access.store-nav .store-nav-subs li {
    display: block;
    width: 100%;
    padding: 0; }
  #access.store-nav .store-nav-subs a {
    display: block;
    float: none;
    padding: 0.25em 0;
    color: #000 !important;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-shadow: none;
    text-transform: none;
    font-weight: normal; }
  /* Hover = przygaszenie jak w pozycjach głównych (zgł. klienta 09.10.2026:
     „w navbarze też to wprowadź") — wcześniej firmowy niebieski */
  #access.store-nav .store-nav-subs a:hover {
    color: rgba(0, 0, 0, 0.5) !important; }

/* Jeśli obsługiwane */
@supports (mix-blend-mode: difference) {
  /* bez blendu — tekst navbaru ma być zawsze czarny (jak w makiecie) */
  #access.store-nav,
  #access.store-nav ul.header-menu {
    mix-blend-mode: normal; }
  #access.store-nav ul.header-menu > li > a,
  #access.store-nav .store-nav-toggle {
    color: #000;
    text-shadow: none; }
  #access.store-nav ul.header-menu > li > a:hover,
  #access.store-nav .store-nav-toggle:hover {
    color: rgba(0, 0, 0, 0.5) !important; }
  /* brand (RPDS STORE) i HOME/START gasną tak samo — nie mają własnych
     reguł hover, więc bez tego brałyby niebieski z globalnej `a:hover` */
  #access.store-nav .store-nav-brand > a:hover,
  #access.store-nav .store-nav-home > a:hover {
    color: rgba(0, 0, 0, 0.5) !important; }
  #access.store-nav li.is-active > a {
    color: #000 !important; }
  #access.store-nav .store-nav-subs {
    isolation: auto;
    mix-blend-mode: normal; } }

/* mobile */
@media (max-width: 640px) {
  #access.store-nav ul.header-menu {
    padding: 40px 0 0;
    gap: 0 .75em; }
  #access.store-nav ul.header-menu > li > a {
    font-size: .85em;
    letter-spacing: normal; } }

@media (max-width: 380px) {
  #access.store-nav ul.header-menu {
    padding: 34px 0 0;
    gap: 0 .55em; }
  #access.store-nav ul.header-menu > li > a {
    font-size: .78em; } }

/*
 *	------------------------------------------------------- 	STORE OBJECTS (podstrona /objects)
 */
.page-objects {
  background-color: #fff;
  padding-top: 190px; }
  @media (max-width: 640px) {
    .page-objects {
      padding-top: 140px; } }

/* FLEXBOX (nie grid) — dzięki `justify-content: center` ostatni, niepełny
 * rząd jest WYŚRODKOWANY: pełne rzędy 4 kafli wypełniają szerokość co do
 * piksela, a po filtrze 1–3 pozostałe kafle układają się symetrycznie na
 * środku (działa dla dowolnej liczby kafli — także siatka na Collections
 * i filtrowanie po kolekcji w JS, gdzie kafle są ukrywane). */
.objects-grid {
  max-width: 57em;
  margin: 0 auto;
  padding: 0 1.5em 5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em 2em; }
  .objects-grid .object-card {
    flex: 0 1 calc((100% - 6em) / 4); }
  .objects-grid .objects-empty {
    flex: 0 0 100%; }
  @media (max-width: 1024px) {
    .objects-grid .object-card {
      flex: 0 1 calc((100% - 2em) / 2); } }
  @media (max-width: 640px) {
    .objects-grid {
      column-gap: 14px;
      row-gap: 40px;
      padding: 0 16px 5em; }
    .objects-grid .object-card {
      flex: 0 1 calc((100% - 14px) / 2); } }

.object-card {
  min-width: 0; }

.object-card-media {
  display: block;
  overflow: hidden; }
  .object-card-media img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover; }

.object-card-mock {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background-color: #f2f2f2;
  border: 1px solid #e3e3e3;
  color: #999; }
  .object-card-mock-name {
    font-size: 1.1em;
    font-weight: normal;
    letter-spacing: 0.12em; }
  .object-card-mock-note {
    font-size: 0.8em;
    letter-spacing: 0.08em;
    text-transform: uppercase; }

.object-card-meta {
  padding-top: 0.1em; }

/* podpis karty (jak w mockupie mobilnym): nazwa pełną szerokością karty,
 * pod nią cena (lewo) + SHOP NOW (prawo, dociągnięty do dolnej linii) */
.object-card-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  column-gap: 1em;
  row-gap: 0.15em; }

.object-card-titles {
  display: contents; }

.object-card-name {
  grid-column: 1 / -1;
  display: block; /* bez tego ellipsis nie działa na inline span */
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.object-card-buy {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #000;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: underline;
  /* 0.1em — grubość podkreślenia z XD (patrz .store-hero-cta) */
  text-decoration-thickness: 0.1em;
  text-underline-offset: 8px; }
  /* hover = przygaszenie (zgł. klienta 09.10.2026 — patrz .store-section-block-link);
     podkreślenie bierze kolor z `currentColor`, więc idzie za tekstem.
     Globalne `a, a:active, a:hover { text-decoration: none }` (0,1,1) zdejmuje
     linię z tego linku — hover ma być WYŁĄCZNIE przygaszeniem, więc odtwarzamy
     ją tu (razem z grubością, bo skrót `text-decoration: none` resetuje też
     `text-decoration-thickness` do `auto`). Reszta CTA sklepu ma linię z borderu
     + gradientu i nie ma tego problemu. */
  .object-card-buy:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    text-decoration-line: underline;
    text-decoration-thickness: 0.1em;
    text-decoration-color: currentColor; }

.object-card-price {
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 0.1em;
  text-transform: lowercase; }

/* Cart entry point (issue #34): BUY NOW add-to-cart form under the SHOP NOW
 * link — COFNIĘTE (2026-09-08): karty znów mają tylko link SHOP NOW.
 * Koszyk/checkout pozostają aktywne, ale bez wejścia z kafelków.
 */

.objects-empty {
  padding: 1em 0 4em;
  color: #999;
  font-size: 0.9em; }

@media (max-width: 640px) {
  .object-card-name,
  .object-card-price,
  .object-card-buy {
    /* 2026-10-01: 0.8em (12,8 px) → 0.9em (14,4 px) — podpisy kafelków
       czytelniejsze na telefonie (picks / objects / collections) */
    font-size: 0.9em; }
  .object-card-row {
    column-gap: 0.75em; } }

@media (max-width: 380px) {
  .objects-grid {
    padding: 0 12px 4em;
    column-gap: 12px;
    row-gap: 32px; }
  .objects-grid .object-card {
    flex: 0 1 calc((100% - 12px) / 2); }
  .collections-objects-head {
    padding-left: 12px;
    padding-right: 12px; }
  .object-card-mock-name {
    font-size: 0.95em; } }

/*
 *	------------------------------------------------------- 	STORE PRODUCT (podstrona /objects/<slug> — spec §7)
 */
.page-product {
  background-color: #fff; }

/* ----- 7.1 HERO (100vh) — wzorowane na hero sekcji Collections -----
 * Dwa zdjęcia 3:4 od lewej krawędzi strony — RAZEM dokładnie połowa
 * szerokości strony (50%); mniejsze (lewe) = 0.7 szerokości większego
 * (jak .store-section-media); odstęp 16px; kolumna tekstu 300px po prawej,
 * wyrównana do góry kolażu; całość wyśrodkowana w pionie (1fr auto 1fr). */
.product-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  /* tekst: dotychczasowe 300px + połowa wolnego miejsca do granicy strony
   * (user: "odblokuj margines tekstu o połowę do granicy strony") */
  grid-template-columns: 50% calc(300px + (100% - 50% - 48px - 300px) / 2);
  grid-template-rows: 1fr auto 1fr;
  column-gap: 48px;
  padding: 0; }

.product-hero-media {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  align-items: start;
  gap: 16px; }

.product-hero-fig {
  min-width: 0;
  margin: 0;
  overflow: hidden; }

/* duże (prawe) zdjęcie zaczyna się 60px niżej — małe i tytuł wyrównane
 * do górnej krawędzi dużego zdjęcia (ten sam offset 60px) */
.product-hero-fig--small {
  margin-top: 60px; }

.product-hero-fig--main {
  margin-top: 60px; }
  @media (max-width: 640px) {
    .product-hero-fig--small,
    .product-hero-fig--main {
      margin-top: 30px; } }

.product-hero-img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover; }

.product-hero-body {
  grid-column: 2;
  grid-row: 2;
  /* rozciągnięcie do pełnej wysokości wiersza minus offset 60px =
   * dokładnie wysokość dużego zdjęcia; tytuł u góry, opis/cena na dole */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-width: 0;
  margin-top: 60px; }

/* opis + cena: dociśnięte do dolnej krawędzi dużego zdjęcia */
.product-hero-info {
  margin-top: auto; }

.product-hero-title {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 10px; }

/* rząd taksonomii (spec §7.1): pary etykieta+wartość w jednej linii,
 * ~40px między parami; etykieta Title Case, wartość UPPERCASE, obie 11px */
.product-hero-tax {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 2.6em;
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 30px; }

.product-hero-tax-pair {
  display: inline-flex;
  align-items: baseline;
  gap: 1em; }

.product-hero-tax-value {
  text-transform: uppercase; }

.product-hero-desc {
  font-size: 28px;
  line-height: 1.3;
  max-width: 430px;
  margin: 0 0 96px; }
  .product-hero-desc p {
    margin: 0; }

.product-hero-price {
  font-size: 28px;
  text-transform: uppercase;
  margin: 0 0 6px; }

.product-hero-price-note {
  font-size: 13px;
  margin: 0; }

/* wszystkie teksty kolumny informacyjnej w tej samej czcionce co tytuł
 * (bold) — user: "wszystkie teksty w takiej czcionce jak w tytule" */
.product-hero-tax,
.product-hero-desc,
.product-hero-price,
.product-hero-price-note {
  font-weight: bold; }

/* ----- 7.2 KONFIGURATOR + ZAKUP ----- */
.product-buy {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
  padding: 8em 0;
  box-sizing: border-box; }

/* kolumna konfiguratora: wolna, blisko osi środka strony (20vw —
 * margines odsunięty, by notka miała dwie linie) */
.product-buy-config {
  justify-self: start;
  width: 100%;
  max-width: none;
  padding-left: 20vw;
  padding-right: 2em;
  box-sizing: border-box; }

.product-buy-label {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 14px; }

/* próbki materiałów (spec §2.8): duże kafelki 72×72, odstęp 18px,
 * wybór = ramka z offsetem */
.product-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 40px; }

.product-swatch {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: #eee; }
  .product-swatch.is-selected {
    outline: 1px solid #000;
    outline-offset: 3px; }

.product-swatch--red {
  background: #d63d2f; }
.product-swatch--cobalt {
  background: #2244c8; }
.product-swatch--navy-black {
  background: #10151f; }
.product-swatch--red-blue-duo {
  background: linear-gradient(90deg, #d63d2f 0 50%, #2244c8 50% 100%); }
.product-swatch--terrazzo-white {
  background-image: radial-gradient(#9c9c9c 1.5px, transparent 1.7px);
  background-size: 9px 9px;
  background-color: #f2efe9; }
.product-swatch--terrazzo-black {
  background-image: radial-gradient(#8f8f8f 1.5px, transparent 1.7px);
  background-size: 9px 9px;
  background-color: #171717; }
.product-swatch--terrazzo-light {
  background-image: radial-gradient(#d8d5cf 1.5px, transparent 1.7px);
  background-size: 9px 9px;
  background-color: #fbfaf7; }
.product-swatch--terrazzo-orange {
  background-image: radial-gradient(#8d3b22 1.5px, transparent 1.7px);
  background-size: 9px 9px;
  background-color: #c98a4b; }

/* licznik ilości (spec §2.9): − 1 +, bez ramek i tła */
.product-qty {
  display: flex;
  align-items: baseline;
  gap: 36px;
  margin: 0 0 64px;
  font-size: 24px;
  font-weight: 600; }

.product-qty-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  color: #000;
  cursor: pointer; }
  .product-qty-btn:hover {
    color: #0000ff; }

/* BUY NOW — CTA podkreślone (spec §2.5) */
.product-buy-cta {
  display: inline-block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid #000;
  padding-bottom: 3px; }
  /* hover = przygaszenie (zgł. klienta 09.10.2026 — patrz .store-section-block-link);
     border przezroczysty, żeby nie nakładał się na gradient (podwójne krycie) */
  .product-buy-cta:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent; }

.product-buy-cta--muted {
  border-bottom: 0;
  cursor: default; }

.product-buy-note {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  margin: 28px 0 0;
  max-width: 360px; }

/* zdjęcie przy konfiguratorze: zaczyna się na osi środka strony; pionowe 3:4,
 * wysokość ~ jak dotychczasowa (473px), węższe (52.5% połówki) */
.product-buy-media {
  margin: 0;
  justify-self: start;
  width: 52.5%; }
  .product-buy-media img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover; }

/* ----- 7.3 SPECYFIKACJA TECHNICZNA (układ schodkowy) -----
 * Kolumny 2:3:3:2 — zdjęcie wnętrza (lewe, 3:4) i packshot (prawe, 4:3,
 * 130px niżej); pary specyfikacji pomiędzy; prawa kolumna spec 110px niżej. */
.product-spec {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 2fr 3fr 3fr 2fr;
  gap: 24px;
  align-items: start;
  padding: 8em 0 4em;
  box-sizing: border-box; }

.product-spec-media {
  margin: 0;
  min-width: 0;
  overflow: hidden; }

.product-spec-media--interior {
  grid-column: 1; }
  .product-spec-media--interior img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover; }

/* Zdjęcie przy „MATERIAL OPTIONS" (7.3) — tylko mobile ≤640 (blok mobilny) */
.product-spec-media--material {
  display: none; }

.product-spec-media--packshot {
  grid-column: 4;
  /* nieco powyżej dolnej granicy sekcji 100vh */
  margin-top: 310px;
  margin-bottom: -4em; }
  .product-spec-media--packshot img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover; }

.product-spec-col {
  grid-column: 2;
  min-width: 0; }

.product-spec-col--lower {
  grid-column: 3;
  /* dosunięta do prawego zdjęcia, ale lekko odsunięta od niego;
   * góra równo z górą prawego zdjęcia */
  justify-self: end;
  padding-right: 3.5em;
  margin-top: 310px; }

.product-spec-pair {
  margin: 0 0 40px; }
  .product-spec-pair:last-child {
    margin-bottom: 0; }

.product-spec-label {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 6px; }

.product-spec-text {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0; }

@media (max-width: 1024px) {
  .product-spec {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 140px 24px 40px; }
  .product-spec-media--interior,
  .product-spec-col,
  .product-spec-col--lower,
  .product-spec-media--packshot {
    grid-column: 1;
    margin-top: 0; } }

/* ----- 7.4 BLOK REDAKCYJNY (storytelling) -----
 * Siatka 12-kolumnowa: zdjęcie kol. 3–6 (4:5, packshot na jasnym tle),
 * tekst kol. 8–11 wyśrodkowany pionowo względem zdjęcia; odstęp 180 px
 * od sekcji spec (całość razem daje kolejne 100vh). */
.product-editorial {
  margin-top: 180px;
  /* zdjęcie 3:4 ma ~3/4 wysokości strony (675px) + przerwy górna/dolna */
  min-height: 835px;
  /* przerwa pod stałym nagłówkiem strony (#access) i nad stopką */
  padding: 120px 0 40px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
  align-content: center;
  box-sizing: border-box; }

.product-editorial-media {
  grid-column: 3 / 7;
  width: 498px;
  justify-self: end;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  /* dół zdjęcia równo z dołem tekstu */
  align-self: end;
  /* przybliżone do środka (zmniejszenie przerwy do tekstu) */
  -webkit-transform: translateX(54.5px);
  transform: translateX(54.5px); }
  .product-editorial-media img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover; }

.product-editorial-body {
  grid-column: 8 / 12;
  min-width: 0;
  /* naturalna wysokość — bez wymuszania proporcji 3:4 */
  /* dół tekstu równo z dołem zdjęcia */
  align-self: end;
  /* przybliżony do środka (zmniejszenie przerwy do zdjęcia) */
  -webkit-transform: translateX(-54.5px);
  transform: translateX(-54.5px); }

.product-editorial-title {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.3;
  text-transform: uppercase;
  margin: 0 0 24px; }

.product-editorial-text {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 24px; }
  .product-editorial-text:last-child {
    margin-bottom: 0; }

@media (max-width: 1024px) {
  .product-editorial {
    margin-top: 0;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 140px 24px 40px; }
  .product-editorial-media,
  .product-editorial-body {
    grid-column: 1; } }

/* ----- 7.5 CUSTOM / B2B — lustrzane odbicie hero (§7.1) -----
 * Dokładnie hero, ale odbite: kolaż dwóch zdjęć 3:4 (duże + małe = 0.7
 * szerokości dużego, odstęp 16px) RAZEM dokładnie na prawej połowie
 * strony (flush do prawej krawędzi); kolumna tekstu po lewej, tytuł
 * wyrównany do górnej krawędzi dużego zdjęcia (offset 60px), opis + CTA
 * dociśnięte do jego dołu; całość wyśrodkowana w pionie (1fr auto 1fr). */
.product-custom {
  margin-top: 180px;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  /* lustro hero: lewy margines tekstu = prawy margines tekstu w hero,
   * kol. 3 = odstęp 48px tekst↔zdjęcia, media flush do prawej krawędzi */
  grid-template-columns: calc((100% - 50% - 48px - 300px) / 2) calc(300px + (100% - 50% - 48px - 300px) / 2) 48px 50%;
  grid-template-rows: 1fr auto 1fr;
  column-gap: 0;
  padding: 0; }

.product-custom-body {
  grid-column: 2;
  grid-row: 2;
  /* rozciągnięcie do pełnej wysokości wiersza minus offset 60px =
   * dokładnie wysokość dużego zdjęcia; tytuł u góry, opis + CTA na dole */
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 0;
  min-width: 0;
  margin-top: 60px; }

/* opis + CTA: pod tytułem (bez dociągania do dołu zdjęcia) */
.product-custom-info {
  margin-top: 0; }

.product-custom-title {
  font-size: 28px;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 24px; }

.product-custom-text {
  font-size: 20px;
  line-height: 1.6;
  max-width: 430px;
  margin: 0 0 24px; }

/* CTA podkreślone (spec §2.5) */
.product-custom-cta {
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid #000;
  padding-bottom: 3px; }
  /* hover = przygaszenie (zgł. klienta 09.10.2026 — patrz .store-section-block-link);
     border przezroczysty, żeby nie nakładał się na gradient (podwójne krycie) */
  .product-custom-cta:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent; }

.product-custom-media {
  grid-column: 4;
  grid-row: 2;
  min-width: 0;
  display: grid;
  /* lustro hero: duże zdjęcie pierwsze (lewe), małe drugie (prawe,
   * flush do prawej krawędzi strony) */
  grid-template-columns: 1fr 0.7fr;
  align-items: start;
  gap: 16px; }

.product-custom-media-fig {
  min-width: 0;
  margin: 0;
  overflow: hidden; }
  .product-custom-media-fig img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover; }

/* ten sam offset 60px jak w hero — góry obu zdjęć i tytułu równe */
.product-custom-media-fig--main,
.product-custom-media-fig--small {
  margin-top: 60px; }
  @media (max-width: 640px) {
    .product-custom-media-fig--main,
    .product-custom-media-fig--small {
      margin-top: 30px; } }

/* Fallback ≤1024px: tekst nad zdjęciami (lustro hero — tam zdjęcia
 * nad tekstem) */
@media (max-width: 1024px) {
  .product-custom {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 140px 24px 40px; }
  .product-custom-body {
    flex: none;
    margin-top: 0; }
  .product-custom-media {
    flex: none;
    width: 100%; } }

/* ----- 7.6 AKORDEON FAQ -----
 * Siatka 12-kolumnowa: zdjęcie kol. 3–6 (4:5, packshot na jasnoszarym
 * tle, kończy się na linii środka strony), przesunięte ~40px w dół;
 * akordeon kol. 7–11 zaczyna się na wysokości górnej krawędzi zdjęcia;
 * wiersze: label UPPERCASE po lewej, "+" po prawej, odstęp 28px;
 * po rozwinięciu "+" → "−". */
.product-faq {
  margin-top: 180px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: start;
  padding-bottom: 4em;
  box-sizing: border-box; }

.product-faq-media {
  grid-column: 3 / 7;
  /* delikatnie zwężone, prawa krawędź zostaje na linii środka */
  width: 96%;
  justify-self: end;
  /* zdjęcie ok. 80px niżej niż góra sekcji */
  margin: 80px 0 0;
  min-width: 0;
  overflow: hidden; }
  .product-faq-media img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 5;
    object-fit: cover; }

.product-faq-list {
  grid-column: 7 / 12;
  min-width: 0;
  /* wiersze zaczynają się na wysokości górnej krawędzi zdjęcia */
  margin-top: 80px;
  /* dodatkowy odstęp od zdjęcia */
  padding-left: 32px; }

.product-faq-item {
  margin: 0 0 48px; }
  .product-faq-item:last-child {
    margin-bottom: 0; }

.product-faq-head {
  display: flex;
  align-items: baseline;
  /* "+" tuż za tytułem, bez sztywnej kolumny */
  justify-content: flex-start;
  gap: 16px;
  width: auto;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left; }
  .product-faq-head:hover .product-faq-label,
  .product-faq-head:hover .product-faq-toggle {
    color: #0000ff; }

.product-faq-label {
  font-size: 24px;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-transform: uppercase;
  color: #000; }

.product-faq-toggle {
  flex: none;
  font-size: 24px;
  line-height: 1;
  color: #000; }

.product-faq-panel {
  padding-top: 12px; }

.product-faq-text {
  font-size: 16px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0; }

@media (max-width: 1024px) {
  .product-faq {
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 140px 24px 40px; }
  .product-faq-media,
  .product-faq-list {
    grid-column: 1; }
  .product-faq-media,
  .product-faq-list {
    margin-top: 0; }
  .product-faq-list {
    padding-left: 0; } }

/* Fallback ≤1024px: hero w pionie (zdjęcia nad tekstem), jak na Collections */
@media (max-width: 1024px) {
  .product-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 140px 24px 40px; }
  .product-hero-media {
    flex: none;
    width: 100%; }
  .product-hero-body {
    flex: none;
    margin-top: 0; } }

@media (max-width: 900px) {
  .product-buy {
    grid-template-columns: 1fr;
    gap: 3em;
    padding: 5em 1.5em; }
  .product-buy-config {
    justify-self: stretch;
    order: 2;
    max-width: none;
    padding: 0; }
  .product-buy-media {
    order: 1;
    width: 100%; } }

/*
 *	------------------------------------------------------- 	STORE ABOUT (podstrona /about — wg specyfikacji RPDS STORE §8)
 *	Editorial / swiss minimal: brak boldu, brak ramek, brak tła przycisków.
 *	Siatka: 12 kolumn, gutter 40 px, kontener 1200 px.
 */
.page-about {
  background-color: #fff;
  font-weight: 400;
  overflow-x: clip; }
  .page-about h1,
  .page-about h2,
  .page-about h3 {
    font-weight: 400; }

/* ----- 8.1 HERO (full-bleed, jasny) — pełna wysokość viewportu -----
 * Hero zajmuje 100 vh (svh = stabilny wariant mobilny bez wpływu pasków
 * przeglądarki). min-height broni treści na bardzo niskich oknach.
 * Tytuł na 45% wysokości hero. */
.about-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  background-color: #e8e8ea;
  overflow: hidden;
  text-align: center; }

/* 2026-10-01 („w sekcji about w hero powiększ napis”): tekst hero na wymiar
 * z XD — tytuł 50 px (desktop „Web 1920 – 19” fs 50/59 i tablet fs 50),
 * podpis 30 px desktop / 20 px tablet; kontener 660 px, żeby tytuł mieścił
 * się w JEDNEJ linii (makieta: „ABOUT RPDS STORE” bez łamania). */
.about-hero-inner {
  position: absolute;
  z-index: 2;
  top: 45%;
  left: 50%;
  width: 100%;
  max-width: 660px;
  padding: 0 24px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

.about-hero-title {
  font-size: 50px;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 0 0 16px; }

.about-hero-sub {
  font-size: 20px;
  line-height: 1.6;
  margin: 0; }

@media (min-width: 1025px) {
  .about-hero-sub {
    font-size: 30px;
    line-height: 1.5; } }

/* makiety krzeseł w hero (docelowo: zdjęcie about-hero-chairs.jpg) */
.about-hero-mock {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 26%;
  max-width: 340px; }
  .about-hero-mock--left {
    left: 8%;
    height: 72%;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1); }
  .about-hero-mock--right {
    right: 8%;
    height: 78%; }

/* ----- siatka 12-kolumnowa ----- */
.about-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px; }

/* ----- typografia ----- */
.about-label {
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0 0 16px; }

.about-text p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 270px;
  margin: 0 0 24px; }
  .about-text p:last-child {
    margin-bottom: 0; }

.about-cta {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid #000;
  padding-bottom: 4px; }
  /* hover = przygaszenie (zgł. klienta 09.10.2026 — patrz .store-section-block-link);
     ta klasa nie miała własnego hoveru, więc brała niebieski z globalnej reguły;
     border przezroczysty, żeby nie nakładał się na gradient (podwójne krycie) */
  .about-cta:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent; }

/* ----- figury / mocki zdjęć ----- */
.about-fig {
  margin: 0; }

.about-mock {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: #f0f0f2;
  border: 1px dashed #cfcfcf;
  box-sizing: border-box; }
  .about-mock--1-1 {
    aspect-ratio: 1 / 1; }
  .about-mock--4-3 {
    aspect-ratio: 4 / 3; }
  .about-mock--4-5 {
    aspect-ratio: 4 / 5; }
  .about-mock--3-4 {
    aspect-ratio: 3 / 4; }
  .about-mock--5-7 {
    aspect-ratio: 5 / 7; }

.about-mock-name {
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8a8a8a; }

.about-mock-note {
  font-size: 11px;
  color: #b0b0b0; }

/* zdjęcie hero wg XD (podmiana makiet krzeseł /about/, 29.09) */
.about-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; }

/* zdjęcie karty produktu (§2.3) */
.about-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover; }

/* podpis pozycyjny (Top / Left / Right + PRODUCT NAME) */
.about-pos {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em; }

.about-pos-row {
  display: grid;
  grid-template-columns: 70px auto;
  column-gap: 16px; }

.about-pos-value {
  text-transform: uppercase; }

/* mirror: podpis pod małym zdjęciem dosunięty do prawej — przy większym zdjęciu */
.about-sec--mirror .about-pos {
  width: fit-content;
  margin-left: auto; }

.about-sec--mirror .about-pos-label {
  text-align: right; }

/* ----- karta produktu (ProductCard, §2.3) ----- */
.about-card-media {
  display: block;
  color: #000;
  text-decoration: none; }

.about-card-caption {
  position: relative;
  margin-top: 12px;
  padding-right: 110px;
  min-height: 48px; }

.about-card-name {
  display: block;
  font-size: 16px;
  line-height: 1.45;
  text-transform: uppercase; }

.about-card-price {
  display: block;
  font-size: 16px;
  line-height: 1.45; }

.about-card-buy {
  position: absolute;
  right: 0;
  top: 4px;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000;
  text-decoration: none;
  /* podkreślenie CTA: wspólna reguła gradientu (0.1em) przy .store-hero-cta */
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px; }
  /* hover = przygaszenie (zgł. klienta 09.10.2026 — patrz .store-section-block-link);
     ta klasa nie miała własnego hoveru, więc brała niebieski z globalnej reguły;
     border przezroczysty, żeby nie nakładał się na gradient (podwójne krycie) */
  .about-card-buy:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent; }

/* ----- rozmieszczenie sekcji (desktop) ----- */
/* ----- sekcje pełnoekranowe 100vh (THE ESSENCE / circularity — ACF repeater) -----
 * Sekcja = dokładnie jeden ekran: zaczyna się tam, gdzie kończy się poprzedni
 * viewport (margin-top: 0, min-height 100vh/svh), bez marginesów pośrednich.
 * Flexbox (odporniejszy niż grid + marginesy wyrównujące):
 *   tekst = lewa połowa (50%), potem 16px, DUŻE zdjęcie (flex: 1 — rozpycha się
 *   od 50vw do małego), na końcu małe zdjęcie o stałej szerokości, którego prawa
 *   krawędź = prawa krawędź okna (sekcja jest full-bleed, bez paddingu z prawej).
 * Szerokość małego wyliczona tak, by przy proporcjach zdjęć (duże 5:7 / 4:5,
 * małe 3:4) wysokości trzymały rytm 4:3:
 *   essence (duże 5:7):  w_small = (50vw − 16px) × 63/143
 *   mirror  (duše 4:5):  w_small = (50vw − 16px) × 45/109
 * Layout `mirror` = wariant lustrzany (circularity). */
.about-sec {
  margin-top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: none;
  padding: 0; }

.about-sec .about-sec-text .about-label {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 24px; }

.about-sec .about-sec-text p {
  font-size: 20px;
  line-height: 1.6;
  max-width: 500px;
  margin: 0; }

.about-sec .about-sec-text {
  flex: 0 0 calc(50% - 16px);
  align-self: center;
  box-sizing: border-box; }

/* tekst po lewej (essence) — wcięcie na margines kontenera;
 * w mirror tekst jest po prawej — bez dodatkowego wcięcia */
.about-sec--essence .about-sec-text {
  padding-left: max(24px, calc((100vw - 1152px) / 2)); }

.about-sec .about-sec-big {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center; }

.about-sec .about-sec-small {
  flex: 0 0 auto;
  align-self: center; }

.about-sec--essence .about-sec-small {
  width: calc((50vw - 16px) * 63 / 143); }

.about-sec--mirror .about-sec-small {
  width: calc((50vw - 16px) * 45 / 109);
  order: -1; }

/* zdjęcia zaczynają się ze wspólnej górnej krawędzi (jak w makietach),
 * 14vh od góry sekcji — pod Fixed navbar; tekst dalej wycentrowany w pionie */
.about-sec .about-sec-big,
.about-sec .about-sec-small {
  align-self: flex-start;
  margin-top: 14vh; }

.about-sec .about-sec-big img,
.about-sec .about-sec-big .about-mock {
  width: 100%;
  height: auto; }

.about-sec .about-sec-small img,
.about-sec .about-sec-small .about-mock {
  width: 100%;
  height: auto; }

/* obrazki z ACF (mocki mają własne modyfikatory aspect-ratio) */
.about-img {
  width: 100%;
  display: block;
  object-fit: cover; }
  .about-img--1-1 {
    aspect-ratio: 1 / 1; }
  .about-img--4-3 {
    aspect-ratio: 4 / 3; }
  .about-img--4-5 {
    aspect-ratio: 4 / 5; }
  .about-img--3-4 {
    aspect-ratio: 3 / 4; }
  .about-img--5-7 {
    aspect-ratio: 5 / 7; }

/* ----- 8.4 TRZY FILARY — sekcja w own 100vh, tekst powiększony ----- */
.about-pillars {
  margin-top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center; }

.about-pillars .about-text {
  flex: 1 1 0;
  min-width: 0; }

.about-pillars .about-label {
  font-size: 22px;
  line-height: 1.6;
  margin-bottom: 24px; }

.about-pillars .about-text p {
  font-size: 22px;
  line-height: 1.6;
  max-width: none;
  margin: 0; }

.about-pillar-1 {
  grid-column: 1 / span 4; }

.about-pillar-2 {
  grid-column: 5 / span 4; }

.about-pillar-3 {
  grid-column: 9 / span 4; }

/* ----- 8.5 DESIGNED BY ROBERT PLUDRA — sekcja 100vh -----
 * Tekst w lewej połowie (wycentrowany w pionie), portret full-bleed
 * na całej prawej połowie ekranu (od 50vw do krawędzi, cała wysokość). */
.about-designed {
  margin-top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  max-width: none;
  padding: 0; }

/* desktop: kolumny 56% + 44% mają wypełniać szerokość co do piksela —
 * odziedziczony po .about-grid gap:40px wypychał portret 40 px za prawą
 * krawędź (zdjęcie było ucinane). Odstęp tekst–zdjęcie = padding tekstu. */
@media (min-width: 1025px) {
  .about-designed {
    gap: 0; } }

.about-designed-text {
  flex: 0 0 56%;
  box-sizing: border-box;
  padding-left: max(24px, calc((100vw - 1152px) / 2));
  padding-right: 48px; }

.about-designed-text .about-label {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 24px; }

.about-designed-text p {
  font-size: 20px;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 0 24px; }
  .about-designed-text p:last-of-type {
    margin-bottom: 0; }

.about-designed-text .about-cta {
  font-size: 20px;
  margin-top: 32px; }

.about-designed-portrait {
  flex: 0 0 44%;
  align-self: center;
  box-sizing: border-box; }
  .about-designed-portrait img {
    width: 100%;
    height: calc((50vw - 16px) * 122 / 143);
    display: block;
    object-fit: cover; }

/* ----- 8.6 SUSTAINABLE PRACTICE — sekcja 100vh -----
 * Dwie karty produktowe przy lewej krawędzi okna (razem 50vw, przerwa 16px),
 * tekst w prawej połowie; wszystko wyrównane do wspólnej górnej krawędzi
 * (14vh od góry sekcji, jak w sekcjach zdjęciowych). */
.about-sustainable {
  margin-top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: none;
  padding: 0; }

.about-sustainable-card1,
.about-sustainable-card2 {
  flex: 0 0 calc((50vw - 16px) / 2);
  margin-top: 14vh; }

/* Podpis lewej karty, która dotyka krawędzi okna: wcięcie 30 px wg XD
   desktop (metryka: zdjęcia x=0 / x=510, podpisy x=30 / x=510).
   Prawa karta zostaje flush z krawędzią swojego zdjęcia (zgł. klienta 06.10.2026). */
.about-sustainable-card1 .about-card-caption {
  padding-left: 30px; }

.about-sustainable-text {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 14vh;
  padding-left: 48px;
  padding-right: max(24px, calc((100vw - 1152px) / 2)); }

.about-sustainable-text .about-label {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 24px; }

.about-sustainable-text p {
  font-size: 20px;
  line-height: 1.6;
  max-width: 520px;
  margin: 0; }

/* Kontener 1200 px wyśrodkowany jak pozostałe sekcje About (`margin: auto`).
   Wcześniej `margin: 200px 0 240px` zerował boczne marginesy i przy oknach
   >1200 px sekcja była przypięta do LEWEJ krawędzi (label x=24 @1512, gdy
   sąsiednie sekcje x=180) — zgł. klienta „ten tekst powinien być na środku".
   Przy ≤1200 px auto = 0, więc mobile/tablet bez zmian. */
.about-contact {
  margin: 200px auto 240px; }
  .about-contact-head {
    grid-column: 1 / span 6; }
    /* §8.7 XD: label 14 UPPERCASE → 16 px → intro; poziom 2 (3 kolumny)
       60 px od intro = 20 px marginesu + 40 px row-gap siatki. */
    .about-contact-head p {
      font-size: 14px;
      line-height: 1.6;
      max-width: 580px;
      margin: 0; }
    .about-contact-head p + p {
      margin-top: 16px; }
  .about-contact-col1,
  .about-contact-col2,
  .about-contact-col3 {
    margin-top: 20px; }
  .about-contact-col1 {
    grid-column: 1 / span 3; }
  .about-contact-col2 {
    grid-column: 4 / span 3; }
  .about-contact-col3 {
    grid-column: 7 / span 3; }

.about-contact-col p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0; }

.about-contact-col .about-label {
  margin-bottom: 28px; }

/* Selektor z klasą rodzica — inaczej (0,1,0) przegrywa z `.about-contact-col p`
   (14 px) i pod-etykiety renderują się za duże (XD: 12 px). */
.about-contact-col .about-contact-label-sm {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 24px 0 6px !important; }
  /* Pierwsza pod-etykieta (E-MAIL) klei się do labela kolumny (24 px).
     Uwaga: `:first-of-type` tu nie działa — pierwszym <p> kolumny jest
     `01 / DIRECT CONTACT`, stąd selektor sąsiedni. */
  .about-contact-col .about-label + .about-contact-label-sm {
    margin-top: 0 !important; }

.about-contact-col a {
  color: #000; }

/* Telefon (XD): numer nie może łamać się w środku — jedyny dozwolony
   podział to separator „ / " między numerami (desktop 258 px). */
.about-contact-nowrap {
  white-space: nowrap; }

.about-contact-note {
  margin-top: 24px !important; }

/* akapity w bloku 03 — jeden pusty wiersz jak w XD (blok tabletowy: 40 px) */
.about-contact-col3 p + p {
  margin-top: 24px; }

/* ----- desktop (≥ 1025 px) — sekcja kontaktu wg XD „Web 1920 – 19”
   (artboard 1920×9120, ekran 9b3ecc20-…): CAŁA sekcja to jednolity
   Helvetica Regular 30 px (labels, pod-etykiety i wartości — bez
   pomniejszonych pod-etykiet!) i `letter-spacing: normal` — przy takich
   ustawieniach nasza Helvetica ma szerokości znak w znak jak w XD.
   Geometria z makiety (1920, y bezwzględne): label y=7080 (x=240),
   intro y=7176 (kolumna 1440, 2 linie), kolumny y=7377 (3× 390 px @ 240 /
   765 / 1290), treść kolumn y=7473 (label + 96), dół sekcji 7743, stopka
   8040 → odstęp 297. Blok 03 bez odstępu między zdaniami; telefon w DWÓCH
   liniach bez „/” (tablet/mobile zostają przy jednej linii z „/”). ----- */
@media (min-width: 1025px) {
  .about-contact {
    /* 12.5vw marginesy (240 px @1920) = max-width 75vw, wyśrodkowane */
    max-width: 75vw;
    min-height: 0;
    align-content: start;
    padding: 0;
    margin: 20.8333vw auto 15.4688vw; /* 400 px nad / 297 px do stopki */
    display: grid;
    gap: 0; /* bez 40 px row-gap z .about-grid (head → kolumny) */
    grid-template-columns: repeat(3, 20.3125vw); /* 3× 390 px @1920 */
    column-gap: 7.03125vw; }                     /* 135 px @1920 */
  .about-contact-head {
    grid-column: 1 / -1; }
  .about-contact-head p {
    font-size: 1.25em; /* 30 px @1920 (baza body 24 px) */
    line-height: 1.5;
    max-width: 48em;   /* 1440 px @30 px — intro łamie się jak w XD */
    margin: 0; }
  .about-contact-head .about-label {
    font-size: 1.25em;
    line-height: 1.3333;
    margin-bottom: 1.8667em; /* 56 px → treść na label + 96 */
    letter-spacing: normal; }
  .about-contact-head p + p {
    margin-top: 24px; }
  .about-contact-col1,
  .about-contact-col2,
  .about-contact-col3 {
    margin-top: 111px; } /* intro (2 linie) → label kolumn = 111 px */
  .about-contact-col1 {
    grid-column: 1; }
  .about-contact-col2 {
    grid-column: 2; }
  .about-contact-col3 {
    grid-column: 3; }
  .about-contact-col .about-label {
    font-size: 1.25em;
    line-height: 1.3333;
    margin-bottom: 1.8667em; /* 56 px → treść na label + 96 */
    letter-spacing: normal; }
  /* ----- ETYKIETY KOLUMN KONTAKTU W PL MNIEJSZE — 24 px -----
   * zgł. klienta 09.10.2026: „rób wszystko tak jak w makiecie".
   * Makieta „Web 1920 – 19" rysuje etykiety kolumn kontaktu jako
   * 01 / DIRECT CONTACT (1 linia, tusz 321 px), 02 / LOCATION & STUDIO
   * (1 linia, 360 px) oraz 03 / CUSTOM & TRADE ORDERS (2 linie: 326 + 128 px,
   * łamie się po „TRADE "). Nasze EN przy 30 px daje DOKŁADNIE ten wzór 1 / 1 / 2
   * (tusz 320,6 / 359,5 / 462,4 px), więc EN zostaje bez zmian ani o piksel.
   * Polskie etykiety w tym samym pudełku (393 px @1920) łamały się 2 / 2 / 3:
   *   01 / KONTAKT BEZPOŚREDNI                   420,7 px → 2 linie
   *   02 / LOKALIZACJA I PRACOWNIA               466,8 px → 2 linie
   *   03 / ZAMÓWIENIA NIESTANDARDOWE I HANDLOWE  741,2 px → 3 linie
   * 24 px (1em) to NAJWIĘKSZY stopień dający wzór z makiety: przy 25 px
   * „02 / LOKALIZACJA I PRACOWNIA" mierzy 389,0 px w pudełku 390 px @1920
   * (zapas 1 px — przy innym renderowaniu czcionki pękłoby) i „03" nadal
   * łamie się na 3 linie (617,7 px). Przy 24 px jest 336,6 / 373,5 / 593,0 px
   * → 1 / 1 / 2, a „03" łamie się po „NIESTANDARDOWE I", czyli tak samo jak
   * makieta: długa linia + krótkie zakończenie.
   * Jak w filarach: `line-height` i `margin-bottom` też są w `em` i liczą się
   * od stopnia pisma ELEMENTU — po samym zmniejszeniu `font-size` wiersz
   * spadłby do 32 px, a odstęp do 44,8 px, czyli rytm 76,8 px zamiast 96 px.
   * `1.6667` (24 × 1,6667 = 40 px) i `2.3333em` (56 px) utrzymują rytm
   * etykieta → treść **96 px**, tyle co w EN (makieta: label y=7377, treść
   * y=7473); przy 21 px roota (1025–1440) 35 + 49 = 84 px, jak w pozostałych
   * sekcjach. UWAGA: makieta NIE wyrównuje treści kolumn — przy 01/02 (1 linia)
   * treść startuje wyżej niż przy 03 (2 linie). Po tej zmianie PL ma taki sam
   * wzór jak EN i makieta, więc treści celowo NIE wyrównujemy (`display:
   * contents` z filarów byłoby tu odstępstwem od makiety). */
  body.pl .about-contact-col .about-label {
    font-size: 1em;          /* 24 px */
    line-height: 1.6667;     /* 40 px */
    margin-bottom: 2.3333em; /* 56 px */ }
  .about-contact-col p {
    font-size: 1.25em;
    line-height: 1.5; }
  .about-contact-col .about-contact-label-sm {
    font-size: 1.25em;
    line-height: 1.5;
    letter-spacing: normal;
    margin: 1.5em 0 0 !important; } /* pusty wiersz = 45 px */
  .about-contact-note {
    margin-top: 1.5em !important; } /* jeden pusty wiersz (45 px) */
  .about-contact-col3 p + p {
    margin-top: 0; }
  .about-contact-nowrap {
    display: block; }
  .about-contact-phone-sep {
    display: none; }
}

/* ----- tablet (≤ 1024 px) ----- */
@media (max-width: 1024px) {
  .about-grid {
    display: block; }
    .about-grid > * + * {
      margin-top: 48px; }
  .about-essence,
  .about-circular,
  .about-pillars,
  .about-designed,
  .about-sustainable {
    margin-top: 120px; }
  .about-sec {
    margin-top: 120px;
    min-height: 0;
    padding: 0 24px; }
  .about-pillars {
    min-height: 0; }
  .about-designed {
    min-height: 0; }
  .about-designed-text {
    padding-left: 0; }
  .about-designed-portrait img {
    height: auto;
    aspect-ratio: 4 / 5; }
  .about-sustainable {
    min-height: 0;
    padding: 0 24px; }
  .about-sustainable-card1,
  .about-sustainable-card2 {
    margin-top: 0; }
  .about-sustainable-text {
    margin-top: 0;
    padding-left: 0;
    padding-right: 0; }
  .about-sec .about-sec-big img,
  .about-sec .about-sec-big .about-mock,
  .about-sec .about-sec-small img,
  .about-sec .about-sec-small .about-mock {
    height: auto;
    width: 100%; }
  .about-sec .about-sec-text .about-label,
  .about-sec .about-sec-text p {
    font-size: 17px; }
  .about-pillars .about-label,
  .about-designed-text .about-label,
  .about-sustainable-text .about-label {
    font-size: 18px; }
  .about-pillars .about-text p,
  .about-designed-text p,
  .about-sustainable-text p {
    font-size: 17px; }
  .about-contact {
    margin: 120px 0 160px; }
  .about-sec--essence .about-sec-text {
    padding-left: 0; }
  .about-sec--essence .about-sec-small,
  .about-sec--mirror .about-sec-small {
    width: auto;
    max-width: 270px; }
  .about-hero-mock {
    width: 30%; } }

/* ----- mobile (≤ 640 px) ----- */
@media (max-width: 640px) {
  .about-hero {
    height: 100vh;
    height: 100svh;
    min-height: 460px; }
  .about-hero-title {
    font-size: 22px; }
  .about-hero-mock {
    width: 34%; }
  .about-grid {
    padding: 0 16px; }
    .about-grid > * + * {
      margin-top: 32px; }
  .about-sec .about-sec-text .about-label,
  .about-sec .about-sec-text p {
    font-size: 16px; }
  .about-pillars .about-label,
  .about-designed-text .about-label,
  .about-sustainable-text .about-label {
    font-size: 16px; }
  .about-pillars .about-text p,
  .about-designed-text p,
  .about-sustainable-text p {
    font-size: 16px; }
  .about-designed-text {
    padding-right: 0; }
  .about-designed-text .about-cta,
  .about-sec .collections-shop-btn {
    font-size: 16px; }
  .about-contact {
    margin: 96px 0 120px; }

  /* hero About — napisy wg XD (zgł. 29.09 „powiększ napisy"): tytuł 30px,
     sub 15/30, pełna szerokość z marginesem 10vw (koniec łamania w boksie 50%) */
  .page-about .about-hero-inner {
    left: 0;
    width: 100%;
    max-width: none;
    padding: 0 10vw;
    -webkit-transform: none;
    transform: none; }
  .page-about .about-hero-title { font-size: 30px; }
  .page-about .about-hero-sub {
    font-size: 15px;
    line-height: 2; }

  /* sekcja 2 „The Essence" — zdjęcia obok siebie wg XD (duże 243/325 z lewej,
     małe 139/179 z podpisem z prawej, full-bleed), tekst pod spodem */
  .page-about .about-sec--essence {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36vw;
    column-gap: 8px;
    row-gap: 64px;
    align-items: start;
    padding: 0; }
  .page-about .about-sec--essence > * {
    margin-top: 0;
    min-width: 0; }
  .page-about .about-sec--essence .about-sec-big { grid-area: 1 / 1; }
  .page-about .about-sec--essence .about-sec-small {
    grid-area: 1 / 2;
    width: auto;
    max-width: none; }
  .page-about .about-sec--essence .about-sec-text {
    grid-area: 2 / 1 / 3 / 3;
    padding: 0 10vw; }
  .page-about .about-sec--essence .about-sec-big img {
    width: 100%;
    height: auto;
    aspect-ratio: 243 / 325;
    object-fit: cover; }
  .page-about .about-sec--essence .about-sec-small img {
    width: 100%;
    height: auto;
    aspect-ratio: 139 / 179;
    object-fit: cover; }

  /* sekcja 3 (Circularity, mirror) — lustrzany układ zdjęć wg XD:
     małe 139/179 z lewej, duże 243/325 z prawej, tekst pod spodem */
  .page-about .about-sec--mirror {
    display: grid;
    grid-template-columns: 36vw minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 64px;
    align-items: start;
    padding: 0; }
  .page-about .about-sec--mirror > * {
    margin-top: 0;
    min-width: 0; }
  .page-about .about-sec--mirror .about-sec-small {
    grid-area: 1 / 1;
    width: auto;
    max-width: none; }
  .page-about .about-sec--mirror .about-sec-big { grid-area: 1 / 2; }
  .page-about .about-sec--mirror .about-sec-text {
    grid-area: 2 / 1 / 3 / 3;
    padding: 0 10vw; }
  .page-about .about-sec--mirror .about-sec-big img {
    width: 100%;
    height: auto;
    aspect-ratio: 243 / 325;
    object-fit: cover; }
  .page-about .about-sec--mirror .about-sec-small img {
    width: 100%;
    height: auto;
    aspect-ratio: 139 / 179;
    object-fit: cover; }
  /* Podpis pozycyjny („Top / Right — PRODUCT NAME"): 10 px — tyle ma ten sam
     komponent na mobile w XD (store home, `.store-materials .about-pos`).
     Przy 11 px podpis nie mieścił się w szerokości małego zdjęcia (140 px),
     gdy doszło wcięcie od krawędzi ekranu — wartość łamała się na 2 wiersze. */
  .page-about .about-pos {
    font-size: 10px;
    line-height: 1.4; }
  /* Podpis pozycyjny („Top / Left — PRODUCT NAME") pod małym zdjęciem, które
     dotyka LEWEJ krawędzi ekranu: wcięcie 10 px, żeby etykieta nie stała na
     krawędzi widoczności; prawa krawędź podpisu zostaje przy zdjęciu.
     Makieta ma ten podpis flush (x=0) — świadome odejście wg zgł. 06.10.2026. */
  /* width: max-content (a nie 100%) — przy wcięciu 10 px wartość „PRODUCT NAME"
     nie mieściła się już w 140 px zdjęcia na wąskich ekranach (360/375 px)
     i łamała się na 2 wiersze; szerokość treści nie zależy od zdjęcia, a przy
     dłuższym tekście ogranicza ją max-width. */
  .page-about .about-sec--mirror .about-pos {
    width: max-content;
    max-width: calc(100vw - 20px);
    margin-left: 0;
    padding-left: 10px; }

  /* filary 01/02/03 — margines tekstów 10vw i odstęp 64 (jak w sekcjach zdjęciowych) */
  .page-about .about-pillars { padding: 0; }
  .page-about .about-pillars > * { padding: 0 10vw; }
  .page-about .about-pillars > * + * { margin-top: 64px; }

  /* designed — portret nad tekstem (kolejność wg XD), kadr 390/341 od góry,
     tekst 40 pod portretem */
  .page-about .about-designed {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0; }
  .page-about .about-designed-portrait {
    order: 1;
    width: 100%; }
  .page-about .about-designed-portrait img {
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 341;
    object-fit: cover;
    object-position: 50% 0%; }
  .page-about .about-designed-text {
    order: 2;
    margin-top: 40px;
    padding: 0 10vw; }

  /* sustainable — dwie karty obok siebie wg XD (187/15/187), podpisy 10px
     w dwóch wierszach (nazwa / cena + SHOP NOW), tekst pod spodem */
  .page-about .about-sustainable {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 15px;
    row-gap: 64px;
    align-items: start;
    padding: 0; }
  .page-about .about-sustainable > * {
    margin-top: 0;
    min-width: 0; }
  .page-about .about-sustainable .about-card-img { aspect-ratio: 188 / 244; }
  .page-about .about-sustainable .about-card-caption {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 8px;
    margin-top: 10px;
    padding: 0;
    min-height: 0; }
  /* lewa karta dotyka krawędzi ekranu (siatka full-bleed), więc jej podpis
     dostaje wcięcie 10 px — jak podpisy kafli na stronie głównej sklepu;
     prawa karta zostaje flush z krawędzią swojego zdjęcia
     (zgł. klienta 06.10.2026) */
  .page-about .about-sustainable-card1 .about-card-caption {
    padding-left: 10px; }
  .page-about .about-sustainable .about-card-name {
    grid-column: 1 / -1;
    font-size: 10px;
    line-height: 1.5; }
  .page-about .about-sustainable .about-card-price {
    font-size: 10px;
    line-height: 1.5; }
  .page-about .about-sustainable .about-card-buy {
    position: static;
    text-align: right;
    font-size: 10px;
    line-height: 1.5; }
  .page-about .about-sustainable .about-sustainable-text {
    grid-area: 2 / 1 / 3 / 3;
    padding: 0 10vw; }

  /* kontakt — teksty 10vw, odstępy bloków 64 */
  .page-about .about-contact { padding: 0; }
  .page-about .about-contact > * { padding: 0 10vw; }
  .page-about .about-contact > * + * { margin-top: 64px; }

  /* typografia sekcji wg makiety (zgł. 29.09): label→treść 26, akapity pełną
     szerokością 10vw (bez limitu 270px) i z oddechem (line-height 2 — jak XD 15/30) */
  .page-about .about-sec .about-sec-text .about-label,
  .page-about .about-pillars .about-label,
  .page-about .about-designed-text .about-label,
  .page-about .about-sustainable-text .about-label {
    margin: 0 0 26px; }
  .page-about .about-sec .about-sec-text p,
  .page-about .about-pillars .about-text p,
  .page-about .about-designed-text p,
  .page-about .about-sustainable-text p {
    max-width: none;
    line-height: 2; } }
/* ----- STORE FOOTER (czarny, 100vh) ----- */
.store-footer {
  background-color: #000;
  color: #fff;
  padding: 4em 1.5em 4em;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  .store-footer a {
    color: #fff; }
  .store-footer a:hover {
    /* zgł. klienta 09.10.2026: „zamiast z żółtego, na po prostu
       wyciemnienie/delikatną transparentność”. Biel 70 % = #b3b3b3, czyli
       jasność sąsiedniej linii „design:” (#afafaf, patrz .store-footer-bottom). */
    color: rgba(255, 255, 255, 0.7) !important; }

.store-footer-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr;
  gap: 2em; }
  @media (max-width: 1024px) {
    .store-footer-inner {
      grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px) {
    /* Mobile (XD „RPDS STORE Mobile 14.09.2026", artboard 390): jedna kolumna,
       wszystko wyśrodkowane; brand u góry po lewej na 10vw (x=39); grupy
       rozdzielone 78 px; wszystkie teksty 20/24, nagłówki bez trackingu. */
    .store-footer-inner {
      grid-template-columns: 1fr;
      gap: 0;
      text-align: center; }
    .store-footer-inner > .store-footer-col {
      margin-bottom: 78px; }
    .store-footer-inner > :last-child {
      margin-bottom: 0; }
    .store-footer-brand {
      text-align: left;
      margin-left: calc(10vw - 24px); } }

.store-footer-col {
  min-width: 0; }

.store-footer-logo {
  font-weight: bold;
  font-size: 1.3em; }

.store-footer-heading {
  font-weight: bold;
  font-size: 1.15em;
  letter-spacing: 0.08em;
  margin-bottom: 0.8em; }

.store-footer ul {
  list-style: none;
  margin: 0 0 0.8em;
  padding: 0; }
  .store-footer li {
    padding: 0;
    margin-bottom: 0.4em; }
  @media (max-width: 640px) {
    .store-footer li {
      overflow-wrap: anywhere;
      margin-bottom: 15px;
      font-size: 20px;
      line-height: 24px; }
    .store-footer li:last-child {
      margin-bottom: 0; }
    .store-footer-logo {
      font-size: 20px;
      line-height: 24px; }
    .store-footer-heading {
      font-size: 20px;
      line-height: 24px;
      letter-spacing: 0;
      margin-bottom: 15px; }
    .store-footer ul {
      margin: 0; } }

.store-footer-all {
  margin-top: 0.6em; }
  .store-footer-all a {
    font-size: 1.15em;
    font-weight: bold; }
  @media (max-width: 640px) {
    /* XD mobile: brak linku ALL w stopce (dostęp przez /store/) */
    .store-footer-all {
      display: none; } }

.store-footer-contact {
  text-align: right;
  overflow-wrap: anywhere; }
  @media (max-width: 640px) {
    .store-footer-contact {
      text-align: center; }
    .store-footer-contact p {
      font-size: 20px;
      line-height: 24px;
      margin: 0 0 15px; }
    .store-footer-contact p:last-child {
      margin-bottom: 0; } }

.store-footer-bottom {
  width: 100%;
  margin: 3em auto 0;
  padding-top: 1.5em;
  border-top: 1px solid #333;
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.85em; }
  .store-footer-bottom p {
    margin: 0;
    color: #8a8a8a; }
  @media (max-width: 640px) {
    /* XD mobile: © biały 15/18, „design:" szary 175; odstępy 15 px
       (© → design) i 156 px (kontakt → ©). */
    .store-footer-bottom {
      flex-direction: column;
      align-items: center;
      gap: 0;
      margin-top: 156px;
      padding-top: 0;
      border-top: 0;
      text-align: center; }
    .store-footer-bottom p {
      font-size: 15px;
      line-height: 18px; }
    .store-footer-bottom p:first-child {
      font-weight: 400;
      color: #fff;
      margin-bottom: 15px; }
    .store-footer-bottom .store-footer-credit {
      color: #afafaf; } }

/* ----- Blok dofinansowania (MKiDN + Instytut Przemysłów Kreatywnych) ----- */
.store-footer-credits {
  margin-top: 6em;
  padding: 0 0.9em; }
  .store-footer-credits-note {
    margin: 0 0 3.4em;
    font-size: 0.72em;
    line-height: 1.9; }
  .store-footer-credits-mkidn {
    display: block;
    width: 100%;
    max-width: 314px;
    height: auto; }
  .store-footer-credits-ipk {
    display: block;
    width: 160px;
    max-width: 60%;
    height: auto;
    margin: 5em 0 0 3.3em; }
  @media (max-width: 640px) {
    /* XD mobile (390): footer 42/24/233; notka 10/25 na x=38 (pad 0.9em),
       MKiDN 314 na x=38, IPK 160 na x=116.
       Na 390 cały blok wypada dokładnie na środku (38 + 314 + 38 = 390), ale
       wychodziło to tylko przy tej jednej szerokości: MKiDN (width 100%,
       max-width 314) stał przy lewej krawędzi pojemnika, gdy ten był szerszy
       niż 314 (np. 414/480/640), a IPK miał sztywny margin-left 78 px.
       Dlatego na telefonie cały blok dofinansowania (notka + oba logotypy)
       jest wyśrodkowany — na 390 daje to wynik 1:1 z XD
       (IPK x=115 vs 116 w makiecie).
       (zgł. klienta 06.10.2026 — wyśrodkować wstawki o ministerstwie) */
    .store-footer {
      justify-content: flex-start;
      padding: 42px 24px 233px; }
    .store-footer-credits {
      margin-top: 150px; }
    .store-footer-credits-note {
      font-size: 10px;
      line-height: 25px;
      margin-bottom: 78px;
      text-align: center; }
    .store-footer-credits-mkidn {
      width: 314px;
      max-width: 100%;
      margin-right: auto;
      margin-left: auto; }
    .store-footer-credits-ipk {
      margin: 87px auto 0; } }

/* ----- STOPKA DESKTOP (≥ 1025 px) wg XD „RPDS STORE Desktop Stopka”
   (artboard 1920×1920, plik 4f96b4ad; mock z 16.09.2026) -----
   Trzy kolumny treści na 12.5vw (240 px @1920) / 31.25vw (600) / ~70vw (1343)
   i prawa krawędź na 12.5vw; cała typografia 30/36 (bez pogrubień i trackingu),
   © 20/24, notka 20/30, logotypy MKiDN 448 px + IPK 240 px w jednym rzędzie. */
@media (min-width: 1025px) {
  .store-footer {
    padding: 104px 12.5vw 105px;
    justify-content: flex-start; }
  /* kolumna 1: brand → OBJECTS → COLLECTIONS, kolumna 2: linki (2 grupy),
     kolumna 3: kontakt — wiersze 2 i 3 wyrównują się między kolumnami */
  .store-footer-inner {
    grid-template-columns: 25% 51.6% 23.4%;
    column-gap: 0;
    row-gap: 60px; }
  .store-footer-inner > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 42px; }
  .store-footer-inner > :nth-child(2) {
    grid-column: 1;
    grid-row: 2; }
  .store-footer-inner > :nth-child(3) {
    grid-column: 1;
    grid-row: 3; }
  .store-footer-inner > :nth-child(4) {
    grid-column: 2;
    grid-row: 2; }
  .store-footer-inner > :nth-child(5) {
    grid-column: 2;
    grid-row: 3; }
  .store-footer-inner > :nth-child(6) {
    grid-column: 3;
    grid-row: 2; }
  .store-footer-logo,
  .store-footer-heading {
    font-size: 1.25em; /* 30 px @1920 */
    line-height: 1.2;  /* 36 px */
    font-weight: 400;
    letter-spacing: 0;
    margin: 0; }
  .store-footer-heading {
    margin-bottom: 15px; }
  .store-footer ul {
    margin: 0;
    padding: 0; }
  .store-footer li {
    font-size: 1.25em; /* 30 px — linki dziedziczą (1em), żeby em się nie złożyło */
    line-height: 1.2; }
  .store-footer-inner a {
    font-size: 1em;
    line-height: 1.2; }
  .store-footer li {
    margin-bottom: 15px; }
  .store-footer li:last-child {
    margin-bottom: 0; }
  /* XD: brak linku ALL w stopce (jak na mobile/tablecie) */
  .store-footer-all {
    display: none; }
  .store-footer-contact {
    text-align: left;
    /* adres e-mail jest najdłuższym elementem kolumny (337 px w XD, tyle samo
       w naszym Helveticu) — 12 px zapasu trzyma go w jednej linii jak w mocku */
    margin-right: -12px; }
  .store-footer-contact p {
    font-size: 1.25em; /* 30 px @1920 */
    line-height: 1.2;  /* 36 px */
    margin: 0 0 15px; }
  .store-footer-contact p:last-child {
    margin-bottom: 0; }
  /* wiersz © / design: bez linii i bez paddingu, biały © + szary design */
  .store-footer-bottom {
    margin-top: 319px;
    padding-top: 0;
    border-top: 0;
    font-size: 0.8333em; /* 20 px @1920 */
    line-height: 1.2;    /* 24 px */ }
  .store-footer-bottom p {
    font-size: 1em;      /* dziedziczy 20 px z .store-footer-bottom */
    line-height: 1.2; }
  .store-footer-bottom p:first-child {
    color: #fff; }
  .store-footer-bottom .store-footer-credit {
    color: #afafaf; }
  /* notka pełną szerokością, logotypy w drugim wierszu: MKiDN lewa,
     IPK prawa krawędź treści, oba wyśrodkowane względem siebie */
  .store-footer-credits {
    margin-top: 369px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }
  .store-footer-credits-note {
    flex: 0 0 100%;
    font-size: 0.8333em; /* 20 px @1920 */
    line-height: 1.5;    /* 30 px */
    margin: 0 0 66px; }
  .store-footer-credits-mkidn {
    width: 448px;
    max-width: none;
    margin: 0; }
  .store-footer-credits-ipk {
    width: 240px;
    max-width: none;
    margin: 0; }
}

/* Podstrona /about kończy się czarną stopką sklepu — ukrywamy globalną stopkę motywu */
.page-template-about #footer {
  display: none; }
/*
 *	------------------------------------------------------- 	STORE COLLECTIONS (podstrona /collections)
 */
.page-collections {
  background-color: #fff;
  color: #0b1f2a; }

/* ----- HERO (100vh: trzy równe zdjęcia od lewej krawędzi strony + tekst po prawej) -----
 * Wzorzec przerw i rozmieszczenia: sekcje .about-sec strony About (gap 16px,
 * zdjęcia flush-left bez lewego paddingu, sekcja = jeden ekran).
 * 2026-10-01 („pomniejsz troszkę zdjęcia — te w pierwszej sekcji”): kolumna
 * zdjęć 60vw → 54vw (tekst idzie za zdjęciami, gap 48 px bez zmian). */
.collections-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 54vw 300px;
  grid-template-rows: 1fr auto 1fr;
  column-gap: 48px;
  padding: 0 24px 0 0; }

.collections-hero-figs {
  grid-column: 1;
  grid-row: 2;
  min-width: 0; }

.collections-hero-track {
  display: flex;
  align-items: flex-start;
  gap: 16px; }

.collections-hero-fig {
  flex: 1 1 0;
  min-width: 0;
  margin: 0; }

/* klony slajdów dopinane przez JS w celu zapętlenia slidera (issue #58):
 * na desktopie I tablecie hero jest kolażem trzech zdjęć (slider tylko ≤640
 * wg XD „Tablet 14.09.2026"), więc klony są ukryte ≥641px */
@media (min-width: 641px) {
  .collections-hero-fig.rp-clone {
    display: none; } }

.collections-hero-media {
  width: 100%;
  overflow: hidden;
  background-color: #f0f0f2; }
  .collections-hero-media img {
    width: 100%;
    display: block;
    aspect-ratio: 3 / 4;
    object-fit: cover; }

/* podpis dwuwierszowy pod zdjęciem (Collections WEDGE / Objects FURNITURE)
 * styl jak karty na /objects/: 0.75em, waga 600, uppercase; etykieta z lewej
 * z przerwą od wartości, a cała para dosunięta do prawej krawędzi zdjęcia
 * (jak .store-section-label-row na stronie sklepu) */
.collections-hero-pos {
  margin: 12px 0 0;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.35; }

.collections-hero-pos-value {
  text-transform: uppercase; }

.collections-hero-pos-row {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.9em; }

.collections-hero-text {
  grid-column: 2;
  grid-row: 2;
  align-self: start; }

.collections-hero-title {
  font-size: clamp(2.4rem, 3.5vw, 3.4rem);
  font-weight: bold;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 0.6em; }

.collections-hero-desc {
  font-size: 1em;
  line-height: 1.6;
  max-width: 280px;
  margin: 0; }

/* przycisk SHOP w sekcji essence — styl jak .about-cta, ale w skali sekcji (20px) */
.collections-shop-btn {
  display: inline-block;
  margin-top: 32px;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid #000;
  padding-bottom: 4px; }
  /* hover = przygaszenie (zgł. klienta 09.10.2026 — patrz .store-section-block-link);
     border przezroczysty, żeby nie nakładał się na gradient (podwójne krycie) */
  .collections-shop-btn:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent; }

/* klikalne zdjęcia kolekcji w hero */
.collections-hero-fig-link {
  display: block;
  cursor: pointer; }

/* sekcje opisu — cel przewijania po kliknięciu w hero: sekcja ląduje dokładnie
 * na viewporcie (top=0, wypełnia 100vh) — bez marginesu, jak przy naturalnym scrollu */
.collections-essence {
  scroll-margin-top: 0; }

/* Sekcje opisu kolekcji (ISTOTA / CYKULARNOŚĆ / LOGIKA BEZ NARZĘDZI):
 * format tekstu jak sekcje kolekcji na stronie sklepu — tytuł, dwa akapity
 * i SHOP NOW, wszystko 22px bold. Tekst rozciągnięty na dokładnie taką
 * wysokość jak duże zdjęcie: w sekcjach 1 i 3 (zdjęcia z lewej) przyklejony
 * do dołu — SHOP NOW kończy się tam, gdzie kończy się zdjęcie; w 2. sekcji
 * (lustrzanej — zdjęcia z prawej) przyklejony do góry zdjęcia. */
.collections-essence .about-sec-text .about-label {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 2em; }

.collections-essence .about-sec-text p {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 400;
  max-width: 500px;
  margin: 0; }
  .collections-essence .about-sec-text p + p {
    margin-top: 1em; }

.collections-essence .collections-shop-btn {
  font-size: 22px;
  font-weight: 400;
  margin-top: 2.2em; }

/* zdjęcia sekcji (zamiast mocków) — proporcje slotów jak w makietach;
 * na mobile ≤640 nadpisane w bloku mobilnym poniżej */
.collections-essence .about-sec-big img {
  aspect-ratio: 4 / 5;
  object-fit: cover; }
.collections-essence.about-sec--essence .about-sec-big img {
  aspect-ratio: 5 / 7; }
.collections-essence .about-sec-small img {
  aspect-ratio: 3 / 4;
  object-fit: cover; }

/* Desktop ≥1025px: sekcja jako siatka — tekst rozciągnięty na wysokość
 * dużego zdjęcia (fotografie trzymają pozycję 14vh od góry sekcji).
 * Czcionka skaluje się z szerokością okna, żeby tekst (a z nim SHOP NOW)
 * zawsze mieścił się dokładnie w wysokości zdjęcia. */
@media (min-width: 1025px) {
  .collections-essence {
    display: grid;
    align-items: stretch;
    align-content: start;
    grid-template-rows: 14vh auto 1fr;
    column-gap: 16px;
    row-gap: 0; }

  .collections-essence .about-sec-text .about-label,
  .collections-essence .about-sec-text p,
  .collections-essence .collections-shop-btn {
    font-size: clamp(18px, 1.65vw, 22px); }

  .collections-essence .about-sec-big,
  .collections-essence .about-sec-small,
  .collections-essence .about-sec-text {
    grid-row: 2;
    margin-top: 0; }

  .collections-essence .about-sec-big,
  .collections-essence .about-sec-small {
    align-self: start; }

  .collections-essence .about-sec-text {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end; }

  /* 2. sekcja (lustrzana): tekst przyklejony do góry zdjęcia */
  .collections-essence.about-sec--essence .about-sec-text {
    justify-content: flex-start; }

  /* sekcje 1 i 3: zdjęcia z lewej (małe | duże | tekst) */
  .collections-essence.about-sec--mirror {
    grid-template-columns: auto 1fr calc(50% - 16px); }
  .collections-essence.about-sec--mirror .about-sec-small { grid-column: 1; }
  .collections-essence.about-sec--mirror .about-sec-big { grid-column: 2; }
  .collections-essence.about-sec--mirror .about-sec-text { grid-column: 3; }

  /* 2. sekcja: zdjęcia z prawej (tekst | duże | małe) */
  .collections-essence.about-sec--essence {
    grid-template-columns: calc(50% - 16px) 1fr auto; }
  .collections-essence.about-sec--essence .about-sec-text { grid-column: 1; }
  .collections-essence.about-sec--essence .about-sec-big { grid-column: 2; }
  .collections-essence.about-sec--essence .about-sec-small { grid-column: 3; }
}

/* podpis produktu (nazwa + cena) pod małym zdjęciem sekcji kolekcji — widoczny
 * na wszystkich breakpointach (makiety desktop „Web 1920 – 17/18/20/21”;
 * 2026-10-01 zastąpił podpis pozycyjny .about-pos, którego placeholdery
 * „Top/Right PRODUCT NAME” usunięto z sekcji). Desktop: 20px, dosunięty do
 * wewnętrznej krawędzi małego zdjęcia (mirror → do prawej, essence → do lewej). */
@media (min-width: 1025px) {
  .collections-essence .collections-prod-cap {
    display: block;
    margin-top: 15px;
    font-size: 20px;
    line-height: 1.5; }
  .collections-essence.about-sec--mirror .collections-prod-cap {
    text-align: right; }
  .collections-essence.about-sec--essence .collections-prod-cap {
    text-align: left; } }

/* nazwa i cena zawsze w ODRĘBNYCH liniach — podpis = dwie linie jak w XD
 * (bez tego inline łamał cenę w środku, np. „PLYWOOD TABLE price XXX / euro”) */
.collections-essence .collections-prod-cap-name,
.collections-essence .collections-prod-cap-price {
  display: block; }

/* mobile/tablet: nieco większy oddech między sekcjami kolekcji (bazowo 120px) */
@media (max-width: 1024px) {
  .page-collections .collections-essence {
    margin-top: 160px; }
  /* oddech pod 3. sekcją (CIRCULAR) przed siatką Objects — jak między sekcjami
   * (64px paddingu nagłówka + 96px marginesu = 160px) */
  .page-collections .collections-objects {
    margin-top: 96px; } }

/* mobile: pomniejszona typografia, jak w sekcjach kolekcji na stronie sklepu */
@media (max-width: 640px) {
  .collections-essence .about-sec-text .about-label {
    font-size: 20px; }
  .collections-essence .about-sec-text p {
    font-size: 18px; }
  .collections-essence .collections-shop-btn {
    font-size: 20px;
    margin-top: 32px; }

  /* Układ mobilny sekcji (XD „RPDS STORE Mobile"): małe zdjęcie 4:5 i duże 3:4
   * w jednym rzędzie — górne krawędzie wyrównane, pełny bleed (małe przy lewej
   * krawędzi, duże przy prawej); podpis produktu pod małym zdjęciem, opis pod
   * całym rzędem. Wariant lustrzany 2b (SATURN): duże z lewej, małe z prawej. */
  .page-collections .collections-essence {
    display: grid;
    column-gap: 12px;
    row-gap: 64px;
    align-items: start;
    padding: 0; }
  .page-collections .collections-essence.about-sec--mirror {
    grid-template-columns: 39vw 1fr; }
  .page-collections .collections-essence.about-sec--essence {
    grid-template-columns: 1fr 39vw; }
  .page-collections .collections-essence > * {
    margin-top: 0;
    min-width: 0; }
  .page-collections .collections-essence .about-sec-small {
    width: auto;
    max-width: none; }
  .page-collections .collections-essence.about-sec--mirror .about-sec-small {
    grid-area: 1 / 1; }
  .page-collections .collections-essence.about-sec--mirror .about-sec-big {
    grid-area: 1 / 2; }
  .page-collections .collections-essence.about-sec--essence .about-sec-big {
    grid-area: 1 / 1; }
  .page-collections .collections-essence.about-sec--essence .about-sec-small {
    grid-area: 1 / 2; }
  .page-collections .collections-essence .about-sec-text {
    grid-area: 2 / 1 / 3 / 3;
    padding: 0 10vw; }
  .page-collections .collections-essence .about-sec-small .about-mock,
  .page-collections .collections-essence .about-sec-small img {
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover; }
  .page-collections .collections-essence .about-sec-big .about-mock,
  .page-collections .collections-essence .about-sec-big img {
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover; }

  /* podpis mobilny zamiast podpisu pozycyjnego .about-pos */
  .page-collections .collections-essence .about-pos {
    display: none; }
  .page-collections .collections-prod-cap {
    display: block;
    margin-top: 8px;
    padding-left: 10vw;
    font-size: 13px;
    line-height: 1.5; }
  .page-collections .collections-prod-cap-name {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.02em; }
  .page-collections .collections-prod-cap-price {
    display: block; }
  .page-collections .collections-essence.about-sec--essence .collections-prod-cap {
    padding-left: 0;
    padding-right: 10vw;
    text-align: right; }
}

/* nazwy mocków (placeholdery zdjęć) — wyraźniejsze na stronie Collections */
.page-collections .about-mock-name {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #333; }
.page-collections .about-mock-note {
  font-size: 12px;
  color: #777; }
.page-collections .object-card-mock-name {
  color: #555; }
.page-collections .object-card-mock-note {
  color: #777; }

/* nagłówek siatki produktów + przycisk ALL (filtrowanie po kolekcji) */
#collections-objects {
  scroll-margin-top: 180px; }
  @media (max-width: 640px) {
    #collections-objects {
      scroll-margin-top: 140px; } }

.collections-objects-head {
  max-width: 57em;
  margin: 0 auto;
  padding: 4em 1.5em 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: baseline; }
  @media (max-width: 640px) {
    .collections-objects-head {
      padding-left: 16px;
      padding-right: 16px; } }

.collections-objects-title {
  font-weight: bold;
  font-size: 1.4em;
  text-transform: uppercase;
  margin: 0; }

.collections-objects-all {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: bold;
  font-size: 1em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  text-decoration: underline;
  /* 0.1em — grubość podkreślenia z XD (patrz .store-hero-cta) */
  text-decoration-thickness: 0.1em;
  text-underline-offset: 6px; }
  /* hover = przygaszenie (zgł. klienta 09.10.2026 — patrz .store-section-block-link) */
  .collections-objects-all:hover {
    color: rgba(0, 0, 0, 0.5) !important; }

/* Mobile/tablet ≤1024px (issue #58): hero = slider — aktywny slajd na środku,
 * sąsiedzi wystają po bokach (peek). Swipe/drag + klawiatura + autoplay
 * (logika w js/scripts.js); na desktopie zostaje kolaż 3 zdjęć. */
@media (max-width: 1024px) {
  .collections-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    padding: 140px 0 48px;
    min-height: 100svh; }
  .collections-hero-figs {
    flex: none;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y; }
  .collections-hero-track {
    gap: 8px;
    will-change: transform;
    transform: translate3d(14vw, 0, 0); } /* start bez JS: slajd 0 na środku — (100vw − 72vw) / 2 */
  .collections-hero-fig {
    flex: 0 0 72vw;
    max-width: 72vw;
    -webkit-user-select: none;
    user-select: none; }
  /* proporcja slajdu = proporcja zdjęć źródłowych (750×1000) — bez przycinania */
  .collections-hero-media {
    aspect-ratio: 3 / 4; }
  .collections-hero-media img {
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    -webkit-user-drag: none; }
  .collections-hero-media .about-mock {
    aspect-ratio: auto;
    height: 100%; }
  .collections-hero-text {
    flex: none;
    text-align: center;
    padding: 0 24px; }
  .collections-hero-title {
    font-size: 1.35rem;
    margin-bottom: 1.5em; }
  .collections-hero-desc {
    max-width: 300px;
    margin: 0 auto;
    line-height: 2.6; } }

@media (max-width: 640px) {
  .collections-hero {
    padding: 120px 0 32px;
    gap: 40px; }
  .collections-hero-title {
    font-size: 1.3rem; }
  .collections-hero-desc {
    font-size: 0.95em; }
  .collections-hero-pos {
    /* 2026-10-01: 0.7em → 0.8em — czytelniejsze podpisy slidera na telefonie */
    font-size: 0.8em; } }

.collections-eyebrow {
  font-size: 0.78em;
  font-weight: bold;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #c8531e;
  margin-bottom: 1.4em; }

/* ----- GRID ----- */
.collections-grid {
  max-width: 72em;
  margin: 0 auto;
  padding: 0 1.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4em 2.5em; }
  @media (max-width: 1024px) {
    .collections-grid {
      grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 640px) {
    .collections-grid {
      grid-template-columns: 1fr;
      gap: 3em; } }

.collection-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start; }

.collection-index {
  font-size: 0.72em;
  font-weight: bold;
  letter-spacing: 0.3em;
  color: #c8531e;
  margin-bottom: 1em; }

.collection-media {
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: #fff; }
  .collection-media img {
    width: 100%;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.4s ease; }
  .collection-media:hover img {
    transform: scale(1.03); }

.collection-name {
  font-family: 'Playfair Display', Didot, 'Bodoni MT', Georgia, serif;
  font-size: 1.55em;
  font-weight: bold;
  line-height: 1.2;
  color: #0b1f2a;
  margin-top: 1em;
  margin-bottom: 0.45em; }

.collection-desc {
  font-size: 0.9em;
  line-height: 1.7;
  color: #46535b; }

.collection-price {
  font-size: 0.95em;
  margin-top: 1em; }

.collection-link {
  margin-top: 1.2em;
  font-size: 0.78em;
  font-weight: bold;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c8531e;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.35em;
  transition: color 0.2s linear; }
  .collection-link:hover {
    color: #0b1f2a; }

.collection-arrow {
  display: inline-block;
  margin-left: 0.4em; }
  .collection-link:hover .collection-arrow {
    transform: translateX(3px); }

/* ----- BANNER (ciemny pas) ----- */
.collections-banner {
  background-color: #0b1f2a;
  color: #f4efe6;
  text-align: center;
  padding: 5.5em 1.5em; }
  @media (max-width: 640px) {
    .collections-banner {
      padding: 4em 1.2em; } }

.collections-eyebrow--light {
  color: #e08054; }

.collections-banner-title {
  font-family: 'Playfair Display', Didot, 'Bodoni MT', Georgia, serif;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1.1;
  margin-bottom: 0.6em; }
  @media (max-width: 640px) {
    .collections-banner-title {
      font-size: 1.9em; } }

.collections-banner-text {
  font-size: 0.95em;
  line-height: 1.8;
  opacity: 0.75;
  max-width: 34em;
  margin: 0 auto 2.2em; }

.collections-banner-btn {
  display: inline-block;
  border: 2px solid #f4efe6;
  color: #f4efe6;
  padding: 0.7em 2.4em;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background-color 0.2s linear, color 0.2s linear; }
  .collections-banner-btn:hover {
    background-color: #f4efe6;
    color: #0b1f2a !important; }

/* ----- CONTACT ----- */
.collections-contact {
  text-align: center;
  padding: 4.5em 1.5em; }
  .collections-contact h2 {
    font-family: 'Playfair Display', Didot, 'Bodoni MT', Georgia, serif;
    font-size: 1.9em;
    font-weight: bold;
    margin-bottom: 0.6em; }
  .collections-contact p {
    margin-bottom: 0.6em; }
  @media (max-width: 640px) {
    .collections-contact {
      padding: 3.5em 1.2em; } }

.collections-contact-mail {
  font-size: 1.1em; }
  .collections-contact-mail strong {
    color: #c8531e; }

/* Podstrona /collections ma własną (czarną) stopkę sklepu — ukrywamy globalną stopkę motywu */
.page-template-collections #footer {
  display: none; }

/* Podstrony sklepu (store/objects) mają własną czarną stopkę — ukrywamy globalną stopkę motywu */
.page-template-store #footer,
.page-template-objects #footer {
  display: none; }

/*
 *	------------------------------------------------------- 	STORE CART (wirtualna strona /store/cart — issue #34)
 *	Swiss minimal jak reszta sklepu: uppercase labels, cienkie linie,
 *	podkreślone linki; bez boldu, zaokrągleń, cieni i tła przycisków.
 */

/* Wrapper — ten sam odstęp pod fixed navbarem co .page-objects */
.rp-cart-page .page-cart {
  background-color: #fff;
  padding-top: 190px; }
  @media (max-width: 640px) {
    .rp-cart-page .page-cart {
      padding-top: 140px; } }

.rp-cart {
  max-width: 57em;
  margin: 0 auto;
  padding: 0 1.5em 5em; }

.rp-cart-heading {
  font-weight: 400;
  font-size: 1.4em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 2.5em; }
  @media (max-width: 380px) {
    .rp-cart-heading {
      font-size: 1.1em;
      margin-bottom: 2em; } }

/* ----- pusty koszyk ----- */
.rp-cart-empty-text {
  font-size: 0.9em;
  color: #999;
  margin: 0 0 1.5em; }

.rp-cart-continue,
.rp-cart-checkout {
  display: inline-block;
  font-size: 0.75em;
  letter-spacing: 0.06em;
  color: #000;
  text-transform: uppercase;
  text-decoration: underline;
  /* 0.1em — grubość podkreślenia z XD (patrz .store-hero-cta) */
  text-decoration-thickness: 0.1em;
  text-underline-offset: 8px;
  transition: color 0.2s linear; }
  .rp-cart-continue:hover {
    color: #0000ff; }

/* ----- lista pozycji ----- */
.rp-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto auto auto;
  grid-template-areas: "media info qty subtotal remove";
  gap: 2em;
  align-items: center;
  padding: 1.5em 0;
  border-bottom: 1px solid #e3e3e3; }

.rp-cart-item-media {
  grid-area: media;
  min-width: 0; }

.rp-cart-item-img {
  display: block;
  width: 72px;
  aspect-ratio: 3 / 4;
  object-fit: cover; }

.rp-cart-item-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  min-width: 0; }

.rp-cart-item-name {
  font-size: 0.75em;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase; }

.rp-cart-item-price {
  font-size: 0.75em;
  line-height: 1.35;
  text-transform: lowercase; }

.rp-cart-label {
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999; }

.rp-cart-qty {
  grid-area: qty;
  display: flex;
  align-items: center;
  gap: 0.9em; }

.rp-cart-qty-input {
  font-family: inherit;
  font-size: 0.75em;
  width: 3em;
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  outline: none;
  background: transparent;
  padding: 0.3em 0;
  text-align: center;
  color: #000; }
  .rp-cart-qty-input:focus {
    border-bottom-color: #0000ff; }
  .rp-cart-qty-input::-webkit-outer-spin-button,
  .rp-cart-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }
  .rp-cart-qty-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield; }

.rp-cart-update,
.rp-cart-remove-btn {
  font-family: inherit;
  font-size: 0.75em;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  transition: color 0.2s linear; }
  .rp-cart-update:hover,
  .rp-cart-remove-btn:hover {
    color: #0000ff; }

.rp-cart-item-subtotal {
  grid-area: subtotal;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  align-items: flex-end; }

.rp-cart-item-subtotal-value {
  font-size: 0.75em; }

.rp-cart-remove {
  grid-area: remove;
  display: flex; }

/* ----- podsumowanie ----- */
.rp-cart-summary {
  margin-top: 3em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1em; }

.rp-cart-summary-row {
  display: flex;
  align-items: baseline;
  gap: 2.5em; }

.rp-cart-summary-label {
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase; }

.rp-cart-summary-value {
  font-size: 0.9em; }

.rp-cart-summary-note {
  font-size: 0.7em;
  color: #999;
  margin: 0; }

/* CHECKOUT — link do /store/checkout/ (issue #35) */
.rp-cart-checkout {
  cursor: pointer; }
  .rp-cart-checkout:hover {
    color: #0000ff; }

/* ----- mobile ----- */
@media (max-width: 640px) {
  .rp-cart-item {
    grid-template-columns: 64px 1fr;
    grid-template-areas: "media info" "media qty" "media subtotal" "media remove";
    gap: 1em 1.5em; }
  .rp-cart-item-img {
    width: 64px; }
  .rp-cart-qty {
    justify-content: flex-start; }
  .rp-cart-item-subtotal {
    align-items: flex-start; } }

@media (max-width: 380px) {
  .rp-cart {
    padding: 0 1.2em 4em; }
  .rp-cart-item {
    grid-template-columns: 56px 1fr;
    gap: 0.8em 1.2em; }
  .rp-cart-item-img {
    width: 56px; } }

/*
 *	------------------------------------------------------- 	STORE CHECKOUT (wirtualna strona /store/checkout — issue #35)
 *	Swiss minimal jak reszta sklepu: uppercase labels, cienkie linie dolne
 *	inputów, podkreślone CTA; bez boldu, zaokrągleń, cieni i tła przycisków.
 */

/* Wrapper — ten sam odstęp pod fixed navbarem co .page-cart */
.rp-checkout-page .page-checkout {
  background-color: #fff;
  padding-top: 190px; }
  @media (max-width: 640px) {
    .rp-checkout-page .page-checkout {
      padding-top: 140px; } }

.rp-checkout {
  max-width: 57em;
  margin: 0 auto;
  padding: 0 1.5em 5em; }

.rp-checkout-heading {
  font-weight: 400;
  font-size: 1.4em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 2em; }

.rp-checkout-head {
  margin-bottom: 3em; }

.rp-checkout-head-note,
.rp-checkout-submit-note,
.rp-checkout-empty-text,
.rp-checkout-received-note {
  font-size: 0.7em;
  color: #999;
  margin: 0; }

.rp-checkout-head-note {
  margin-top: 1em; }

/* ----- layout: formularz | podsumowanie ----- */
.rp-checkout-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3em;
  align-items: start; }
  @media (max-width: 860px) {
    .rp-checkout-layout {
      grid-template-columns: 1fr;
      gap: 3.5em; } }

/* ----- pola formularza ----- */
.rp-checkout-cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2em; }
  @media (max-width: 480px) {
    .rp-checkout-cols2 {
      grid-template-columns: 1fr;
      gap: 1.5em; } }

.rp-checkout-field {
  margin-bottom: 1.5em; }

.rp-checkout-field label {
  display: block;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.6em; }

.rp-checkout-field input,
.rp-checkout-field select {
  font-family: inherit;
  font-size: 0.9em;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  outline: none;
  background: transparent;
  padding: 0.4em 0;
  color: #000; }
  .rp-checkout-field input:focus,
  .rp-checkout-field select:focus {
    border-bottom-color: #0000ff; }

.rp-checkout-field select {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%);
  background-position: calc(100% - 1em) 50%, calc(100% - 0.7em) 50%;
  background-size: 0.3em 0.3em, 0.3em 0.3em;
  background-repeat: no-repeat; }

/* ----- zgoda + błędy ----- */
.rp-checkout-terms {
  display: flex;
  align-items: flex-start;
  gap: 0.8em;
  margin: 1.5em 0 2em;
  font-size: 0.75em;
  line-height: 1.5; }

.rp-checkout-terms input[type="checkbox"] {
  margin-top: 0.2em; }

.rp-checkout-terms a {
  color: #000;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px; }
  .rp-checkout-terms a:hover {
    color: #0000ff; }

.rp-checkout-errors {
  border: 1px solid #000;
  padding: 1em 1.2em;
  margin-bottom: 2em;
  font-size: 0.75em;
  line-height: 1.5; }

.rp-checkout-errors-title {
  font-size: 0.7em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.8em; }

.rp-checkout-errors ul {
  margin: 0;
  padding-left: 1.2em; }

/* ----- submit ----- */
.rp-checkout-submit {
  font-family: inherit;
  font-size: 0.75em;
  letter-spacing: 0.06em;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  color: #000;
  text-transform: uppercase;
  text-decoration: underline;
  /* 0.1em — grubość podkreślenia z XD (patrz .store-hero-cta) */
  text-decoration-thickness: 0.1em;
  text-underline-offset: 8px;
  transition: color 0.2s linear; }
  .rp-checkout-submit:hover {
    color: #0000ff; }

.rp-checkout-submit-note {
  margin-top: 1em; }

/* ----- podsumowanie ----- */
.rp-checkout-summary {
  border-top: 1px solid #000;
  padding-top: 1.5em; }

.rp-checkout-summary-title {
  font-size: 0.8em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1.5em; }

.rp-checkout-line {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 1em;
  margin-bottom: 1em; }

.rp-checkout-line-name {
  font-size: 0.75em;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  margin: 0 0 0.3em; }

.rp-checkout-line-meta {
  font-size: 0.7em;
  color: #999;
  margin: 0; }

.rp-checkout-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5em;
  font-size: 0.8em;
  margin-bottom: 0.9em; }

.rp-checkout-row--total {
  border-top: 1px solid #000;
  padding-top: 0.9em;
  margin-top: 1.2em;
  font-size: 0.9em; }

.rp-checkout-vat-note {
  font-size: 0.7em;
  color: #999;
  margin: 0.5em 0 0; }

/* ----- stany: potwierdzenie / pusty ----- */
.rp-checkout-received-text {
  font-size: 0.9em;
  margin: 0 0 1em; }

.rp-checkout-received-note {
  margin-bottom: 2em; }

.rp-checkout-empty-text {
  margin-bottom: 2em; }

.rp-checkout-cta {
  display: inline-block;
  font-size: 0.75em;
  letter-spacing: 0.06em;
  color: #000;
  text-transform: uppercase;
  text-decoration: underline;
  /* 0.1em — grubość podkreślenia z XD (patrz .store-hero-cta) */
  text-decoration-thickness: 0.1em;
  text-underline-offset: 8px;
  transition: color 0.2s linear; }
  .rp-checkout-cta:hover {
    color: #0000ff; }

/* ----- mobile ----- */
@media (max-width: 380px) {
  .rp-checkout {
    padding: 0 1.2em 4em; } }

/*
 *	------------------------------------------------------- 	STORE LEGAL (strony prawne — issue #43)
 *	Minimalny układ edytorski jak reszta sklepu: wąska kolumna tekstu,
 *	uppercase nagłówek, podkreślone CTA.
 */

.rp-legal-page .page-legal {
  background-color: #fff;
  padding-top: 190px; }
  @media (max-width: 640px) {
    .rp-legal-page .page-legal {
      padding-top: 140px; } }

.rp-legal {
  max-width: 57em;
  margin: 0 auto;
  padding: 0 1.5em 5em; }

.rp-legal-heading {
  font-weight: 400;
  font-size: 1.4em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 2.5em; }
  @media (max-width: 380px) {
    .rp-legal-heading {
      font-size: 1.1em;
      margin-bottom: 2em; } }

.rp-legal-content {
  max-width: 42em; }
  .rp-legal-content h2 {
    font-weight: 400;
    font-size: 0.8em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 2.5em 0 1em; }
  .rp-legal-content p {
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0 0 1em; }

.rp-legal-back {
  display: inline-block;
  margin-top: 2em;
  font-size: 0.75em;
  letter-spacing: 0.06em;
  color: #000;
  text-transform: uppercase;
  text-decoration: underline;
  /* 0.1em — grubość podkreślenia z XD (patrz .store-hero-cta) */
  text-decoration-thickness: 0.1em;
  text-underline-offset: 8px;
  transition: color 0.2s linear; }
  .rp-legal-back:hover {
    color: #0000ff; }

@media (max-width: 380px) {
  .rp-legal {
    padding: 0 1.2em 4em; } }

/* =============================================================
   PROCESS — DESKTOP LOCK (min-width: 1025px)
   Ponowna deklaracja wszystkich ustawień desktopowych strony Process.
   CEL: reguły bazowe (powyżej, poza media queries) są wspólne dla
   tabletów/mobile — każda przyszła zmiana "dla mobile" w regułach
   bazowych NIE może wpłynąć na desktop, bo ten blok wygrywa kaskadę
   (jest ostatni). Zmiany desktopowe rób TYLKO tutaj (albo w istniejących
   blokach min-width:1025px wyżej); nie usuwaj tego bloku.
   ============================================================= */
@media (min-width: 1025px) {
  /* Wrapper: 75% szerokości (12.5% marginesy), siatka 120px od góry */
  .page-process .wrapper {
    max-width: none;
    width: 75%;
    padding: 0; }

  .page-process {
    padding-top: 120px; }

  /* Typografia */
  .process-row h2 {
    font-size: 2.5em;
    line-height: 1;
    font-weight: normal;
    margin-bottom: 0.5em; }

  .process-h2-right {
    font-size: 2.5em;
    line-height: 1;
    font-weight: 300;
    max-width: 7em;
    margin-left: auto;
    margin-bottom: 0.5em;
    text-align: right; }

  .process-row p {
    line-height: 1.45; }

  .process-area-item p {
    line-height: 1.45;
    max-width: 23.5em;
    margin-left: auto; }

  .process-area-title {
    margin-bottom: 0.5em; }

  .process-coop-list {
    line-height: 1.45; }

  /* Design: kolumny 16:14, nagłówek ~320px, tekst ~480px od góry */
  .process-section--design .process-row {
    grid-template-columns: 16fr 14fr;
    gap: 0; }

  .process-section--design .process-row > div:first-child {
    padding-top: 200px; }

  .process-section--design .process-row > div:last-child {
    padding-top: 360px; }

  /* Research: tekst 240px pod górą sekcji, obrazek 240px pod tekstem */
  .process-section--research .process-row {
    min-height: 0; }

  .process-section--research .process-row > div.process-col--bottom {
    align-self: start;
    padding-top: 240px; }

  .process-section--research .research-img-wrap {
    margin-top: 240px; }

  /* Funding: tekst 160px pod nagłówkiem, kwadrat 480x600 przy prawej,
     sekcja 120px nad następną */
  .process-section--funding .process-row {
    min-height: 0; }

  .process-section--funding .process-row > div.process-col--bottom {
    align-self: start;
    padding-top: 160px; }

  .process-section--funding .process-row + .process-row {
    margin-top: 240px; }

  .process-section--funding .process-row .placeholder-box,
  .process-section--funding .process-row .process-image {
    width: 480px;
    height: 600px;
    margin-left: auto; }

  .process-section--funding {
    margin-bottom: 120px; }

  /* Prototyping: kwadrat 600x480, 120px pod tekstem, kolumna tekstu 120px */
  .process-row + .process-row--prototyping-img {
    margin-top: 120px; }

  .process-row--prototyping-img .placeholder-box,
  .process-row--prototyping-img .process-image {
    width: 600px;
    height: 480px; }

  .process-row--prototyping-img > div:first-child {
    padding-top: 120px; }

  /* Areas: rytm 120px, kwadraty 480px przy lewym marginesie,
     Science obok kwadratu (-120px), Micro-living 240px pod Science,
     ostatnia linijka Micro-living na linii szerokiego kwadratu */
  .process-row--area-img {
    margin-top: 120px;
    min-height: 0; }

  .process-row--area-img .placeholder-box,
  .process-row--area-img .process-image {
    width: 480px;
    margin: 0; }

  .process-section--areas .process-area-item {
    margin-bottom: 0; }

  .process-section--areas .process-row + .process-area-item {
    margin-top: -120px; }

  .process-section--areas .process-area-item + .process-area-item {
    margin-top: 240px; }

  .process-section--areas > .process-row--area-img:nth-child(6) {
    margin-top: 0; }

  .process-section--areas .process-row:first-child {
    min-height: auto; }

  .process-section--areas > .process-row:first-child + .process-area-item {
    margin-top: 120px; }

  .process-section--areas > .process-row:first-child h2 {
    margin-bottom: 0; }

  /* Cooperation: 600px pod Areas, teksty co 480px, nagłówek→tekst 120px */
  .process-section--coop {
    margin-top: 600px; }

  .process-section--coop .process-row + .process-row {
    margin-top: 480px; }

  .process-section--coop > .process-row:first-child h2 {
    margin-bottom: 0; }

  .process-section--coop > .process-row:first-child + .process-row {
    margin-top: 120px; }

  /* Contact: 600px pod Cooperation, nagłówek 160px, formularz 100px */
  #contact {
    margin-top: 600px;
    margin-bottom: 0; }

  #contact .process-row {
    min-height: auto; }

  #contact .process-row:first-child {
    padding-top: 0; }

  #contact h2 {
    margin-top: 160px; }

  #contact .process-row--contact-form {
    margin-top: 100px; }

  .process-contact-form {
    max-width: 22em;
    margin-left: auto; }

  /* CTA circle: 8em przy lewym marginesie treści, ~10vh nad dołem */
  .process-cta-circle {
    left: 12.5vw;
    bottom: 10vh;
    width: 8em;
    height: 8em; } }

/* =============================================================
   PROCESS — TABLET LOCK (641px–1024px)
   Jak wyżej, dla tabletów: ponowna deklaracja wartości, które tablet
   dziedziczy z reguł bazowych. Zmiany na innych zakresach NIE mogą
   wpłynąć na tablet — ten blok jest ostatni dla tego przedziału.
   Zmiany tabletowe rób TYLKO tutaj lub w bloku tabletowym wyżej.
   ============================================================= */
@media (min-width: 641px) and (max-width: 1024px) {
  .page-process {
    padding-top: calc(14vh - 20px); }

  .process-row {
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    min-height: 55vh; }

  /* wiersze z kwadratami Areas rozmiarują się do treści (kwadrat 85%),
     blanket 55vh wyżej zostawiał ~900px pustki pod każdym kwadratem */
  .process-row--area-img {
    min-height: auto; }

  .process-section {
    margin-bottom: 22vh; }

  .process-row + .process-row {
    margin-top: 70vh; }

  /* Prototyping: tekst odrobinę niżej pod nagłówkiem */
  .process-section--prototyping .process-col--bottom {
    padding-top: 180px; }

  /* kwadrat tuż pod tekstem (70vh z reguły wyżej siało tu ~826px przerwy) */
  .process-row + .process-row--prototyping-img {
    margin-top: 160px; }

  /* Funding: tekst 120px pod nagłówkiem (domyślnie Next do nagłówka) */
  .process-section--funding .process-col--bottom {
    padding-top: 120px; }

  /* Prototyping: bez martwej przestrzeni — blanket min-height 55vh wyżej
     w tym bloku przywracał ogromną pustkę pod obrazkiem; obrazek po rotacji
     ma inny footprint wizualny niż layout, więc wiersz ma się rozmiarować
     do treści, a sekcja jest mocno ściągana w górę przed Funding */
  .process-row--prototyping-img {
    min-height: auto;
    margin-bottom: -1vh; }

  .process-section--prototyping {
    margin-bottom: 0; }

  .process-row h2 {
    font-size: 2.5em;
    line-height: 1; }

  .process-h2-right {
    font-size: 2.5em;
    max-width: 7em;
    margin-left: auto;
    text-align: right; }

  .process-row p {
    line-height: 1.45; }

  .process-area-item {
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    margin-bottom: 14vh; }

  .process-area-item p {
    line-height: 1.45;
    max-width: 23.5em;
    margin-left: auto; }

  .process-area-title {
    margin-bottom: 0.5em; }

  .process-coop-list {
    line-height: 1.45; }

  .process-section > .placeholder-box,
  .process-row + .placeholder-box,
  .process-section > .process-image,
  .process-row + .process-image {
    margin-top: 35vh; }

  .placeholder-box,
  .process-image {
    width: 480px; }

  .placeholder-box--tall,
  .process-image--tall,
  .placeholder-box--short,
  .process-image--short {
    width: 480px; }

  .placeholder-box--wide,
  .process-image--wide {
    width: 100%; }

  .research-img-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 200px;
    width: 37.8%;
    margin-left: auto; }

  /* Research: tekst dociągnięty do dołu wiersza — wyższy wiersz = większa
     przerwa między nagłówkiem (góra, prawo) a tekstem (dół, lewo) */
  .process-section--research .process-row {
    min-height: 62vh; }

  .process-contact-form {
    max-width: 22em;
    margin-left: auto; }

  /* Cooperation: większa przerwa Clients → Lectures i Lectures → Jury
     (obie sąsiadujące pary — 2em z bloku tabletowego było za mało) */
  .process-section--coop .process-row + .process-row {
    margin-top: 16em; }

  /* ale Cooperation → Clients tylko 1/3 tego (5.33em) */
  .process-section--coop > .process-row:first-child + .process-row {
    margin-top: 5.33em; }

  .process-cta-circle {
    /* lewy margines treści = 4em body; przy font-size 1.5em okręgu
       4em / 1.5 = 2.6667em — licuje się z kwadratami i tekstami */
    left: 2.6667em;
    bottom: 3em;
    top: auto;
    transform: none;
    font-size: 1.5em;
    width: 7em;
    height: 7em; } }

/* =============================================================
   PROCESS — MOBILE LOCK (max-width: 640px)
   Jak wyżej, dla mobile: ponowna deklaracja wartości dziedziczonych
   z reguł bazowych. Zmiany na innych zakresach NIE mogą wpłynąć na
   mobile. Zmiany mobilne rób TYLKO tutaj lub w bloku mobilnym wyżej.
   ============================================================= */
@media (max-width: 640px) {
  .page-process {
    padding-top: calc(14vh - 20px); }

  /* Design: delikatnie mniejsza przerwa między szerokim kwadratem
     a sekcją Research (było 20vh z reguły .process-section wyżej) */
  .process-section--design {
    margin-bottom: 15vh; }

  .process-row h2 {
    line-height: 1;
    margin-bottom: 0.5em; }

  .process-h2-right {
    max-width: 7em;
    margin-left: auto;
    margin-bottom: 0.5em; }

  .process-row p {
    line-height: 1.45; }

  .process-area-item p {
    line-height: 1.45;
    max-width: 23.5em;
    margin-left: auto; }

  .process-area-title {
    margin-bottom: 0.5em;
    /* Social Utility na prawy margines — jak Science i Micro-living
       (blok mobilny wyżej ustawiał wyrównanie tytułów na lewo) */
    text-align: right; }

  /* Kwadraty Areas w linii lewego marginesu treści (1.5em jak teksty,
     wyśrodkowane były w bloku mobilnym wyżej) */
  .process-row--area-img .placeholder-box,
  .process-row--area-img .process-image {
    margin-left: 1.5em;
    margin-right: auto; }

  .process-coop-list {
    line-height: 1.45; } }

/* ==========================================================================
   MOBILE HAMBURGER MENU (issue #61) — TYLKO SKLEP (RPDS STORE), ≤640 px.
   2026-10-01: klient poprosił o powrót studia do klasycznego navbaru #access
   na mobile — hamburger z makiety „RPDS STORE Mobile 14.09.2026 Menu mobile”
   zostaje wyłącznie na podstronach sklepu (markup w header.php, gałąź $is_store;
   studio renderuje sam #access, więc html.rp-menu-ready nigdy się nie pojawia).
   Prototyp: granatowa kurtyna, X zamyka, pozycje wyśrodkowane, podkategorie
   sklepowe rozwijane „+/−", przełącznik języka jako ostatnia pozycja.
   Progressive enhancement: bez JS pasek się nie pokazuje, a dotychczasowa
   nawigacja #access działa bez zmian.
   ========================================================================== */
.rp-mbar,
.rp-menu { display: none; }

@media (max-width: 640px) {
  /* JS obecny (html.rp-menu-ready) — chowamy starą nawigację, pokazujemy pasek.
     Scoped do sklepu (body.rp-store): studio zostaje przy navbarze #access. */
  .rp-menu-ready .rp-store #access { display: none; }

  .rp-menu-ready .rp-mbar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 12;
    align-items: center;
    justify-content: space-between;
    padding: 42px 16px 0; }

  /* sklep: czarne jak dotychczasowy store-nav (studio nie używa paska) */
  .rp-mbar--store { color: #000; }

  /* Hover brandu = przygaszenie, nie niebieski (zgł. klienta 09.10.2026:
     „w navbarze też to wprowadź") — lustrzane do desktopowego `rgba(0,0,0,0.5)`;
     bez własnej reguły link brał `#0000ff` z globalnej `a:hover`.
     Czas 0,3 s ease-out ustawia wspólna reguła przy `.store-nav-cat`. */
  .rp-mbar--store .rp-mbar-brand:hover {
    color: rgba(0, 0, 0, 0.5) !important; }

  .rp-mbar-brand {
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.02em; }

  /* Store (XD 390): napis „RPDS STORE" większy i ułożony w marginesie treści
     10vw — górna krawędź liter ~42 px, lewa ~40 px (2026-09-29, zmiana tylko
     dla paska sklepu; pasek studia i menu bez zmian). */
  .rp-menu-ready .rp-mbar--store {
    padding: 38px 10vw 0; }
  .rp-mbar--store .rp-mbar-brand {
    font-size: 1.25em;
    line-height: 1.2; }

  .rp-mbar-toggle {
    background: none;
    border: 0;
    padding: 8px 0 8px 12px; /* większe pole dotyku */
    margin: 0;
    cursor: pointer;
    color: inherit;
    line-height: 0; }

  .rp-mbar-toggle-icon,
  .rp-mbar-toggle-icon::before,
  .rp-mbar-toggle-icon::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor; }
  .rp-mbar-toggle-icon { position: relative; }
  .rp-mbar-toggle-icon::before { position: absolute; top: -7px; left: 0; }
  .rp-mbar-toggle-icon::after { position: absolute; top: 7px; left: 0; }

  /* blokada scrolla tła przy otwartym menu */
  html.rp-menu-open { overflow: hidden; }
  html.rp-menu-open body { overflow: hidden; }

  .rp-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow-y: auto;
    color: #fff;
    background-color: #02052e;
    background-image: linear-gradient(rgba(1, 3, 40, 0.62), rgba(1, 3, 40, 0.62)), var(--rp-menu-bg, url(../../../../wedge/content/SteckSessel_2.webp));
    background-size: auto, 300%;
    background-position: center, 100% 0;
    background-repeat: no-repeat, no-repeat; }

  /* fokus ląduje na panelu (dialogu) — bez ring wokół całego menu */
  .rp-menu:focus { outline: none; }

  .rp-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 42px 16px 0; }

  .rp-menu-brand {
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    letter-spacing: 0.02em; }

  .rp-menu-close {
    background: none;
    border: 0;
    padding: 8px 0 8px 12px;
    margin: 0;
    cursor: pointer;
    color: #fff;
    line-height: 0; }

  .rp-menu-close-icon {
    position: relative;
    display: block;
    width: 20px;
    height: 20px; }
  .rp-menu-close-icon::before,
  .rp-menu-close-icon::after {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 20px;
    height: 2px;
    background: currentColor; }
  .rp-menu-close-icon::before { transform: rotate(45deg); }
  .rp-menu-close-icon::after { transform: rotate(-45deg); }

  .rp-menu-nav { padding: 22vh 24px 48px; }

  .rp-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center; }
  .rp-menu-list > li { padding: 13px 0; }
  .rp-menu-list a {
    color: #fff;
    font-size: 1.25rem;
    line-height: 1.3; }
  .rp-menu-list a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 6px; }

  /* aktywna pozycja (bieżąca strona) */
  .rp-menu-list .is-active > a,
  .rp-menu-list .current-menu-item > a {
    text-decoration: underline;
    text-underline-offset: 6px; }

  /* podkategorie sklepu: rozwijane „+"/„−" bez pozycjonowania absolutnego */
  .rp-menu .store-nav-cat { display: block; }
  .rp-menu .store-nav-toggle {
    background: none;
    border: 0;
    padding: 0 0 0 0.45em;
    margin: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    color: #fff; }
  .rp-menu .store-nav-subs {
    position: static;
    display: none;
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    text-align: center; }
  .rp-menu .store-nav-cat.is-open .store-nav-subs { display: block; }
  .rp-menu .store-nav-subs li { padding: 4px 0; }
  .rp-menu .store-nav-subs a { font-size: 1.05rem; }

  /* ----- STORE MENU — geometria wg XD „Menu mobile" (ekran 17, 390×844,
     tylko sklep): RPDS STORE w pasku (lewa 10vw, góra liter ~42 px — ta sama
     pozycja co w pasku zamkniętym, więc napis nie przesuwa się przy otwarciu),
     przerwa brand → 1. pozycja 220 px (baseline 58 → 277), pozycje główne co
     102 px, subpozycje co 39 px, kurtyna 294% kadr right -8px top -75px ----- */
  .rp-menu--store:not([hidden]) {
    background-image: var(--rp-menu-curtain-bg, url(../../../../wedge/content/rp-menu-curtain.webp));
    background-size: 294% auto;
    background-position: right -8px top -75px;
    background-repeat: no-repeat; }

  .rp-menu--store .rp-menu-top {
    align-items: flex-start;
    padding: 38px 10vw 0; }
  .rp-menu--store .rp-menu-brand {
    display: block;
    margin: 0;
    text-align: left;
    color: #fff;
    font-size: 1.25em;
    line-height: 1.2; }

  /* 183 px = 257 (górna krawędź boxu 1. pozycji) − 74 (wysokość paska:
     38 + przycisk X 36 px) → baseline 1. pozycji = 277, litera „O" na y≈262
     — dokładnie jak w makiecie */
  .rp-menu--store .rp-menu-nav {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 183px 24px 20px; }

  .rp-menu--store .rp-menu-list > li {
    padding: 0;
    margin: 0 0 74.5px; }
  .rp-menu--store .rp-menu-list > li:last-child { margin-bottom: 0; }
  .rp-menu--store .rp-menu-list > li:last-child a { text-transform: uppercase; }
  /* Kurtyna mobilna sklepu = jasny tekst na granatowym tle, więc hover to
     lustrzane przygaszenie bieli 50 % (zgł. klienta 09.10.2026: „w navbarze też
     to wprowadź") — ta sama para co .store-hero-cta i navbar nad hero.
     Wcześniej biel zostawała bielą (bez zmiany koloru), a podkreślenie listy
     pojawiało się skokowo; teraz kolor gaśnie w 0,3 s ease-out (wspólna reguła
     przy `.store-nav-cat`), a `text-decoration-color` idzie za `currentColor`,
     więc podkreślenie też jest półprzezroczyste. */
  .rp-menu--store .rp-menu-brand:hover,
  .rp-menu--store .rp-menu-list a:hover,
  .rp-menu--store .store-nav-subs a:hover {
    color: rgba(255, 255, 255, 0.5) !important; }
  /* "+"/"−" przy kategorii też gaśnie (wcześniej nie miał własnego hoveru) */
  .rp-menu--store .store-nav-toggle:hover {
    color: rgba(255, 255, 255, 0.5) !important; }
  .rp-menu--store .store-nav-subs { margin: 11.5px 0 0; padding: 0; }
  .rp-menu--store .store-nav-subs li {
    padding: 0;
    margin: 0 0 11.5px; }
  .rp-menu--store .store-nav-subs li:last-child { margin-bottom: 0; }
  .rp-menu--store .store-nav-subs a { font-size: 1.25rem; } }

/* ==========================================================================
   NOTIFY ME — formularz dostępności produktu (issue #65)
   Pole e-mail + przycisk w stylu underline-CTA; komunikaty i potwierdzenie
   podmienia js/scripts.js (AJAX, bez przeładowania strony).
   ========================================================================== */
.product-notify {
  margin-top: 28px; }

.product-notify-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px; }

.product-notify input[type="email"] {
  font: inherit;
  font-size: 18px;
  border: 0;
  border-bottom: 1px solid #000;
  outline: none;
  background: transparent;
  padding: 6px 0;
  min-width: 220px;
  color: #000; }
  .product-notify input[type="email"]::placeholder {
    color: #b4b4b4; }
  .product-notify input[type="email"]:focus {
    border-bottom-color: #0000ff; }

.product-notify-submit {
  /* `background-color`, nie skrót `background` — skrót kasowałby gradient podkreślenia CTA */
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid #000;
  padding: 0 0 3px;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  line-height: 1; }
  /* hover = przygaszenie (zgł. klienta 09.10.2026 — patrz .store-section-block-link);
     border przezroczysty, żeby nie nakładał się na gradient (podwójne krycie) */
  .product-notify-submit:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    border-bottom-color: transparent; }

.product-notify.is-sending {
  opacity: 0.6;
  pointer-events: none; }

.product-notify-msg {
  margin: 12px 0 0;
  font-size: 0.9em; }

.product-notify-done {
  margin: 28px 0 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6; }

/* ==========================================================================
   STORE PRODUCT — MOBILE (≤ 640 px) wg XD (ekran produktu 15, „RPDS STORE
   Mobile 14.09.2026"): hero = małe zdjęcie 139/178 + duże 243/325; teksty
   15px + 10px; konfigurator 312px; próbniki 31px; spec schodkowo;
   editorial/custom/FAQ. Wszystko scoped .page-product.
   ========================================================================== */
@media (max-width: 640px) {
  /* ----- HERO ----- */
  .page-product .product-hero {
    display: block;
    min-height: 0;
    padding: 93px 0 0; }
  .page-product .product-hero-media {
    display: grid;
    grid-template-columns: 36vw minmax(0, 1fr);
    column-gap: 8px;
    align-items: start; }
  .page-product .product-hero-fig { margin: 0; }
  .page-product .product-hero-fig--small img,
  .page-product .product-hero-fig--small .about-mock {
    width: 100%;
    height: auto;
    aspect-ratio: 139 / 178;
    object-fit: cover; }
  .page-product .product-hero-fig--main img,
  .page-product .product-hero-fig--main .about-mock {
    width: 100%;
    height: auto;
    aspect-ratio: 243 / 325;
    object-fit: cover; }
  .page-product .product-hero-body {
    display: block;
    margin: 76px 0 0;
    padding: 0 10vw; }
  .page-product .product-hero-title {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin: 0 0 6px; }
  .page-product .product-hero-tax {
    font-size: 10px;
    font-weight: 400;
    column-gap: 1.6em;
    line-height: 2;
    margin: 0 0 72px; }
  .page-product .product-hero-desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 2;
    max-width: none;
    margin: 0 0 40px; }
  .page-product .product-hero-price {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 6px; }
  .page-product .product-hero-price-note {
    font-size: 10px;
    font-weight: 400;
    line-height: 2;
    margin: 0; }

  /* ----- KONFIGURATOR + ZAKUP ----- */
  .page-product .product-buy {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    margin-top: 117px;
    padding: 0; }
  .page-product .product-buy-media {
    width: auto;
    margin: 0 10vw; }
  .page-product .product-buy-media img,
  .page-product .product-buy-media .about-mock {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 312 / 417;
    object-fit: cover; }
  .page-product .product-buy-config { padding: 39px 10vw 0; }

  /* wariant dostępny (są próbniki): etykiety w rzędzie 1, grupy w rzędzie 2,
     ilość + CTA w rzędzie 4, nota na końcu */
  .page-product .product-buy-config:has(.product-swatches) {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: 29px; }
  .page-product .product-buy-config:has(.product-swatches) > p:nth-of-type(1) { grid-area: 1 / 1; }
  .page-product .product-buy-config:has(.product-swatches) > .product-swatches:nth-of-type(1) { grid-area: 2 / 1; }
  .page-product .product-buy-config:has(.product-swatches) > p:nth-of-type(2) { grid-area: 1 / 2; }
  .page-product .product-buy-config:has(.product-swatches) > .product-swatches:nth-of-type(2) { grid-area: 2 / 2; }
  .page-product .product-buy-config:has(.product-swatches) > p:nth-of-type(3) {
    grid-area: 3 / 1 / 4 / 3;
    margin-top: 39px; }
  .page-product .product-buy-config:has(.product-swatches) > .product-qty { grid-area: 4 / 1; }
  .page-product .product-buy-config:has(.product-swatches) > .product-buy-cta {
    grid-area: 4 / 2;
    justify-self: end;
    align-self: start; }
  .page-product .product-buy-config:has(.product-swatches) > .product-notify {
    grid-area: 5 / 1 / 6 / 3; }
  .page-product .product-buy-config > .product-buy-note { grid-column: 1 / -1; }

  .page-product .product-buy-label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2;
    margin: 0; }
  .page-product .product-swatches {
    display: flex;
    gap: 5.5px;
    margin: 4px 0 0; }
  .page-product .product-swatch {
    width: 31px;
    height: 31px; }
  .page-product .product-swatch.is-selected {
    outline: 1px solid #000;
    outline-offset: 2px; }
  .page-product .product-qty {
    font-size: 15px;
    font-weight: 400;
    gap: 24px;
    margin: 4px 0 0; }
  .page-product .product-qty-btn {
    font-size: 15px;
    font-weight: 400; }
  .page-product .product-buy-cta {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding-bottom: 2px; }
  .page-product .product-buy-cta--muted { margin: 0 0 20px; }
  .page-product .product-buy-note {
    font-size: 10px;
    font-weight: 400;
    line-height: 2;
    max-width: none;
    margin: 28px 0 0; }
  .page-product .product-notify { margin-top: 24px; }
  .page-product .product-notify input[type="email"] {
    font-size: 15px;
    min-width: 0;
    flex: 1 1 auto; }
  .page-product .product-notify-submit {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em; }
  .page-product .product-notify-done {
    font-size: 15px;
    line-height: 2; }

  /* ----- SPECYFIKACJA (schodkowa) ----- */
  .page-product .product-spec {
    display: grid;
    grid-template-columns: 36vw minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 0;
    min-height: 0;
    margin-top: 91px;
    padding: 0; }
  .page-product .product-spec-media { margin: 0; }
  .page-product .product-spec-media--interior { grid-area: 1 / 1; }
  .page-product .product-spec-media--interior img,
  .page-product .product-spec-media--interior .about-mock {
    width: 100%;
    height: auto;
    aspect-ratio: 139 / 178;
    object-fit: cover; }
  .page-product .product-spec-media--material {
    display: block;
    grid-area: 2 / 2 / 3 / 3;
    justify-self: end;
    width: 36vw;
    margin: 160px 8px 0 0; }
  .page-product .product-spec-media--material img,
  .page-product .product-spec-media--material .about-mock {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 139 / 178;
    object-fit: cover; }
  .page-product .product-spec-col {
    grid-area: 1 / 2;
    margin: 26px 0 0;
    padding: 0; }
  .page-product .product-spec-col--lower {
    grid-area: 2 / 1 / 3 / 3;
    justify-self: start;
    margin: 160px 10vw 0;
    max-width: 62%;
    padding: 0; }
  .page-product .product-spec-media--packshot {
    grid-area: 3 / 1 / 4 / 3;
    /* wyśrodkowane: szerokość = obszar treści (10vw z obu stron) */
    width: auto;
    margin: 64px 10vw 0; }
  .page-product .product-spec-media--packshot img,
  .page-product .product-spec-media--packshot .about-mock {
    width: 100%;
    height: auto;
    aspect-ratio: 312 / 417;
    object-fit: cover; }
  .page-product .product-spec-pair { margin: 0 0 16px; }
  .page-product .product-spec-pair:last-child { margin-bottom: 0; }
  .page-product .product-spec-label {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 2;
    margin: 0 0 7px; }
  .page-product .product-spec-text {
    font-size: 10px;
    font-weight: 400;
    line-height: 2;
    margin: 0; }

  /* ----- EDITORIAL (bez zdjęcia na mobile) ----- */
  .page-product .product-editorial {
    display: block;
    min-height: 0;
    margin-top: 156px;
    padding: 0; }
  .page-product .product-editorial-media { display: none; }
  .page-product .product-editorial-body {
    padding: 0 10vw;
    -webkit-transform: none;
    transform: none; }
  .page-product .product-editorial-title {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin: 0 0 56px; }
  .page-product .product-editorial-text {
    font-size: 10px;
    font-weight: 400;
    line-height: 2;
    margin: 0 0 20px; }
  .page-product .product-editorial-text:last-child { margin-bottom: 0; }

  /* ----- CUSTOM (zdjęcia: duże lewo + małe prawo, potem tekst) ----- */
  .page-product .product-custom {
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
    margin-top: 156px;
    padding: 0; }
  .page-product .product-custom-media {
    order: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36vw;
    column-gap: 8px;
    align-items: start;
    width: 100%; }
  .page-product .product-custom-media-fig { margin: 0; }
  .page-product .product-custom-media-fig--main { grid-area: 1 / 1; }
  .page-product .product-custom-media-fig--small { grid-area: 1 / 2; }
  .page-product .product-custom-media-fig--main img,
  .page-product .product-custom-media-fig--main .about-mock {
    width: 100%;
    height: auto;
    aspect-ratio: 243 / 325;
    object-fit: cover; }
  .page-product .product-custom-media-fig--small img,
  .page-product .product-custom-media-fig--small .about-mock {
    width: 100%;
    height: auto;
    aspect-ratio: 139 / 179;
    object-fit: cover; }
  .page-product .product-custom-body {
    order: 2;
    margin: 78px 0 0;
    padding: 0 10vw; }
  .page-product .product-custom-title {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.6;
    margin: 0 0 48px; }
  .page-product .product-custom-text {
    font-size: 10px;
    font-weight: 400;
    line-height: 2;
    max-width: none;
    margin: 0 0 44px; }
  .page-product .product-custom-cta {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em; }

  /* ----- FAQ ----- */
  .page-product .product-faq {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 147px;
    /* biała przerwa między ostatnim pytaniem („Care & Material
       Maintenance") a czarną stopką */
    padding: 0 0 96px; }
  .page-product .product-faq-media {
    order: 1;
    width: auto;
    margin: 0 10vw; }
  .page-product .product-faq-media img,
  .page-product .product-faq-media .about-mock {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 312 / 417;
    object-fit: cover; }
  .page-product .product-faq-list {
    order: 2;
    margin: 39px 0 0;
    padding: 0 10vw; }
  .page-product .product-faq-item { margin: 0 0 32px; }
  .page-product .product-faq-item:last-child { margin-bottom: 0; }
  .page-product .product-faq-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    cursor: pointer; }
  .page-product .product-faq-label {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.6; }
  .page-product .product-faq-toggle { font-size: 15px; }
  .page-product .product-faq-text {
    font-size: 10px;
    font-weight: 400;
    line-height: 2;
    max-width: none; } }

/* ==========================================================================
   STORE — CZCIONKI wg PROJEKTU XD („Helvetica" Regular; spec §1.5:
   „Wszystko w wadze 400 (Regular). W całym projekcie nie występuje bold.")
   Krój: webfont Helvetica (Regular + Bold) z prototypów sklepu
   (wedge/css/fonts/helvetica -> fonts/helvetica w motywie), fallback:
   systemowa Helvetica -> Helvetica Neue -> Arial.
   Zakres: body.rp-store — wszystkie podstrony sklepu (store home, /objects/,
   /object_type/, produkt, About, Collections, koszyk, checkout, strony
   prawne; klasa dodawana w functions.php: rp_is_store_context()).
   Studio (robertpludra.com) NIETKNIĘTE — dalej Helvetica LT WXX Light.
   ========================================================================== */
@font-face {
  font-family: 'RPDS Helvetica';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/helvetica/helvetica-webfont.woff2") format("woff2"),
       url("../fonts/helvetica/helvetica-webfont.woff") format("woff"); }

@font-face {
  font-family: 'RPDS Helvetica';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/helvetica/helvetica-bold-webfont.woff2") format("woff2"),
       url("../fonts/helvetica/helvetica-bold-webfont.woff") format("woff"); }

body.rp-store {
  font-family: 'RPDS Helvetica', Helvetica, 'Helvetica Neue', Arial, sans-serif; }

/* pola formularzy nie dziedziczą fontu z body (normalize: sans-serif) */
body.rp-store button,
body.rp-store input,
body.rp-store select,
body.rp-store textarea {
  font-family: inherit; }

/* projekt sklepu nie używa bolda — hierarchia wyłącznie wielkością,
   wersalikami i pozycją (spec §1.5) */
body.rp-store * {
  font-weight: 400; }

/* ==========================================================================
   TABLET 641–1024 px — wg projektu XD „RPDS STORE Tablet 14.09.2026”
   (artboard 768 px, iPad portrait; ekrany iPad–3/5/6/9/10 = About 10464 /
   Store home 15264 / Produkt 9093 / Objects 3168 / Collections 8352 px).
   Wartości liczbowe = piksele artboardu 768 (analogicznie do sekcji mobilnej,
   która używa wymiarów 390). Studio (poza .rp-store) NIETKNIĘTE.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {

  /* ----- NAVBAR (XD: fs 20 px, pozycje rozłożone z marginesem ~85 px; na
     stronie głównej sklepu — ciemne zdjęcie hero dochodzi do y=0 — tekst
     navbaru biały). Pozycja HOME/START (powrót do strony studia) jest
     widoczna także na tablecie i telefonie — zgł. klienta 06.10.2026
     (w makiecie tabletowej XD jej nie było).
     GÓRNY OFFSET: 70 px, nie 103 px z makiety tabletowej — zgł. klienta
     09.10.2026 („żeby miejsce, w którym zlockowany jest navbar, było na tej
     samej wysokości na stronie studia i sklepu"); tyle samo ma navbar
     studia i tyle samo ma navbar sklepu na desktopie, więc przy zmianie
     szerokości okna pozycja nie skacze. ----- */
  #access.store-nav ul.header-menu {
    padding: 70px 11vw 0;
    justify-content: space-between;
    gap: 0; }
  #access.store-nav ul.header-menu > li > a { font-size: 20px; }
  /* Biały TYLKO nad ciemnym hero strony głównej sklepu — klasę .rp-nav-on-hero
     nadaje skrypt przy przewijaniu (hero 100vh); po zjechaniu na jasne sekcje
     navbar wraca do czarnego, jak na pozostałych stronach sklepu. */
  .page-template-store #access.store-nav.rp-nav-on-hero ul.header-menu > li > a,
  .page-template-store #access.store-nav.rp-nav-on-hero .store-nav-toggle { color: #fff; }
  /* Nad hero przygaszenie musi być lustrzane (biel 50 %) — ta sama para co
     .store-hero-cta; zgł. klienta 09.10.2026 „w navbarze też to wprowadź" */
  .page-template-store #access.store-nav.rp-nav-on-hero ul.header-menu > li > a:hover,
  .page-template-store #access.store-nav.rp-nav-on-hero .store-nav-toggle:hover { color: rgba(255, 255, 255, 0.5) !important; }
  .page-template-store #access.store-nav.rp-nav-on-hero li.is-active > a { color: #fff !important; }
  /* rozwijane podkategorie otwierane nad ciemnym hero też na biało */
  .page-template-store #access.store-nav.rp-nav-on-hero .store-nav-subs a { color: #fff !important; }
  .page-template-store #access.store-nav.rp-nav-on-hero .store-nav-subs a:hover { color: rgba(255, 255, 255, 0.5) !important; }
  .page-template-store #access.store-nav.rp-nav-on-hero .store-nav-brand > a:hover,
  .page-template-store #access.store-nav.rp-nav-on-hero .store-nav-home > a:hover { color: rgba(255, 255, 255, 0.5) !important; }

  /* ----- STOPKA (XD: czarna; kolumny x=96 i x=384; pitch list 48 px;
     bez linków ALL) ----- */
  .store-footer {
    padding: 125px 12.5vw 194px;
    min-height: 0;
    justify-content: flex-start; }
  .store-footer-inner {
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    row-gap: 0; }
  /* lewa kolumna: brand → OBJECTS → COLLECTIONS → socials */
  .store-footer-inner > :nth-child(1) { grid-column: 1; grid-row: 1; margin-bottom: 86px; }
  .store-footer-inner > :nth-child(2) { grid-column: 1; grid-row: 2; margin-bottom: 72px; }
  .store-footer-inner > :nth-child(3) { grid-column: 1; grid-row: 3; }
  /* prawa kolumna: About/Contact/Studio → Terms/Privacy/Shipping */
  .store-footer-inner > :nth-child(4) { grid-column: 2; grid-row: 2; margin-bottom: 72px; }
  .store-footer-inner > :nth-child(5) { grid-column: 2; grid-row: 3; }
  /* socials pod listami w lewej kolumnie */
  .store-footer-inner > :nth-child(6) { grid-column: 1; grid-row: 4; margin-top: 240px; text-align: left; }
  .store-footer-logo { font-size: 30px; line-height: 36px; }
  .store-footer-heading { font-size: 20px; line-height: 24px; margin-bottom: 24px; }
  .store-footer ul { margin: 0; }
  .store-footer li { margin-bottom: 24px; font-size: 20px; line-height: 24px; }
  .store-footer li:last-child { margin-bottom: 0; }
  .store-footer-inner a { font-size: 20px; line-height: 24px; }
  .store-footer-all { display: none; }
  .store-footer-contact p { font-size: 20px; line-height: 24px; margin: 0 0 24px; }
  .store-footer-contact p:last-child { margin-bottom: 0; }
  .store-footer-bottom {
    margin-top: 188px;
    padding-top: 0;
    border-top: 0;
    font-size: 15px;
    line-height: 18px; }
  .store-footer-bottom p { font-size: 15px; line-height: 18px; }
  /* XD tablet: © biały, „design:" szary 175 (fill r=175 z drzewa XD) */
  .store-footer-bottom p:first-child { color: #fff; }
  .store-footer-bottom .store-footer-credit { color: #afafaf; }
  .store-footer-credits { margin-top: 177px; padding: 0; position: relative; }
  .store-footer-credits-note { font-size: 15px; line-height: 25px; margin-bottom: 37px; }
  .store-footer-credits-mkidn { display: block; width: 288px; max-width: none; margin-left: -10px; }
  .store-footer-credits-ipk {
    position: absolute;
    left: 399px;
    top: 65px;
    width: 160px;
    margin: 0; }
}

/* tabletowa wersja zdjęcia feature WEDGE (ciemna scena) — domyślnie ukryta,
   pokazywana wyłącznie w zakresie 641–1024 (sekcja STORE HOME — TABLET) */
.store-feature-img--tablet {
  display: none; }

/* ==========================================================================
   STORE HOME — TABLET (641–1024) wg XD „RPDS STORE Tablet 14.09.2026”
   (ekran iPad–5, artboard 768×15264). Wartości liczbowe = piksele artboardu;
   marginesy tekstu 12.5vw ≈ 96 px @768. Mobile ≤640 i desktop ≥1025 bez zmian.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {

  /* ----- HERO (768×1024 = 100vh; ciemne zdjęcie z XD, tytuł = pierwsze
     zdanie sloganu, wyśrodkowany; CTA EXPLORE OBJECTS przy dole) ----- */
  .page-store .store-hero {
    background-image: url("../images/rp-hero-wedge-dark.webp") !important;
    height: 100vh;
    min-height: 0;
    padding: 0; }
  .page-store .store-hero-inner {
    max-width: none;
    width: 100%; }
  .page-store .store-hero-inner {
    /* Tytuł hero wg XD: makieta centruje BLOK TRZECH wierszy (431..731, lh 100)
       i pokazuje tylko pierwsze zdanie — widoczna linia siedzi więc w środku
       tego bloku (531..631), czyli ~68 px poniżej środka ekranu. Padding na
       kontenerze (flex, align-items:center) przesuwa wyśrodkowaną treść w dół
       o połowę swojej wartości: 137/2 = 68,5 px. */
    padding-top: 137px; }
  .page-store .store-hero-title {
    font-size: 50px;
    line-height: 1.1;
    letter-spacing: 0;
    text-shadow: none; }
  .page-store .store-hero-title .store-hero-part + .store-hero-part {
    display: none; }
  .page-store .store-hero-cta {
    bottom: 50px;
    font-size: 30px;
    letter-spacing: 0.06em;
    text-shadow: none; }

  /* ----- SEKCJE OPISOWE (2 szt.: WEDGE i LABORATORY/GLASSWARE) -----
     układ: [małe 273×352 | duże 480×640] (2. sekcja lustrzanie), oba flush
     do krawędzi, odstęp 15 px; podpisy pod małym; tekst na 12.5vw pod zdjęciami */
  .page-store .store-sections {
    margin-top: 224px; }
  .page-store .store-section {
    min-height: 0;
    padding: 0;
    display: block; }
  .page-store .store-section + .store-section {
    margin-top: 184px; }
  .page-store .store-section-media {
    display: grid;
    grid-template-columns: 0.569fr 1fr;
    gap: 15px;
    align-items: start;
    width: 100%; }
  .page-store .store-section--reverse .store-section-media {
    grid-template-columns: 1fr 0.569fr;
    justify-self: stretch; }
  .page-store .store-section-img--small {
    aspect-ratio: 273 / 352; }
  .page-store .store-section-img--main {
    aspect-ratio: 480 / 640; }
  .page-store .store-section-labels {
    padding-top: 15px; }
  /* Wyrównanie „Collections WEDGE / Objects FURNITURE” wg makiety (XD iPad-5,
     artboard 768): pole tekstowe ma szerokość kolumny małego zdjęcia (273)
     i paragraphAlign=right w sekcji A (małe zdjęcie przy LEWEJ krawędzi),
     a w sekcji odwróconej (małe zdjęcie przy prawej, x=495) — align=left.
     Czyli podpis zawsze dosunięty do WEWNĘTRZNEJ krawędzi małego zdjęcia.
     Nasza reguła tabletowa wymuszała flex-start w obu sekcjach, przez co
     podpis w sekcji A stał na samej krawędzi ekranu (x=0) — zgł. klienta
     06.10.2026 („popraw napisy … jak na zdjęciu”). Bazowe reguły robią
     dokładnie to, czego chce makieta (.store-section-label-row: flex-end,
     .store-section--reverse …: flex-start), więc wystarczy ich nie nadpisywać.
     Odstęp etykieta→wartość 1.39em = 20.8 px — tyle w makiecie daje pięć
     spacji między wyrazami (5 × 0.2778em) przy fs=15. */
  .page-store .store-section-label-row {
    gap: 1.39em;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px; }
  .page-store .store-section-body,
  .page-store .store-section--reverse .store-section-body {
    display: block;
    margin-top: 128px;
    padding: 0 12.5vw;
    justify-self: stretch; }
  /* Akapity sekcji („RPDS STORE objects are driven by structural honesty…” i bloki
     OBJECTS:/COLLECTIONS:) — w XD (iPad-5) pole tekstowe ma szerokość kolumny treści
     576 px (x=96) i 20/40, akapit jest 5-wierszowy. Selektor z trzecią klasą jest
     konieczny: reguła „manifestu pod hero” `.store-section:first-child
     .store-section-desc` (0,3,0) wygrywała z poprzednim `.page-store
     .store-section-desc` (0,2,0) i zwężała tekst do 19em = 393 px, przez co łamał
     się na 8 wierszy (zgł. klienta 06.10.2026 — „popraw jeszcze ten tekst”).
     word-spacing: normal — XD nie ma dodatkowego odstępu między wyrazami. */
  .page-store .store-section .store-section-desc {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 0;
    word-spacing: normal; }
  .page-store .store-section--blocks .store-section-body {
    display: block; }
  .page-store .store-section-block {
    margin-bottom: 0; }
  .page-store .store-section-block + .store-section-block {
    margin-top: 114px; }
  .page-store .store-section-block-link {
    display: inline-block;
    margin-top: 51px;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 24px; }

  /* ----- FEATURES (WEDGE / SATURN / CIRCULAR): zdjęcie 768×576 full-bleed,
     tekst pod spodem (bez odbić lustrzanych na tablecie) ----- */
  .page-store .store-features {
    margin-top: 163px; }
  .page-store .store-feature,
  .page-store .store-feature--reverse {
    display: block;
    min-height: 0;
    padding: 0; }
  .page-store .store-feature-media {
    display: block; }
  .page-store .store-feature-img {
    aspect-ratio: 768 / 576; }
  .page-store .store-feature-img--tablet {
    display: block; }
  .page-store .store-feature-img--wide {
    display: none; }
  .page-store .store-feature-body,
  .page-store .store-feature--reverse .store-feature-body {
    display: block;
    order: 0;
    margin-top: 96px;
    padding: 0 12.5vw;
    justify-self: stretch; }
  .page-store .store-feature-title {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-store .store-feature-desc {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }
  .page-store .store-feature .collections-shop-btn {
    display: inline-block;
    margin-top: 51px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0; }
  .page-store .store-feature + .store-feature {
    margin-top: 159px; }

  /* ----- PICKS (4 bloki po 2 produkty): kafle 2 kolumny 368 px full-bleed,
     podpisy pod zdjęciami, blok tekstu POD kaflami ----- */
  .page-store .store-features + .store-picks {
    margin-top: 208px; }
  .page-store .store-picks {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0; }
  .page-store .store-picks + .store-picks {
    margin-top: 96px; }
  .page-store .store-picks-products {
    order: 1;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    width: 100%; }
  .page-store .store-picks .object-card-img {
    aspect-ratio: 368 / 480; }
  .page-store .store-picks .object-card-meta {
    /* podpis prawego kafla flush z krawędzią zdjęcia jak w XD (x=400) */
    padding: 15px 0 0; }
  /* lewy kafel (zdjęcie full-bleed od x=0): podpis z wcięciem 15 px — XD ma
     go na x=15; bez wcięcia siedzi na samej krawędzi ekranu
     (zgł. klienta 06.10.2026) */
  .page-store .store-picks-products > .object-card:first-child .object-card-meta {
    padding-left: 15px; }
  .page-store .store-picks .object-card-name,
  .page-store .store-picks .object-card-price {
    font-size: 20px;
    line-height: 30px; }
  .page-store .store-picks .object-card-buy {
    font-size: 20px;
    line-height: 24px; }
  /* Blok podpisu w kaflu = 75 px jak w XD (15 oddechu + 2 × 30). Bazowe
     `row-gap: 0.15em` i `margin-top: 0.1em` ceny dodawały 5 px na każdy kafel
     (4 bloki picks = 20 px dryfu i pitch 1001 zamiast 960 w XD). */
  .page-store .store-picks .object-card-row {
    row-gap: 0; }
  .page-store .store-picks .object-card-price {
    margin-top: 0; }
  .page-store .store-picks-body {
    order: 2;
    margin: 72px 0 0;
    padding: 0 12.5vw;
    justify-self: stretch;
    align-self: stretch; }
  .page-store .store-picks-title {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-store .store-picks-desc {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }

  /* ----- THE LOGIC OF MATERIALS: [duże 480×640 | małe 273×352], podpisy pod
     małym, tekst pod zdjęciami ----- */
  .page-store .store-picks + .store-materials {
    margin-top: 192px; }
  .page-store .store-materials {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0; }
  .page-store .store-materials-media {
    order: 1;
    grid-template-columns: 480fr 273fr;
    gap: 15px;
    width: 100%; }
  .page-store .store-materials-fig--big .store-materials-img {
    aspect-ratio: 480 / 640; }
  .page-store .store-materials-fig--small .store-materials-img {
    aspect-ratio: 273 / 352; }
  .page-store .store-materials .about-pos {
    margin-top: 15px;
    font-size: 15px;
    line-height: 22px; }
  .page-store .store-materials-body {
    order: 2;
    margin-top: 83px;
    padding: 0 12.5vw; }
  .page-store .store-materials-title {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-store .store-materials-desc {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }

  /* ----- FROM STUDIO TO SPACE: portret full-bleed 768×864, tekst pod nim ----- */
  .page-store .store-materials + .store-studio {
    margin-top: 168px; }
  .page-store .store-studio {
    display: block;
    min-height: 0;
    /* 184 + 125 (padding stopki) = 314 px od dołu CTA do pierwszego tekstu
       stopki jak w XD; nasz CTA ma dodatkowe 5 px na podkreślenie */
    padding: 0 0 184px; }
  .page-store .store-studio::before {
    display: none; }
  .page-store .store-studio-portrait img {
    height: auto;
    max-height: none;
    aspect-ratio: 768 / 864; }
  .page-store .store-studio-body {
    display: block;
    padding: 96px 12.5vw 0; }
  .page-store .store-studio-title {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-store .store-studio-desc {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }
  .page-store .store-studio-btn {
    display: inline-block;
    margin-top: 51px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0; }
}

/* ==========================================================================
   COLLECTIONS — TABLET (641–1024) wg XD „RPDS STORE Tablet 14.09.2026”
   (ekran iPad–10, artboard 768×8352). Hero = statyczny kolaż 3×246×319
   (slider wyłącznie ≤640 — zob. scripts.js), podpisy 15 px, tytuł 30 px;
   sekcje 01/02/03: małe 273×352 + duże 480×640 (odstęp 15, flush), tekst pod
   zdjęciami na 12.5vw; siatka produktów 3 kolumny + niepełny ostatni rząd
   wyśrodkowany (flex).
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {

  /* ----- HERO: kolaż 3 zdjęć od góry, tekst pod nim ----- */
  .page-collections .collections-hero {
    display: block;
    padding: 192px 0 0;
    min-height: 0;
    gap: 0; }
  .page-collections .collections-hero-figs {
    width: 100%;
    overflow: visible;
    touch-action: auto; }
  .page-collections .collections-hero-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    transform: none !important;
    will-change: auto;
    animation: none; }
  .page-collections .collections-hero-fig {
    flex: none;
    max-width: none;
    width: auto; }
  .page-collections .collections-hero-media {
    aspect-ratio: auto; }
  .page-collections .collections-hero-media img,
  .page-collections .collections-hero-media .about-mock {
    height: auto;
    aspect-ratio: 246 / 319; }
  .page-collections .collections-hero-pos {
    margin-top: 15px;
    font-size: 15px;
    font-weight: 400;
    line-height: 22px; }
  .page-collections .collections-hero-pos-row {
    justify-content: flex-start;
    gap: 1.2em; }
  .page-collections .collections-hero-text {
    grid-column: auto;
    grid-row: auto;
    text-align: left;
    margin-top: 130px;
    padding: 0 12.5vw; }
  .page-collections .collections-hero-title {
    font-size: 30px;
    line-height: 40px;
    margin: 0; }
  .page-collections .collections-hero-desc {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 44px 0 0; }

  /* ----- SEKCJE OPISU (01/02/03): małe + duże zdjęcie, tekst pod spodem ----- */
  .page-collections .collections-essence {
    display: grid;
    column-gap: 15px;
    row-gap: 0;
    align-items: start;
    margin-top: 181px;
    padding: 0;
    max-width: none;
    min-height: 0; }
  .page-collections .collections-essence .about-sec-big,
  .page-collections .collections-essence .about-sec-small {
    margin-top: 0; }
  .page-collections .collections-hero + .collections-essence {
    margin-top: 327px; }
  .page-collections .collections-essence.about-sec--mirror {
    grid-template-columns: 0.569fr 1fr; }
  .page-collections .collections-essence.about-sec--essence {
    grid-template-columns: 1fr 0.569fr; }
  .page-collections .collections-essence .about-sec-big,
  .page-collections .collections-essence .about-sec-small {
    grid-row: 1; }
  .page-collections .collections-essence.about-sec--mirror .about-sec-small { grid-column: 1; }
  .page-collections .collections-essence.about-sec--mirror .about-sec-big { grid-column: 2; }
  .page-collections .collections-essence.about-sec--essence .about-sec-big { grid-column: 1; }
  .page-collections .collections-essence.about-sec--essence .about-sec-small { grid-column: 2; }
  .page-collections .collections-essence .about-sec-big img {
    aspect-ratio: 480 / 640; }
  .page-collections .collections-essence .about-sec-small img {
    aspect-ratio: 273 / 352; }
  .page-collections .collections-essence .collections-prod-cap {
    display: block;
    margin-top: 15px;
    font-size: 15px;
    line-height: 25px; }
  .page-collections .collections-essence .collections-prod-cap-name,
  .page-collections .collections-essence .collections-prod-cap-price {
    display: block; }
  .page-collections .collections-essence .about-pos {
    display: none; }
  .page-collections .collections-essence .about-sec-text {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 128px;
    padding: 0 12.5vw; }
  .page-collections .collections-essence .about-sec-text .about-label {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-collections .collections-essence .about-sec-text p {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }
  .page-collections .collections-essence .about-sec-text p + p {
    margin-top: 32px; }
  .page-collections .collections-essence .collections-shop-btn {
    display: inline-block;
    margin-top: 51px;
    font-size: 20px;
    line-height: 24px; }

  /* ----- SIATKA PRODUKTÓW: 3 kolumny 236 px (gap 15); każdy niepełny
     ostatni rząd (w tym para 7–8 z XD i wyniki filtrowania) wyśrodkowany
     flexem — bez sztywnych grid-column dla kafli 7/8 ----- */
  .page-collections .collections-objects {
    margin-top: 277px;
    padding: 0 15px 112px; }
  .page-collections .collections-objects-head {
    padding: 0;
    margin: 0; }
  .page-collections .collections-objects .objects-grid {
    column-gap: 15px;
    row-gap: 40px;
    padding: 0; }
  .page-collections .collections-objects .objects-grid .object-card {
    flex: 0 1 calc((100% - 30px) / 3); }
  .page-collections .collections-objects .object-card-img,
  .page-collections .collections-objects .object-card-mock {
    aspect-ratio: 236 / 319; }
  .page-collections .collections-objects .object-card-meta {
    padding-top: 15px; }
  .page-collections .collections-objects .object-card-name,
  .page-collections .collections-objects .object-card-price {
    font-size: 15px;
    font-weight: 400;
    line-height: 25px; }
  .page-collections .collections-objects .object-card-buy {
    font-size: 15px;
    font-weight: 400;
    line-height: 17px; }
  /* Pitch rzędu 424 jak w XD (podpis 65 px: 15 + 2 × 25) — bazowe
     `row-gap: 0.15em` + `margin-top: 0.1em` ceny dodawały 4 px na rząd. */
  .page-collections .collections-objects .object-card-row {
    row-gap: 0; }
  .page-collections .collections-objects .object-card-price {
    margin-top: 0; }
}

/* ==========================================================================
   OBJECTS (archiwum /objects/ + /object_type/*) — TABLET (641–1024)
   wg XD „RPDS Store Tablet 14.09.2026” (ekran iPad–9, 768×3168):
   siatka 3 kolumny 236×319 (gap 15), pierwszy rząd na y=192 (pod navbarem),
   niepełny ostatni rząd wyśrodkowany (flex — także po filtrowaniu);
   stopka dokładnie pod siatką.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {

  .page-objects {
    padding-top: 192px;
    padding-bottom: 112px; }
  .page-objects .objects-grid {
    max-width: none;
    margin: 0;
    padding: 0 15px;
    column-gap: 15px;
    row-gap: 40px; }
  .page-objects .objects-grid .object-card {
    flex: 0 1 calc((100% - 30px) / 3); }
  .page-objects .objects-grid .object-card-img,
  .page-objects .objects-grid .object-card-mock {
    aspect-ratio: 236 / 319; }
  .page-objects .objects-grid .object-card-meta {
    padding-top: 15px; }
  .page-objects .objects-grid .object-card-name,
  .page-objects .objects-grid .object-card-price {
    font-size: 15px;
    font-weight: 400;
    line-height: 25px; }
  .page-objects .objects-grid .object-card-buy {
    font-size: 15px;
    font-weight: 400;
    line-height: 17px; }
  /* Podpis pod zdjęciem = 65 px jak w XD (15 oddechu + 2 × 25), więc pitch
     rzędu 424 (192 → 616 → 1040). Bazowe `row-gap: 0.15em` + `margin-top:
     0.1em` ceny dodawały 4 px na rząd (3. rząd +8, stopka +12). */
  .page-objects .objects-grid .object-card-row {
    row-gap: 0; }
  .page-objects .objects-grid .object-card-price {
    margin-top: 0; }
}

/* ==========================================================================
   PRODUKT (/objects/<slug>/) — TABLET (641–1024) wg XD „RPDS STORE Tablet
   14.09.2026” (ekran iPad–6, 768×9093). Hero: [małe 273×352 | duże 480×640]
   od y=192; potem opis na 12.5vw; zdjęcie zakupu 480 wyśrodkowane (x=144,
   = 18.75vw), konfigurator 2 kolumny (materiały x=144 / x=384); spec:
   rząd [małe|tekst] + rząd [tekst|małe] + packshot 480 wyśrodkowany;
   editorial bez zdjęcia; custom [480|273] + tekst; FAQ: zdjęcie 480 + lista.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {

  /* ----- HERO ----- */
  .page-product .product-hero {
    display: block;
    min-height: 0;
    padding: 192px 0 0; }
  /* bazowe marginesy 60px figurek (desktop) nie obowiązują na tablecie */
  .page-product .product-hero-fig,
  .page-product .product-buy-media,
  .page-product .product-spec-media,
  .page-product .product-faq-media,
  .page-product .product-custom-media-fig,
  .page-product .product-editorial-media {
    margin-top: 0; }
  .page-product .product-hero-media {
    display: grid;
    grid-template-columns: 0.569fr 1fr;
    gap: 15px;
    width: 100%;
    align-items: start; }
  .page-product .product-hero-fig--small .product-hero-img {
    aspect-ratio: 273 / 352; }
  .page-product .product-hero-fig--main .product-hero-img {
    aspect-ratio: 480 / 640; }
  .page-product .product-hero-body {
    margin-top: 84px;
    padding: 0 12.5vw; }
  .page-product .product-hero-title {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-product .product-hero-tax {
    display: flex;
    flex-wrap: wrap;
    gap: 0 3.2em;
    margin: 15px 0 0;
    font-size: 15px;
    line-height: 25px; }
  .page-product .product-hero-tax-pair {
    display: inline-flex;
    gap: 1.2em; }
  .page-product .product-hero-tax-label,
  .page-product .product-hero-tax-value {
    font-size: 15px; }
  .page-product .product-hero-desc {
    font-size: 20px;
    line-height: 40px;
    margin-top: 61px;
    /* XD: cena dokładnie 68 px pod akapitem (bazowe `margin-bottom: 96px`
       dawało 96 — marginesy rodzeństwa zlewają się do wartości większej) */
    margin-bottom: 0;
    max-width: none; }
  .page-product .product-hero-price {
    font-size: 20px;
    line-height: 45px;
    margin: 68px 0 0; }
  .page-product .product-hero-price-note {
    font-size: 15px;
    line-height: 25px;
    margin: 0; }

  /* ----- ZAKUP (7.2): zdjęcie 480 px wyśrodkowane, konfigurator 2 kolumny ----- */
  .page-product .product-buy {
    display: flex;
    flex-direction: column;
    margin-top: 239px;
    padding: 0; }
  .page-product .product-buy-media {
    order: -1;
    width: 62.5%;
    margin: 0 auto; }
  .page-product .product-buy-media img {
    aspect-ratio: 480 / 640; }
  .page-product .product-buy-config {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    margin-top: 48px;
    padding: 0 18.75vw; }
  /* kolumny: Melamine (1) / Recycled (2); ILOŚĆ pełnym wierszem; pod nią
     stepper + CTA (prawa kolumna); nota i formularz NOTIFY ME pełną szerokością */
  .page-product .product-buy-config > p.product-buy-label:nth-of-type(1) { grid-area: 1 / 1; }
  .page-product .product-buy-config > p.product-buy-label:nth-of-type(2) { grid-area: 1 / 2; }
  .page-product .product-buy-config > p.product-buy-label:nth-of-type(3) { grid-area: 3 / 1 / 4 / 3; margin-top: 48px; }
  .page-product .product-buy-config > div.product-swatches:nth-of-type(1) { grid-area: 2 / 1; }
  .page-product .product-buy-config > div.product-swatches:nth-of-type(2) { grid-area: 2 / 2; }
  .page-product .product-buy-config > .product-qty { grid-area: 4 / 1; }
  .page-product .product-buy-config > .product-buy-cta,
  .page-product .product-buy-config > .product-buy-cta--muted {
    grid-area: 4 / 2;
    justify-self: end;
    align-self: end; }
  .page-product .product-buy-config > .product-buy-note,
  .page-product .product-buy-config > .product-notify,
  .page-product .product-buy-config > .product-notify-done {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
    margin-top: 47px; }
  .page-product .product-buy-label {
    font-size: 15px;
    line-height: 25px;
    text-transform: uppercase;
    margin: 0; }
  .page-product .product-swatches {
    display: flex;
    gap: 9px;
    margin: 7px 0 0; }
  .page-product .product-swatch {
    width: 48px;
    height: 48px; }
  .page-product .product-qty {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-top: 7px; }
  .page-product .product-qty-btn,
  .page-product .product-qty-value {
    font-size: 20px; }
  .page-product .product-buy-cta {
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0; }

  /* ----- SPEC (7.3): [małe|tekst] → [tekst|małe] → packshot 480 ----- */
  .page-product .product-spec {
    display: grid;
    /* Kolumny 273 / 192 / 273 px przy 768 — dokładnie jak w XD (małe zdjęcia
       273×352 na x=0 i x=495, tekst na x=288). Wcześniejsze 0.569fr dawało
       kolumnę 268 px (zdjęcie 5 px za wąskie, pitch rzędu 442 zamiast 448). */
    grid-template-columns: 273fr 192fr 273fr;
    column-gap: 15px;
    row-gap: 0;
    margin-top: 257px;
    padding: 0; }
  .page-product .product-spec-media--interior {
    grid-area: 1 / 1;
    margin: 0; }
  .page-product .product-spec-col {
    grid-area: 1 / 2 / 2 / 4;
    margin: 0; }
  .page-product .product-spec-col--lower {
    grid-area: 2 / 1 / 3 / 3;
    margin: 96px 0 0;
    padding-left: 18.75vw;
    justify-self: stretch; }
  .page-product .product-spec-media--material {
    display: block;
    grid-area: 2 / 3;
    margin: 96px 0 0;
    width: 100%; }
  .page-product .product-spec-media--interior img {
    aspect-ratio: 273 / 352; }
  .page-product .product-spec-media--material img {
    aspect-ratio: 273 / 352; }
  .page-product .product-spec-media--packshot {
    grid-area: 3 / 1 / 4 / 4;
    justify-self: center;
    width: 62.5%;
    margin: 240px 0 0; }
  .page-product .product-spec-media--packshot img {
    aspect-ratio: 480 / 640; }
  .page-product .product-spec-pair {
    margin: 0; }
  .page-product .product-spec-pair + .product-spec-pair {
    margin-top: 40px; }
  .page-product .product-spec-label {
    font-size: 20px;
    line-height: 40px;
    text-transform: uppercase;
    margin: 0; }
  .page-product .product-spec-text {
    font-size: 15px;
    line-height: 25px;
    margin: 0; }

  /* ----- EDITORIAL (7.4): bez zdjęcia, tekst na 18.75vw ----- */
  .page-product .product-editorial {
    display: block;
    margin-top: 96px;
    padding: 0; }
  .page-product .product-editorial-media {
    display: none; }
  .page-product .product-editorial-body {
    transform: none;
    padding: 0 18.75vw; }
  .page-product .product-editorial-title {
    font-size: 20px;
    line-height: 40px;
    text-transform: uppercase;
    margin: 0; }
  .page-product .product-editorial-text {
    font-size: 15px;
    line-height: 25px;
    margin-top: 72px; }

  /* ----- CUSTOM (7.5): [480 | 273] + tekst na 12.5vw ----- */
  .page-product .product-custom {
    display: flex;
    flex-direction: column;
    margin-top: 233px;
    padding: 0; }
  .page-product .product-custom-media {
    order: -1;
    display: grid;
    grid-template-columns: 1fr 0.569fr;
    gap: 15px;
    width: 100%; }
  .page-product .product-custom-media-fig--main img,
  .page-product .product-custom-media-fig--main .about-mock {
    aspect-ratio: 480 / 640; }
  .page-product .product-custom-media-fig--small img,
  .page-product .product-custom-media-fig--small .about-mock {
    aspect-ratio: 273 / 352; }
  .page-product .product-custom-body {
    /* kontener ma flex `gap: 32px` → 32 + 96 = 128 px pod zdjęciami (XD) */
    margin-top: 96px;
    padding: 0 12.5vw; }
  .page-product .product-custom-title {
    font-size: 20px;
    line-height: 40px;
    text-transform: uppercase;
    margin: 0; }
  .page-product .product-custom-text {
    font-size: 15px;
    line-height: 25px;
    margin-top: 72px; }
  .page-product .product-custom-cta {
    display: inline-block;
    /* akapit ma `margin-bottom: 24px` → 24 + 35 = 59 px do CTA (XD) */
    margin-top: 35px;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0; }

  /* ----- FAQ (7.6): zdjęcie 480 wyśrodkowane + lista na 18.75vw ----- */
  .page-product .product-faq {
    display: block;
    align-items: stretch;
    margin-top: 230px;
    padding: 0 0 229px; }
  .page-product .product-faq-media {
    display: block;
    width: 62.5%;
    margin: 0 auto; }
  .page-product .product-faq-media img,
  .page-product .product-faq-media .about-mock {
    aspect-ratio: 480 / 640; }
  .page-product .product-faq-list {
    margin-top: 48px;
    padding: 0 18.75vw; }
  .page-product .product-faq-item {
    margin: 0 0 37px; }
  .page-product .product-faq-item:last-child {
    margin-bottom: 0; }
  .page-product .product-faq-head {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .page-product .product-faq-label {
    font-size: 20px;
    line-height: 35px;
    text-transform: uppercase; }
  .page-product .product-faq-toggle {
    font-size: 20px;
    line-height: 35px; }
}

/* ==========================================================================
   ABOUT — TABLET (641–1024) wg XD „RPDS STORE Tablet 14.09.2026”
   (ekran iPad–3, 768×10464): hero 100vh (tytuł 50 px / podtytuł 20 px, czarne
   na jasnym zdjęciu), THE ESSENCE ×2 ([480|273] i [273|480] + podpisy + tekst
   pod zdjęciami), filary jako 3 bloki tekstu, portret full-bleed 768×672,
   2 karty produktów + tekst, kontakt jako 3 bloki.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {

  /* ----- HERO ----- */
  .page-about .about-hero {
    height: 100vh;
    min-height: 0; }
  .page-about .about-hero-inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 46.4%;
    width: auto;
    max-width: none;
    transform: none;
    padding: 0 12.5vw;
    text-align: center; }
  .page-about .about-hero-title {
    font-size: 50px;
    line-height: 50px;
    margin: 0; }
  .page-about .about-hero-sub {
    font-size: 20px;
    line-height: 40px;
    margin-top: 9px; }

  /* reset starych reguł tabletowych ≤1024 dla siatek */
  .page-about .about-grid > * + * {
    margin-top: 0; }

  /* ----- THE ESSENCE ×2: zdjęcia + podpisy, tekst pod spodem ----- */
  /* 2026-10-01 (zgł. klienta „na tablecie stronka się rozjechała — popraw
     zdjęcia i teksty”): strony zdjęć wg makiety tabletu —
     • essence (1. sekcja): DUŻE z lewej (480×640) + MAŁE z prawej (273×352),
       podpis .about-pos pod małym (x=495 w XD);
     • mirror (2. sekcja): MAŁE z lewej + DUŻE z prawej, podpis pod małym (x=0).
     Wcześniej obie sekcje były lustrzanie odwrócone (duże po złej stronie). */
  .page-about .about-sec {
    display: grid;
    grid-template-columns: 0.569fr 1fr;
    column-gap: 15px;
    row-gap: 0;
    align-items: start;
    min-height: 0;
    margin-top: 224px;
    padding: 0; }
  .page-about .about-sec + .about-sec {
    margin-top: 152px; }
  .page-about .about-sec--essence {
    grid-template-columns: 1fr 0.569fr; }
  .page-about .about-sec .about-sec-big,
  .page-about .about-sec .about-sec-small {
    margin-top: 0;
    width: auto;
    max-width: none; }
  .page-about .about-sec--mirror .about-sec-small { grid-area: 1 / 1; }
  .page-about .about-sec--mirror .about-sec-big { grid-area: 1 / 2; }
  .page-about .about-sec--essence .about-sec-big { grid-area: 1 / 1; }
  .page-about .about-sec--essence .about-sec-small { grid-area: 1 / 2; }
  .page-about .about-sec .about-sec-big img,
  .page-about .about-sec .about-sec-big .about-mock {
    aspect-ratio: 480 / 640; }
  .page-about .about-sec .about-sec-small img,
  .page-about .about-sec .about-sec-small .about-mock {
    aspect-ratio: 273 / 352; }
  .page-about .about-sec .about-pos {
    width: auto;
    margin: 15px 0 0;
    font-size: 15px;
    line-height: 22px; }
  .page-about .about-sec--mirror .about-pos {
    margin-left: 0;
    /* małe zdjęcie dotyka lewej krawędzi → etykieta z wcięciem 15 px
       (makieta: flush x=0); zgł. klienta 06.10.2026 */
    padding-left: 15px; }
  .page-about .about-sec .about-sec-text {
    grid-area: 2 / 1 / 3 / 3;
    margin-top: 128px;
    padding: 0 12.5vw;
    flex: none; }
  .page-about .about-sec .about-sec-text .about-label {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-about .about-sec .about-sec-text p {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }
  .page-about .about-sec .about-sec-text p + p {
    margin-top: 32px; }
  /* Sekcja 2 (mirror) nie ma etykiety — akapit jest pierwszym dzieckiem, więc
     margines 32 px od etykiety by niepotrzebny. XD: tekst dokładnie 128 px pod
     zdjęciem (jak w sekcji 1 z etykietą). */
  .page-about .about-sec .about-sec-text > p:first-child {
    margin-top: 0; }

  /* ----- FILARY: trzy bloki tekstu ----- */
  .page-about .about-pillars {
    display: block;
    min-height: 0;
    margin-top: 184px;
    padding: 0 12.5vw; }
  .page-about .about-pillar {
    margin: 0; }
  .page-about .about-pillar + .about-pillar {
    margin-top: 80px; }
  .page-about .about-pillars .about-label {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-about .about-pillars .about-text p {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }

  /* ----- DESIGNED BY ROBERT PLUDRA: portret full-bleed, tekst pod nim ----- */
  .page-about .about-designed {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-top: 184px;
    padding: 0; }
  .page-about .about-designed-portrait {
    order: -1;
    flex: none;
    /* pełny bleeding wg XD — zdjęcie dosięga OBU krawędzi ekranu
       (bez tego align-self:center z reguły bazowej + naturalna szerokość
       780 px zostawiały białe pasy przy szerokościach >781 px) */
    align-self: stretch;
    width: 100%;
    margin: 0; }
  .page-about .about-designed-portrait img {
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 768 / 672;
    object-fit: cover;
    object-position: 50% 0%; }
  .page-about .about-designed-text {
    flex: none;
    /* kontener ma flex `gap: 40px` → 40 + 67 = 107 px pod zdjęciem (XD) */
    margin-top: 67px;
    padding: 0 12.5vw; }
  .page-about .about-designed-text .about-label {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-about .about-designed-text p {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }
  .page-about .about-designed-text .about-cta {
    margin-top: 40px;
    font-size: 20px; }

  /* ----- SUSTAINABLE: 2 karty + tekst ----- */
  .page-about .about-sustainable {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 0;
    min-height: 0;
    margin-top: 205px;
    padding: 0; }
  .page-about .about-sustainable-card1 { grid-area: 1 / 1; margin-top: 0; }
  .page-about .about-sustainable-card2 { grid-area: 1 / 2; margin-top: 0; }
  .page-about .about-sustainable .about-card-img,
  .page-about .about-sustainable .about-mock {
    aspect-ratio: 370 / 480; }
  .page-about .about-sustainable .about-card-caption {
    margin-top: 15px;
    padding-right: 100px;
    min-height: 0; }
  /* lewa karta full-bleed → podpis z wcięciem 15 px wg XD tablet
     (metryka: zdjęcia x=0 / x=400, podpisy x=15 / x=400) */
  .page-about .about-sustainable-card1 .about-card-caption {
    padding-left: 15px; }
  .page-about .about-sustainable .about-card-name {
    font-size: 15px;
    line-height: 25px; }
  .page-about .about-sustainable .about-card-price {
    font-size: 15px;
    line-height: 25px; }
  .page-about .about-sustainable .about-card-buy {
    font-size: 15px;
    line-height: 17px;
    top: 32px; }
  .page-about .about-sustainable-text {
    grid-area: 2 / 1 / 3 / 3;
    margin-top: 127px;
    padding: 0 12.5vw; }
  .page-about .about-sustainable-text .about-label {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-about .about-sustainable-text p {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }

  /* ----- KONTAKT: nagłówek + 3 bloki ----- */
  .page-about .about-contact {
    display: block;
    margin: 264px 0 0;
    padding: 0 12.5vw 165px; }
  .page-about .about-contact-head { margin: 0; }
  .page-about .about-contact-head .about-label {
    font-size: 20px;
    line-height: 40px;
    margin: 0; }
  .page-about .about-contact-head p {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 32px 0 0; }
  .page-about .about-contact-col { margin-top: 0; }
  .page-about .about-contact-col1 { margin-top: 176px; }
  .page-about .about-contact-col + .about-contact-col { margin-top: 176px; }
  .page-about .about-contact-col .about-label {
    font-size: 20px;
    line-height: 40px;
    margin: 0 0 32px; }
  .page-about .about-contact-col p {
    font-size: 20px;
    line-height: 40px;
    max-width: none;
    margin: 0; }
  /* rytm tekstów 1:1 z XD: E-MAIL/PHONE/STUDIO ADDRESS w kroju 20/40 jak
     treść, puste wiersze = 40 px (przed PHONE, przed notką o wizytach,
     między akapitami w 03); pierwszy wiersz bloku trzyma 32 px od etykiety */
  .page-about .about-contact-label-sm {
    font-size: 20px;
    line-height: 40px;
    margin: 40px 0 0 !important; }
  .page-about .about-contact-col > p:nth-child(2) {
    margin-top: 0 !important; }
  .page-about .about-contact-note {
    margin-top: 40px !important; }
  .page-about .about-contact-col3 p + p {
    margin-top: 40px; }
}

/* ==========================================================================
   CART / CHECKOUT / LEGAL — TABLET (641–1024). Ekranów XD dla tych stron nie
   ma; wyrównanie do konwencji sklepu na tablecie: marginesy boczne 12.5vw
   (96 px @768, jak wszystkie strony sklepu), dolne światło 112 px i skala
   typograficzna 20 px (wewnętrzne proporcje em bez zmian).
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
  .rp-cart,
  .rp-checkout,
  .rp-legal {
    font-size: 20px;
    padding: 0 12.5vw 112px; }
}

/* ==========================================================================
   PODPISY POZYCYJNE POD MAŁYMI ZDJĘCIAMI (about-pos) — ≤1024 px, wg XD:
   „Top     PRODUCT NAME” = etykieta + wartość oddzielone w projekcie pięcioma
   spacjami przy fs 15 (≈21 px) — wartość startuje ~47 px od krawędzi zdjęcia.
   Stała kolumna 70 px (desktop) wypychała wartość o ~36 px za daleko i na
   mobile wychodziła ona poza małe zdjęcie (i poza ekran). Teraz kolumna
   etykiety = max-content + 21 px, a wartość zawija się w szerokości zdjęcia.
   Desktop (>1024) bez zmian.
   ========================================================================== */
@media (max-width: 1024px) {
  .about-pos-row {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 21px; }
}

/* ==========================================================================
   PODSTRONY KOLEKCJI (/collection/<slug>/ — WEDGE / SATURN / CIRCULAR)
   wg makiety XD „RPDS STORE Main NEW” (desktop „Web 1920 – 18/20/21”; ekran
   c778f975-… = SATURN). Sekcja eseju używa tego samego komponentu co sekcje
   2a/2b/2c strony Collections (.collections-essence — wszystkie reguły wyżej
   działają), poniżej tylko odstępy podstrony:
   - desktop: treść startuje ~240 px od góry (makieta: zdjęcia na y=240),
     bez 14vh pierwszego rzędu siatki (na Collections robi ono miejsce pod navbar);
   - tablet: 192 px (konwencja podstron sklepu), mobile: 160 px (blok wyżej);
   - rząd produktów: ten sam .objects-grid (filtr is_tax collection),
     odstęp od sekcji 360 px desktop / 160 tablet / 96 mobile.
   ========================================================================== */

.page-collection {
  background-color: #fff; }

@media (min-width: 1025px) {
  .page-collection .collections-essence {
    margin-top: 240px;
    grid-template-rows: 0 auto; } }

@media (min-width: 641px) and (max-width: 1024px) {
  .page-collection .collections-essence {
    margin-top: 192px; } }

/* kotwica SHOP NOW → rząd produktów (pod stałym navbarem) */
.collections-collection-products {
  scroll-margin-top: 180px; }
  @media (max-width: 640px) {
    .collections-collection-products {
      scroll-margin-top: 140px; } }

@media (min-width: 1025px) {
  .page-collection .collections-collection-products {
    margin-top: 360px; } }

@media (max-width: 1024px) {
  .page-collection .collections-collection-products {
    margin-top: 160px; } }

@media (max-width: 640px) {
  .page-collection .collections-collection-products {
    margin-top: 96px; } }

/* ==========================================================================
   STORE (podstrona sklepu) — SKALA TEKSTU NA DESKTOPIE (≥1025 px) wg XD
   „Web 1920 – 13” (artboard 1920; podstawa body 24 px → 1.25em = dokładnie
   30 px). W makiecie CAŁA typografia podstrony (akapity sekcji, bloki
   OBJECTS:/COLLECTIONS:, opisy kolekcji, picks, materiały, studio) jest
   30/45, a kolumna tekstu liczy 570 px (manifest pod hero — 660 px).
   Dotąd cała rodzina miała 1.15em (27.6 px), a kolumna 19em = 524 px, przez co
   manifest łamał się na 8 wierszy zamiast 7 (zgł. klienta 06.10.2026:
   „popraw jeszcze ten tekst”; decyzja klienta: rozszerzyć kolumnę i dać 30/45).
   Szerokości kolumn są już zapisane w em (19em), więc po zmianie rozmiaru
   dają same 570 px — nadpisać trzeba tylko manifest (22em = 660 px).
   Mobile (≤640) i tablet (641–1024) mają własne, zweryfikowane wartości
   w swoich blokach wyżej — te reguły ich nie dotyczą.
   ========================================================================== */
@media (min-width: 1025px) {
  .page-store .store-section .store-section-desc,
  .page-store .store-section-block-link,
  .page-store .store-feature-title,
  .page-store .store-feature-desc,
  .page-store .store-feature .collections-shop-btn,
  .page-store .store-picks-title,
  .page-store .store-picks-desc,
  .page-store .store-materials-title,
  .page-store .store-materials-desc,
  .page-store .store-studio-title,
  .page-store .store-studio-desc,
  .page-store .store-studio-btn {
    font-size: 1.25em; }

  /* manifest pod hero: w XD pole ma 660 px (x=1020), reszta kolumn 570 px */
  .page-store .store-section:first-child .store-section-desc {
    max-width: 22em; }

  /* Podpisy pod zdjęciami (0.75em = 18 px) i tekst kafelków produktów —
     w XD ta sama podstawa ma 20 px (0.8333em): podpisy pod zdjęciami fs=20
     (pitch wierszy 29 px), „PRODUCT NAME / price XXX euro” 20/30, a link
     SHOP NOW w kaflu 20/24. Zgł. klienta 06.10.2026 („dopasuj podpisy i kafelki
     do 20 px na desktopie”). Szerokości/odstępy podpisów pozostają bez zmian. */
  .page-store .store-section-label-row,
  .page-store .store-materials .about-pos,
  .page-store .store-picks .object-card-name,
  .page-store .store-picks .object-card-price,
  .page-store .store-picks .object-card-buy {
    font-size: 0.8333em; }
  .page-store .store-picks .object-card-buy {
    line-height: 1.2; }
}

/* ==========================================================================
   STOPKA NA EKRANIE → STAŁA NAWIGACJA SKLEPU CHOWA SIĘ
   Zgł. klienta 06.10.2026: „po zjechaniu na stopkę nie było już widać napisu
   rpds i hamburgera i tak samo navbaru” (każde urządzenie). Czarna stopka
   sklepu zajmuje cały ekran, a przyklejony od góry pasek (navbar #access.store-nav
   z logo „RPDS STORE"/pozycjami menu na tablecie i desktopie; .rp-mbar--store
   z logo + hamburgerem na telefonie) rysował się na jej treści.
   Klasę `rp-nav-at-footer` (na <html>) przełącza scripts.js, gdy górna
   krawędź .store-footer wjedzie w viewport — powrót w górę strony oddaje pasek.
   Zakres celowo tylko sklep: strona studia nie ma hamburgera ani słowa RPDS
   i tam pasek zostaje (decyzja klienta 2026-10-01).
   ========================================================================== */
#access.store-nav,
.rp-mbar--store {
  transition: opacity 0.25s ease, visibility 0s linear; }
html.rp-nav-at-footer #access.store-nav,
html.rp-nav-at-footer .rp-mbar--store {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s; }

/* ==========================================================================
   ABOUT NA DESKTOPIE (≥ 1025 px) wg makiety XD „RPDS STORE Main NEW — 10.08”
   — ekran „Web 1920 – 19” (artboard 1920×9120, 9b3ecc20-e181-4ae6-8571-86a0d9eb2fb8).
   Wcześniej desktopowy pass objął TYLKO sekcję kontaktu — reszta strony
   renderowała się jeszcze w skali przedmakietowej (20–22 px, kontener 1200 px,
   zdjęcia 50vw, „14vh”), więc cały układ odstawał od makiety. Poniżej pełna
   geometria z makiety; wszystkie wartości to px artboardu 1920 przeliczone na
   vw (1920 → 100vw), typografia w em (baza body 24 px → 1.25em = 30 px),
   odstępy wewnątrz bloków tekstowych w em (skalują się z typografią).
   Skala z makiety: WSZYSTKO 30 px — labele 30/40, treść 30/45, podpisy pod
   zdjęciami i podpis kafelka 20 px, „SHOP NOW” 20/24. W XD `letter-spacing`
   jest zerowy i przy takim nasza Helvetica trafia szerokości linii co do
   dziesiątej części piksela (np. „DESIGNED BY ROBERT PLUDRA” 466,8 px) —
   dlatego w tym bloku zdejmujemy odziedziczone 0.02em.
   Rytm pionowy (y bezwzględne @1920): hero 1080 → zdjęcia s1 1320 (240),
   label 1699 / treść 1795 (label + 96), zdjęcia s2 2520 (419 od s1), filary
   3840 / 3936, designed 4730 (portret od 4560 = −170), sustainable 6000,
   kontakt 7080, stopka 8040 (kontakt + 297).
   Mobile (≤640) i tablet (641–1024) mają własne, zweryfikowane bloki wyżej —
   te reguły ich nie dotyczą (wszystkie selektory pod `.page-about`, więc
   /store/collections/ i podstrony kolekcji zostają bez zmian).
   ========================================================================== */
@media (min-width: 1025px) {

  /* ----- HERO: kadr z makiety -----
   * Maska 1920×1080, bitmapa 3772×2122 wstawiona jako 2318×1304 @ (−176, −193)
   * → zdjęcie jest powiększone 1,207× i przycięte z każdej strony (makieta
   * pokazuje węższy wycinek niż „cover” na pełnym kadrze). Asset desktopowy
   * podsyła <picture> w about.php (rp-about-hero-lg.webp). */
  .page-about .about-hero-img {
    inset: auto;
    left: -9.1667%;
    top: -17.8704%;
    width: 120.7292%;
    height: 120.7407%;
    max-width: none; } /* globalne `img { max-width: 100% }` ścinało kadr */

  /* ----- SEKCJE ZE ZDJĘCIAMI (THE ESSENCE / wariant lustrzany) -----
   * Makieta: duże zdjęcie 585×781 (3:4) + małe 360×480 (3:4) 15 px dalej,
   * małe dochodzi do prawej krawędzi okna (essence) lub do lewej (mirror);
   * kolumna tekstu 570 px. Szczyt zdjęć = sekcja + 240 px. */
  .page-about .about-sec {
    display: grid;
    min-height: 0;
    gap: 0;
    align-items: start;
    padding: 12.5vw 0 0; } /* 240 px nad zdjęciami */
  .page-about .about-sec + .about-sec {
    margin-top: 21.3542vw; } /* 410 px od dołu tekstu s1 (y=2520) */
  .page-about .about-sec--essence {
    /* [tekst 0…960] [duże 960…1545] [15 px] [małe 1560…1920] */
    grid-template-columns: 50vw 30.46875vw 0.78125vw 18.75vw; }
  .page-about .about-sec--mirror {
    /* [małe 0…360] [15 px] [duże 375…960] [tekst 960…1920]
     * (zdjęcia startują razem z sekcją — makieta: szczyt 2520) */
    padding-top: 0;
    grid-template-columns: 18.75vw 0.78125vw 30.46875vw 50vw; }
  .page-about .about-sec .about-sec-big {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin-top: 0; }
  .page-about .about-sec .about-sec-small {
    grid-column: 4;
    grid-row: 1;
    width: 100%;
    margin-top: 0; }
  .page-about .about-sec--mirror .about-sec-big {
    grid-column: 3; }
  .page-about .about-sec--mirror .about-sec-small {
    grid-column: 1;
    order: 0; }
  .page-about .about-sec .about-sec-big img,
  .page-about .about-sec .about-sec-big .about-mock,
  .page-about .about-sec .about-sec-small img,
  .page-about .about-sec .about-sec-small .about-mock {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4; } /* 585×780 i 360×480 (makieta 781 — 1 px różnicy) */

  /* ----- podpisy pozycyjne („Top     PRODUCT NAME”) -----
   * XD trzyma je jako JEDEN tekst: etykieta + pięć spacji + wartość, czyli
   * wartość startuje 26,5 px za etykietą (przy 20 px). Dlatego zamiast
   * sztywnej kolumny 70 px: kolumna max-content + 26,5 px odstępu. */
  .page-about .about-pos {
    font-size: 0.8333em; /* 20 px */
    line-height: 1.45;   /* rozstaw wierszy 29 px jak w XD */
    letter-spacing: normal;
    margin-top: 15px; }  /* 15 px pod zdjęciem */
  .page-about .about-pos-row {
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1.325em; } /* 26,5 px = pięć spacji */
  /* ----- PODPIS W SEKCJI LUSTRO: dokowany z PRAWEJ, końce linii równo -----
   * zgł. klienta 09.10.2026: „nie o to chodziło, dalej mają być z prawej strony
   * ale równo przyczepione końce" (poprzednia próba przeniosła podpis na lewą
   * krawędź zdjęcia — nie o to chodziło; makieta „Web 1920 – 19" ma ten podpis
   * flush przy lewej, my zostajemy przy prawej wg decyzji z 06.10.2026).
   * Podpis stoi więc tam, gdzie stał: dokowany do PRAWEJ krawędzi małego zdjęcia
   * regułą bazową `.about-sec--mirror .about-pos { width: fit-content;
   * margin-left: auto }` — przy oknie 1920 px pudełko 125..360 px przy zdjęciu
   * 0..360 px (prawa krawędź dokładnie na krawędzi zdjęcia).
   * Wadą była RAGGED PRAWA: siatka wiersza `max-content minmax(0, 1fr)` daje
   * KAŻDEJ linii własną szerokość kolumny etykiety („Top" 32,2 px, „Right"
   * 46,7 px), więc wartość pierwszej linii lądowała na x=183,8 i kończyła się
   * na 345,6 px, a drugiej na 198,2 → 360 px. Na zrzucie klienta (skala 0,847)
   * prawy koniec pierwszej linii był 14 px przed krawędzią zdjęcia, drugiej
   * dokładnie na niej.
   * `text-align: right` na wartości wyrównuje oba końce do prawej krawędzi
   * kolumny, czyli do prawej krawędzi zdjęcia: oba wiersze kończą się na 360 px
   * (zmierzone: 360,0 i 360,0), a etykiety zostają w kolumnie przy lewej —
   * „Top" i „Right" na wspólnym x jak w makiecie. Działa też, gdy w ACF wpisane
   * są różne nazwy w `caption_top` / `caption_side`: końce zawsze się zbiegają.
   * Tylko sekcja lustrzana — sekcja 1 jest dokowana do LEWEJ krawędzi zdjęcia
   * (makieta: x=1560) i zostaje wyrównana do lewej. */
  .page-about .about-sec--mirror .about-pos-value {
    text-align: right; }

  /* ----- tekst w sekcjach ze zdjęciami ----- */
  .page-about .about-sec .about-sec-text {
    grid-column: 1;
    grid-row: 1;
    padding-left: 17.1875vw; /* x = 330 */
    padding-right: 0;
    margin-top: 19.7396vw;   /* 379 px → label na zdjęcie + 379 */
    align-self: start; }
  .page-about .about-sec--mirror .about-sec-text {
    grid-column: 4;
    padding-left: 3.125vw;   /* x = 1020 */
    margin-top: 0; }         /* w mirror tekst startuje z górą zdjęć */
  .page-about .about-sec .about-sec-text .about-label,
  .page-about .about-sec .about-sec-text p {
    font-size: 1.25em;       /* 30 px */
    max-width: 19em;         /* 570 px */
    margin: 0; }
  .page-about .about-sec .about-sec-text .about-label {
    line-height: 1.3333;     /* 40 px */
    letter-spacing: normal;
    margin-bottom: 1.8667em; /* 56 px → treść na label + 96 */ }
  .page-about .about-sec .about-sec-text p {
    line-height: 1.5; }      /* 45 px */

  /* ----- TRZY FILARY: 3× 390 px @ 240 / 765 / 1290 (odstęp 135 px) ----- */
  .page-about .about-pillars {
    display: grid;
    min-height: 0;
    gap: 0;
    align-items: start;
    max-width: none; /* .about-grid dawał 1200 px — vw-kolumny by się nie mieściły */
    grid-template-columns: repeat(3, 20.3125vw);
    column-gap: 7.03125vw;
    padding: 0 12.5vw;
    margin-top: 28.125vw; } /* 540 px od dołu sekcji 2 (y=3840) */
  /* ----- WYRÓWNANIE FILARÓW -----
   * zgł. klienta 09.10.2026: „mam wrażenie że te 3 teksty nie są równo".
   * Etykieta (01 / TOOL-FREE LOGIC) łamie się na 1 albo 2 linie zależnie od
   * języka i szerokości — zmierzone: EN @1800 → 1/2/1, EN @1680 → 1/2/2,
   * PL @1920 → 2/2/1, PL @1025 → 2/3/2. Ponieważ etykieta stała w normalnym
   * przepływie, akapit w kolumnie z zawiniętą etykietą startował o 40 px
   * (1 linia etykiety) niżej niż w pozostałych: EN @1800 akapity szły
   * 3927 / 3967 / 3927 px, PL @1920 — 4159 / 4159 / 4119 px.
   * `display: contents` na kolumnie wstawia etykietę i akapit WPROST do siatki
   * sekcji, więc etykiety trafiają do wspólnego wiersza 1, a akapity do
   * wspólnego wiersza 2 — wszystkie trzy akapity startują w jednej linii przy
   * każdej szerokości i w obu językach. Gdy wszystkie etykiety są jednolinijkowe
   * wiersz 1 = 40 px + margines 56 px = 96 px, czyli bez zmian względem
   * makiety (XD: etykieta y=3840, akapit y=3936). */
  .page-about .about-pillar {
    display: contents;
    margin: 0; }
  .page-about .about-pillar > * {
    grid-row: 2; }
  .page-about .about-pillar > .about-label {
    grid-row: 1; }
  /* pozycje kolumn z siatki 12-kolumnowej trzeba przenieść na 3 kolumny —
     na DZIECI kolumny, bo rodzic z `display: contents` nie generuje pudełka
     i jego własne `grid-column` jest ignorowane */
  .page-about .about-pillar-1 > * {
    grid-column: 1; }
  .page-about .about-pillar-2 > * {
    grid-column: 2; }
  .page-about .about-pillar-3 > * {
    grid-column: 3; }
  .page-about .about-pillars .about-text p,
  .page-about .about-pillars .about-text p.about-label {
    font-size: 1.25em;
    max-width: 13em; /* 390 px */
    margin: 0; }
  .page-about .about-pillars .about-text p {
    line-height: 1.5; }
  /* UWAGA: `.about-text p` łapie też sam label (jest <p class="about-label">),
     więc selektor labela musi mieć typ + klasę labela (0,4,1) — inaczej reguła
     `… p { line-height: 1.5; margin: 0 }` (0,3,1) bije label (0,3,0). */
  .page-about .about-pillars .about-text p.about-label {
    line-height: 1.3333;     /* 40 px */
    letter-spacing: normal;
    margin-bottom: 1.8667em; /* 56 px → treść na label + 96 */ }
  /* ----- ETYKIETY FILARÓW W PL O 10 % MNIEJSZE -----
   * zgł. klienta 09.10.2026 (po wyrównaniu akapitów): „tak pomniejsz tak żeby
   * ładnie wyglądało". Polskie etykiety są dłuższe od angielskich i przy 30 px
   * nie mieszczą się w 390 px kolumnie — zmierzone szerokości bez zawijania:
   * „01 / LOGIKA BEZ NARZĘDZI" 393,5 px, „02 / UCZCIWOŚĆ MATERIAŁU" 421,2 px
   * („03 / LOKALNA PRODUKCJA" 389 px mieści się na styk), dlatego pierwsze dwie
   * łamały się na 2 linie. EN mierzy 331 / 373 / 366 px i makieta
   * „Web 1920 – 19" jest w EN, więc zmniejszamy WYŁĄCZNIE PL — klasę `pl`
   * dokłada `append_language_class()` w `functions.php` (z ICL_LANGUAGE_CODE).
   * 27 px (1.125em) to najmniejszy stopień, przy którym najdłuższa etykieta
   * mieści się w kolumnie: 379 px przy 390 px @1920 → zapas 11 px, a odstępstwo
   * od makiety zostaje minimalne (30 → 27 px). Przy 1920 wszystkie trzy etykiety
   * są jednolinijkowe, czyli wiersz 1 siatki ma znowu 40 px + 56 px = 96 px,
   * dokładnie jak w EN i w makiecie.
   * `line-height: 1.4815` (nie 1.3333) utrzymuje wiersz 40 px także po
   * zmniejszeniu pisma: 27 × 1.4815 = 40 px, i proporcjonalnie 35 px przy
   * 21 px roota (1025–1440), czyli bez zmian względem stanu poprzedniego.
   * `margin-bottom: 2.0741em` z tego samego powodu: `1.8667em` liczy się od
   * stopnia pisma etykiety, więc po zmniejszeniu dałoby 50,4 px zamiast 56 px
   * i akapity w PL stałyby 5,6 px wyżej niż w EN (rytm 90,4 zamiast 96 z makiety).
   * 56 / 27 = 2.0741 → wiersz 40 px + 56 px = 96 px, w każdym języku i przy
   * każdej szerokości (przy 21 px roota: 35 px + 49 px = 84 px, tyle co przedtem).
   * `max-width: none` jest konieczne: `13em` liczy się od stopnia pisma
   * elementu, więc po zmniejszeniu dałoby 351 px (13 × 27) i etykieta łamałaby
   * się dalej. Bez `max-width` pudełkiem jest kolumna siatki (390 px @1920) —
   * tyle samo, co dawało `13em` przy 30 px. Etykieta nie ma ani tła, ani
   * obramowania, więc szersze pudełko nie jest widoczne.
   * Poniżej ≈1880 px szerokości okna tekst i tak się złamie (kolumna kurczy się
   * szybciej niż pismo, bo jest w `vw`, a pismo w `em`) — wtedy działa
   * wyrównanie akapitów z `display: contents` wyżej, więc układ zostaje równy. */
  body.pl .page-about .about-pillars .about-text p.about-label {
    font-size: 1.125em;       /* 27 px */
    line-height: 1.4815;      /* 40 px */
    margin-bottom: 2.0741em;  /* 56 px */
    max-width: none; }

  /* ----- DESIGNED BY ROBERT PLUDRA -----
   * Portret 840 px szeroki (prawa połowa), 170 px WYŻEJ niż tekst; źródło
   * 2:3 przycinane od góry (XD: y=4560). Tekst 630 px (x=330), dwa akapity
   * rozdzielone pustym wierszem (45 px).
   *
   * WYSOKOŚĆ PORTRAETU = WYSOKOŚĆ BLOKU TEKSTU (zgł. klienta 09.10.2026:
   * „w sekcji about przy zdjęciu roberta tekst trochę wystaje do dołu").
   * Wcześniej wysokość zdjęcia była sztywnym 49,1979vw (944,6 px @1920),
   * a wysokość tekstu zależy od zawijania (em + szerokość kolumny), więc
   * tylko przy 1920 px obie kończyły się prawie równo (CTA 21 px pod zdjęciem,
   * dokładnie jak w makiecie). Im węższe okno, tym bardziej tekst wystawał:
   * przy 1600 px o 150 px, przy 1530 o 269 px, przy 1440 o 305 px, a przy
   * 1025 (jeszcze desktop) o 554 px — tekst biegł daleko pod zdjęciem.
   * Teraz obie kolumny dzielą JEDEN wiersz siatki: figura rozciąga się do
   * wysokości wiersza (align-self: stretch), a jej dolna krawędź jest zawsze
   * równa dolnej krawędzi tekstu. Zdjęcie ma `position: absolute` w figurze,
   * żeby jego naturalna proporcja (3840×5760 → 1,5×szerokości) nie rozpychała
   * wiersza; `min-height: 49,1979vw` zachowuje sylwetkę z makiety na bardzo
   * szerokich ekranach (tam wiersz rośnie z vw, nie z tekstu).
   * Odstęp 170 px przeniesiony z figury (margin-top: −8,8542vw) na kolumnę
   * tekstu (margin-top: +8,8542vw), a margines sekcji zmniejszony o tę samą
   * wartość, żeby CAŁA kompozycja (zdjęcie i tekst) została dokładnie tam,
   * gdzie była — sekcja obejmuje teraz także te 170 px, które wcześniej
   * zdjęcie wystawało ponad nią. */
  .page-about .about-designed {
    display: grid;
    min-height: 0;
    gap: 0;
    align-items: stretch;
    grid-template-columns: 56.25vw 43.75vw; /* tekst 0…1080, portret 1080…1920 */
    padding: 0;
    margin-top: 18.4375vw; } /* 354 px od filarów (524 − 170) */
  .page-about .about-designed-text {
    grid-column: 1;
    padding-left: 17.1875vw; /* x = 330 */
    padding-right: 0;
    /* 170 px @1920 — w makiecie tekst startuje o tyle niżej niż zdjęcie;
       wcześniej stało to jako ujemny margines figury (patrz wyżej). */
    margin-top: 8.8542vw; }
  .page-about .about-designed-text .about-label,
  .page-about .about-designed-text p {
    font-size: 1.25em;
    max-width: 21.2em; /* 636 px — makieta łamie akapit na 630…635 px */
    margin: 0; }
  .page-about .about-designed-text .about-label {
    line-height: 1.3333;
    letter-spacing: normal;
    margin-bottom: 1.8667em; }
  .page-about .about-designed-text p {
    line-height: 1.5; }
  .page-about .about-designed-text p + p {
    margin-top: 1.5em; } /* pusty wiersz między akapitami */
  .page-about .about-designed-text .about-cta {
    display: inline-block;
    font-size: 1.25em;
    line-height: 1.2;
    letter-spacing: normal;
    margin-top: 2.667em; /* 80 px pod treścią (CTA y=5491) */ }
  .page-about .about-designed-portrait {
    grid-column: 2;
    position: relative;
    align-self: stretch; /* dolna krawędź = dolna krawędź tekstu */
    width: 100%;
    /* sylwetka z makiety (944,6 px @1920) — na ekranach szerszych niż ~2100 px
       to ta wartość, a nie tekst, wyznacza wysokość wiersza */
    min-height: 49.1979vw;
    margin-top: 0; }
  .page-about .about-designed-portrait img {
    /* absolut, żeby naturalna proporcja zdjęcia (1,5× szerokości) nie
       rozpychała wiersza siatki — wysokość daje rozciągnięta figura */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0; } /* XD kadruje od góry */

  /* ----- SUSTAINABLE PRACTICE -----
   * Karta 1: 480×600 (4:5) przy lewej krawędzi, karta 2: 450×600 (3:4) od
   * x=510; tekst (570 px @ x=1020) startuje z górą kart. Podpisy 20/30 pod
   * kartami (kart 1 wcięta 30 px), „SHOP NOW” 20/24 przy prawym brzegu karty. */
  .page-about .about-sustainable {
    display: grid;
    min-height: 0;
    gap: 0;
    align-items: start;
    /* [karta 0…480] [30] [karta 510…960] [tekst 960…1920] */
    grid-template-columns: 25vw 1.5625vw 23.4375vw 50vw;
    padding: 0;
    margin-top: 24.375vw; } /* 468 px od sekcji „designed” (y=6000) */
  .page-about .about-sustainable-card1 {
    grid-column: 1;
    margin-top: 0; }
  .page-about .about-sustainable-card2 {
    grid-column: 3;
    margin-top: 0; }
  .page-about .about-sustainable-card1 .about-card-img {
    aspect-ratio: 4 / 5; } /* 480×600 */
  .page-about .about-sustainable-card2 .about-card-img {
    aspect-ratio: 3 / 4; } /* 450×600 */
  .page-about .about-sustainable .about-card-caption {
    margin-top: 20px;
    padding-right: 118px; /* miejsce na „SHOP NOW” (110,8 px @20) */
    min-height: 60px; }
  .page-about .about-sustainable-card1 .about-card-caption {
    padding-left: 30px; } /* podpis karty dotykającej krawędzi okna (XD: x=30) */
  .page-about .about-sustainable .about-card-name,
  .page-about .about-sustainable .about-card-price {
    font-size: 0.8333em; /* 20 px */
    line-height: 1.5; }  /* rozstaw 30 px jak w XD */
  .page-about .about-sustainable .about-card-buy {
    font-size: 0.8333em;
    line-height: 1.2;
    letter-spacing: normal;
    top: 40px; } /* tekst CTA na y=6660,5 = podpis + 40,5 */
  .page-about .about-sustainable-text {
    grid-column: 4;
    margin-top: 0;
    padding-left: 3.125vw; /* x = 1020 */
    padding-right: 0; }
  .page-about .about-sustainable-text .about-label,
  .page-about .about-sustainable-text p {
    font-size: 1.25em;
    max-width: 19em; /* 570 px */
    margin: 0; }
  .page-about .about-sustainable-text .about-label {
    line-height: 1.3333;
    letter-spacing: normal;
    margin-bottom: 1.8667em; }
  .page-about .about-sustainable-text p {
    line-height: 1.5; }
}

/* ==========================================================================
   TYPOGRAFIA DESKTOPU SKLEPU (>= 1025 px) — DOKŁADNE ROZMIARY Z MAKIETY XD
   Odczyt z 10 artboardów desktopowych (docs/xd-extract/desktop/typography/):
   żaden węzeł tekstowy nie jest skalowany transformacją grupy, więc liczby są
   literalne. Makieta ma JEDEN system:
     hero ............... 50/59  (Collections: 50/40)
     akapity, ceny ...... 30/45
     labele sekcji ...... 30/40      (uppercase)
     NAVBAR + CTA ....... 30/36      (navbar: treść wersalikowa)
     FAQ produktu ....... 30/35      (uppercase)
     podpisy pod zdjęciem 20/40      (pitch pary = 29 px)
     spec produktu ...... 20/35
     kafel: nazwa+cena .. 20/30
     CTA kafla, © ....... 20/24
     notka VAT, swatche . 20/40
   Realizacja: em od bazy body (24 px @>=1441 -> 1.25em = 30 px, 0.8333em = 20,
   2.0833em = 50), interlinie jako ilorazy z makiety. Wszystko w tym bloku jest
   w @media (min-width: 1025px) i rozdzielone klasami body stron, więc
   zweryfikowane bloki mobile (<=640) i tablet (641-1024) zostają bez zmian.
   Strona About ("Web 1920 – 19") była zrobiona pierwsza i ma własny blok wyżej.
   ========================================================================== */
@media (min-width: 1025px) {

  /* ----- WSPÓLNY NAVBAR SKLEPU (fs 30 / lh 36, odstęp pozycji 90,5 px;
     pozycje są WIELKOŚCIĄ liter takie jak w treści — XD ma na nich
     `textTransform: lowercase` z rangedStyles, więc „OBJECTS" w rawText
     renderuje się jako „Objects"; brand/HOME/PL zostają wersalikami).
     Dropdowny: pitch 51 px, pierwszy item 15 px pod pozycją nadrzędną.
     GÓRNY OFFSET: zgł. klienta 09.10.2026 („żeby miejsce, w którym
     zlockowany jest navbar, było na tej samej wysokości na stronie studia
     i sklepu") — navbar sklepu zjeżdża z 131 px (makieta „Web 1920 – 13")
     na 70 px, czyli dokładnie tam, gdzie stoi navbar studia
     (`#access ul`: `top: 50px` + `padding: 20px 0`). Ta sama zmiana na
     tablecie (103 → 70). Telefon zostaje bez zmian: sklep ma tam inny
     komponent (.rp-mbar--store z hamburgerem, wg makiety 390), a studio
     paska z hamburgerem nie ma wcale. Poniżej 1025 px wartość 70 px jest
     identyczna z „gołym" `#access`, więc navbar nie skacze przy zmianie
     szerokości okna. ----- */
  #access.store-nav ul.header-menu {
    font-size: 1.25em; /* 30 px — baza pozycji, gap i dropdownów */
    padding: 70px 0 0;
    gap: 0 3.0167em; /* 90,5 px @1920 (em liczy się od font-size listy) */
    align-items: flex-start;
    flex-wrap: nowrap; }
  #access.store-nav ul.header-menu > li {
    line-height: 1.2; }
  #access.store-nav ul.header-menu > li > a {
    line-height: 1.2;
    letter-spacing: normal; }
  /* "+" w makiecie stoi 8,3 px za słowem i ma tę samą linię co pozycja.
     Kategoria musi być flexem — jako `block` spacja między <a> i <button>
     dokładała 6,7 px (łącznie 15 px zamiast 8,3). */
  #access.store-nav li.store-nav-cat {
    display: inline-flex;
    align-items: flex-start; }
  #access.store-nav .store-nav-toggle {
    line-height: 1.2;
    padding-left: 0.2778em; }
  #access.store-nav .store-nav-subs {
    margin-top: 0; }
  #access.store-nav .store-nav-subs a {
    line-height: 1.2;
    letter-spacing: normal; }

  /* ----- ABOUT: interlina hero 50/59 i dokładne pozycje bloku (makieta:
     tytuł box y=488, podpis 559 → odstęp między nimi 12 px).
     Rozmiary w em (nie px), żeby poniżej 1441 px skala była proporcjonalna
     jak w reszcie typografii desktopowej. ----- */
  .page-about .about-hero-inner {
    top: 45.1852%; } /* 488 px @1080 */
  .page-about .about-hero-title {
    font-size: 2.0833em; /* 50 px */
    line-height: 1.18;   /* 59 px */
    margin-bottom: 12px; }
  .page-about .about-hero-sub {
    font-size: 1.25em;   /* 30 px */
    line-height: 1.5;    /* 45 px */ }

  /* ----- ABOUT: podpisy pod zdjęciami — makieta daje im lh=40 w pierwszym
     wierszu i lh=30 w drugim, przy rozstawie 29 px (dwa osobne obiekty
     tekstowe w XD). Baza miała 1.45/1.45 i rozstaw 29 px, więc ink pierwszej
     linii siedział 5,5 px wyżej niż w makiecie. ----- */
  .page-about .about-pos {
    font-weight: 400; }
  .page-about .about-pos-row {
    line-height: 2; /* 40 px */ }
  .page-about .about-pos-row + .about-pos-row {
    line-height: 1.5; /* 30 px */
    margin-top: -0.55em; } /* rozstaw 29 px */

  /* ======================================================================
     STORE HOME („Web 1920 – 13", /store/) — typografia 1:1 z makiety
     ====================================================================== */

  /* HERO: slogan w JEDNEJ linii, 50/59, wersaliki z treści, środek ekranu.
     Makieta: box y=559, ink 1575,5 px (mieści się w 1920 — kontener nie może
     go już ograniczać do 62em = 1488 px). XD nie centruje tytułu w pionie:
     box 559..618 przy hero 1080 daje środek 588,5, czyli 48,5 px pod środkiem
     ekranu — padding 97 px na kontenerze (flex, align-items:center) przesuwa
     treść o połowę swojej wartości. */
  .page-store .store-hero-inner {
    max-width: none;
    padding-top: 8.9815vh; }
  .page-store .store-hero-title {    font-size: 2.0833em; /* 50 px */
    line-height: 1.18;   /* 59 px */
    font-weight: normal;
    letter-spacing: normal;
    text-shadow: none; }
  .page-store .store-hero-title .store-hero-part {
    display: inline; }
  /* CTA hero: 30/36, box y=968 → 62 px nad dolną krawędzią ekranu 1080 */
  .page-store .store-hero-cta {
    bottom: 5.7407vh;
    font-size: 1.25em;
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: normal;
    text-shadow: none; }

  /* Manifest + bloki OBJECTS:/COLLECTIONS: — 30/45, kolumna 570 px (manifest
     pod hero: 660 px), XD nie ma dodatkowego word-spacing (baza dokładała
     0,06em = 1,2 px na spację i łamała linie inaczej niż makieta). */
  .page-store .store-section-desc,
  .page-store .store-section--blocks .store-section-desc,
  .page-store .store-section:first-child .store-section-desc {
    font-size: 1.25em;
    line-height: 1.5;
    font-weight: 400;
    word-spacing: normal; }
  .page-store .store-section:first-child .store-section-desc {
    max-width: 22em; } /* 660 px */

  /* CTA bloków (EXPLORE OBJECTS / COLLECTIONS): 30/36 uppercase */
  .page-store .store-section-block-link {
    font-size: 1.25em;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: normal;
    word-spacing: normal; }

  /* Podpisy pod zdjęciami: 20/40, para wierszy 29 px od siebie (XD: dwa
     osobne obiekty tekstowe, oba lh=40) — dlatego drugi wiersz ma -11 px. */
  .page-store .store-section-label-row {
    font-size: 0.8333em; /* 20 px */
    font-weight: 400;
    line-height: 2;      /* 40 px */
    letter-spacing: normal; }
  .page-store .store-section-labels .store-section-label-row + .store-section-label-row {
    margin-top: -0.55em; /* -11 px → rozstaw 29 px */ }

  /* Kolekcje (WEDGE / SATURN / CIRCULAR): tytuł 30/40, opis 30/45,
     SHOP NOW 30/36 */
  .page-store .store-feature-title,
  .page-store .store-picks-title,
  .page-store .store-materials-title,
  .page-store .store-studio-title {
    font-size: 1.25em;
    line-height: 1.3333; /* 40 px */
    font-weight: 400;
    letter-spacing: normal;
    word-spacing: normal; }
  .page-store .store-feature-desc,
  .page-store .store-picks-desc,
  .page-store .store-materials-desc,
  .page-store .store-studio-desc {
    font-size: 1.25em;
    line-height: 1.5; /* 45 px */
    font-weight: 400;
    letter-spacing: normal;
    word-spacing: normal; }
  .page-store .store-feature .collections-shop-btn,
  .page-store .store-studio-btn {
    font-size: 1.25em;
    line-height: 1.2; /* 36 px */
    font-weight: 400;
    letter-spacing: normal;
    word-spacing: normal; }

  /* Kafle produktów (picks): nazwa i cena 20/30, SHOP NOW 20/24.
     W XD nazwa i cena to jedna linia pod drugą dokładnie co 30 px — baza
     dokładała row-gap 0.15em i margin-top 0.1em (razem 5,6 px). */
  .page-store .store-picks .object-card-row {
    row-gap: 0; }
  .page-store .store-picks .object-card-name,
  .page-store .store-picks .object-card-price {
    font-size: 0.8333em;
    line-height: 1.5; /* 30 px */
    font-weight: 400;
    letter-spacing: normal; }
  .page-store .store-picks .object-card-price {
    margin-top: 0; }
  .page-store .store-picks .object-card-buy {
    font-size: 0.8333em;
    line-height: 1.2; /* 24 px */
    font-weight: 400;
    letter-spacing: normal; }

  /* Odstęp między KAFLAMI PRODUKTÓW (picks) — zgł. klienta 09.10.2026:
     „większe kafelki, ale przerwa ma być tylko mniejsza, jak w innych
     tego typu". Baza dawała 2em = 48 px, więc przy połowie strony 960 px
     kafel miał tylko 456 px, a w makiecie („Web 1920 – 13") podpisy stoją
     na x=960 i x=1440, czyli kafel liczy 480 px (kafle stykają się).
     Ten sam odstęp co w sąsiedniej sekcji z dwoma zdjęciami obok siebie
     (.store-materials-media: 16 px) → kafel rośnie do 472 px, a podpis
     drugiego kafla trafia z x=1464 na 1448 (makieta: 1440). */
  .page-store .store-picks-products {
    gap: 16px; }

  /* ODDECH POD ZDJĘCIEM w kaflu — zgł. klienta 09.10.2026 („popraw jeszcze
     przerwę pod zdjęciem"): baza daje tu 0.1em (2,4 px), więc nazwa produktu
     kleiła się do dolnej krawędzi zdjęcia (ink ~6 px pod zdjęciem). W XD blok
     podpisu kafla liczy 75 px = 15 px oddechu + 2 × 30 px linii, a dokładnie
     ten sam 15-px oddech ma już kafel na tablecie (.page-store .store-picks
     .object-card-meta w bloku 641–1024). Mobile/tablet nietknięte. */
  .page-store .store-picks .object-card-meta {
    padding-top: 15px; }

  /* Skoro podpis kafla ma teraz 75 px, kolumna tekstu (dociągnięta do DOLNEJ
     KRAWĘDZI ZDJĘCIA, nie podpisów) musi mieć pod sobą dokładnie tyle samo —
     bazowe 2.8em (67,2 px) było policzone pod podpis 62,4 px i zostawiało
     4,8 px dryfu. 3.125em = 75 px @ body 24 px. */
  .page-store .store-picks-body {
    margin-bottom: 3.125em; }

  /* CTA kafla przy PRAWEJ krawędzi okna (bloki bez odbicia lustrzanego: kafle
     leżą w prawej połowie) nie może kleić się do krawędzi ekranu — zgł.
     klienta 09.10.2026 („napis DISCOVER na prawym zdjęciu tak żeby nie było
     przyklejone z borderem"). Lustrzane wcięcie 15 px ma już podpis LEWEGO
     kafla w blokach store-picks--mirror (makieta trzyma tam 30 px, ale nasza
     konwencja tego komponentu to 15 px = wartość zaakceptowana przez klienta
     06.10.2026), więc prawy kafel dostaje odbicie tej samej reguły. Nazwa
     i cena zostają przy lewej krawędzi kafla — przesuwa się tylko CTA. */
  .page-store .store-picks:not(.store-picks--mirror) .store-picks-products > .object-card:last-child .object-card-meta {
    padding-right: 15px; }

  /* ======================================================================
     COLLECTIONS („Web 1920 – 17", /store/collections/) — typografia z makiety
     ====================================================================== */
  /* Kolumna tekstu hero ma w makiecie 570 px (x=1170 = 60,9375vw), a trzy
     zdjęcia 3×360 px z 15 px odstępu (razem 1110 px = 57,8125vw). */
  .page-collections .collections-hero {
    grid-template-columns: 57.8125vw 29.6875vw;
    column-gap: 3.125vw; }
  .page-collections .collections-hero-title {
    font-size: 2.0833em; /* 50 px */
    line-height: 0.8;    /* 40 px — XD daje tu ciaśniejszą interlinię niż 59 */
    font-weight: 400;
    letter-spacing: normal; }
  .page-collections .collections-hero-desc {
    font-size: 1.25em;   /* 30 px */
    line-height: 1.5;    /* 45 px */
    max-width: 19em;     /* 570 px */
    letter-spacing: normal;
    margin: 0; }
  /* podpisy pod trzema zdjęciami hero: 20/40, para wierszy 29 px */
  .page-collections .collections-hero-pos {
    font-size: 0.8333em;
    font-weight: 400;
    line-height: 2;
    letter-spacing: normal; }
  /* podpis produktu pod małym zdjęciem: w bazie był w px (20 px) i nie skalował
     się poniżej 1441 px jak reszta typografii — w em trzyma proporcję */
  .page-collections .collections-essence .collections-prod-cap,
  .page-collection .collections-essence .collections-prod-cap {
    font-size: 0.8333em; /* 20 px @1920 */
    line-height: 1.5;    /* 30 px */ }
  .page-collections .collections-hero-pos-row + .collections-hero-pos-row {
    margin-top: -0.55em; }

  /* sekcje esencji: label 30/40, akapit 30/45 (kolumna 570 px), SHOP NOW 30/36 */
  .page-collections .collections-essence .about-sec-text .about-label {
    font-size: 1.25em;
    line-height: 1.3333;
    font-weight: 400;
    letter-spacing: normal; }
  .page-collections .collections-essence .about-sec-text p {
    font-size: 1.25em;
    line-height: 1.5;
    max-width: 19em;
    letter-spacing: normal; }
  .page-collections .collections-essence .collections-shop-btn {
    font-size: 1.25em;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: normal; }

  /* kafle produktów: nazwa i cena 20/30, CTA 20/24 */
  .page-collections .object-card-name,
  .page-collections .object-card-price {
    font-size: 0.8333em;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: normal; }
  .page-collections .object-card-buy {
    font-size: 0.8333em;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: normal; }
  .page-collections .object-card-row {
    row-gap: 0; }
  .page-collections .object-card-price {
    margin-top: 0; }

  /* Podpisy w sekcji materiałów (store home): wiersz 1 20/40, wiersz 2 20/30
     (XD), rozstaw 29 px jak w pozostałych parach podpisów */
  .page-store .store-materials .about-pos {
    font-size: 0.8333em;
    font-weight: 400;
    letter-spacing: normal; }
  .page-store .store-materials .about-pos-row {
    line-height: 2; /* 40 px */ }
  .page-store .store-materials .about-pos-row + .about-pos-row {
    line-height: 1.5; /* 30 px */
    margin-top: -0.55em; }

  /* ======================================================================
     PODSTRONY KOLEKCJI („Web 1920 – 18/20/21", /collection/<slug>/) —
     ta sama skala co strona Collections: label 30/40, akapit 30/45,
     SHOP NOW 30/36, podpis produktu 20/30, kafle 20/30 + 20/24.
     ====================================================================== */
  .page-collection .about-label {
    font-size: 1.25em;
    line-height: 1.3333;
    font-weight: 400;
    letter-spacing: normal; }
  .page-collection .collections-essence .about-sec-text p,
  .page-collection .collections-essence p {
    font-size: 1.25em;
    line-height: 1.5;
    max-width: 19em;
    letter-spacing: normal; }
  .page-collection .collections-shop-btn {
    font-size: 1.25em;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: normal; }
  .page-collection .object-card-name,
  .page-collection .object-card-price {
    font-size: 0.8333em;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: normal; }
  .page-collection .object-card-buy {
    font-size: 0.8333em;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: normal; }
  .page-collection .object-card-row {
    row-gap: 0; }
  .page-collection .object-card-price {
    margin-top: 0; }

  /* ======================================================================
     OBIEKTY („Web 1920 – 22/23/24", /objects/ + /object_type/<slug>/) —
     kafle produktów: nazwa i cena 20/30, CTA 20/24 (jak w makiecie).
     ====================================================================== */
  .page-objects .object-card-name,
  .page-objects .object-card-price {
    font-size: 0.8333em;
    line-height: 1.5; /* 30 px */
    font-weight: 400;
    letter-spacing: normal; }
  .page-objects .object-card-buy {
    font-size: 0.8333em;
    line-height: 1.2; /* 24 px */
    font-weight: 400;
    letter-spacing: normal; }
  .page-objects .object-card-row {
    row-gap: 0; }
  .page-objects .object-card-price {
    margin-top: 0; }

  /* ======================================================================
     KARTA PRODUKTU („Web 1920 – 28", /objects/<slug>/) — typografia z makiety
       tytuł 30/40 · taksonomia 20/40 · opis i cena 30/45 · notka VAT 20/40
       swatche i „quantity" 20/40 · wiersz ilości 30/45 · CTA 30/36
       notka wysyłkowa 20/35 · spec: label 30/40, tekst 20/35
       editorial/custom: tytuł 30/45, tekst 20/35, CTA custom 20/24
       FAQ: label 30/35
     ====================================================================== */
  .page-product .product-hero-title {
    font-size: 1.25em;
    line-height: 1.3333; /* 40 px */
    font-weight: 400;
    letter-spacing: normal;
    word-spacing: normal; }
  .page-product .product-hero-tax,
  .page-product .product-hero-price-note {
    font-size: 0.8333em;
    line-height: 2; /* 40 px */
    font-weight: 400;
    letter-spacing: normal;
    word-spacing: normal; }
  .page-product .product-hero-desc,
  .page-product .product-hero-price {
    font-size: 1.25em;
    line-height: 1.5; /* 45 px */
    letter-spacing: normal;
    word-spacing: normal; }
  .page-product .product-hero-desc {
    max-width: 19em; } /* 570 px (mock: kolumna x=1020) */

  /* konfigurator: swatche i „quantity" 20/40, wiersz ilości 30/45 */
  .page-product .product-buy-label {
    font-size: 0.8333em;
    line-height: 2; /* 40 px */
    font-weight: 400;
    letter-spacing: normal; }
  .page-product .product-qty,
  .page-product .product-qty-btn {
    font-size: 1.25em;
    line-height: 1.5; /* 45 px */
    font-weight: 400;
    letter-spacing: normal; }
  .page-product .product-qty-btn {
    font-size: 1em; } /* przyciski dziedziczą 30 px z .product-qty */
  /* CTA (BUY NOW / pre-launch: NOTIFY ME): 30/36 */
  .page-product .product-buy-cta,
  .page-product .product-notify-submit {
    font-size: 1.25em;
    line-height: 1.2; /* 36 px */
    font-weight: 400;
    letter-spacing: normal; }
  /* notka pod CTA: 20/35 */
  .page-product .product-buy-note {
    font-size: 0.8333em;
    line-height: 1.75; /* 35 px */
    font-weight: 400;
    letter-spacing: normal; }

  /* specyfikacja: label 30/40, tekst 20/35 */
  .page-product .product-spec-label {
    font-size: 1.25em;
    line-height: 1.3333; /* 40 px */
    font-weight: 400;
    letter-spacing: normal; }
  .page-product .product-spec-text {
    font-size: 0.8333em;
    line-height: 1.75; /* 35 px */
    font-weight: 400;
    letter-spacing: normal; }

  /* editorial + custom: tytuł 30/45 uppercase, tekst 20/35, CTA 20/24 */
  .page-product .product-editorial-title,
  .page-product .product-custom-title {
    font-size: 1.25em;
    line-height: 1.5; /* 45 px */
    font-weight: 400;
    letter-spacing: normal; }
  .page-product .product-editorial-text,
  .page-product .product-custom-text {
    font-size: 0.8333em;
    line-height: 1.75; /* 35 px */
    font-weight: 400;
    letter-spacing: normal; }
  .page-product .product-custom-text {
    max-width: 19em; }
  .page-product .product-custom-cta {
    font-size: 0.8333em;
    line-height: 1.2; /* 24 px */
    font-weight: 400;
    letter-spacing: normal; }

  /* FAQ: label i „+" 30/35 */
  .page-product .product-faq-label,
  .page-product .product-faq-toggle {
    font-size: 1.25em;
    line-height: 1.1667; /* 35 px */
    font-weight: 400;
    letter-spacing: normal; }

  /* ======================================================================
     STRONY PRAWNE (/store/terms|privacy|shipping) — brak artboardu XD,
     więc trzymają się tej samej skali co reszta desktopowego sklepu
     (na tablecie analogicznie: konwencja sklepu, 20 px).
       tytuł strony 50/59 · podtytuły 30/40 (uppercase) · treść 30/45 ·
       link „wróć do sklepu" 30/36
     ====================================================================== */
  .page-legal .rp-legal-heading {
    font-size: 2.0833em; /* 50 px */
    line-height: 1.18;   /* 59 px */
    letter-spacing: normal; }
  .page-legal .rp-legal-content h2 {
    font-size: 1.25em;   /* 30 px */
    line-height: 1.3333; /* 40 px */
    letter-spacing: normal; }
  .page-legal .rp-legal-content p {
    font-size: 1.25em;   /* 30 px */
    line-height: 1.5;    /* 45 px */ }
  .page-legal .rp-legal-back {
    font-size: 1.25em;   /* 30 px */
    line-height: 1.2;    /* 36 px */
    letter-spacing: normal; }
}

/* Makieta jest zdefiniowana tylko przy 1920 px, a navbar ma u nas dodatkową
   pozycję HOME (decyzja klienta) — w najwęższym zakresie desktopu (1025–1199)
   pełne 90,5 px odstępu wypychało rząd na same krawędzie (8 px marginesu).
   Tam odstęp schodzi do 2,7em (~71 px @1025); od 1200 w górę zostaje 90,5 px. */
@media (min-width: 1025px) and (max-width: 1199px) {
  #access.store-nav ul.header-menu {
    gap: 0 2.7em; }
}