/* 自己的评论高亮置顶样式 */
.pc-card.pc-card-mine {
  background: linear-gradient(180deg, #fffbe6, #fff6d6);
  border: 2px solid var(--pc-primary);
  box-shadow: 0 8px 32px rgba(255,106,0,0.08);
}

/* 删除按钮样式 */
.pc-comment-delete-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  background: linear-gradient(90deg, #ff4b0c, #ff8a2b);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,106,0,0.08);
  transition: background .18s, box-shadow .18s;
  z-index: 2;
}
.pc-comment-delete-btn:hover {
  background: linear-gradient(90deg, #ff8a2b, #ff4b0c);
  box-shadow: 0 6px 18px rgba(255,106,0,0.16);
}
/* Product Comments (wpDiscuz) - Custom theme styles
   Fully custom, English copy, rich CSS effects and pseudo-classes
  Colors follow site theme: primary orange #ff4b0c, dark #111, soft gray #f5f5f5
*/
:root{
  --pc-primary: #ff4b0c;
  --pc-dark: #111;
  --pc-muted: #6b6b6b;
  --pc-bg: #ffffff;
  --pc-ink: #212121;
  --pc-radius: 12px;
}
.ow-scroll-anchor{
  position: relative;
  display: block;
  height: 1px;
  scroll-margin-top: 120px;
}
#review_form{
  scroll-margin-top: 120px;
}
.product-comments-wpdiscuz{ margin-top:48px; padding:34px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(250,250,250,1)); border-radius:14px; box-shadow:0 8px 30px rgba(16,24,40,0.06); overflow:hidden }
.product-comments-wpdiscuz .pc-header{ display:flex; align-items:center; gap:18px; margin-bottom:20px }
.product-comments-wpdiscuz .pc-header .pc-title{ font-size:22px; font-weight:800; color:var(--pc-dark); letter-spacing:-0.2px }
.product-comments-wpdiscuz .pc-header .pc-sub{ color:var(--pc-muted); font-size:13px }

/* Fancy underline accent */
.product-comments-wpdiscuz .pc-header .pc-title::after{ content:''; display:block; height:4px; width:64px; background:linear-gradient(90deg,var(--pc-primary),#ff8a2b); border-radius:4px; margin-top:8px; opacity:.95 }

/* Two-column layout: comments list + side panel */
.product-comments-wpdiscuz .pc-grid{ display:grid; grid-template-columns: 1fr 320px; gap:22px }
@media (max-width: 991px){ .product-comments-wpdiscuz .pc-grid{ grid-template-columns: 1fr; } }
.product-comments-wpdiscuz .pc-grid-stacked{ grid-template-columns: 1fr; }
.product-comments-wpdiscuz .pc-grid-stacked .pc-list{ order: 1 }
.product-comments-wpdiscuz .pc-grid-stacked .pc-form{ order: 2; margin-top:18px }

/* Comments list */
.pc-list{ display:flex; flex-direction:column; gap:16px }
.pc-card{ position:relative; z-index:0; isolation:isolate; background:linear-gradient(180deg,#fff,#fbfbfb); border-radius:var(--pc-radius); padding:16px; box-shadow:0 6px 18px rgba(16,24,40,0.04); border:1px solid rgba(0,0,0,0.03); overflow:hidden; transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s }
.pc-card .pc-meta,
.pc-card .pc-body,
.pc-card .pc-actions{ position:relative; z-index:1; }
.pc-card:hover{ transform:translateY(-6px); box-shadow:0 12px 36px rgba(16,24,40,0.08) }
.pc-comments-container{ overflow:visible; transition: opacity .4s }
.pc-card.hidden{ display:none !important; }

/* Glow pseudo effect on hover */
.pc-card::after{ content:''; position:absolute; z-index:0; pointer-events:none; inset:auto -40% -40% -40%; background: radial-gradient(600px 200px at 0% 0%, rgba(255,106,0,0.06), transparent 15%); opacity:0; transition:opacity .35s }
.pc-card:hover::after{ opacity:1 }

.pc-meta{ display:flex; align-items:center; gap:12px; margin-bottom:8px }
.pc-avatar{ width:40px; height:40px; border-radius:999px; overflow:hidden; flex:0 0 40px; box-shadow:0 2px 8px rgba(0,0,0,.06) }
.pc-avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.pc-author{ font-weight:700; color:var(--pc-ink); font-size:14px }
.pc-time{ color:var(--pc-muted); font-size:12px }

.pc-body{ color:#333; font-size:14px; line-height:1.6 }

/* action row */
.pc-actions{ display:flex; gap:12px; margin-top:12px; align-items:center }
.pc-btn{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; background:transparent; border:1px solid rgba(0,0,0,0.06); color:var(--pc-ink); font-weight:700; cursor:pointer; transition:all .18s }
.pc-btn:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(16,24,40,0.06); border-color:rgba(0,0,0,0.12) }
.pc-btn--primary{ background:linear-gradient(90deg,var(--pc-primary),#ff8a2b); color:#fff; border:0 }
.pc-btn--ghost{ background:transparent }

/* subtle counter badge */
.pc-badge{ background:var(--pc-bg); color:var(--pc-muted); padding:4px 8px; border-radius:999px; border:1px solid rgba(0,0,0,.04); font-weight:700; font-size:12px }

/* side panel */
.pc-side{ background:linear-gradient(180deg,#fff,#fff); border-radius:12px; padding:16px; border:1px solid rgba(0,0,0,0.04) }
.pc-side h4{ margin:0 0 12px; font-size:16px }
.pc-side .pc-stats{ display:flex; gap:12px; align-items:center }
.pc-side .pc-stat{ display:flex; flex-direction:column; align-items:flex-start }
.pc-side .pc-stat .num{ font-size:20px; font-weight:800; color:var(--pc-dark) }
.pc-side .pc-stat .label{ font-size:12px; color:var(--pc-muted) }

/* comment form styles */
.pc-form{ margin-top:18px; background:linear-gradient(180deg,#fff,#fbfbfb); border-radius:12px; padding:16px; border:1px solid rgba(0,0,0,0.04) }
.pc-form textarea{ width:100%; min-height:110px; border-radius:8px; padding:12px; border:1px solid rgba(0,0,0,0.06); resize:vertical; font-size:14px; outline:none }
.pc-form textarea:focus{ box-shadow:0 10px 30px rgba(255,106,0,0.06); border-color:var(--pc-primary) }
.pc-form .pc-form-row{ display:flex; gap:12px; margin-top:10px }
.pc-form .pc-submit{ margin-left:auto }

/* fancy pseudo hover on submit */
.pc-form .pc-submit button{ position:relative; overflow:hidden }
.pc-form .pc-submit button::after{ content:''; position:absolute; left:50%; top:50%; width:0; height:0; background:rgba(255,255,255,0.12); transform:translate(-50%,-50%) rotate(45deg); transition:width .4s ease, height .4s ease }
.pc-form .pc-submit button:active::after{ width:200%; height:400% }

/* small helper for invisible focus ring on interactive elements */
button:focus, a:focus{ outline:3px solid rgba(255,106,0,0.12); outline-offset:4px }

/* entrance animation helpers */
.product-comments-wpdiscuz { opacity:0; transform:translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1) }
.product-comments-wpdiscuz.is-visible { opacity:1; transform:none }

/* upvote animation */
.pc-upvote { display:inline-flex; align-items:center; gap:8px }
.pc-upvote .count{ font-weight:800; color:var(--pc-dark) }
.pc-upvote .heart{ color:rgba(255,106,0,0.12); transition:transform .32s, color .32s }
.pc-upvote.is-active .heart{ transform:scale(1.18); color:var(--pc-primary) }

/* accessibility tweaks: hide decorative elements from screen readers */
.product-comments-wpdiscuz .decorative { pointer-events:none; user-select:none }

/* small responsive tweaks */
@media (max-width: 575px){
  .product-comments-wpdiscuz{ padding:18px }
  .pc-header .pc-title{ font-size:18px }
}

/* Pagination controls */
.pc-pagination{ display:flex; gap:12px; align-items:center; justify-content:center; margin-top:16px }
.pc-page-btn{ padding:8px 12px; border-radius:8px; background:#fff; border:1px solid rgba(0,0,0,0.06); cursor:pointer; font-weight:700 }
.pc-page-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(16,24,40,0.06) }
.pc-page-info{ font-weight:700; color:var(--pc-muted) }

/* Empty placeholder */
.pc-empty-placeholder{ padding:18px; text-align:center; border-radius:8px; background:linear-gradient(90deg, rgba(255,106,0,0.04), rgba(255,106,0,0.02)); color:var(--pc-muted); font-weight:700 }

/* per-item staggered reveal */
.pc-card{ opacity:0; transform:translateY(8px); }
.pc-card.entered{ opacity:1; transform:none; transition:opacity .36s ease, transform .36s cubic-bezier(.2,.9,.2,1) }

/* page-turn flip effect (container) */
.pc-comments-container.page-turn{ animation: pageFlip .48s ease }
@keyframes pageFlip{ 0%{ transform: perspective(800px) rotateX(6deg) translateY(8px); opacity:0 } 100%{ transform:none; opacity:1 } }

/* Fancy form heading gradient */
  .pc-header .pc-title{ background: linear-gradient(90deg, #ff4b0c, #ff8a2b, #ffcc66); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent }

/* ripple effect for submit button */
.pc-submit .pc-btn{ position:relative; overflow:hidden }
.pc-submit .pc-btn .ripple{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,0.18); pointer-events:none }

/* card tilt lighting */
.pc-card{ perspective: 1000px; }
.pc-card .tilt-light{ position:absolute; z-index:0; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:.18; transition:opacity .24s }
.pc-card .tilt-overlay{ position:absolute; z-index:0; inset:0; border-radius:inherit; box-shadow: inset 0 0 60px rgba(255,106,0,0.02); pointer-events:none }
.pc-card:hover .tilt-light{ opacity:.32 }

/* stronger hover pseudo glow */
.pc-card:hover::before{ content:''; position:absolute; z-index:0; inset:-8px; border-radius:inherit; background:linear-gradient(160deg, rgba(255,106,0,0.06), rgba(255,106,0,0)); filter:blur(18px); pointer-events:none }

/* Rating stars form */
.rating-stars{ display:inline-flex; flex-direction:row-reverse; gap:6px }
.rating-stars input{ display:none }
.rating-stars label{ cursor:pointer; font-size:26px; color:#ddd; transition:transform .12s ease, color .12s ease }
.rating-stars label{ transition:transform .12s ease, color .12s ease }
.rating-stars .star.hovered, .rating-stars .star.selected{ color:var(--pc-primary); transform:translateY(-2px) }

/* Star SVG styling: gradient fill + outline + glow */
.rating-stars{ display:flex; gap:10px; align-items:center }
.rating-stars .star{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer; transition:transform .22s cubic-bezier(.2,.9,.2,1), filter .22s }
.rating-stars .star svg path{ fill: currentColor; transition:fill .22s, transform .22s }
.rating-stars .star.hovered{ transform:translateY(-6px) scale(1.06); filter:drop-shadow(0 10px 30px rgba(255,106,0,0.18)); }
.rating-stars .star.selected svg path{ transform:scale(1.04); }
.rating-stars .star{ color:#d9d9d9 } /* default star color (fallback) */
.rating-stars .star.selected{ color:var(--pc-primary); filter:drop-shadow(0 10px 30px rgba(255,106,0,0.18)); }

/* define fallback gradient using CSS variables and SVG mask (in case SVG gradient id not available) */
.rating-stars .star svg{ filter: drop-shadow(0 4px 14px rgba(255,106,0,0.06)); }

/* special 5-star celebration state */
.rating-stars.five-hit{ animation: fivePop .9s ease; }
@keyframes fivePop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.06) rotate(-2deg) } 100%{ transform:scale(1) } }
.rating-stars.five-hit .star{ transition: transform .28s; }
.rating-stars.five-hit .star.selected{ filter:drop-shadow(0 18px 48px rgba(255,140,40,0.26)); transform:translateY(-8px) scale(1.08); }

/* richer five-star celebration visuals */
.rating-stars.five-hit{ position:relative }
.rating-stars.five-hit::after{
  content:''; position:absolute; left:50%; top:50%; width:260px; height:260px; transform:translate(-50%,-50%) scale(.2); border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,200,120,0.14), rgba(255,120,30,0.06) 30%, transparent 60%); opacity:0; pointer-events:none; transition:opacity .18s, transform .9s cubic-bezier(.2,.9,.2,1);
}
.rating-stars.five-hit.active::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* per-star staged pop */
.rating-stars.five-hit .star{ transform-origin:center center }
.rating-stars.five-hit .star:nth-of-type(1){ animation: fiveSpark .9s cubic-bezier(.2,.9,.2,1) 0ms both }
.rating-stars.five-hit .star:nth-of-type(2){ animation: fiveSpark .9s cubic-bezier(.2,.9,.2,1) 40ms both }
.rating-stars.five-hit .star:nth-of-type(3){ animation: fiveSpark .9s cubic-bezier(.2,.9,.2,1) 80ms both }
.rating-stars.five-hit .star:nth-of-type(4){ animation: fiveSpark .9s cubic-bezier(.2,.9,.2,1) 120ms both }
.rating-stars.five-hit .star:nth-of-type(5){ animation: fiveSpark .9s cubic-bezier(.2,.9,.2,1) 160ms both }
@keyframes fiveSpark{ 0%{ transform:translateY(0) scale(1); filter:brightness(1) } 30%{ transform:translateY(-10px) scale(1.14) rotate(-6deg); filter:brightness(1.18) } 70%{ transform:translateY(-6px) scale(1.06) rotate(3deg) } 100%{ transform:none; filter:brightness(1) } }

/* continuous gentle float for each star to keep them lively */
.rating-stars .star{ animation: floatAround 6s ease-in-out infinite; }
.rating-stars .star:nth-of-type(1){ animation-delay: 0s }
.rating-stars .star:nth-of-type(2){ animation-delay: 0.12s }
.rating-stars .star:nth-of-type(3){ animation-delay: 0.24s }
.rating-stars .star:nth-of-type(4){ animation-delay: 0.36s }
.rating-stars .star:nth-of-type(5){ animation-delay: 0.48s }
@keyframes floatAround{ 0%{ transform: translateY(0) } 50%{ transform: translateY(-6px) } 100%{ transform: translateY(0) } }

/* short jump used when triggering sequential jumps */
.star-jump{ animation: starJump .42s cubic-bezier(.2,.9,.2,1) forwards }
@keyframes starJump{ 0%{ transform: translateY(0) scale(1) } 30%{ transform: translateY(-22px) scale(1.18) } 65%{ transform: translateY(-8px) scale(1.06) } 100%{ transform: translateY(0) scale(1) } }

/* small burst visual for last star */
.star.burst{ box-shadow: 0 8px 30px rgba(255,230,160,0.24), 0 2px 8px rgba(255,120,20,0.12); }

/* helper to pause the float animation if needed */
.rating-stars .star.floatPaused{ animation-play-state: paused !important }

/* confetti pieces container */
.pc-confetti{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:9999 }
.pc-confetti .piece{ position:absolute; width:10px; height:18px; border-radius:2px; opacity:0; transform:translateY(0) rotate(0) scale(1); }

/* colors for confetti pieces */
  .pc-confetti .piece.c1{ background:#ff4b0c }
.pc-confetti .piece.c2{ background:#ff8a2b }
.pc-confetti .piece.c3{ background:#ffd38a }
.pc-confetti .piece.c4{ background:#fff38a }

/* tiny shimmer particles already use .pc-particles */

/* visually hidden helper */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }

/* Input floating enhancements */
.pc-form input[type="text"], .pc-form textarea{ border:1px solid rgba(0,0,0,0.06); padding:12px 14px; border-radius:10px; background:linear-gradient(180deg,#fff,#fcfcfc); transition:box-shadow .2s, border-color .18s }
.pc-form input[type="text"]:focus, .pc-form textarea:focus{ border-color:var(--pc-primary); box-shadow:0 18px 50px rgba(255,106,0,0.06) }

/* floating label transform for non-empty fields */
.pc-form .floating input:not(:placeholder-shown) + label, .pc-form .floating textarea:not(:placeholder-shown) + label{ transform:translateY(-140%) scale(.92); color:var(--pc-primary) }

/* floating label base */
.pc-form .floating{ position:relative; padding-top:14px }
.pc-form .floating label{ position:absolute; left:14px; top:12px; font-size:13px; color:var(--pc-muted); pointer-events:none; transition:transform .18s ease, font-size .18s ease, top .18s ease, color .18s }
.pc-form .floating.has-value label, .pc-form .floating.focus label{ transform:translateY(-160%) scale(.92); color:var(--pc-primary); font-weight:700 }
.pc-form .floating input, .pc-form .floating textarea{ background:transparent; padding-top:18px }

/* nicer submit button gradient and hover */
.pc-btn--primary{ background:linear-gradient(90deg,var(--pc-primary), #ff8a2b); color:#fff; border:0; box-shadow:0 8px 24px rgba(255,106,0,0.12) }
.pc-btn--primary:hover{ transform:translateY(-2px) scale(1.02) }

/* Fancy rating row + floating "Your rating" label */
.pc-form label[for="pc-rating"]{ display:block; position:relative; margin-bottom:12px }
.pc-form .rating-row{ display:flex; align-items:center; gap:18px }
.rating-row .rating-hint{ font-size:13px; color:var(--pc-muted); }
.rating-stars label{ font-size:30px; text-shadow:0 2px 10px rgba(255,106,0,0.06) }
.rating-stars label::after{ content:''; display:block; width:6px; height:6px; background:linear-gradient(90deg,var(--pc-primary),#ff8a2b); border-radius:50%; transform:scale(0); transition:transform .18s; margin-top:6px }
.rating-stars label:hover::after{ transform:scale(1.1) }

/* Floating label & autosize input styles */
.pc-form input[type="text"], .pc-form textarea{ width:100%; box-sizing:border-box; transition:box-shadow .18s, border-color .18s }
.pc-form .floating{ position:relative }
.pc-form .floating label{ position:absolute; left:14px; top:12px; font-size:13px; color:var(--pc-muted); pointer-events:none; transition:transform .18s ease, font-size .18s ease, top .18s ease }
.pc-form .floating input:focus + label, .pc-form .floating textarea:focus + label, .pc-form .floating input:not(:placeholder-shown) + label, .pc-form .floating textarea:not(:placeholder-shown) + label{ transform:translateY(-140%); font-size:12px; color:var(--pc-primary) }

.pc-form .char-count{ font-size:12px; color:var(--pc-muted); margin-left:auto }

/* decorative particle emitter (visual only) */
.pc-particles{ pointer-events:none; position:absolute; inset:0; overflow:hidden; border-radius:inherit }
.pc-particles .p{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--pc-primary); opacity:0; transform:scale(0); }

/* stronger textarea focus */
.pc-form textarea:focus{ box-shadow:0 14px 40px rgba(255,106,0,0.08); border-color:var(--pc-primary) }

/* ensure the list block sits below form with spacing */
.product-comments-list-block{ margin-top:22px }

/* ensure keyboard focus visible on star labels */
.rating-stars label:focus{ outline:3px solid rgba(255,106,0,0.12); outline-offset:6px }

/* small responsiveness for form */
@media (max-width: 575px){
  .pc-grid{ gap:12px }
  .pc-side{ order:2 }
  .pc-list{ order:1 }
}

/* Top rating "reviews" link: positive filter helpers */
.ow-hidden-by-rating{ display:none !important; }
.pc-filter-banner{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,106,0,0.08);
  color:#333;
  font-size:13px;
}
.pc-filter-banner .pc-filter-clear{
  margin-left:auto;
  border:0;
  background:rgba(255,255,255,0.9);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}
.pc-filter-banner .pc-filter-clear:hover{ background:#fff }