/* ==========================================================================
   Single product page (WooCommerce, body.single-product).
   Layout: gallery left, summary right; related products full width below.
   Only existing elements are styled (no new text). Colors come from the cream
   palette tokens in base.css (surface-low/mid/high), with fallbacks.
   Specificity: selectors start with body.single-product to beat WooCommerce's
   own layout/smallscreen CSS and Hello's purple button defaults.
   ========================================================================== */

body.single-product {
  --pp-ink: var(--sffr-ink, #2a170d);
  --pp-muted: var(--sffr-muted, #54433d);
  --pp-panel: var(--sffr-surface-low, #fff8ea);
  --pp-field: var(--sffr-surface-high, #f3e6c4);
  --pp-line: #e4d5b4;
  --pp-accent: var(--sffr-accent, #fdb742);
  --pp-accent-hover: var(--sffr-accent-hover, #ffcb6b);
  --pp-on-accent: var(--sffr-on-accent, #6e4900);
  --pp-deep: var(--sffr-deep, #815600);
}

/* ---- layout ---------------------------------------------------------------- */

body.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

body.single-product div.product::before,
body.single-product div.product::after {
  display: none;
}

body.single-product div.product div.images,
body.single-product div.product div.summary {
  float: none;
  width: auto;
  margin: 0;
}

body.single-product div.product section.related {
  grid-column: 1 / -1;
  clear: both;
}

@media (min-width: 720px) {
  body.single-product div.product {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
  }

  body.single-product div.product div.images {
    grid-column: 1;
    grid-row: 1;
  }

  body.single-product div.product div.summary {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }
}

@media (min-width: 1100px) {
  body.single-product div.product {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

/* ---- gallery ---------------------------------------------------------------- */

body.single-product div.product div.images {
  position: relative;
  /* WooCommerce hides the gallery until its script runs; never leave it blank */
  opacity: 1 !important;
}

body.single-product .woocommerce-product-gallery__wrapper {
  margin: 0;
}

body.single-product .woocommerce-product-gallery__image,
body.single-product .woocommerce-product-gallery .flex-viewport {
  overflow: hidden;
  border-radius: 15px;
  background: var(--pp-panel);
}

body.single-product .woocommerce-product-gallery__image img {
  display: block;
  width: 100%;
  height: auto;
  /* same square crop as the product card (the lightbox still opens the full photo) */
  aspect-ratio: 1;
  object-fit: cover;
}

body.single-product .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pp-panel);
  box-shadow: 0 1px 6px rgba(42, 23, 13, 0.18);
  font-size: 0;
  text-indent: 0;
}

body.single-product .woocommerce-product-gallery__trigger::before {
  inset: auto;
  position: static;
  margin: 0;
  border-color: var(--sffr-brand, #6d2a12);
}

body.single-product .woocommerce-product-gallery__trigger::after {
  border-color: var(--sffr-brand, #6d2a12);
  background: var(--sffr-brand, #6d2a12);
}

body.single-product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.625rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

body.single-product .flex-control-thumbs li {
  float: none;
  width: auto;
  margin: 0;
}

body.single-product .flex-control-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

body.single-product .flex-control-thumbs img.flex-active,
body.single-product .flex-control-thumbs img:hover {
  opacity: 1;
}

/* ---- summary ---------------------------------------------------------------- */

body.single-product div.summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  min-width: 0;
  font-family: 'Inter', sans-serif;
  color: var(--pp-muted);
}

body.single-product div.summary > * {
  margin: 0;
}

body.single-product .product_title {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--pp-ink);
  overflow-wrap: anywhere;
}

body.single-product div.summary p.price {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pp-deep);
}

body.single-product .woocommerce-product-details__short-description {
  font-size: 1rem;
  line-height: 1.65;
}

body.single-product .woocommerce-product-details__short-description p {
  margin: 0;
}

body.single-product .woocommerce-product-details__short-description p + p {
  margin-top: 0.25rem;
}

/* out of stock: same dark pill as on the product card */
body.single-product p.stock.out-of-stock {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--pp-ink);
  color: #fff8ea;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- quantity + add to cart --------------------------------------------------- */

body.single-product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
  margin: 0.25rem 0 0;
  padding: 1rem;
  border-radius: 20px;
  background: var(--pp-panel);
}

body.single-product form.cart .quantity {
  flex: 0 0 auto;
  margin: 0;
}

body.single-product form.cart .quantity .qty {
  box-sizing: border-box;
  width: 5.25rem;
  height: 3.25rem;
  padding: 0 0.75rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--pp-field);
  color: var(--pp-ink);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  -moz-appearance: textfield;
}

body.single-product form.cart .quantity .qty::-webkit-outer-spin-button,
body.single-product form.cart .quantity .qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

body.single-product form.cart .quantity .qty:focus-visible {
  outline: 2px solid var(--sffr-brand, #6d2a12);
  outline-offset: 2px;
}

body.single-product form.cart .single_add_to_cart_button.button.alt {
  flex: 1 1 12rem;
  min-height: 3.25rem;
  margin: 0;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--pp-accent);
  color: var(--pp-on-accent);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

body.single-product form.cart .single_add_to_cart_button.button.alt:hover,
body.single-product form.cart .single_add_to_cart_button.button.alt:focus-visible {
  background: var(--pp-accent-hover);
  color: var(--pp-ink);
}

body.single-product form.cart .single_add_to_cart_button.button.alt:focus-visible {
  outline: 2px solid var(--sffr-brand, #6d2a12);
  outline-offset: 2px;
}

body.single-product form.cart .single_add_to_cart_button.button.alt.disabled,
body.single-product form.cart .single_add_to_cart_button.button.alt:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- meta ---------------------------------------------------------------------- */

body.single-product .product_meta {
  width: 100%;
  padding-top: 0.875rem;
  border-top: 1px solid var(--pp-line);
  font-size: 0.875rem;
  color: var(--pp-muted);
}

body.single-product .product_meta a {
  color: var(--sffr-brand, #6d2a12);
}

/* ---- notice after add to cart ---------------------------------------------------- */

body.single-product .woocommerce-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.875rem 1.125rem;
  border: 0;
  border-radius: 15px;
  background: var(--pp-field);
  color: var(--pp-ink);
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
}

body.single-product .woocommerce-message::before {
  display: none;
}

body.single-product .woocommerce-message .button {
  order: 2;
  margin: 0 0 0 auto;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--pp-accent);
  color: var(--pp-on-accent);
  font-weight: 600;
}

body.single-product .woocommerce-message .button:hover,
body.single-product .woocommerce-message .button:focus-visible {
  background: var(--pp-accent-hover);
  color: var(--pp-ink);
}

/* ---- related products -------------------------------------------------------------- */

body.single-product section.related {
  margin-top: 2rem;
}

body.single-product section.related > h2 {
  margin: 0 0 1.5rem;
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--pp-ink);
}

/* phones: swipe row instead of four tall cards */
@media (max-width: 719px) {
  body.single-product section.related ul.products {
    display: flex;
    gap: 1rem;
    margin: 0 -1.25rem;
    padding: 0 1.25rem 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.single-product section.related ul.products::-webkit-scrollbar {
    display: none;
  }

  body.single-product section.related ul.products > li.product {
    flex: 0 0 78%;
    width: auto;
    max-width: 17rem;
    margin: 0;
    scroll-snap-align: start;
  }
}

/* ---- buy row = the product card's (stepper + AJAX add-to-cart) ------------------------ */

body.single-product .sffr-buybox {
  width: 100%;
  margin-top: 0.25rem;
  padding: 1rem;
  border-radius: 20px;
  background: var(--pp-panel);
}

body.single-product .sffr-buybox .sffr-product-card__buy {
  margin: 0;
  gap: 0.75rem;
  flex-wrap: nowrap;
  min-width: 0;
}

body.single-product .sffr-buybox .sffr-qty {
  height: 3.25rem;
  padding: 0 0.375rem;
  background: var(--pp-field);
}

body.single-product .sffr-buybox .sffr-qty input.sffr-qty__value {
  width: 2rem;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--pp-ink);
  font-size: 1rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

body.single-product .sffr-buybox .sffr-qty button.sffr-qty__btn {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  border: 0;
  background: #fff;
  color: var(--pp-ink);
  font-size: 1.125rem;
}

body.single-product .sffr-buybox a.add_to_cart_button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3.25rem;
  padding: 0 1.25rem;
  white-space: nowrap;
  font-size: 1rem;
}

@media (max-width: 379px) {
  body.single-product .sffr-buybox .sffr-product-card__buy {
    flex-wrap: wrap;
  }

  body.single-product .sffr-buybox a.add_to_cart_button {
    flex: 1 1 100%;
  }
}

/* WooCommerce appends a "view cart" link after an AJAX add; the card hides it, so do we
   (the header cart badge already shows the new count). */
body.single-product .sffr-buybox .added_to_cart {
  display: none !important;
}

/* WooCommerce paints loading/added buttons grey-lilac; keep the card's honey states */
body.single-product .sffr-buybox a.add_to_cart_button.loading,
body.single-product .sffr-buybox a.add_to_cart_button.added,
body.single-product .sffr-buybox a.add_to_cart_button.sffr-is-loading,
body.single-product .sffr-buybox a.add_to_cart_button.sffr-is-success {
  background: var(--pp-accent) !important;
  color: var(--pp-on-accent) !important;
  opacity: 1 !important;
}

body.single-product .sffr-buybox a.add_to_cart_button.sffr-is-error {
  background: #f2b8b0 !important;
  color: #7a1f12 !important;
  opacity: 1 !important;
}

/* weight tag = the card's tag */
body.single-product .woocommerce-product-details__short-description .sffr-product-card__props {
  margin: 0 0 0.5rem;
}

body.single-product .woocommerce-product-details__short-description .sffr-product-card__weight {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  border-color: var(--pp-line);
  border-radius: 4px;
}