/* Product page (avy-calc region) — saiwei graphite/lime redesign layer.
 * Scoped to .avy-calc-page (the class wc_product_class puts on the product
 * <article> in woocommerce/content-single-default.php), so nothing here can
 * leak into cart/checkout or the saiwei description blocks further down the
 * page. Loads after avy-design-system.css; every selector carries the
 * .avy-calc-page ancestor so it wins on specificity, not just order.
 *
 * Palette discipline (same as home-p003 / blog): graphite #0B0D10 + lime
 * #C7FF2E + white/#F4F6F8; blue #2563EB reserved for inline text links.
 */

.avy-calc-page {
  font-family:
    "Outfit",
    Inter,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* ── KSP rail: light-blue strip → graphite rail with lime checks ── */
.avy-calc-page .avy-calc-ksp {
  background: #0b0d10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 40px;
  padding: 14px 20px;
}

.avy-calc-page .avy-calc-ksp__item {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.avy-calc-page .avy-calc-ksp__icon {
  color: #c7ff2e;
}

/* ── Left column: display title, monochrome rating, rounded gallery ── */
.avy-calc-page .avy-calc-left__title {
  color: #0b0d10;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.avy-calc-page .avy-calc-left__star--filled {
  color: #0b0d10;
}

.avy-calc-page .avy-calc-left__rating-num {
  color: #0b0d10;
  font-weight: 800;
}

.avy-calc-page .avy-calc-left__review-link {
  color: #2563eb;
}

.avy-calc-page .avy-calc-left__review-link:hover {
  color: #0b0d10;
}

.avy-calc-page .avy-calc-left__desc {
  color: #4b5563;
}

.avy-calc-page .avy-calc-left__gallery-main {
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 22px;
  background: #f4f6f8;
}

.avy-calc-page .avy-calc-left__gallery-prev:hover,
.avy-calc-page .avy-calc-left__gallery-next:hover {
  color: #0b0d10;
  background: #c7ff2e;
}

.avy-calc-page .avy-calc-left__thumb {
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #f4f6f8;
}

.avy-calc-page .avy-calc-left__thumb:hover,
.avy-calc-page .avy-calc-left__thumb--active {
  border-color: #0b0d10;
}

.avy-calc-page .avy-calc-left__thumbs-arrow:hover {
  background: #0b0d10;
  color: #c7ff2e;
}

/* ── Right panel: softer card in the saiwei register ── */
.avy-calc-page .avy-calc {
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 26px;
  box-shadow: 0 16px 42px rgba(17, 24, 39, 0.075);
  padding: 28px;
}

.avy-calc-page .avy-calc__guarantee {
  color: #4b5563;
  font-weight: 700;
}

.avy-calc-page .avy-calc__divider {
  border-top-color: rgba(17, 24, 39, 0.08);
}

.avy-calc-page .avy-calc__cfg-label {
  color: #3a3c41;
  letter-spacing: 0.11em;
}

/* ── Size / audience pills: active = graphite fill + lime icon ── */
.avy-calc-page .avy-calc__size-pill {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
}

.avy-calc-page .avy-calc__size-pill strong {
  color: #374151;
}

.avy-calc-page .avy-calc__size-pill small {
  color: #6b7280;
}

.avy-calc-page .avy-calc__size-pill:hover,
.avy-calc-page .avy-calc__size-pill:focus-visible {
  border-color: #0b0d10;
  background: #fff;
  transform: translateY(-1px);
}

/* Active must also win over :hover/:focus-visible above (pseudo-class adds
   specificity): after a click the pointer still rests on the pill, and the
   white hover fill would otherwise hide the white active label. */
.avy-calc-page .avy-calc__size-pill--active,
.avy-calc-page .avy-calc__size-pill--active:hover,
.avy-calc-page .avy-calc__size-pill--active:focus-visible {
  border-color: #0b0d10;
  background: #0b0d10;
  box-shadow: none;
  transform: none;
}

.avy-calc-page .avy-calc__size-pill--active strong {
  color: #fff;
}

.avy-calc-page .avy-calc__size-pill--active small {
  color: rgba(255, 255, 255, 0.65);
}

.avy-calc-page .avy-calc__mold-pill svg {
  fill: #374151;
}

.avy-calc-page .avy-calc__size-pill--active.avy-calc__mold-pill svg {
  fill: #c7ff2e;
}

/* Ultra seam strokes: white is invisible on the lime active fill —
   flip to graphite on active, keep white on the gray idle fill. */
.avy-calc-page
  .avy-calc__size-pill--active.avy-calc__mold-pill
  svg
  .avy-calc__shape-seam {
  stroke: #0b0d10;
}

/* ── Price ── */
.avy-calc-page .avy-calc__price {
  color: #0b0d10;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.avy-calc-page .avy-calc__price-note,
.avy-calc-page .avy-calc__size-tolerance,
.avy-calc-page .avy-calc__audience-note {
  color: #434345;
}

/* ── CTA: lime pill, matches .btn-primary in saiwei-shared ── */
.avy-calc-page .avy-calc__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 22px;
  background: #c7ff2e;
  color: #0b0d10;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.09em;
  box-shadow: 0 14px 34px rgba(11, 13, 16, 0.2);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.avy-calc-page .avy-calc__cta:hover {
  background: #b8f625;
  color: #0b0d10;
  transform: translateY(-2px);
}

/* Transient "added" feedback keeps its green — it is a status, not chrome. */
.avy-calc-page .avy-calc__cta--added,
.avy-calc-page .avy-calc__cta--added:hover {
  background: rgb(39, 174, 96);
  color: #fff;
  transform: none;
}

/* ── Action row: wishlist + quote as outline pills ── */
.avy-calc-page .avy-calc__wishlist .yith-wcwl-add-to-wishlist-button {
  border: 1px solid #d1d5db;
  border-radius: 999px;
  color: #374151;
  font-weight: 800;
}

.avy-calc-page .avy-calc__wishlist .yith-wcwl-add-to-wishlist-button:hover {
  color: #0b0d10;
  border-color: #0b0d10;
  background: #f4f6f8;
}

.avy-calc-page .avy-calc__wishlist .yith-wcwl-add-to-wishlist-button:hover svg {
  fill: #0b0d10;
  stroke: #0b0d10;
}

.avy-calc-page .avy-calc__quote-btn {
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: transparent;
  color: #111827;
  font-weight: 800;
}

.avy-calc-page .avy-calc__quote-btn:hover {
  background: #f4f6f8;
  border-color: #0b0d10;
  color: #0b0d10;
}

/* ── Trust block: graphite icons, blue only on the policy link ── */
.avy-calc-page .avy-calc__trust {
  border-top-color: rgba(17, 24, 39, 0.08);
}

.avy-calc-page .avy-calc__trust-item svg {
  color: #0b0d10;
}

.avy-calc-page .avy-calc__trust-item p strong {
  color: #111827;
}

.avy-calc-page .avy-calc__trust-item a {
  color: #2563eb;
}

.avy-calc-page .avy-calc__trust-item a:hover {
  color: #0b0d10;
}

/* ── Mobile: keep the rail readable when it wraps ── */
@media (max-width: 780px) {
  .avy-calc-page .avy-calc-ksp {
    flex-wrap: wrap;
    gap: 10px 18px;
    justify-content: flex-start;
  }

  .avy-calc-page .avy-calc {
    padding: 20px;
    border-radius: 20px;
  }
}