@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; }
  #access a:hover {
    color: #0000ff; }

/* 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; }
    #access a:hover {
      color: #ffff00 !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 {
  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; }

  .projects-sidebar {
    position: sticky;
    top: 130px !important;
    z-index: 7;
    align-self: stretch;
    /* Solid band: photos scrolling up must not show through behind the
       filter links (and the menu above them). */
    background-color: #fff;
    padding: 0 1em 0.5em; }

  /* White plate riding with the sticky band — covers the menu zone above
     it, so photos disappear under white instead of sliding out behind the
     fixed, transparent menu. Sits below the menu (z-index 8/9). */
  .projects-sidebar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100vh;
    background: #fff; }

  .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%; }

  .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.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 */
.process-image {
  width: 480px;
  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; }
  @media (max-width: 640px) {
    .store-hero-title {
      font-size: clamp(0.85rem, 2.45vw, 1.25rem); } }

.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; }
  /* 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; }
  .store-hero-cta:hover {
    color: #fff !important;
    border-bottom-color: #ffff00; }

@media (max-width: 640px) {
  .store-hero {
    height: 100svh;
    min-height: 100svh; }
  .store-hero-cta {
    font-size: 1.25rem;
    letter-spacing: 0.14em;
    bottom: 7vh; } }

@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: 700;
  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;
  border-bottom: 1px solid #000; }
  .store-section-block-link:hover {
    color: #0000ff;
    border-bottom-color: #0000ff; }

/*
 *	------------------------------------------------------- 	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: bold;
  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; } }

.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; }

/*
 *	------------------------------------------------------- 	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; }
  .store-studio-btn:hover {
    color: #0000ff;
    border-bottom-color: #0000ff; }

@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: 700;
  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: 600;
  line-height: 1.35;
  letter-spacing: 0; }

.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 {
    color: #ffff00; }

.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: bold;
  white-space: nowrap;
  text-shadow: none; }

#access.store-nav ul.header-menu > li > a:hover {
  color: #0000ff !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: bold; }

/* 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; }

.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; }
  /* podświetlenie niebieskim firmowym dopiero po najechaniu
     (#ffff00 na hoverze spada z globalnego #access a:hover) */
  #access.store-nav .store-nav-subs a:hover {
    color: #0000ff !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: #0000ff !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; } }

.objects-grid {
  max-width: 57em;
  margin: 0 auto;
  padding: 0 1.5em 5em;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2em 2em; }
  @media (max-width: 1024px) {
    .objects-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 640px) {
    .objects-grid {
      grid-template-columns: 1fr;
      gap: 2em; } }

.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; }

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

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

.object-card-name {
  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;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  transition: color 0.2s linear; }
  .object-card-buy:hover {
    color: #0000ff; }

.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 {
    font-size: 0.8em; }
  .object-card-row {
    gap: 0.75em; } }

@media (max-width: 380px) {
  .objects-grid {
    padding: 0 1.2em 4em;
    gap: 1.75em; }
  .collections-objects-head {
    padding-left: 1.2em;
    padding-right: 1.2em; }
  .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; }
  .product-buy-cta:hover {
    color: #0000ff;
    border-bottom-color: #0000ff; }

.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; }

.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; }
  .product-custom-cta:hover {
    color: #0000ff;
    border-bottom-color: #0000ff; }

.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; }

.about-hero-inner {
  position: absolute;
  z-index: 2;
  top: 45%;
  left: 50%;
  max-width: 340px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

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

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

/* 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; }

/* ----- 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; }

/* 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;
  border-bottom: 1px solid #000;
  padding-bottom: 4px; }

/* ----- 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; }

.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; }

.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; }

.about-contact {
  margin: 200px 0 240px; }
  .about-contact-head {
    grid-column: 1 / span 6; }
    .about-contact-head p {
      font-size: 14px;
      line-height: 1.6;
      max-width: 580px;
      margin: 0; }
  .about-contact-col1,
  .about-contact-col2,
  .about-contact-col3 {
    margin-top: 60px; }
  .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; }

.about-contact-label-sm {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 24px 0 6px !important; }
  .about-contact-col .about-contact-label-sm:first-of-type {
    margin-top: 0 !important; }

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

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

/* ----- 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; } }
/* ----- STORE FOOTER (czarny, 100vh) ----- */
.store-footer {
  background-color: #000;
  color: #fff;
  padding: 4em 1.5em 2em;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
  .store-footer a {
    color: #fff; }
  .store-footer a:hover {
    color: #ffff00 !important; }

.store-footer-inner {
  width: 100%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 2fr;
  gap: 2em; }
  /* układ kwadratowy: brand u góry po lewej, OBJECTS/COLLECTIONS pod spodem,
   * linki About/Terms po prawej (span 2 — jeden wiersz na link), kontakt w prawej kolumnie */
  @media (min-width: 1025px) {
    .store-footer-inner > :nth-child(1) {
      grid-column: 1;
      grid-row: 1;
      padding-left: 2em; }
    .store-footer-inner > :nth-child(2) {
      grid-column: 1;
      grid-row: 2;
      padding-left: 2em; }
    .store-footer-inner > :nth-child(3) {
      grid-column: 1;
      grid-row: 3;
      padding-left: 2em; }
    .store-footer-inner > :nth-child(4) {
      grid-column: 2 / span 2;
      grid-row: 2; }
    .store-footer-inner > :nth-child(5) {
      grid-column: 2 / span 2;
      grid-row: 3; }
    .store-footer-inner > :nth-child(6) {
      grid-column: 6;
      grid-row: 2; } }
  @media (max-width: 1024px) {
    .store-footer-inner {
      grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 640px) {
    .store-footer-inner {
      grid-template-columns: 1fr 1fr;
      gap: 2em; } }

.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; } }

.store-footer-all {
  margin-top: 0.6em; }
  .store-footer-all a {
    font-size: 1.15em;
    font-weight: bold; }

.store-footer-contact {
  text-align: right;
  overflow-wrap: anywhere; }
  @media (max-width: 640px) {
    .store-footer-contact {
      text-align: left; } }

.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; }
  @media (max-width: 640px) {
    .store-footer-bottom {
      flex-direction: column;
      gap: 0.4em; } }

/* 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). */
.collections-hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: 60vw 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;
  display: flex;
  align-items: flex-start;
  gap: 16px; }

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

.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; }
  .collections-shop-btn:hover {
    color: #0000ff;
    border-bottom-color: #0000ff; }

/* 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: bold;
  line-height: 1.6;
  margin: 0 0 2em; }

.collections-essence .about-sec-text p {
  font-size: 22px;
  line-height: 1.5;
  font-weight: bold;
  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: bold;
  margin-top: 2.2em; }

/* 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; }
}

/* 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; }
}

/* nazwy mocków (placeholdery zdjęć) — wyraźniejsze na stronie Collections */
.page-collections .about-mock-name {
  font-size: 15px;
  font-weight: 600;
  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; }

.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;
  text-underline-offset: 6px; }
  .collections-objects-all:hover {
    color: #0000ff; }

/* Fallback ≤1024px: stack pionowy (zdjęcia nad tekstem), poniżej fixed navbaru */
@media (max-width: 1024px) {
  .collections-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 140px 24px 40px; }
  .collections-hero-figs {
    flex: none;
    width: 100%; }
  .collections-hero-text {
    flex: none; } }

@media (max-width: 640px) {
  .collections-hero {
    padding: 120px 16px 32px;
    gap: 24px; }
  .collections-hero-figs {
    gap: 10px; }
  .collections-hero-title {
    font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .collections-hero-desc {
    font-size: 0.9em; }
  .collections-hero-pos {
    font-size: 0.7em; } }

.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;
  text-decoration-thickness: 1px;
  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: 'HelveticaLTWXX-Light', sans-serif;
  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: 'HelveticaLTWXX-Light', sans-serif;
  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: 'HelveticaLTWXX-Light', sans-serif;
  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: 'HelveticaLTWXX-Light', sans-serif;
  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;
  text-decoration-thickness: 1px;
  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;
  text-decoration-thickness: 1px;
  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;
  text-decoration-thickness: 1px;
  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; } }