/* ================================================================
   Fiddle and Grace — Product Page  (v2 Redesign)
   ================================================================ */

:root {
  --cream:  #faf5ef;
  --linen:  #f3ebe0;
  --bark:   #4a3526;
  --bark-80: rgba(74,53,38,.80);
  --bark-60: rgba(74,53,38,.60);
  --bark-30: rgba(74,53,38,.30);
  --bark-12: rgba(74,53,38,.12);
  --bark-06: rgba(74,53,38,.06);
  --white:  #ffffff;
  --accent:      #b07a53;
  --accent-soft:  rgba(176,122,83,.15);
  --accent-glow:  rgba(176,122,83,.10);
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'Outfit', system-ui, sans-serif;
  --radius:  18px;
  --max-w:   1120px;
  --shadow:  0 8px 30px rgba(74,53,38,.08);
  --star:    #d4a853;
}

body[data-category="earrings"]  { --accent:#b07a53; --accent-soft:rgba(176,122,83,.15); --accent-glow:rgba(176,122,83,.10); }
body[data-category="bracelet"]  { --accent:#7b6e52; --accent-soft:rgba(123,110,82,.15); --accent-glow:rgba(123,110,82,.10); }
body[data-category="lanyard"]   { --accent:#5c7a6b; --accent-soft:rgba(92,122,107,.15); --accent-glow:rgba(92,122,107,.10); }
body[data-category="tag"]       { --accent:#8a6578; --accent-soft:rgba(138,101,120,.15); --accent-glow:rgba(138,101,120,.10); }
body[data-category="hairclip"]  { --accent:#c27a8a; --accent-soft:rgba(194,122,138,.15); --accent-glow:rgba(194,122,138,.10); }
body[data-category="magnet"]    { --accent:#6b7b9a; --accent-soft:rgba(107,123,154,.15); --accent-glow:rgba(107,123,154,.10); }
body[data-category="ornament"]  { --accent:#9a7b5c; --accent-soft:rgba(154,123,92,.15); --accent-glow:rgba(154,123,92,.10); }
body[data-category="bookmark"]  { --accent:#7a8a6b; --accent-soft:rgba(122,138,107,.15); --accent-glow:rgba(122,138,107,.10); }

body[data-holiday="4th"]        { --accent:#b83b3b; --accent-soft:#f2dad8; --accent-glow:rgba(184,59,59,.10); }
body[data-holiday="easter"]     { --accent:#9a7bc2; --accent-soft:rgba(154,123,194,.15); --accent-glow:rgba(154,123,194,.10); }
body[data-holiday="fall"]       { --accent:#c27a3b; --accent-soft:rgba(194,122,59,.15); --accent-glow:rgba(194,122,59,.10); }
body[data-holiday="christmas"]  { --accent:#3b7a4a; --accent-soft:rgba(59,122,74,.15); --accent-glow:rgba(59,122,74,.10); }
body[data-holiday="valentine"]  { --accent:#c25a6b; --accent-soft:rgba(194,90,107,.15); --accent-glow:rgba(194,90,107,.10); }

*,*::before,*::after { box-sizing:border-box; margin:0; }
img  { display:block; max-width:100%; }
a    { color:inherit; text-decoration:none; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--bark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { width:min(var(--max-w),92vw); margin:0 auto; }
.eyebrow  {
  font-size:.7rem; letter-spacing:2.5px; text-transform:uppercase;
  font-weight:600; color:var(--accent); margin-bottom:8px;
}

/* ---- Header ---- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(250,245,239,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bark-12);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:16px;
}
.brand { display:flex; align-items:center; gap:10px; }
.brand-logo {
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:1px solid var(--bark-12); background:var(--white);
}
.brand-name { font-family:var(--font-display); font-size:1.25rem; }
.brand-sub  { font-size:.78rem; color:var(--bark-60); }
.site-nav{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:500}
.site-nav a{position:relative;padding:4px 0;color:var(--bark-80);transition:color .2s}
.site-nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--accent);transition:width .25s}
.site-nav a:hover{color:var(--bark)}
.site-nav a:hover::after{width:100%}
.nav-divider{color:var(--bark-30)}
@media(max-width:900px){.header-inner{flex-wrap:wrap}.site-nav{width:100%;flex-wrap:wrap;gap:10px;justify-content:center}}

.header-cta {
  padding:9px 20px; border-radius:999px; font-weight:600; font-size:.85rem;
  background:var(--bark); color:var(--white); transition:transform .2s;
}
.header-cta:hover { transform:translateY(-1px); }

/* ---- Hero ---- */
.hero { padding:40px 0 32px; }
.hero-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px; align-items:start;
}

/* Gallery: thumbs on left, main image on right (desktop) */
.hero-gallery {
  display:flex;
  flex-direction:row;
  gap:10px;
}
.hero-gallery .thumb-strip {
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow-y:auto;
  scrollbar-width:thin;
  flex-shrink:0;
}
.hero-gallery .thumb-strip::-webkit-scrollbar { width:4px; }
.hero-gallery .thumb-strip::-webkit-scrollbar-thumb { background:var(--bark-30); border-radius:4px; }
.hero-gallery .main-img {
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--bark-12);
  aspect-ratio:1/1;
  flex:1; min-width:0;
}
.hero-gallery .main-img img {
  width:100%; height:100%; object-fit:cover;
}

.hero-gallery .thumb {
  width:72px; height:72px; min-width:72px; min-height:72px;
  border-radius:10px; overflow:hidden;
  border:2px solid transparent;
  cursor:pointer;
  transition:border-color .2s, transform .2s;
  opacity:0.7;
}
.hero-gallery .thumb:hover {
  opacity:1;
  transform:scale(1.05);
}
.hero-gallery .thumb.active {
  border-color:var(--accent);
  opacity:1;
}
.hero-gallery .thumb img {
  width:100%; height:100%; object-fit:cover;
}

/* Product info */
.hero-copy h1 {
  font-family:var(--font-display);
  font-size:clamp(1.8rem,2.4vw + 1rem,2.8rem);
  line-height:1.12; margin-bottom:10px;
}
.hero-price {
  font-size:1.5rem; font-weight:600;
  color:var(--accent); margin-bottom:12px;
}
.hero-desc {
  color:var(--bark-60); font-size:.92rem;
  margin-top:24px; margin-bottom:20px; max-width:480px; line-height:1.6;
}
.hero-actions {
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:18px; padding-top:18px;
  border-top:1px solid var(--bark-12);
}

/* Inline review quotes in hero */
.inline-quotes {
  margin-top:12px;
}
.inline-quote {
  font-size:.82rem; color:var(--bark-60); font-style:italic;
  margin-bottom:6px; line-height:1.5;
}
.inline-quote .iq-stars {
  color:var(--star); font-style:normal; font-size:.75rem;
}

/* Buttons */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border-radius:999px; font-weight:600;
  background:var(--accent); color:var(--white);
  box-shadow:0 6px 24px var(--accent-soft);
  transition:transform .2s, box-shadow .2s;
  border:none; cursor:pointer; font-size:.95rem;
}
.btn-primary:hover { transform:translateY(-2px); }
.btn-secondary {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; border-radius:999px; font-weight:500;
  border:1px solid var(--bark-30); background:transparent;
  color:var(--bark); cursor:pointer; font-size:.95rem;
  transition:background .2s;
}
.btn-secondary:hover { background:var(--bark-06); }

/* Variations */
.hero-variations { margin-bottom:20px; }
.variation-group { margin-bottom:14px; }
.variation-group h3 {
  font-size:.82rem; font-weight:600; margin-bottom:8px;
  text-transform:uppercase; letter-spacing:1px; color:var(--bark-80);
}
.variation-group h3 .subtitle {
  font-weight:400; color:var(--bark-30); font-size:.75rem;
  text-transform:none; letter-spacing:0; margin-left:6px;
}
.variation-pills {
  display:flex; flex-wrap:wrap; gap:6px;
  list-style:none; padding:0; margin:0;
}
.variation-pills li {
  padding:5px 14px; border-radius:999px; font-size:.82rem;
  background:var(--bark-06); border:1px solid var(--bark-12);
  color:var(--bark-80);
}

/* ---- Details Strip ---- */
.details-strip {
  padding:40px 0;
  border-top:1px solid var(--bark-12);
  border-bottom:1px solid var(--bark-12);
  background:var(--white);
}
.details-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.detail-block h2 {
  font-family:var(--font-display); font-size:1.05rem; margin-bottom:6px;
}
.detail-block p {
  font-size:.88rem; color:var(--bark-60); line-height:1.55;
}

/* ---- Related Products ---- */
.collection { padding:48px 0; }
.collection-header {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:24px;
}
.collection-header h2 {
  font-family:var(--font-display); font-size:1.6rem;
}
.collection-link {
  font-size:.85rem; font-weight:600; color:var(--accent);
  border-bottom:1px solid var(--accent-soft); padding-bottom:2px;
}
.collection-scroll {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.coll-card {
  border-radius:var(--radius); overflow:hidden;
  background:var(--white);
  border:1px solid var(--bark-12);
  box-shadow:var(--shadow);
  transition:transform .25s;
}
.coll-card:hover { transform:translateY(-4px); }
.coll-card img { aspect-ratio:1; object-fit:cover; width:100%; }
.coll-card-body { padding:12px 14px; }
.coll-card-body h4 { font-size:.88rem; font-weight:500; margin-bottom:2px; }
.coll-card-body span { font-size:.82rem; color:var(--accent); font-weight:600; }

/* ---- CTA Banner ---- */
.cta-banner {
  margin:40px auto 48px;
  width:min(var(--max-w),92vw);
  padding:32px 40px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, var(--bark) 0%, #6b4b36 100%);
  color:var(--white);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.cta-banner h2 { font-family:var(--font-display); font-size:1.5rem; }
.cta-banner p  { font-size:.9rem; opacity:.8; margin-top:4px; }
.btn-white {
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 32px; border-radius:999px; font-weight:600;
  background:var(--white); color:var(--bark);
  border:none; cursor:pointer; font-size:.95rem; white-space:nowrap;
  transition:transform .2s;
}
.btn-white:hover { transform:translateY(-2px); }

/* ---- Trust Banner ---- */
.trust-banner {
  background:var(--bark); color:var(--cream);
  text-align:center; padding:8px 16px;
  font-size:.82rem; font-weight:400; letter-spacing:.02em;
}
.trust-banner .stars { color:var(--star); margin:0 4px; }
.trust-banner strong { font-weight:600; }

/* ---- Rating Badge ---- */
.rating-badge {
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:12px; font-size:.92rem;
}
.rating-badge .stars { color:var(--star); letter-spacing:1px; }
.rating-badge .count { color:var(--bark-60); }
.rating-badge .count a { color:var(--accent); text-decoration:none; }
.rating-badge .count a:hover { text-decoration:underline; }

/* ---- Social Proof Pills ---- */
.social-proof {
  display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; margin-bottom:0;
}
.proof-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bark-06); border:1px solid var(--bark-12);
  border-radius:999px; padding:6px 14px;
  font-size:.82rem; font-weight:500; color:var(--bark-80);
}
.proof-pill svg { width:14px; height:14px; flex-shrink:0; }
.proof-pill.bestseller {
  background:linear-gradient(135deg, #fef3e2, #fde8c8);
  border-color:#e8c87a; color:#7a5c1f; font-weight:600;
}

/* ---- Reviews Section ---- */
.reviews-section {
  padding:48px 0;
  border-top:1px solid var(--bark-12);
}
.reviews-section h2 {
  font-family:var(--font-display); font-size:1.5rem; margin-bottom:8px;
}
.reviews-summary {
  display:flex; align-items:center; gap:12px; margin-bottom:28px;
}
.reviews-summary .big-rating {
  font-family:var(--font-display); font-size:2.8rem; line-height:1;
}
.reviews-summary .stars { color:var(--star); font-size:1.1rem; }
.reviews-summary .meta { font-size:.85rem; color:var(--bark-60); }
.review-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.review-card {
  background:var(--white); border:1px solid var(--bark-12);
  border-radius:var(--radius); padding:20px;
}
.review-card .review-top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.review-card .stars { color:var(--star); font-size:.85rem; }
.review-card .date { font-size:.75rem; color:var(--bark-30); }
.review-card p {
  font-size:.88rem; color:var(--bark-80); line-height:1.6;
}
.review-card .buyer {
  margin-top:8px; font-size:.75rem; color:var(--bark-30);
}
.reviews-more {
  text-align:center; margin-top:20px;
}
.reviews-more a {
  display:inline-block; padding:10px 24px;
  border:1.5px solid var(--bark-12); border-radius:999px;
  font-size:.88rem; font-weight:500; color:var(--bark-80);
  text-decoration:none; transition:all .2s;
}
.reviews-more a:hover {
  border-color:var(--accent); color:var(--bark); background:rgba(176,122,83,.06);
}

/* ---- Footer ---- */
.site-footer {
  padding:32px 0 48px;
  font-size:.85rem; color:var(--bark-60);
  border-top:1px solid var(--bark-12);
}
.footer-inner {
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.footer-inner a { color:var(--bark); font-weight:600; }

/* ---- Lightbox ---- */
.lightbox {
  position:fixed; inset:0;
  background:rgba(20,14,10,.88);
  display:none; align-items:center; justify-content:center;
  padding:24px; z-index:9999;
}
.lightbox.is-open { display:flex; }
.lightbox-image {
  max-width:min(1200px,96vw); max-height:92vh;
  width:auto; height:auto;
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  background:#fff;
}

/* ---- Reveal animation ---- */
.reveal {
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.reveal.is-visible { opacity:1; transform:translateY(0); }

/* ---- Responsive ---- */
@media (max-width:900px) {
  .hero-layout { grid-template-columns:1fr; gap:28px; }
  .hero-gallery { flex-direction:column; }
  .hero-gallery .thumb-strip {
    flex-direction:row; overflow-y:visible; overflow-x:auto;
    justify-content:center; order:1; padding-bottom:4px;
  }
  .hero-gallery .thumb-strip::-webkit-scrollbar { width:auto; height:4px; }
  .hero-gallery .main-img { aspect-ratio:auto; max-height:420px; order:0; }
  .hero-gallery .main-img img { height:100%; object-fit:cover; }
  .details-grid { grid-template-columns:1fr 1fr; gap:20px; }
  .collection-scroll { grid-template-columns:1fr 1fr; }
  .cta-banner { flex-direction:column; align-items:flex-start; }
  .review-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .details-grid { grid-template-columns:1fr; }
  .hero-gallery .thumb { width:60px; height:60px; min-width:60px; min-height:60px; }
  .footer-inner { flex-direction:column; text-align:center; }
}