/* ═══════════════════════════════════════
   PRODUCT PAGE 10/10 — CSS
   ═══════════════════════════════════════ */


/* ─── Product Grid ─── */
.pd-section { padding: 32px 0 48px; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* ─── Gallery ─── */
.pd-gallery-wrap { position: sticky; top: 20px; }
.pd-main-wrap { position: relative; overflow: hidden; border-radius: 12px; background: #fafafa; border: 1px solid #f0f0f0; cursor: zoom-in; }
.pd-main-img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; transition: transform 0.3s; }
.pd-main-wrap:hover .pd-main-img { transform: scale(1.05); }
.pd-sale-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: #EF4444; color: #fff; font-weight: 700; font-size: 13px;
  padding: 4px 10px; border-radius: 6px;
}
.pd-thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.pd-thumb {
  width: 72px; height: 72px; object-fit: cover; border-radius: 8px;
  border: 2px solid #eee; cursor: pointer; flex-shrink: 0; transition: border-color 0.2s;
}
.pd-thumb:hover, .pd-thumb.active { border-color: var(--accent); }

/* ─── Product Info ─── */
.pd-title { font-size: 26px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; color: #1a1a2e; }

/* ─── Esoterica Score — the laurel-wreathed editorial rating ───
   Floated right so the title and description wrap around it, as on the Ukrainian storefront.
   Styles live here rather than inline: product.html already carries ~2 900 inline style
   attributes, which is the single biggest contributor to its text-to-HTML ratio (SEO_GUIDE
   defect 12a) and the reason style-src still needs 'unsafe-inline'. */
.pd-escore { float: right; display: block; text-align: center; margin: 0 0 8px 16px;
             text-decoration: none; }
.pd-escore-row { display: flex; align-items: center; justify-content: center; gap: 5px; }
.pd-escore-row img { width: 34px; height: auto; }
.pd-escore-num { font-family: 'Times New Roman', Georgia, serif; font-size: 56px;
                 font-weight: 400; line-height: 1; letter-spacing: -1px; color: var(--accent); }
.pd-escore-label { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700;
                   text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); }
.pd-escore-band { display: block; margin-top: 2px; font-size: 11px; font-weight: 600;
                  letter-spacing: .5px; color: #94a3b8; }
.pd-escore:hover .pd-escore-band u { text-decoration-thickness: 2px; }

.pd-rating-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pd-stars { display: flex; align-items: center; gap: 1px; }
.star { color: #ddd; font-size: 18px; line-height: 1; }
.star.filled { color: #F59E0B; }
.star.half { background: linear-gradient(90deg, #F59E0B 50%, #ddd 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.star.sm { font-size: 14px; }
.pd-rating-num { font-weight: 600; font-size: 14px; color: #333; margin-left: 4px; }
.pd-reviews-link { color: #666; font-size: 13px; cursor: pointer; }
.pd-reviews-link:hover { color: var(--accent); text-decoration: underline; }
.pd-sold { font-size: 13px; color: #EF4444; font-weight: 600; }

.pd-price-block { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pd-price { font-size: 32px; font-weight: 800; color: var(--accent); }
.pd-was-price { font-size: 18px; color: #999; }
.pd-save-badge { background: #FEF2F2; color: #EF4444; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }

.pd-short { color: #555; font-size: 15px; line-height: 1.7; margin-bottom: 20px; }

/* Features inline */
.pd-features-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.pd-feat-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; padding: 8px 12px; background: #f8fafb; border-radius: 8px; }
.pd-feat-icon { font-size: 18px; }

/* Variants */
.pd-variants { margin-bottom: 20px; }
.pd-variant-group { margin-bottom: 12px; }
.pd-variant-label { font-size: 13px; font-weight: 600; color: #333; margin-bottom: 6px; display: block; }
.pd-variant-options { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-var-btn {
  padding: 8px 16px; border: 2px solid #eee; border-radius: 8px; background: #fff;
  font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.pd-var-btn:hover { border-color: #ccc; }
.pd-var-btn.active { border-color: var(--accent); background: #fef2f2; color: var(--accent); font-weight: 600; }

/* Urgency */
.pd-urgency {
  display: flex; align-items: center; gap: 8px;
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 8px;
  padding: 10px 14px; font-size: 13px; color: #C2410C; margin-bottom: 16px;
}
.pd-urgency-dot { width: 8px; height: 8px; background: #EF4444; border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.pd-in-stock { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #16A34A; margin-bottom: 16px; font-weight: 500; }
.green-dot { width: 8px; height: 8px; background: #16A34A; border-radius: 50%; }

/* Actions */
.pd-actions { display: flex; gap: 12px; margin-bottom: 16px; }
.pd-qty-wrap { display: flex; align-items: center; border: 2px solid #eee; border-radius: 10px; overflow: hidden; }
.pd-qty-btn { width: 40px; height: 48px; border: none; background: #fafafa; font-size: 18px; cursor: pointer; color: #333; }
.pd-qty-btn:hover { background: #f0f0f0; }
.pd-qty-input { width: 50px; text-align: center; border: none; font-size: 16px; font-weight: 600; outline: none; -moz-appearance: textfield; }
.pd-qty-input::-webkit-inner-spin-button { display: none; }
.pd-add-cart {
  flex: 1; padding: 14px 20px; border: none;
  background: var(--accent); color: #fff;
  font-size: 16px; font-weight: 700; border-radius: 10px;
  cursor: pointer; letter-spacing: 0.5px; transition: all 0.2s;
}
.pd-add-cart:hover { background: var(--accent-hover, #C2410C); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(234,88,12,0.28); }
.pd-add-cart:active { transform: translateY(0); }

/* Trust */
.pd-trust-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.pd-trust-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; padding: 6px 0; }

.pd-payments { display: flex; gap: 6px; align-items: center; opacity: 0.7; }
.pd-payments img { height: 22px; }

/* ─── Tabs ─── */
.pd-tabs-section { padding: 0 0 48px; }
.pd-tabs-nav {
  display: flex; border-bottom: 2px solid #f0f0f0; gap: 0; margin-bottom: 32px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.pd-tab {
  padding: 14px 24px; border: none; background: none;
  font-size: 14px; font-weight: 600; color: #888; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: all 0.2s;
}
.pd-tab:hover { color: #333; }
.pd-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.pd-tab-content { display: block; margin-top: 32px; padding-top: 28px; border-top: 1px solid #eef0f3; }
.pd-tab-content.active { display: block; }
.pd-tab-content:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
@media (max-width: 768px) {
  .pd-tab-content { margin-top: 24px; padding-top: 20px; }
}

/* Description */
/* Description card — accent rail, matching the "ABOUT THE BOOK" card treatment.
   Square left corners are load-bearing: with a radius on that side the 3px border reads as
   an outline rather than a rail. */
.pd-desc-card {
  background: linear-gradient(180deg, #FAF7F2 0%, #fff 100%);
  border: 1px solid #F0EBE3;
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  padding: 20px 24px;
  margin-top: 4px;
}
@media (max-width: 640px) { .pd-desc-card { padding: 16px 16px; } }

/* The ABOUT THE BOOK badge sits absolutely at top:-12px, overlapping the card's own top
   border. Narrow enough and the card is no wider than the badge, so it reads as a stray
   label rather than a tab. 640px, not the 768px used elsewhere in this file, because that
   is the width upstream measured it at and the card is still wide enough at 700px. */
@media (max-width: 640px) { .pd-about-badge { display: none; } }

.pd-description { line-height: 1.8; color: #444; font-size: 15px; max-width: 100%; }
.pd-description h2, .pd-description h3 { margin: 20px 0 10px; color: #1a1a2e; }
.pd-description ul, .pd-description ol { padding-left: 20px; margin: 12px 0; }
.pd-description img { border-radius: 8px; margin: 16px 0; }
.pd-size-guide { margin-top: 32px; padding-top: 24px; border-top: 1px solid #f0f0f0; }
.pd-size-guide h3 { margin-bottom: 12px; color: #1a1a2e; }
.pd-size-guide table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pd-size-guide th, .pd-size-guide td { padding: 8px 12px; border: 1px solid #eee; text-align: center; }
.pd-size-guide th { background: #fafafa; font-weight: 600; }

/* Features grid */
.pd-features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.pd-feature-card {
  padding: 24px; background: #f8fafb; border-radius: 12px; text-align: center;
  border: 1px solid #f0f0f0; transition: box-shadow 0.2s;
}
.pd-feature-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.pd-feature-icon { font-size: 32px; margin-bottom: 10px; }
.pd-feature-card h4 { font-size: 15px; margin-bottom: 6px; color: #1a1a2e; }
.pd-feature-card p { font-size: 13px; color: #666; line-height: 1.5; }

/* Specs */
.pd-specs-table { width: 100%; max-width: 600px; border-collapse: collapse; }
.pd-specs-table tr:nth-child(even) { background: #fafafa; }
.pd-specs-table th { text-align: left; padding: 10px 14px; font-size: 13px; color: #666; font-weight: 500; width: 40%; }
.pd-specs-table td { padding: 10px 14px; font-size: 14px; color: #333; }

/* Reviews */
.pd-reviews-summary { display: flex; align-items: center; gap: 32px; margin-bottom: 32px; padding: 24px; background: #f8fafb; border-radius: 12px; }
.pd-reviews-avg { text-align: center; }
.pd-reviews-big { font-size: 48px; font-weight: 800; color: #1a1a2e; display: block; }
.pd-reviews-stars { margin: 4px 0; }
.pd-reviews-total { font-size: 13px; color: #888; }
.pd-reviews-list { display: flex; flex-direction: column; gap: 20px; }
.pd-review { padding: 20px; border: 1px solid #f0f0f0; border-radius: 12px; }
.pd-review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pd-review-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.pd-review-name { font-weight: 600; font-size: 14px; }
.pd-verified { font-size: 11px; color: #16A34A; font-weight: 500; }
.pd-review-date { font-size: 12px; color: #999; margin-left: auto; }
.pd-review-title { font-weight: 600; margin-bottom: 6px; }
.pd-review-text { font-size: 14px; color: #555; line-height: 1.6; }

/* FAQ */
.pd-faq-list { max-width: 700px; }
.pd-faq-item { border-bottom: 1px solid #f0f0f0; }
.pd-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 16px 0; border: none; background: none;
  font-size: 15px; font-weight: 600; color: #333; cursor: pointer; text-align: left;
}
.pd-faq-q:hover { color: var(--accent); }
.pd-faq-arrow { transition: transform 0.2s; font-size: 18px; color: #999; }
.pd-faq-item.open .pd-faq-arrow { transform: rotate(90deg); }
.pd-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s; color: #555; font-size: 14px; line-height: 1.7; }
.pd-faq-item.open .pd-faq-a { max-height: 300px; padding-bottom: 16px; }

/* Related — use existing .product-card styles */
.product-was-price { font-size: 12px; color: #999; margin-left: 6px; }

/* ─── Sticky Bar ─── */
.pd-sticky-bar {
  position: fixed; bottom: -80px; left: 0; right: 0; z-index: 1000;
  background: #fff; border-top: 1px solid #eee; padding: 10px 16px;
  transition: bottom 0.3s; box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}
.pd-sticky-bar.visible { bottom: 0; }
.pd-sticky-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pd-sticky-info { display: flex; flex-direction: column; }
.pd-sticky-price { font-size: 18px; font-weight: 700; color: var(--accent); }
.pd-sticky-name { font-size: 12px; color: #888; }
.pd-sticky-btn {
  padding: 12px 32px; background: var(--accent); color: #fff;
  border: none; border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.pd-sticky-btn:hover { background: var(--accent-hover, #C2410C); }

/* ─── Lightbox ─── */
.pd-lightbox {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.pd-lightbox.open { opacity: 1; pointer-events: all; }
.lb-img { max-width: 85vw; max-height: 85vh; object-fit: contain; border-radius: 8px; }
.lb-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 36px; cursor: pointer; }
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  font-size: 36px; padding: 12px 16px; cursor: pointer; border-radius: 8px;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.25); }
.lb-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; }

/* ─── Responsive ─── */
@media (max-width: 768px) {
  /* Un-float the score on a phone. Floated, the caption ("ESOTERICA SCORE · 78/100" at
     1.5px letter-spacing) is wider than the space left beside the title and runs off the
     right edge — seen at 390px, clipped to "ESOTERI…". Mirava solves this by shipping a
     SECOND, hand-written compact element and hiding one or the other; one responsive
     element beats two copies of the same score that can disagree. */
  .pd-escore { float: none; display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
               margin: 0 0 10px; text-align: left; }
  .pd-escore-num { font-size: 36px; }
  .pd-escore-row img { width: 22px; }
  .pd-escore-label { display: inline; margin: 0; letter-spacing: .8px; }
  /* The band is dropped on a phone, not shrunk: laurels + number + caption + band is ~430px
     of unwrappable content on a 390px screen, and it clipped to "how we rat…". Mirava's own
     mobile variant shows the caption alone for the same reason. Nothing is lost — the whole
     widget is still a link to /how-we-rate, which explains the bands in full. */
  .pd-escore-band { display: none; }
  .pd-grid { grid-template-columns: 1fr; gap: 24px; }
  .pd-gallery-wrap { position: static; }
  .pd-title { font-size: 20px; }
  .pd-price { font-size: 26px; }
  .pd-actions { flex-direction: column; }
  .pd-add-cart { width: 100%; }
  .pd-trust-row { grid-template-columns: 1fr 1fr; }
  .pd-features-row { grid-template-columns: 1fr; }
  .pd-tabs-nav { gap: 0; }
  .pd-tab { padding: 12px 16px; font-size: 13px; }
  .pd-features-grid { grid-template-columns: 1fr 1fr; }
  .pd-reviews-summary { flex-direction: column; }
}

/* ═══════════════════════════════════════
   NEW: Trust line (compact, SHEIN/Target style)
   ═══════════════════════════════════════ */
.pd-trust-line {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 0; margin-top: 4px;
  border-top: 1px solid #f0f0f0;
}
.pd-trust-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #555; font-weight: 500;
}
.pd-trust-chip svg { color: #16A34A; flex-shrink: 0; }

/* ═══════════════════════════════════════
   NEW: Wishlist button
   ═══════════════════════════════════════ */
.pd-wishlist-btn {
  width: 52px; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #eee; border-radius: 10px; background: #fff;
  cursor: pointer; transition: all 0.2s; color: #999;
}
.pd-wishlist-btn:hover { border-color: var(--accent); color: var(--accent); }
.pd-wishlist-btn.active { border-color: var(--accent); color: var(--accent); }

/* ═══════════════════════════════════════
   NEW: Review rating bars
   ═══════════════════════════════════════ */
.pd-reviews-bars { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.pd-bar-row { display: flex; align-items: center; gap: 8px; }
.pd-bar-label { font-size: 12px; color: #666; min-width: 34px; display: flex; align-items: center; gap: 2px; }
.pd-bar-track { flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; }
.pd-bar-fill { height: 100%; background: #F59E0B; border-radius: 4px; transition: width 0.4s; }
.pd-bar-count { font-size: 12px; color: #999; min-width: 20px; text-align: right; }

/* ═══════════════════════════════════════
   NEW: Review tags
   ═══════════════════════════════════════ */
.pd-review-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pd-review-tag {
  padding: 6px 14px; border: 1px solid #e0e0e0; border-radius: 20px;
  background: #fff; font-size: 12px; color: #555; cursor: pointer;
  transition: all 0.2s;
}
.pd-review-tag:hover { border-color: var(--accent); color: var(--accent); }
.pd-review-tag.active { background: #fef2f2; border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ═══════════════════════════════════════
   NEW: Review body measurements
   ═══════════════════════════════════════ */
.pd-review-measurements {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.pd-measure-tag {
  font-size: 11px; color: #666; background: #f5f5f5; padding: 3px 8px;
  border-radius: 4px;
}
.pd-measure-tag.fit { background: #ecfdf5; color: #16A34A; font-weight: 600; }

/* ═══════════════════════════════════════
   NEW: Review photos
   ═══════════════════════════════════════ */
.pd-review-photos {
  display: flex; gap: 8px; margin-top: 10px;
}
.pd-review-photos img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 8px; cursor: pointer; border: 1px solid #eee;
  transition: opacity 0.2s;
}
.pd-review-photos img:hover { opacity: 0.85; }

/* ═══════════════════════════════════════
   NEW: Helpful button
   ═══════════════════════════════════════ */
.pd-review-footer { margin-top: 10px; }
.pd-helpful-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border: 1px solid #e0e0e0; border-radius: 6px;
  background: #fff; font-size: 12px; color: #888; cursor: pointer;
  transition: all 0.2s;
}
.pd-helpful-btn:hover { border-color: #bbb; color: #555; }
.pd-helpful-btn.voted { background: #f0fdf4; border-color: #16A34A; color: #16A34A; cursor: default; }

/* ═══════════════════════════════════════
   Updated: pd-sold without emoji
   ═══════════════════════════════════════ */
.pd-sold {
  font-size: 13px; color: #EF4444; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.pd-sold::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; background: #EF4444;
  border-radius: 50;
}

/* ═══════════════════════════════════════
   Updated: Reviews summary flex
   ═══════════════════════════════════════ */
.pd-reviews-summary {
  display: flex; align-items: center; gap: 32px;
  margin-bottom: 24px; padding: 24px; background: #f8fafb; border-radius: 12px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════
   Responsive additions
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .pd-trust-line { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pd-actions { flex-wrap: wrap; }
  .pd-wishlist-btn { width: 48px; height: 48px; }
  .pd-reviews-bars { min-width: auto; }
  .pd-review-photos img { width: 60px; height: 60px; }
}

/* Category card — the baseline, for storefronts with no photography for their shelves.
   product-premium.css styles this element only under `body.cooking`, so on the occult shop the
   card had no rules at all: an unstyled link around an image that did not exist. The plate and
   emoji its seal map already carries stand in for the photograph. Every rule here is lower in
   specificity than the themed ones, which keep winning where they apply. */
.pd-category-visual {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}
.pd-category-visual__plate {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    font-size: 56px;
    line-height: 1;
}
.pd-category-visual--plate .pd-category-visual__shade { display: none; }
.pd-category-visual--plate .pd-category-visual__copy {
    display: block;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e8edf5;
    border-top: 0;
}
.pd-category-visual--plate .pd-category-visual__copy small {
    display: block;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted, #6B6560);
}
.pd-category-visual--plate .pd-category-visual__copy strong {
    display: block;
    margin: 2px 0 4px;
    font-size: 16px;
    color: var(--primary, #1a1a2e);
}
.pd-category-visual--plate .pd-category-visual__copy > span {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent, #e94560);
}