/* =========================================================================
   Museum of Arcadia — Single product page
   Figma: Product Detail Desktop 57:4433
   ========================================================================= */


/* =========================================================================
   PAGE LAYOUT — px 115 / py 57, gap 137 between columns
   ========================================================================= */

.single-product-page .product {
  display: grid;
  grid-template-columns: minmax(0, 592.5px) minmax(0, 463px);
  justify-content: center;
  align-items: center;
  gap: 137px;
  max-width: none;
  margin: 0 auto;
  padding: 57px 115px;
}

@media (max-width: 1280px) {
  .single-product-page .product {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
    padding: var(--s-6) var(--container-pad-d);
  }
}

@media (max-width: 968px) {
  .single-product-page .product {
    grid-template-columns: 1fr;
    gap: var(--s-5);
    padding: var(--s-5) var(--container-pad-m) var(--s-7);
  }
}


/* =========================================================================
   PRODUCT CAROUSEL (left) — 592.5px square, 86px chevron
   ========================================================================= */

.product-carousel {
  position: relative;
  background-color: #f3f3f1;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 592.5px;
  overflow: hidden;
}

.product-carousel__images {
  position: relative;
  width: 100%;
  height: 100%;
}

.product-carousel__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-standard);
}

.product-carousel__image--active { opacity: 1; }

.product-carousel__chevron {
  position: absolute;
  right: 19px;
  bottom: 28px;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background-color: var(--moa-white);
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-standard);
  z-index: 2;
}

.product-carousel__chevron:hover {
  transform: scale(1.03);
}

.product-carousel__chevron svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.product-carousel__indicators {
  position: absolute;
  left: 19px;
  bottom: 19px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.product-carousel__bar {
  width: 60px;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.25);
  transition: background-color var(--t-fast) var(--ease-standard);
}

.product-carousel__bar--active {
  background-color: var(--moa-black);
}

@media (max-width: 768px) {
  .product-carousel__chevron {
    width: 64px;
    height: 64px;
    right: var(--s-3);
    bottom: var(--s-5);
  }

  .product-carousel__chevron svg {
    width: 22px;
    height: 22px;
  }

  .product-carousel__bar { width: 40px; }
}


/* =========================================================================
   INFO COLUMN (right) — Figma 463px, gaps 12 / 26 / 25 / 30
   ========================================================================= */

.product-info {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 463px;
  width: 100%;
}

.product-info__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-info__title {
  font-family: var(--font-sans);
  font-size: 1.51875rem; /* 24.3px */
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.0475px;
  text-transform: uppercase;
  margin: 0;
}

.product-info__body {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.product-info__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.product-info__description {
  font-family: var(--font-serif);
  font-size: 0.91875rem; /* 14.7px */
  line-height: 20px;
  letter-spacing: 0.0431px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.product-info__description > p {
  margin: 0;
  line-height: 20.25px;
  letter-spacing: 0.0469px;
}

.product-info__text-block p {
  margin: 0;
  line-height: 20.25px;
  letter-spacing: 0.0469px;
}

.product-info__text-block p:first-child {
  line-height: 20px;
}

.product-info__text-block--spec p {
  letter-spacing: 0.0625px;
}

.product-info__text-block--spec p:first-child {
  line-height: 20px;
}

.product-info__description .product-dimensions p {
  margin: 0;
  line-height: 20.25px;
  letter-spacing: 0.0313px;
}

.product-info__description .product-dimensions p:first-child {
  line-height: 20px;
}

.product-info__description em,
.product-info__description i {
  font-style: italic;
}

.product-info__service-icons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 242.5px;
}

.product-info__service {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-sans);
  font-size: 0.7875rem; /* 12.6px */
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 0.0492px;
  text-transform: uppercase;
}

.product-info__service-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  object-fit: contain;
}

.product-info__price {
  font-family: var(--font-sans);
  font-size: 1.225rem; /* 19.6px */
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0;
  margin: 0;
}

.product-info__cta {
  width: 100%;
  max-width: 377.888px;
  height: 35.618px;
  padding: 8px 24px;
  font-size: 0.8125rem; /* 13px */
  font-weight: 500;
  line-height: 13px;
  letter-spacing: 0.2031px;
}

.product-info__cta.btn--primary:hover {
  background-color: var(--moa-black);
  color: var(--moa-white);
  border-color: var(--moa-black);
}


/* =========================================================================
   DISCOVER MORE CREATIONS — Figma 57:4494
   ========================================================================= */

.discover-more {
  padding: 32px 115px;
  max-width: none;
  margin: 0 auto;
  border-top: none;
}

.discover-more__title {
  font-family: var(--font-sans);
  font-size: 1.64375rem; /* 26.3px */
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 0.1541px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 29px;
}

.discover-more__carousel {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.discover-more__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.discover-more__track {
  display: flex;
  gap: 6px;
  transition: transform var(--t-base) var(--ease-standard);
  will-change: transform;
}

.discover-more__track .tile {
  flex: 0 0 262.031px;
  border: 1.5px solid transparent;
  padding: 15px 17px 15px 15px;
  transition: border-color var(--t-fast) var(--ease-standard);
}

.discover-more__track .tile:hover,
.discover-more__track .tile:focus-within {
  border-color: var(--moa-border-header);
}

.discover-more__track .tile__media {
  aspect-ratio: 1 / 1;
  max-width: 229.5px;
  margin: 0 auto;
}

.discover-more__track .tile__title,
.discover-more__track .tile__price {
  font-size: 1.10625rem; /* 17.7px */
  font-weight: 700;
  line-height: 18px;
  margin-top: 0;
}

.discover-more__track .tile__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.discover-more__track .tile form.cart {
  margin-top: 17px;
}

.discover-more__track .tile__cta {
  height: 37.275px;
  font-size: 0.7875rem; /* 12.6px */
  line-height: 13px;
  padding: 10px;
}

.discover-more__track .tile__chevron {
  width: 33.4px;
  height: 33.4px;
  bottom: 24px;
}

.discover-more__track .tile__chevron svg {
  width: 14px;
  height: 14px;
}

.discover-more__nav {
  flex: 0 0 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: none;
  border: none;
  padding: 110px 0;
  cursor: pointer;
  color: var(--moa-black);
  opacity: 0.35;
  transition: opacity var(--t-fast) var(--ease-standard);
}

.discover-more__nav:hover:not(:disabled),
.discover-more__nav:focus-visible:not(:disabled) {
  opacity: 1;
}

.discover-more__nav:disabled {
  opacity: 0;
  pointer-events: none;
}

.discover-more__nav--prev {
  transform: scaleX(-1);
  margin-right: 8px;
}

.discover-more__nav--next {
  margin-left: 8px;
}

@media (max-width: 968px) {
  .discover-more {
    padding: var(--s-7) var(--container-pad-m);
  }

  .discover-more__track .tile {
    flex-basis: 220px;
  }

  .discover-more__nav {
    padding: var(--s-6) 0;
  }
}

@media (max-width: 768px) {
  .discover-more__track .tile form.cart {
    opacity: 1;
    pointer-events: auto;
  }
}


/* =========================================================================
   SOLD overlay
   ========================================================================= */

.product-carousel__sold-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.product-carousel__sold-overlay span {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: 700;
  color: var(--moa-white);
  font-size: clamp(2rem, 4vw, 3rem);
}