/* ==========================================================================
   mutoumise — product detail (ported from design/pages/product.html
   + design/mobile/product.html). Skins Woo's own markup; tokens only.
   ========================================================================== */

/* -- page frame ----------------------------------------------------------- */

.pdp {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-8) 0;
}
.pdp__grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: var(--sp-20);
  align-items: start;
  margin-top: var(--sp-8);
}

/* -- gallery — Woo's .woocommerce-product-gallery, skinned ----------------- */

.pdp__gallery { position: relative; animation: rise 600ms var(--ease-out) backwards; }
.pdp__gallery > .badge {
  position: absolute;
  top: var(--sp-3); left: var(--sp-3);
  z-index: 2;
}
.woocommerce-product-gallery { position: relative; }

/* default Woo output (no slider script): first image is the main frame,
   the rest sit below as a hairline thumb row */
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image {
  flex: none;
  width: 92px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--washi-deep);
  border: 1px solid transparent;
  opacity: 0.72;
  transition: border-color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image:hover { opacity: 1; }
.woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image:first-child {
  width: 100%;
  border-color: transparent;
  opacity: 1;
  margin-bottom: var(--sp-1);
}
.woocommerce-product-gallery__image a { display: block; width: 100%; height: 100%; }
.woocommerce-product-gallery__image img { width: 100%; height: 100%; object-fit: cover; }

/* if gallery slider/zoom theme supports are ever enabled, skin flexslider */
.woocommerce-product-gallery .flex-viewport {
  border-radius: var(--radius);
  background: var(--washi-deep);
}
.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.woocommerce-product-gallery .flex-control-thumbs li { flex: none; width: 92px; }
.woocommerce-product-gallery .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid transparent;
  opacity: 0.72;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  opacity: 1;
  border-color: var(--sumi);
}
.woocommerce-product-gallery__trigger {
  position: absolute;
  top: var(--sp-3); right: var(--sp-3);
  z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--washi);
  border-radius: var(--radius);
}

.pdp__gallery-count {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: var(--sp-3);
}
.pdp__gallery-count .note {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sumi-faint);
}

/* -- buy rail -------------------------------------------------------------- */

.pdp__rail { animation: rise 600ms var(--ease-out) 90ms backwards; }
.pdp__rail .product_title {
  font-size: var(--text-3xl);
  margin-top: var(--sp-3);
}
.pdp__rail > .price {
  display: block;
  font-size: var(--text-xl);
  margin-top: var(--sp-4);
}
.pdp__rail .woocommerce-product-details__short-description {
  margin-top: var(--sp-4);
  color: var(--sumi-soft);
  max-width: 34rem;
}

/* add-to-cart — Woo's form, laid out as the design's buy row */
.pdp__rail form.cart { margin-top: var(--sp-8); }
.pdp__rail form.cart:not(.variations_form):not(.grouped_form),
.pdp__rail .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-3);
}
.pdp__rail form.cart .quantity { flex: none; }
.pdp__rail form.cart .single_add_to_cart_button { flex: 1 1 auto; }
.pdp__rail form.cart .stock { flex: 1 1 100%; margin: 0; }
.pdp__rail .stock {
  font-size: var(--text-sm);
  color: var(--sumi-soft);
  letter-spacing: 0.04em;
}

/* variation selects in our input voice; th.label speaks the option name */
.pdp__rail .variations {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--sp-6);
}
.pdp__rail .variations tbody,
.pdp__rail .variations tr,
.pdp__rail .variations th,
.pdp__rail .variations td {
  display: block;
  text-align: left;
  padding: 0;
  border: none;
}
.pdp__rail .variations tr + tr { margin-top: var(--sp-6); }
.pdp__rail .variations th.label { color: var(--sumi); padding-bottom: var(--sp-1); }
.pdp__rail .variations select { width: 100%; }
.pdp__rail .reset_variations {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sumi-faint);
  border-bottom: 1px solid currentColor;
}
.pdp__rail .reset_variations:hover { color: var(--sumi); }
.pdp__rail .woocommerce-variation { margin-bottom: var(--sp-4); }
.pdp__rail .woocommerce-variation-price .price { font-size: var(--text-md); }
.pdp__rail .woocommerce-variation-availability {
  font-size: var(--text-sm);
  color: var(--sumi-soft);
}

/* hairline meta list */
.pdp__meta {
  margin-top: var(--sp-8);
  border-top: var(--hairline);
}
.pdp__meta li {
  padding: var(--sp-2) 0;
  border-bottom: var(--hairline);
  font-size: var(--text-sm);
  color: var(--sumi-soft);
  letter-spacing: 0.04em;
}
.pdp__meta li::before { content: "— "; color: var(--washi-line); }

/* accordion — native details/summary in the .accordion voice */
.pdp__accordion { margin-top: var(--sp-12); }
.pdp__accordion .accordion__q {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.pdp__accordion .accordion__q::-webkit-details-marker { display: none; }
.pdp__accordion .accordion__q::marker { content: ""; }
.pdp__accordion .accordion__q::after {
  content: "+";
  font-family: var(--font-body);
  font-size: var(--text-xl);
  color: var(--sumi-faint);
  line-height: 1;
}
.pdp__accordion details[open] > .accordion__q::after { content: "\2212"; }
.pdp__accordion .accordion__a > * + * { margin-top: var(--sp-3); }
.pdp__accordion .accordion__a h2,
.pdp__accordion .accordion__a h3,
.pdp__accordion .accordion__a h4 {
  font-size: var(--text-lg);
  margin-top: var(--sp-4);
}
.pdp__accordion .accordion__a li::before { content: "— "; color: var(--washi-line); }
.pdp__accordion .accordion__a img { border-radius: var(--radius); }

/* -- pairs well with — Woo's related / up-sells sections ------------------- */

.pdp-product .related,
.pdp-product .up-sells {
  max-width: var(--container);
  margin: var(--sp-28) auto 0;
  padding-inline: var(--sp-8);
}
.pdp-product .related > h2,
.pdp-product .up-sells > h2 {
  position: relative;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi-faint);
  border-top: var(--hairline);
  padding-top: var(--sp-8);
  margin-bottom: var(--sp-12);
}
.pdp-product .related > h2::before,
.pdp-product .up-sells > h2::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 40px;
  border-top: 1px solid var(--sumi);
}
.pdp-product .related ul.products,
.pdp-product .up-sells ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-12) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pdp-product .related ul.products li.product,
.pdp-product .up-sells ul.products li.product { margin: 0; width: auto; }

/* ==========================================================================
   responsive — stacked per design/mobile/product.html
   ========================================================================== */

@media (max-width: 960px) {
  .pdp { padding: var(--sp-4) var(--sp-4) 0; }
  .pdp__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
    margin-top: var(--sp-3);
  }
  /* grid items must not inherit content width — contains the gallery strip */
  .pdp__gallery, .pdp__rail { min-width: 0; max-width: 100%; }
  .pdp__gallery { overflow: hidden; }
  .woocommerce-product-gallery { max-width: 100%; }
  .woocommerce-product-gallery__wrapper { width: 100%; }
  .pdp__rail .product_title { font-size: var(--text-2xl); margin-top: var(--sp-2); }
  .pdp__rail > .price { margin-top: var(--sp-3); }
  .pdp__rail .woocommerce-product-details__short-description { margin-top: var(--sp-3); }
  .pdp__rail .accordion { margin-top: var(--sp-8); }

  .pdp-product .related,
  .pdp-product .up-sells {
    margin-top: var(--sp-16);
    padding-inline: var(--sp-4);
  }
}

@media (max-width: 560px) {
  /* gallery becomes a full-bleed scroll-snap strip of 85vw slides */
  .pdp__gallery { margin-inline: calc(-1 * var(--sp-4)); }
  .pdp__gallery > .badge { left: calc(var(--sp-4) + var(--sp-3)); }
  .pdp__gallery-count { padding-inline: var(--sp-4); }

  .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--sp-4);
    padding-inline: var(--sp-4);
    scrollbar-width: none;
  }
  .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }
  .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image,
  .woocommerce-product-gallery:not(.flexslider) .woocommerce-product-gallery__image:first-child {
    width: 85vw;
    margin: 0;
    opacity: 1;
    scroll-snap-align: start;
  }

  /* related row scrolls sideways, cards at 70vw as in the mobile card */
  .pdp-product .related,
  .pdp-product .up-sells { padding-inline: 0; }
  .pdp-product .related > h2,
  .pdp-product .up-sells > h2 { margin-inline: var(--sp-4); }
  .pdp-product .related ul.products,
  .pdp-product .up-sells ul.products {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--sp-4);
    padding-inline: var(--sp-4);
    scrollbar-width: none;
  }
  .pdp-product .related ul.products::-webkit-scrollbar,
  .pdp-product .up-sells ul.products::-webkit-scrollbar { display: none; }
  .pdp-product .related ul.products li.product,
  .pdp-product .up-sells ul.products li.product {
    flex: none;
    width: 70vw;
    scroll-snap-align: start;
  }
}