@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
*/

/* =========================================================
   NORDISKA — COLLECTION PAGE
========================================================= */


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


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


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


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

  position: relative;

  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  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;

}


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

.collection-hero {

  position: relative;

  min-height:
    720px;

  height:
    82vh;

  overflow: hidden;

  background:
    #cbc5b9;

  color:
    white;

}


.collection-hero__image {

  position: absolute;

  inset: 0;

}


.collection-hero__image::after {

  position: absolute;

  inset: 0;

  content: "";

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.38),
      rgba(0,0,0,.06) 65%,
      rgba(0,0,0,.12)
    );

}


.collection-hero__image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}


.collection-hero__content {

  position: relative;

  z-index: 2;

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

  height: 100%;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding-bottom: 65px;

}


.collection-hero__eyebrow {

  margin-bottom: 20px;

  font-size: 9px;

  letter-spacing: .18em;

  text-transform: uppercase;

  opacity: .8;

}


.collection-hero__title {

  margin: 0;

  font-family:
    var(--serif);

  font-size:
    clamp(
      80px,
      12vw,
      170px
    );

  font-weight: 400;

  line-height: .78;

  letter-spacing:
    -.055em;

}


.collection-hero__description {

  max-width:
    480px;

  margin:
    32px 0 0;

  font-size:
    14px;

  line-height:
    1.6;

}


.collection-hero__details {

  display: flex;

  gap: 28px;

  margin-top:
    28px;

  font-size:
    9px;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;

  opacity:
    .75;

}


/* =========================================================
   COLLECTION INTRO
========================================================= */

.collection-intro {

  padding:
    110px 0;

}


.collection-intro__inner {

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

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    120px;

}


.collection-intro__label {

  padding-top:
    8px;

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;

}


.collection-intro__text {

  max-width:
    600px;

}


.collection-intro__text p {

  margin:
    0 0 22px;

  font-family:
    var(--serif);

  font-size:
    clamp(
      26px,
      3vw,
      42px
    );

  font-weight:
    400;

  line-height:
    1.08;

  letter-spacing:
    -.025em;

}


.collection-intro__text p + p {

  color:
    var(--muted);

  font-family:
    var(--sans);

  font-size:
    14px;

  line-height:
    1.7;

  letter-spacing:
    0;

}


/* =========================================================
   SHOP SECTION
========================================================= */

.shop-section {

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

  margin:
    0 auto;

  padding-bottom:
    130px;

}


/* =========================================================
   SHOP TOOLBAR
========================================================= */

.shop-toolbar {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    18px 0;

  margin-bottom:
    35px;

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

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

}


.shop-results {

  color:
    var(--muted);

  font-size:
    10px;

  letter-spacing:
    .1em;

  text-transform:
    uppercase;

}


/* =========================================================
   PRODUCT GRID
========================================================= */

.product-grid {

  display:
    grid;

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

  column-gap:
    18px;

  row-gap:
    70px;

}


/* =========================================================
   PRODUCT CARD
========================================================= */

.product-card {

  min-width:
    0;

}


.product-image {

  position:
    relative;

  aspect-ratio:
    4 / 5;

  overflow:
    hidden;

  background:
    var(--card);

}


.product-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transform:
    scale(1);

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

}


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

  transform:
    scale(1.035);

}


/* =========================================================
   IMAGE GRADIENT
========================================================= */

.product-image::after {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  content:
    "";

  pointer-events:
    none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.03),
      transparent 45%,
      rgba(0,0,0,.20)
    );

}


/* =========================================================
   PRODUCT BADGE
========================================================= */

.product-badge {

  position:
    absolute;

  top:
    14px;

  left:
    14px;

  z-index:
    3;

  padding:
    7px 9px;

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

  font-size:
    8px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

}


/* =========================================================
   PRODUCT NUMBER
========================================================= */

.product-number {

  position:
    absolute;

  right:
    14px;

  bottom:
    13px;

  z-index:
    3;

  color:
    white;

  font-size:
    9px;

  letter-spacing:
    .12em;

}


/* =========================================================
   VIEW OBJECT
========================================================= */

.product-view {

  position:
    absolute;

  left:
    50%;

  bottom:
    25px;

  z-index:
    4;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  padding:
    12px 16px;

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

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  opacity:
    0;

  transform:
    translate(-50%, 12px);

  transition:
    opacity 350ms ease,
    transform 450ms var(--ease);

}


.product-card:hover
.product-view {

  opacity:
    1;

  transform:
    translate(-50%, 0);

}


.product-view span {

  font-size:
    14px;

  transition:
    transform 350ms ease;

}


.product-card:hover
.product-view span {

  transform:
    translateX(4px);

}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info {

  padding-top:
    17px;

}


.product-info h2 {

  margin:
    0;

  font-family:
    var(--serif);

  font-size:
    21px;

  font-weight:
    400;

  line-height:
    1.05;

  letter-spacing:
    -.025em;

}


.product-meta {

  margin:
    8px 0 0;

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.4;

}


.product-bottom {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-top:
    12px;

}


.product-price {

  font-size:
    12px;

  font-weight:
    500;

}


.product-condition {

  color:
    var(--muted);

  font-size:
    9px;

  text-align:
    right;

}


/* =========================================================
   LOAD MORE
========================================================= */

.load-more {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    12px;

  margin-top:
    100px;

}


.load-more button {

  min-width:
    230px;

  height:
    52px;

  padding:
    0 25px;

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

  background:
    transparent;

  color:
    var(--dark);

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  transition:
    background 350ms ease,
    color 350ms ease;

}


.load-more button:hover {

  background:
    var(--dark);

  color:
    var(--ivory);

}


.load-more span {

  color:
    var(--muted);

  font-size:
    9px;

}


/* =========================================================
   COLLECTION STORY
========================================================= */

.collection-story {

  display:
    grid;

  grid-template-columns:
    1.2fr .8fr;

  min-height:
    650px;

  background:
    var(--dark);

  color:
    var(--ivory);

}


.collection-story__image {

  min-height:
    650px;

  overflow:
    hidden;

}


.collection-story__image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

}


.collection-story__content {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    80px;

}


.story-eyebrow {

  margin-bottom:
    20px;

  color:
    #999b96;

  font-size:
    9px;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;

}


.collection-story h2 {

  max-width:
    500px;

  margin:
    0;

  font-family:
    var(--serif);

  font-size:
    clamp(
      42px,
      5vw,
      72px
    );

  font-weight:
    400;

  line-height:
    .95;

  letter-spacing:
    -.04em;

}


.collection-story p {

  max-width:
    430px;

  margin:
    24px 0 0;

  color:
    #a5a59f;

  font-size:
    14px;

  line-height:
    1.7;

}


.story-link {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  margin-top:
    30px;

  font-size:
    10px;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;

}


.story-link span {

  font-size:
    14px;

}


/* =========================================================
   NEWSLETTER
========================================================= */

.newsletter {

  padding:
    110px 0;

  background:
    var(--ivory-dark);

}


.newsletter-inner {

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

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  align-items:
    end;

  gap:
    100px;

}


.newsletter-eyebrow {

  margin-bottom:
    18px;

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    .15em;

  text-transform:
    uppercase;

}


.newsletter h2 {

  margin:
    0;

  font-family:
    var(--serif);

  font-size:
    clamp(
      45px,
      5vw,
      75px
    );

  font-weight:
    400;

  line-height:
    .9;

  letter-spacing:
    -.045em;

}


.newsletter-form {

  display:
    flex;

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

}


.newsletter-form input {

  width:
    100%;

  height:
    55px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    var(--dark);

}


.newsletter-form input::placeholder {

  color:
    var(--muted);

}


.newsletter-form button {

  flex-shrink:
    0;

  border:
    0;

  background:
    transparent;

  color:
    var(--dark);

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

  cursor:
    pointer;

}


/* =========================================================
   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 {

  width:
    fit-content;

  font-size:
    12px;

}


.footer-column a:hover {

  text-decoration:
    underline;

  text-underline-offset:
    4px;

}


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

@media (max-width: 1050px) {

  .header-inner,
  .collection-hero__content,
  .collection-intro__inner,
  .shop-section,
  .newsletter-inner,
  .footer-inner,
  .footer-bottom {

    width:
      calc(100% - 48px);

  }


  .product-grid {

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

  }


  .collection-intro__inner {

    gap:
      60px;

  }


  .collection-story__content {

    padding:
      55px;

  }


  .footer-inner {

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

  }


}


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

@media (max-width: 700px) {

  .site-header {

    position:
      absolute;

  }


  .header-inner {

    width:
      calc(100% - 32px);

    height:
      68px;

  }


  .collection-hero {

    min-height:
      650px;

    height:
      90svh;

  }


  .collection-hero__content {

    width:
      calc(100% - 32px);

    padding-bottom:
      40px;

  }


  .collection-hero__title {

    font-size:
      clamp(
        70px,
        22vw,
        120px
      );

  }


  .collection-hero__description {

    max-width:
      380px;

    font-size:
      13px;

  }


  .collection-hero__details {

    flex-wrap:
      wrap;

    gap:
      8px 18px;

  }


  .collection-intro {

    padding:
      75px 0;

  }


  .collection-intro__inner {

    width:
      calc(100% - 32px);

    grid-template-columns:
      1fr;

    gap:
      30px;

  }


  .collection-intro__text p {

    font-size:
      30px;

  }


  .shop-section {

    width:
      calc(100% - 32px);

    padding-bottom:
      80px;

  }


  .shop-toolbar {

    margin-bottom:
      25px;

  }


  .product-grid {

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

    column-gap:
      10px;

    row-gap:
      45px;

  }


  .product-info {

    padding-top:
      13px;

  }


  .product-info h2 {

    font-size:
      17px;

  }


  .product-meta {

    font-size:
      9px;

  }


  .product-bottom {

    display:
      block;

  }


  .product-condition {

    display:
      block;

    margin-top:
      6px;

    text-align:
      left;

  }


  .product-view {

    display:
      none;

  }


  .collection-story {

    grid-template-columns:
      1fr;

  }


  .collection-story__image {

    min-height:
      420px;

  }


  .collection-story__content {

    padding:
      70px 25px;

  }


  .newsletter {

    padding:
      75px 0;

  }


  .newsletter-inner {

    width:
      calc(100% - 32px);

    grid-template-columns:
      1fr;

    gap:
      45px;

  }


  .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-grid {

    column-gap:
      8px;

  }


  .product-badge {

    top:
      9px;

    left:
      9px;

    padding:
      6px 7px;

    font-size:
      7px;

  }


  .product-number {

    right:
      9px;

    bottom:
      9px;

  }


  .product-info h2 {

    font-size:
      16px;

  }


  .product-price {

    font-size:
      11px;

  }

}


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

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

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

    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;

    animation-duration:
      .01ms !important;

  }

}


/* Nie w mockupie -- pusty stan siatki produktów (dziś realny przypadek, katalog jeszcze pusty) */
.collection-empty {
  grid-column: 1 / -1;
  padding: 80px 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}