/* The product page (/produkty/<id>-<slug>), with its own narrower-screen blocks. */

  /* ——— Product page (/produkty/<id>-<slug>) ——— */

  /* Two mockups rule the page: „Karta produktu” desktop (1280px, garnet accents) above 768px and „Karta produktu”
     mobile (390px, link-blue accents) up to 768px. The base rules are the desktop mockup; the narrower-screen blocks
     right after this section hold the carousel (below 1024px) and the whole phone variant. */

  .kl__product { padding: 18px 0 72px; }
  /* Photos on the left, the purchase column on the right (the mockup's 1.55 : 1). */
  .kl__product-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 48px; align-items: start; }

  /* Gallery: square photos two by two (four slides make the mockup's 2×2 grid). Below 1024px the same slides become a
     swiped carousel with dots. */
  .kl__product-gallery { position: relative; min-width: 0; }
  .kl__product-slides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .kl__product-slide { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sky); }
  .kl__product-img, .kl__product-gift { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* A product without a photo: the placeholder of its catalogue tile, filling the slide. */
  .kl__product-slide .kl__tile-placeholder { height: 100%; }
  .kl__product-dots { display: none; }
  /* Rendered hidden: gallery_controller.js shows the dots, which do nothing without it (the track still swipes). */
  .kl__product-dots[hidden] { display: none; }

  /* The purchase column stays 24px under the top of the window while it is shorter than the window (the mockup). */
  .kl__product-info { position: sticky; top: calc(var(--nav-stuck) + 24px); display: flex; flex-direction: column; min-width: 0; }
  .kl__product-head { display: flex; flex-direction: column; }
  .kl__product-heading { display: flex; flex-direction: column; gap: 6px; }
  .kl__product-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 2.25rem; line-height: 1.1; color: var(--ink); text-wrap: balance; }
  /* „z kamieniem księżycowym” — the stones of the bracelet (Product#subtitle). */
  .kl__product-subtitle { margin: 0; font-size: .9375rem; line-height: normal; color: var(--muted); }
  .kl__product-price { margin: 22px 0 0; font-family: var(--font-display); font-size: 1.625rem; line-height: normal; color: var(--ink); }

  /* „Kup” (or the note why it is missing) above the designer link, both across the column. The price inside „Kup” is
     the phone's („Kup · 85,00 zł”); the buttons are blocks, so the label and the price run as one line of text instead
     of two flex items apart. */
  .kl__product-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
  .kl__product-cta .kl__btn { display: block; width: 100%; line-height: normal; }
  .kl__product-cta .kl__btn--primary { padding: 16px 18px; font-size: .96875rem; }
  .kl__product-buy-price { display: none; }
  /* The designer link: glass with a hairline in the link blue and garnet text (the mockup's own secondary button). */
  .kl__product-cta .kl__btn--secondary {
    padding: 14px 18px;
    letter-spacing: normal;
    border-color: color-mix(in srgb, var(--link) 25%, transparent);
    background: linear-gradient(135deg, rgb(255 255 255 / .8), color-mix(in srgb, var(--sky) 50%, transparent));
  }
  .kl__product-cta .kl__btn--secondary:hover { background: rgb(255 255 255 / .85); border-color: color-mix(in srgb, var(--link) 25%, transparent); }
  .kl__product-note {
    margin: 0;
    padding: 14px 18px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    background: rgb(255 255 255 / .6);
    font-size: .92rem;
    line-height: 1.55;
    color: var(--ink-soft);
  }

  /* What comes with every bracelet: a glass list whose rows open the matching section of the details below. */
  .kl__product-perks { list-style: none; margin: 20px 0 0; padding: 0; border-radius: 16px; }
  .kl__product-perks li + li { border-top: 1px solid color-mix(in srgb, var(--accent) 10%, transparent); }
  .kl__product-perk { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; font-size: .875rem; line-height: normal; color: var(--ink); transition: color .15s ease; }
  .kl__product-perk::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid var(--accent);
    border-right: 1.5px solid var(--accent);
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .kl__product-perk:hover { color: var(--accent); }
  .kl__product-perk:hover::after { transform: translateX(2px) rotate(45deg); }

  /* "O kamieniu": a stone of the bracelet, from the shop's stone cards (Product#stones), with up to four facts two by
     two (StoneKnowledge::Card#facts). */
  .kl__stone {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    padding: 18px;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(145deg, var(--paper) 0%, var(--blush-card) 55%, var(--sky) 100%);
    border: 1px solid var(--glass-edge);
    box-shadow: var(--shadow-float);
  }
  .kl__stone-head { display: flex; flex-direction: column; gap: 3px; }
  .kl__stone .kl__eyebrow { line-height: normal; color: var(--link); }
  .kl__stone-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: normal; color: var(--ink); }
  .kl__stone-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
  .kl__stone-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 16px; background: rgb(255 255 255 / .6); border: 1px solid rgb(255 255 255 / .9); line-height: normal; }
  .kl__stone-fact dt { font-size: .6875rem; color: var(--muted); }
  .kl__stone-fact dd { margin: 0; font-size: .84375rem; color: var(--ink); }
  .kl__stone-story { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .kl__stone-text { margin: 0; font-size: .84375rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
  /* Cut to four lines by expandable_controller.js, which only sets the attribute when the text is longer. */
  .kl__stone-text[data-clamped] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  .kl__stone-more {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .84375rem;
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-pale);
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .kl__stone-more:hover { color: var(--accent-dark); text-decoration-color: currentColor; }

  /* Details: an accordion of <details> sharing one name, so opening one closes the others (no JS needed). */
  .kl__product-details { margin-top: 16px; }
  .kl__disclosure { border-bottom: 1px solid var(--hairline); }
  .kl__disclosure-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 17px 0;
    list-style: none;
    cursor: pointer;
    font-size: .8125rem;
    line-height: normal;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .kl__disclosure-summary::-webkit-details-marker { display: none; }
  .kl__disclosure-summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--accent);
    border-bottom: 1.5px solid var(--accent);
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .kl__disclosure[open] > .kl__disclosure-summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .kl__disclosure-summary:hover { color: var(--accent); }
  .kl__disclosure-body { display: flex; flex-direction: column; gap: 12px; padding: 0 0 18px; }
  .kl__disclosure-body p { margin: 0; font-size: .90625rem; line-height: 1.65; color: var(--ink-soft); text-wrap: pretty; }

  /* The composition: the cord, then every part with its count — two columns, the counts in the narrow second one,
     which is as wide as the cord's description (the rows share the columns as subgrids). */
  .kl__product-data { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 14px; margin: 0; font-size: .875rem; line-height: normal; }
  .kl__product-data-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
  .kl__product-data-row dt, .kl__product-data-row dd { margin: 0; }
  .kl__product-data-row dd, .kl__product-data-row--cord dt { color: var(--muted); }
  .kl__product-data-row--cord dd { color: var(--ink); }

  /* Below 1024px the photos no longer fit side by side next to the purchase column: they become a carousel of one
     photo at a time in the left column, which stays in view instead of the purchase column — swiped, scroll-snapped,
     with dots under it that gallery_controller.js keeps in step. */
  @media (max-width: 1023px) {
    .kl__product-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
    .kl__product-gallery { position: sticky; top: calc(var(--nav-stuck) + 24px); }
    .kl__product-info { position: static; }
    .kl__product-slides {
      display: flex;
      gap: 0;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .kl__product-slides::-webkit-scrollbar { display: none; }
    .kl__product-slide { flex: 0 0 100%; scroll-snap-align: start; }
    .kl__product-dots { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 12px; }
    /* A fixed 24px target, whatever the width of the pill drawn inside it. */
    .kl__product-dot {
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
    }
    /* The inactive dot is a lighter garnet at 3:1 against every background of the page; the current one is a pill. */
    .kl__product-dot::before {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      border-radius: var(--radius-pill);
      background: color-mix(in srgb, var(--accent) 65%, var(--white));
      transition: width .2s ease, background-color .2s ease;
    }
    .kl__product-dot[aria-current="true"]::before { width: 18px; background: var(--accent); }
  }

  /* A landscape tablet or phone is shorter than the square photo: the stuck carousel and its dots must fit under the
     bar (24px sticky offset + 12px gap + 24px dots + 16px air). svh: the viewport with the browser toolbar shown. */
  @media (min-width: 769px) and (max-width: 1023px) {
    .kl__product-slides { width: min(100%, 100svh - var(--nav-stuck) - 76px); margin-inline: auto; }
  }

  @media (max-width: 860px) {
    .kl__product { padding-top: 14px; }
    .kl__product-title { font-size: 1.875rem; }
    .kl__product-price { margin-top: 16px; font-size: 1.5rem; }
  }

  /* Phone: the mobile mockup. The page lies on a plain sky-to-white gradient and every accent but „Kup” turns link
     blue. One column: the breadcrumbs under the bar, the carousel across the whole screen with its dots over the
     photo, then the purchase column. */
  @media (max-width: 768px) {
    body > .kl:has(> .kl__product) { background: linear-gradient(180deg, var(--sky) 0%, var(--mist) 40%, var(--paper) 100%); }

    .kl__product { padding: 4px 0 36px; }
    .kl__product .kl__crumbs { margin-bottom: 10px; font-size: .75rem; }
    .kl__product .kl__crumbs-list { gap: 6px; }
    .kl__product .kl__crumbs-item { gap: 6px; }
    .kl__product .kl__crumbs-link { color: var(--link); }
    .kl__product .kl__crumbs-link:hover { color: var(--link-hover); }

    .kl__product-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .kl__product-gallery { position: relative; top: auto; margin: 0 calc(-1 * var(--gutter)); }
    /* The dots lie over the bottom of the photo as a decoration, as in the mockup: pills 6px tall, 5px apart — far
       too small to tap, so they take no pointer (gallery_controller.js also hides them from assistive technology and
       the keyboard); swiping the photo is the control. The inactive pill is the mockup's pale blue, which no token
       holds. */
    .kl__product-dots { --product-dot: #c6dae8; position: absolute; left: 0; right: 0; bottom: 12px; gap: 5px; margin: 0; pointer-events: none; }
    .kl__product-dot {
      display: block;
      width: 6px;
      height: 6px;
      border-radius: var(--radius-pill);
      background: var(--product-dot);
      transition: width .2s ease, background-color .2s ease;
    }
    .kl__product-dot::before { content: none; }
    .kl__product-dot[aria-current="true"] { width: 18px; background: var(--link); }

    .kl__product-head { gap: 10px; }
    .kl__product-heading { gap: 4px; }
    .kl__product-title { font-size: 1.625rem; line-height: 1.15; }
    .kl__product-subtitle { font-size: .875rem; }
    .kl__product-price { margin-top: 4px; font-size: 1.375rem; }

    .kl__product-cta { margin-top: 16px; }
    .kl__product-cta .kl__btn--primary { padding: 15px 18px; font-size: .9375rem; letter-spacing: .03em; }
    .kl__product-buy-price { display: inline; }
    .kl__product-cta .kl__btn--secondary {
      padding: 13px 18px;
      font-size: .90625rem;
      color: var(--link);
      border-color: color-mix(in srgb, var(--link) 28%, transparent);
      background: linear-gradient(135deg, rgb(255 255 255 / .75), rgb(255 255 255 / .35));
      box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .9),
        0 10px 24px -18px color-mix(in srgb, var(--link) 50%, transparent);
    }
    .kl__product-cta .kl__btn--secondary:hover { border-color: color-mix(in srgb, var(--link) 28%, transparent); }
    /* The note in place of „Kup” (individual quote, unavailable) follows the other accents: link blue. */
    .kl__product-note { border-color: color-mix(in srgb, var(--link) 18%, transparent); }
    .kl .kl__product-note .kl__link { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 30%, transparent); }
    .kl .kl__product-note .kl__link:hover { color: var(--link-hover); text-decoration-color: currentColor; }

    .kl__product-perks { margin-top: 18px; border-radius: 18px; box-shadow: 0 16px 36px -26px color-mix(in srgb, var(--link) 45%, transparent); }
    .kl__product-perks li + li { border-top-color: color-mix(in srgb, var(--link) 10%, transparent); }
    .kl__product-perk { padding: 12px 16px; font-size: .84375rem; }
    .kl__product-perk::after { border-color: var(--link); }
    .kl__product-perk:hover { color: var(--link); }

    .kl__stone {
      margin-top: 18px;
      border-radius: 20px;
      background: linear-gradient(145deg, var(--paper) 0%, var(--mist) 55%, var(--sky) 100%);
      box-shadow: 0 18px 40px -28px color-mix(in srgb, var(--link) 50%, transparent);
    }
    .kl__stone-fact { border-radius: 14px; }
    .kl__stone-more { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 30%, transparent); }
    .kl__stone-more:hover { color: var(--link-hover); }

    .kl__product-details { margin-top: 12px; }
    .kl__disclosure { border-bottom-color: color-mix(in srgb, var(--link) 12%, transparent); }
    .kl__disclosure-summary { padding: 16px 0; }
    .kl__disclosure-summary::after { border-color: var(--link); }
    .kl__disclosure-summary:hover { color: var(--link); }
    .kl__disclosure-body { padding-bottom: 16px; }
    .kl__disclosure-body p { font-size: .875rem; line-height: 1.6; }
    .kl__product-data { gap: 6px 12px; font-size: .84375rem; }
    /* The mobile mockup's counts form a narrow column at the end of the rows: the cord's description no longer shares
       (and widens) it — its row is a grid of its own, the description at the row's end. */
    .kl__product-data-row--cord { grid-template-columns: minmax(0, 1fr) auto; column-gap: inherit; }
  }