/* ============================================================================
   Nyraa Skin Care — Single product (PDP), reference layout. Tokens only.
   Loaded on is_product() after shop.css.
   ============================================================================ */

.product-single { padding-block: var(--space-2xl) 0; }

/* ---------------- Top: media + summary ---------------- */
.product-single__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (min-width: 992px) {
  .product-single__top { grid-template-columns: 1fr 1fr; gap: var(--space-3xl); }
}

/* Media */
.product-single__media { position: relative; }
/* Override WooCommerce's default 48%/float gallery sizing inside our grid. */
.woocommerce div.product.product-single .woocommerce-product-gallery { width: 100%; float: none; margin: 0; }
.product-single__media .woocommerce-product-gallery,
.product-single__media .woocommerce-product-gallery__wrapper { margin: 0; }
/* Square tile enforced on the SLIDE container (robust against flexslider sizing);
   product shown in full via contain so portrait packshots are never cropped. */
.product-single__media .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-surface);
}
.product-single__media .woocommerce-product-gallery__image > a { display: block; width: 100%; height: 100%; }
.product-single__media .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-lg);
  display: block;
}
.product-single__media .flex-control-thumbs {
  display: flex;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.product-single__media .flex-control-thumbs li { width: 72px; }
.product-single__media .flex-control-thumbs img { aspect-ratio: 1 / 1; border-radius: var(--radius-md); cursor: pointer; opacity: 0.65; transition: opacity var(--dur-base) var(--ease-standard); }
.product-single__media .flex-control-thumbs img.flex-active,
.product-single__media .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce div.product div.images .flex-control-thumbs li img {
  margin-top: 20px;
}

.product-single__badge {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 2;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: var(--color-text-inverse);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.product-single__badge--sale { background: var(--color-primary); }
.product-single .onsale { display: none; } /* replaced by our badge */

/* Summary */
.product-single__summary { display: flex; flex-direction: column; }
.product-single__breadcrumb { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-md); }
.product-single__breadcrumb a { color: var(--color-text-secondary); }
.product-single__breadcrumb a:hover { color: var(--color-primary); }
.product-single__title {
  font-family: var(--font-headline);
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.product-single__rating { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.product-single__reviewlink { font-size: var(--fs-small); color: var(--color-text-secondary); }
.product-single__reviewlink:hover { color: var(--color-primary); }
.product-single__price { font-size: var(--fs-h5); font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: var(--space-lg); }
.product-single__price del { color: var(--color-text-muted); font-weight: var(--fw-regular); margin-inline-end: var(--space-xs); }
.product-single__price ins { text-decoration: none; color: var(--color-primary); }
.product-single__excerpt { color: var(--color-text-secondary); line-height: var(--lh-body); margin-bottom: var(--space-xl); max-width: 52ch; }
.product-single__excerpt p:last-child { margin-bottom: 0; }

/* Buy row */
.product-single__buy { display: flex; align-items: stretch; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.product-single__buy form.cart { flex: 1 1 auto; margin: 0; display: flex; gap: var(--space-sm); }
.product-single .quantity { display: none; } /* PDP adds 1; adjust in cart */
.product-single__buy .single_add_to_cart_button,
.product-single__buy form.cart button.button {
  flex: 1 1 auto;
  width: 100%;
  min-height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard);
}
/* Mirrors the selector pair above, and tokens only — no hardcoded fallback. */
.product-single__buy .single_add_to_cart_button:hover,
.product-single__buy form.cart button.button:hover { background: var(--primary-600); }
.product-single__wishlist {
  position: static; /* override .product-card__wishlist (absolute in cards) */
  inset: auto;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-color);
}
.product-single__wishlist:hover { border-color: var(--color-primary); color: var(--color-primary); }
.product-single__wishlist[aria-pressed="true"] { color: var(--color-primary); border-color: var(--color-primary); }
.product-single__wishlist[aria-pressed="true"] .material-symbols-outlined { font-variation-settings: 'FILL' 1; }

/* Variations table (variable products) */
.product-single__buy .variations_form { flex: 1 1 auto; display: block; }
.product-single .variations td, .product-single .variations th { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; }

/* Accordion */
.product-acc { border-top: 1px solid var(--color-border); }
.product-acc__item { border-bottom: 1px solid var(--color-border); }
.product-acc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text);
}
.product-acc__summary::-webkit-details-marker { display: none; }
.product-acc__icon { color: var(--color-primary); transition: transform var(--dur-base) var(--ease-standard); }
.product-acc__item[open] .product-acc__icon { transform: rotate(180deg); }
.product-acc__body { padding: 0 0 var(--space-md); color: var(--color-text-secondary); line-height: var(--lh-body); }
.product-acc__body p:last-child { margin-bottom: 0; }

/* ---------------- Complete the Routine ---------------- */
.product-routine { background: var(--color-surface); padding-block: var(--space-3xl); margin-top: var(--space-2xl); }
.product-routine__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.product-routine__title { font-family: var(--font-headline); font-size: var(--fs-h2); margin-top: var(--space-xs); }
.product-routine__all { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-primary); border-bottom: 1px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.product-routine__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
@media (min-width: 768px) { .product-routine__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }

/* ---------------- Reviews: The Nyraa Experience ---------------- */
.product-reviews { padding-block: var(--space-3xl); }
.product-reviews__title { font-family: var(--font-headline); font-size: var(--fs-h2); text-align: center; margin-bottom: var(--space-2xl); }
.product-reviews__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2xl); align-items: start; }
@media (min-width: 992px) { .product-reviews__grid { grid-template-columns: 300px 1fr; gap: var(--space-3xl); } }

.review-summary__score { font-family: var(--font-headline); font-size: 3.4rem; line-height: 1; color: var(--color-text); }
.review-summary__stars { margin: var(--space-xs) 0; }
.review-summary__count { font-size: var(--fs-small); color: var(--color-text-secondary); margin-bottom: var(--space-lg); }
.review-bars { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.review-bars__row { display: flex; align-items: center; gap: var(--space-sm); }
.review-bars__label { width: 12px; font-size: var(--fs-small); color: var(--color-text-secondary); text-align: end; }
.review-bars__track { flex: 1 1 auto; height: 6px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.review-bars__fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-secondary); }
.review-summary__cta { width: 100%; }
.review-summary__empty { color: var(--color-text-secondary); line-height: var(--lh-body); margin-bottom: var(--space-lg); }
.product-single__reviewlink--none { display: inline-block; margin-bottom: var(--space-md); color: var(--color-primary); font-weight: var(--fw-medium); font-size: var(--fs-small); }

/* Review panel (WooCommerce comments/form) */
.review-panel {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}
.review-panel .commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.review-panel .comment_container { display: flex; gap: var(--space-md); }
.review-panel .comment_container img.avatar { width: 44px; height: 44px; border-radius: var(--radius-full); }
.review-panel .comment-text { flex: 1 1 auto; }
.review-panel .meta { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-xs); }
.review-panel .woocommerce-review__author { font-weight: var(--fw-semibold); color: var(--color-text); }
.review-panel .description { color: var(--color-text-secondary); line-height: var(--lh-body); }
.review-panel .woocommerce-noreviews { color: var(--color-text-secondary); }
.review-panel #review_form_wrapper { margin-top: var(--space-lg); }
.review-panel #reply-title { font-family: var(--font-headline); font-size: var(--fs-h4); }
.review-panel .comment-form label { display: block; margin-bottom: var(--space-xs); font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.review-panel .comment-form input[type="text"],
.review-panel .comment-form input[type="email"],
.review-panel .comment-form textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.review-panel .comment-form p { margin-bottom: var(--space-md); }
.review-panel .comment-form .form-submit input,
.review-panel #respond input#submit {
  min-height: 48px;
  padding-inline: var(--space-xl);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}

/* Star rating colour (WooCommerce font stars) */
.product-single .star-rating,
.product-reviews .star-rating,
.product-single__rating .star-rating { color: var(--color-primary); }

/* Responsive */
@media (max-width: 767px) {
  .product-single { padding-block: var(--space-lg) 0; }
  .product-single__top { gap: var(--space-xl); }
  .product-single__buy { flex-wrap: wrap; }
  .product-single__buy .single_add_to_cart_button,
  .product-single__buy form.cart button.button { min-height: 52px; }

  .product-routine { margin-top: var(--space-lg); padding-block: var(--space-2xl); }
  .product-routine__head { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .product-reviews { padding-block: var(--space-2xl); }

  /* Section headings were fixed fs-h2 (39px) — too large / awkward wraps on phones. */
  .product-routine__title,
  .product-reviews__title { font-size: clamp(1.6rem, 7vw, var(--fs-h2)); }
  .product-reviews__title { margin-bottom: var(--space-xl); }

  .review-summary { max-width: 420px; margin-inline: auto; }
  .review-panel { padding: var(--space-lg); }
  .review-panel .woocommerce-Reviews-title,
  .review-panel #reply-title { font-size: var(--fs-h5); }
}