@import url("base-TLbALmX.css");

/* Shared tokens/reset/header/footer moved to base.css:
   root, reset-box-sizing, html, body, img, a, button-input, site-header, header-inner, logo, main-nav, header-actions, site-footer, footer-inner, footer-brand, footer-logo, footer-column, footer-bottom
*/

/* Zmienne używane w tym pliku, których nie ma w base.css (--black/--dark ujednolicone 2026-09-14
   na --dark w całym projekcie, patrz CLAUDE.md -- ten plik już tylko używa var(--dark) z
   base.css, bez własnego aliasu). --card i --ease w ogóle nie były zdefiniowane w źródłowym
   mockupie (przeoczenie autora makiety) -- wartości dobrane spójnie z resztą (--card z dawnego
   product.css, --ease z jego --transition). */
:root {
  --card: #e7e2d8;
  --ease: cubic-bezier(.2, .65, .2, 1);
}

/* =========================================================
   NORDISKA — PRODUCT PAGE
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */


/* =========================================================
   RESET
========================================================= */


/* =========================================================
   HEADER
========================================================= */


.main-nav a,
.header-actions a,
.header-actions button {

  position:
    relative;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--dark);

  cursor:
    pointer;

}


.main-nav a::after,
.header-actions a::after,
.header-actions button::after {

  position:
    absolute;

  right:
    0;

  bottom:
    -5px;

  left:
    0;

  height:
    1px;

  background:
    currentColor;

  content:
    "";

  transform:
    scaleX(0);

  transform-origin:
    right;

  transition:
    transform 400ms var(--ease);

}


.main-nav a:hover::after,
.header-actions a:hover::after,
.header-actions button:hover::after {

  transform:
    scaleX(1);

  transform-origin:
    left;

}


/* =========================================================
   PRODUCT PAGE
========================================================= */

.product-page {

  width:
    min(
      calc(100% - 80px),
      var(--container)
    );

  margin:
    0 auto;

  /* Odstęp od stopki niezależnie od tego, czy sekcja related-products się renderuje. */
  padding-bottom:
    130px;

}


/* =========================================================
   BREADCRUMBS
========================================================= */

.breadcrumbs {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    25px 0 30px;

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


.breadcrumbs a:hover {

  color:
    var(--dark);

}


/* =========================================================
   PRODUCT LAYOUT
========================================================= */

.product-layout {

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(360px, .55fr);

  gap:
    90px;

  align-items:
    start;

}


/* =========================================================
   GALLERY
========================================================= */

.product-gallery {

  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px;

}


.product-gallery__main,
.product-gallery__image {

  position:
    relative;

  overflow:
    hidden;

  background:
    var(--card);

}


.product-gallery__main {

  grid-column:
    1 / -1;

  aspect-ratio:
    4 / 5;

}


.product-gallery__image {

  aspect-ratio:
    1 / 1.08;

}


.product-gallery img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform 900ms var(--ease);

}


.product-gallery__main:hover img,
.product-gallery__image:hover img {

  transform:
    scale(1.025);

}


/* Kafelki to <button> -- reset domyślnego wyglądu przycisku; aktywny kafelek przygaszony. */
.product-gallery__image {

  display:
    block;

  padding:
    0;

  border:
    0;

  cursor:
    pointer;

}


.product-gallery__image img {

  transition:
    transform 900ms var(--ease),
    opacity 300ms var(--ease);

}


.product-gallery__image.is-active img {

  opacity:
    .45;

}


.product-gallery__image:focus-visible {

  outline:
    1px solid var(--dark);

  outline-offset:
    3px;

}


/* =========================================================
   GALLERY ARROWS
========================================================= */

.gallery-arrow {

  position:
    absolute;

  top:
    50%;

  z-index:
    3;

  display:
    grid;

  place-items:
    center;

  width:
    44px;

  height:
    44px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(244, 241, 234, .85);

  color:
    var(--dark);

  font-size:
    16px;

  cursor:
    pointer;

  opacity:
    0;

  transform:
    translateY(-50%);

  transition:
    opacity 300ms var(--ease),
    background 300ms var(--ease);

}


.gallery-arrow--prev {

  left:
    16px;

}


.gallery-arrow--next {

  right:
    16px;

}


.product-gallery__main:hover .gallery-arrow,
.gallery-arrow:focus-visible {

  opacity:
    1;

}


.gallery-arrow:hover {

  background:
    var(--ivory);

}


.gallery-arrow:focus-visible {

  outline:
    1px solid var(--dark);

  outline-offset:
    2px;

}


/* Ekrany dotykowe nie mają hover -- strzałki widoczne cały czas, subtelnie. */
@media (hover: none) {

  .gallery-arrow {

    opacity:
      .9;

  }

}


/* =========================================================
   IMAGE COUNTER
========================================================= */

.image-counter {

  position:
    absolute;

  right:
    18px;

  bottom:
    16px;

  z-index:
    3;

  color:
    white;

  font-size:
    9px;

  letter-spacing:
    .12em;

}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.product-info {

  position:
    sticky;

  top:
    30px;

  align-self:
    start;

  padding:
    15px 0 60px;

}


/* =========================================================
   PRODUCT TOP
========================================================= */

.product-number {

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


.product-status {

  display:
    inline-block;

  margin-top:
    18px;

  padding:
    7px 9px;

  background:
    var(--dark);

  color:
    var(--ivory);

  font-size:
    8px;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


.product-info h1 {

  margin:
    28px 0 0;

  font-family:
    var(--serif);

  font-size:
    clamp(
      28px,
      2.5vw,
      38px
    );

  font-weight:
    400;

  line-height:
    1.05;

  letter-spacing:
    -.03em;

}


.product-subtitle {

  margin:
    20px 0 0;

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.5;

}


.product-price {

  margin-top:
    30px;

  font-size:
    18px;

  font-weight:
    500;

}


.product-tax {

  margin:
    6px 0 0;

  color:
    var(--muted);

  font-size:
    9px;

}


/* =========================================================
   PURCHASE
========================================================= */

.product-purchase {
  margin-top: 35px;
  display: grid;
  gap: 10px;
}

/* Mockup zakłada pełny e-commerce ("Add to bag") -- projekt nie ma koncepcji koszyka (model
   "Make an offer"), więc te dwa CTA zastępują .add-to-bag. Ten sam wzorzec wizualny, jaki miał
   dawny (usunięty razem z App\Product) product.css. Statyczne na razie -- brak jeszcze backendu
   Inquiry dla App\Catalog\Product (osobne zadanie, patrz CLAUDE.md "kolejny krok"). */
.offer-button,
.question-button {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 350ms ease, color 350ms ease;
}

.offer-button {
  justify-content: space-between;
  border: 1px solid var(--dark);
  background: var(--dark);
  color: var(--ivory);
}

.offer-button:hover {
  background: transparent;
  color: var(--dark);
}

.offer-button span:last-child {
  font-size: 17px;
  transition: transform 350ms ease;
}

.offer-button:hover span:last-child {
  transform: translateX(5px);
}

.question-button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dark);
}

.question-button:hover {
  border-color: var(--dark);
}

.purchase-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.product-description {

  margin-top:
    45px;

  padding-top:
    30px;

  border-top:
    1px solid var(--border);

}


/* Product.description przez Trix (EasyAdmin TextEditorField) -- każdy akapit w <div>, nie <p>
   (patrz designer.css, .intro-text -- ten sam wzorzec). Oba selektory rozszerzone, żeby objąć
   realny znacznik. */
.product-description p,
.product-description div {

  margin:
    0 0 17px;

  font-size:
    13px;

  line-height:
    1.7;

}


.product-description p:first-child,
.product-description div:first-child {

  font-family:
    var(--serif);

  font-size:
    20px;

  line-height:
    1.25;

}


/* =========================================================
   PRODUCT DETAILS
========================================================= */

.product-details {

  margin-top:
    40px;

  border-top:
    1px solid var(--border);

}


.detail-row {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    20px;

  padding:
    13px 0;

  border-bottom:
    1px solid var(--border);

  font-size:
    10px;

}


.detail-row span:first-child {

  color:
    var(--muted);

}


/* Kilku projektantów -- jeden pod drugim w kolumnie wartości. */
.detail-list {

  margin:
    0;

  padding:
    0;

  list-style:
    none;

  display:
    grid;

  gap:
    6px;

}


.detail-row a {

  text-decoration:
    underline;

  text-decoration-color:
    var(--border);

  text-underline-offset:
    4px;

}


.detail-row a:hover {

  text-decoration-color:
    var(--dark);

}


/* =========================================================
   CONDITION
========================================================= */

.condition {

  margin-top:
    40px;

}


.condition__title {

  margin-bottom:
    10px;

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


.condition p {

  margin:
    0;

  font-size:
    11px;

  line-height:
    1.65;

}


/* =========================================================
   ACCORDION
========================================================= */

.accordion {

  margin-top:
    35px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

}


.accordion-button {

  width:
    100%;

  min-height:
    55px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--dark);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  font-size:
    10px;

  font-weight:
    500;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;

  cursor:
    pointer;

}


.accordion-button span:last-child {

  font-size:
    16px;

  font-weight:
    300;

}


.accordion-content {

  padding:
    0 0 25px;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.7;

}


/* =========================================================
   SHARE
========================================================= */

.product-share {

  display:
    flex;

  align-items:
    center;

  gap:
    20px;

  margin-top:
    25px;

  color:
    var(--muted);

  font-size:
    9px;

}


.product-share a,
.product-share button {

  color:
    var(--dark);

  text-decoration:
    underline;

  text-decoration-color:
    var(--border);

  text-underline-offset:
    4px;

}


.product-share button {

  padding:
    0;

  border:
    0;

  background:
    none;

  font:
    inherit;

  cursor:
    pointer;

}


.product-share a:hover,
.product-share button:hover {

  text-decoration-color:
    var(--dark);

}


/* =========================================================
   RELATED PRODUCTS
========================================================= */

.related-products {

  margin:
    150px 0 0;

}


.section-heading {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    18px 0;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

}


.section-heading span {

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

}


.section-heading a {

  font-size:
    9px;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

}


.related-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    18px;

  margin-top:
    35px;

}


.related-image {

  aspect-ratio:
    4 / 5;

  overflow:
    hidden;

  background:
    var(--card);

}


.related-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform 800ms var(--ease);

}


.related-card:hover
.related-image img {

  transform:
    scale(1.035);

}


.related-info {

  padding-top:
    15px;

}


.related-info h2 {

  margin:
    0;

  font-family:
    var(--serif);

  font-size:
    19px;

  font-weight:
    400;

  line-height:
    1.05;

}


.related-info p {

  margin:
    7px 0 10px;

  color:
    var(--muted);

  font-size:
    9px;

}


.related-info span {

  font-size:
    11px;

}


/* =========================================================
   FOOTER
========================================================= */


.footer-brand p {

  margin:
    20px 0 0;

  color:
    #9b9c97;

  font-family:
    var(--serif);

  font-size:
    22px;

  line-height:
    1.05;

}


.footer-column h3 {

  margin:
    0 0 12px;

  color:
    var(--muted-on-dark);

  font-size:
    9px;

  font-weight:
    400;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

}


.footer-column a {

  font-size:
    12px;

}


.footer-column a:hover {

  text-decoration:
    underline;

  text-underline-offset:
    4px;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .header-inner,
  .product-page,
  .footer-inner,
  .footer-bottom {

    width:
      calc(100% - 48px);

  }


  .product-layout {

    grid-template-columns:
      minmax(0, 1.2fr)
      minmax(300px, .8fr);

    gap:
      50px;

  }


  .product-info h1 {

    font-size:
      34px;

  }


  .related-grid {

    grid-template-columns:
      repeat(3, 1fr);

  }


  .footer-inner {

    grid-template-columns:
      1.5fr 1fr 1fr;

  }


}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  .header-inner {

    width:
      calc(100% - 32px);

    height:
      68px;

  }


  .product-page {

    width:
      100%;

    padding-bottom:
      80px;

  }


  .breadcrumbs {

    width:
      calc(100% - 32px);

    margin:
      0 auto;

    padding:
      20px 0 25px;

    overflow:
      hidden;

    white-space:
      nowrap;

  }


  .breadcrumbs span:last-child {

    overflow:
      hidden;

    text-overflow:
      ellipsis;

  }


  .product-layout {

    display:
      block;

  }


  .product-gallery {

    grid-template-columns:
      1fr 1fr;

    gap:
      7px;

  }


  .product-gallery__main {

    grid-column:
      1 / -1;

    aspect-ratio:
      4 / 5;

  }


  .product-info {

    position:
      static;

    padding:
      45px 16px 70px;

  }


  .product-info h1 {

    font-size:
      clamp(
        30px,
        9vw,
        40px
      );

  }


  .product-subtitle {

    max-width:
      300px;

  }


  .product-price {

    margin-top:
      25px;

  }


  .product-description {

    margin-top:
      40px;

  }


  .related-products {

    margin:
      0 16px;

  }


  .related-grid {

    grid-template-columns:
      repeat(2, 1fr);

    gap:
      35px 10px;

  }


  .related-info h2 {

    font-size:
      17px;

  }


  .footer-inner {

    width:
      calc(100% - 32px);

    grid-template-columns:
      1fr 1fr;

    gap:
      45px 25px;

    padding-bottom:
      70px;

  }


  .footer-brand {

    grid-column:
      1 / -1;

  }


  .footer-bottom {

    width:
      calc(100% - 32px);

    display:
      block;

    line-height:
      1.8;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .product-gallery {

    gap:
      5px;

  }


  .product-info {

    padding-left:
      14px;

    padding-right:
      14px;

  }


  .product-info h1 {

    font-size:
      30px;

  }


  /* fr zamiast % -- 42% + 58% + gap 20px przekraczało szerokość ekranu (poziome przewijanie). */
  .detail-row {

    grid-template-columns:
      minmax(0, 42fr) minmax(0, 58fr);

  }


  .related-grid {

    gap:
      30px 8px;

  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;

    animation-duration:
      .01ms !important;

  }

}

/* =========================================================
   DRAWER (offer / contact)
   Nie w mockupie (zakładał "Add to bag", pełny e-commerce) -- wysuwany panel dla formularzy
   Make an offer / Ask a question, przeniesiony z dawnego, usuniętego razem z App\Product
   product.css (ten sam sprawdzony wzorzec, patrz CatalogAliasHandler/ProductOfferController).
========================================================= */

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  visibility: hidden;
  background: rgba(0, 0, 0, .25);
  opacity: 0;
  transition: opacity 350ms ease, visibility 350ms;
}

.drawer-overlay.open {
  visibility: visible;
  opacity: 1;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 301;
  display: flex;
  width: min(480px, 100%);
  height: 100%;
  flex-direction: column;
  padding: 28px;
  overflow-y: auto;
  background: var(--ivory);
  transform: translateX(100%);
  transition: transform 500ms var(--ease);
}

.drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.drawer-title {
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.15;
}

.drawer-title span {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
}

.drawer-close {
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.drawer-body {
  margin-top: 10px;
}

.form-field {
  position: relative;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.form-field label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--dark);
  font-size: 13px;
}

.form-field input {
  height: 26px;
}

.form-field textarea {
  min-height: 90px;
  padding-top: 5px;
  line-height: 1.6;
  resize: vertical;
}

.form-field--price .price-input {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.form-field--price input {
  flex: 1;
}

.form-field--price span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.submit-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 30px;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--dark);
  background: transparent;
  color: var(--dark);
  cursor: pointer;
  font-size: 9px;
  letter-spacing: .13em;
  text-align: left;
  text-transform: uppercase;
}

.submit-button span {
  font-size: 16px;
  transition: transform .25s ease;
}

.submit-button:hover span {
  transform: translateX(7px);
}

.form-alert {
  margin-bottom: 20px;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.6;
}

.form-alert--success {
  background: var(--ivory-dark);
  color: var(--dark);
  border: 1px solid var(--border);
}

.form-alert--error {
  background: #f6e9e6;
  color: #7a2e20;
  border: 1px solid #e0b6ac;
}

@media (max-width: 800px) {
  .drawer {
    width: 100%;
  }
}