@charset "utf-8";
/* ==========================================================================
   product-detail.html — visual refresh layer.

   Loaded AFTER product-detail.css so it overrides via normal cascade order
   (matching selector specificity, no !important needed). Deliberately
   additive/override-only: every class/id product-detail.js relies on
   (.dot-icon, .option-nav, .slider-ctrl-btn, .comment-form-back, etc.) keeps
   its exact name and JS-driven behavior (opacity/pointer-events/left/top
   toggling) — only colors, spacing, shadows, typography and CSS-only
   entrance/hover motion change.
   ========================================================================== */

:root {
  --pd-accent: #ff2d78;
  --pd-accent-deep: #d1004f;
  --pd-accent-pale: #ffe3ee;
  --pd-ink: #1c1a1f;
  --pd-ink-soft: #6b6570;
  --pd-line: rgba(28, 26, 31, 0.09);
  --pd-surface: #ffffff;
  --pd-bg-tint: #faf8f9;
  --pd-radius-lg: 20px;
  --pd-radius-md: 14px;
  --pd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pd-shadow: 0 1px 2px rgba(28,26,31,0.04), 0 20px 44px -26px rgba(28,26,31,0.28);
}

@media (prefers-reduced-motion: reduce) {
  .product * { animation: none !important; transition-duration: .001ms !important; }
}

/* ---- Page rhythm ---- */
.product {
  padding: 56px 6% 80px;
  gap: 48px;
}
@media screen and (min-width: 769px) {
  .product { display: flex; align-items: flex-start; }
  .product-images { position: sticky; top: 24px; }
}

/* ---- Gallery ---- */
.product-detail-product-images {
  background-color: var(--pd-bg-tint);
  border-radius: var(--pd-radius-lg);
  box-shadow: var(--pd-shadow);
  animation: pd-fade-up .6s var(--pd-ease) both;
}

.product-detail-product-images-list li img {
  box-shadow: none;
  border-radius: var(--pd-radius-md);
}

.product-detail-product-images .slider-ctrl-btn {
  width: 40px;
  height: 40px;
  margin-top: -20px;
  background-color: rgba(255,255,255,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -6px rgba(28,26,31,0.35);
  transition: opacity .3s var(--pd-ease), transform .25s var(--pd-ease), background-color .25s var(--pd-ease);
  font-size: 15px;
}
.product-detail-product-images .slider-ctrl-btn:hover {
  background-color: #fff;
  transform: scale(1.08);
}

.product-detail-product-images .slider-dot {
  height: 8px;
  width: 8px;
  background-color: rgba(28,26,31,0.18);
  transition: transform .25s var(--pd-ease), background-color .25s var(--pd-ease);
}
.product-detail-product-images .slider-dot.point {
  background-color: var(--pd-accent);
  transform: scale(1.25);
}

.product-detail-product-images-sub .choice-btn li {
  background-color: var(--pd-bg-tint);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .25s var(--pd-ease), box-shadow .25s var(--pd-ease);
}
.product-detail-product-images-sub .choice-btn li:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -14px rgba(28,26,31,0.4);
  cursor: pointer;
}
.product-detail-product-images-sub .choice-btn li img {
  box-shadow: none;
}

/* ---- Text column: staggered entrance ---- */
.product-text .product-top {
  border-bottom: none;
  padding-bottom: 24px;
  animation: pd-fade-up .6s var(--pd-ease) .05s both;
}
.product-text .product-explain {
  border-bottom: none;
  border-top: 1px solid var(--pd-line);
  animation: pd-fade-up .6s var(--pd-ease) .1s both;
}
.product-text .product-detail {
  border-bottom: none;
  border-top: 1px solid var(--pd-line);
  animation: pd-fade-up .6s var(--pd-ease) .15s both;
}
.product-text .product-video,
.product-text .product-owner {
  border-bottom: none;
  border-top: 1px solid var(--pd-line);
  animation: pd-fade-up .6s var(--pd-ease) .18s both;
}
.product-text .product-comment {
  animation: pd-fade-up .6s var(--pd-ease) .22s both;
}

@keyframes pd-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.product-text .title {
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--pd-ink);
}

.product-text .product-top h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--pd-ink);
}

.product-text .product-top .product-top-price {
  font-size: clamp(24px, 2.6vw, 34px);
  color: var(--pd-accent-deep);
  font-weight: 800;
  margin: 4px 0 14px;
}
.product-text .product-top .product-top-price span {
  font-size: 13px;
  color: var(--pd-ink-soft);
  font-weight: 500;
  margin-left: 4px;
}

/* Primary CTA — the single most important interaction on the page */
.product-text .product-top .product-top-buy,
.product-text .product-top .product-top-bought {
  width: 100%;
  background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-deep) 100%);
  border-radius: 999px;
  box-shadow: 0 14px 30px -12px rgba(209, 0, 79, 0.55);
  transition: transform .25s var(--pd-ease), box-shadow .25s var(--pd-ease);
  position: relative;
  overflow: hidden;
}
.product-text .product-top .product-top-buy::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--pd-ease);
}
.product-text .product-top .product-top-buy:hover {
  background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-deep) 100%);
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(209, 0, 79, 0.6);
}
.product-text .product-top .product-top-buy:hover::after { transform: translateX(120%); }

.product-text .product-top .product-top-buy a p,
.product-text .product-top .product-top-bought p {
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 700;
  letter-spacing: .04em;
}

@media screen and (max-width: 768px) {
  .product-text .product-top .product-top-buy,
  .product-text .product-top .product-top-bought {
    position: sticky;
    bottom: 14px;
    z-index: 5;
  }
}

.product-text .product-top .product-top-div .product-top-like img,
.product-text .product-top .product-top-div .product-top-comment img {
  transition: transform .2s var(--pd-ease);
}
.product-text .product-top .product-top-div .product-top-like img:hover,
.product-text .product-top .product-top-div .product-top-comment:hover img {
  transform: scale(1.15);
}

.product-text .product-top .option-nav {
  border-radius: 12px;
  border: none;
  box-shadow: var(--pd-shadow);
  transition: opacity .25s var(--pd-ease), transform .25s var(--pd-ease);
  transform: translateY(-4px);
}

/* ---- Detail table ---- */
.product-text .product-detail table {
  width: 100%;
  border-spacing: 0;
}
.product-text .product-detail table tr {
  transition: background-color .2s var(--pd-ease);
}
.product-text .product-detail table tr:hover {
  background-color: var(--pd-bg-tint);
}
.product-text .product-detail table th,
.product-text .product-detail table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--pd-line);
}
.product-text .product-detail table th {
  color: var(--pd-ink-soft);
  font-weight: 500;
  width: 38%;
}
.product-text .product-detail table td {
  color: var(--pd-ink);
  font-weight: 600;
  padding-left: 20px;
}

/* ---- Owner card ---- */
.product-text .product-owner .product-owner-link a {
  border-radius: var(--pd-radius-md);
  border: 1px solid var(--pd-line);
  background: var(--pd-surface);
  box-shadow: var(--pd-shadow);
  transition: transform .25s var(--pd-ease), box-shadow .25s var(--pd-ease);
}
.product-text .product-owner .product-owner-link a:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -22px rgba(28,26,31,0.35);
}
.product-text .product-owner .product-owner-link a .owner-image {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--pd-accent-pale);
}

/* ---- Comments ---- */
.product-text .product-comment .comment-button {
  border-radius: 999px;
  background: var(--pd-bg-tint);
  border: 1px solid var(--pd-line);
  transition: transform .2s var(--pd-ease), box-shadow .2s var(--pd-ease);
}
.product-text .product-comment .comment-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow);
}
.product-text .product-comment .comments .comment-owner {
  border-radius: var(--pd-radius-md);
  padding: 12px;
  transition: background-color .2s var(--pd-ease);
}
.product-text .product-comment .comments .comment-owner:hover {
  background-color: var(--pd-bg-tint);
}
.product-text .product-comment .comments .comment-owner a img {
  border-radius: 50%;
}

/* ---- Modals: keep exact JS-driven opacity/top/transform contract,
   only refine easing + surface styling ---- */
.final-text-form-back,
.rejection-form-back,
.comment-form-back,
.final-form-container-back {
  transition: opacity .45s var(--pd-ease);
  backdrop-filter: blur(2px);
}
.final-text-form-back .final-text-form-container,
.rejection-form-back .final-text-form-container,
.comment-form-back .final-text-form-container,
.final-form-container-back .final-form-container {
  border: none;
  border-radius: var(--pd-radius-lg);
  box-shadow: 0 30px 70px -20px rgba(28,26,31,0.45);
  transition: opacity .45s var(--pd-ease), top .45s var(--pd-ease);
}
.final-text-form-back .final-text-form-container form button {
  background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-deep) 100%);
  color: #fff;
  border: none;
  transition: transform .2s var(--pd-ease), box-shadow .2s var(--pd-ease);
}
.final-text-form-back .final-text-form-container form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -10px rgba(209,0,79,0.5);
}
.final-form-container-back .final-form-container {
  padding: 32px 24px;
}
.final-form-container-back .final-form-container h3 {
  color: var(--pd-ink);
}
.final-form-container-back .final-form-option button {
  border-radius: 999px;
  border: none;
  transition: transform .2s var(--pd-ease), box-shadow .2s var(--pd-ease);
}
.final-form-container-back .final-form-option button:hover {
  transform: translateY(-1px);
}
/* Clear visual hierarchy: the confirming action (always rendered first —
   delete/approve/review-request submit) reads as the deliberate choice;
   cancel stays a quiet, neutral outline so it's never mistaken for it. */
.final-form-container-back .final-form-option button:first-child {
  background: linear-gradient(135deg, var(--pd-accent) 0%, var(--pd-accent-deep) 100%);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(209,0,79,0.5);
}
.final-form-container-back .final-form-option button:last-child {
  background: transparent;
  border: 1px solid var(--pd-line);
  color: var(--pd-ink-soft);
}