/* Product page — breadcrumb, gallery, buy box, quantity stepper. Tokens only. */
@layer components {
  .product {
    background-color: var(--cream-100);
    padding-block: var(--section-pad-tight) var(--section-pad);
    /* The content is drawn by script; a full screen of reserved height keeps the
       footer below the fold until it arrives (avoids a layout-shift jump). */
    min-height: 100svh;
  }

  .product-related {
    background-color: var(--sand-100);
    padding-block: var(--section-pad);
  }

  .crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);

    & > :not(:first-child)::before {
      content: "/";
      margin-right: var(--space-2);
      color: var(--sand-300);
    }

    & a {
      color: inherit;
      text-decoration: none;

      &:hover {
        color: var(--ca-heading);
        text-decoration: underline;
      }
    }
  }

  .product__grid {
    display: grid;
    gap: var(--space-6);
  }

  @media (min-width: 900px) {
    .product__grid {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: var(--space-8);
      align-items: start;
    }
  }

  .gallery__main {
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--sand-300);
    background-color: var(--cream-50);

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .gallery__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
  }

  .gallery__thumb {
    display: block;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 1px solid var(--sand-300);
    background: none;
    cursor: pointer;
    opacity: 0.75;
    transition:
      opacity var(--dur) var(--ease),
      border-color var(--dur) var(--ease);

    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &:hover,
    &[aria-current="true"] {
      opacity: 1;
    }

    &[aria-current="true"] {
      border-color: var(--gold-500);
    }
  }

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

  .product__name {
    margin: var(--space-3) 0 0;
  }

  .product__descriptor {
    margin: var(--space-3) 0 0;
  }

  .product__price {
    margin: var(--space-5) 0 var(--space-2);
  }

  .product__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
  }

  .product__add {
    min-width: 200px;
  }

  .product__points {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-6) 0 0;
    padding: var(--space-5) 0 0;
    border-top: 1px solid var(--sand-300);
    list-style: none;
    color: var(--ca-body);

    & li {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    & .icon {
      color: var(--gold-600);
    }
  }

  .product__missing {
    padding-block: var(--space-8);
    gap: var(--space-4);
  }

  /* ---- Quantity stepper (product page and cart drawer) ------------------ */
  .qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ca-hairline);
  }

  .qty__btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;

    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, var(--gold-400) 14%, transparent);
    }

    &:disabled {
      opacity: 0.35;
      cursor: default;
    }
  }

  .qty__value {
    min-width: 36px;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--fs-body);
  }

  @media (pointer: coarse) {
    .qty__btn {
      width: 44px;
      height: 44px;
    }
  }
}