/* ==========================================================================
   Product detail page (PDP) — extends main.css design tokens.
   Load main.css first, then this file.
   ========================================================================== */

/* ---------- Gallery ---------- */
.pdp-main-img { aspect-ratio: 1 / 1; margin-bottom: .75rem; }
.pdp-sale-tag { position: absolute; top: .75rem; left: .75rem; }
.fav-btn-lg { width: 2.5rem; height: 2.5rem; font-size: 1.15rem; top: .75rem; right: .75rem; }

.pdp-thumbs { display: flex; gap: .6rem; }
.pdp-thumb {
  width: 4.5rem; height: 4.5rem; border-radius: .7rem; flex-shrink: 0;
  border: 2px solid transparent; opacity: .7; transition: opacity .15s ease, border-color .15s ease;
}
.pdp-thumb span { font-size: .65rem; }
.pdp-thumb:hover { opacity: 1; }
.pdp-thumb.active { opacity: 1; border-color: #2F6B4F; }

/* ---------- Tabs ---------- */
.pdp-tabs-nav { display: flex; gap: 1.5rem; border-bottom: 1px solid rgba(22,36,28,0.1); }
.pdp-tab-btn {
  padding: .85rem 0; font-size: .9rem; font-weight: 700; color: #6B7268;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pdp-tab-btn.active { color: #16241C; border-color: #2F6B4F; }
.pdp-tab-panel { padding: 1.5rem 0; font-size: .925rem; color: #3A493F; line-height: 1.7; }
.pdp-tab-panel.hidden { display: none; }
.pdp-tab-panel p + p { margin-top: .9rem; }
.pdp-bullets { margin-top: .9rem; display: flex; flex-direction: column; gap: .5rem; }
.pdp-bullets li { padding-left: 1.4rem; position: relative; }
.pdp-bullets li::before { content: "✓"; position: absolute; left: 0; color: #2F6B4F; font-weight: 700; }

.pdp-specs-table { width: 100%; border-collapse: collapse; }
.pdp-specs-table tr { border-bottom: 1px solid rgba(22,36,28,0.08); }
.pdp-specs-table th, .pdp-specs-table td { text-align: left; padding: .7rem 0; font-size: .875rem; }
.pdp-specs-table th { width: 40%; color: #6B7268; font-weight: 600; }
.pdp-specs-table td { color: #16241C; font-weight: 500; }

/* ---------- Buy box ---------- */
.pdp-buybox {
  background: #fff; border-radius: 1.25rem; padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(22,36,28,0.06); align-self: start;
  position: sticky; top: 5.5rem;
}
.pdp-price { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.9rem; color: #16241C; }
.pdp-discount { font-size: .78rem; font-weight: 700; color: #C24630; background: #FBDFD6; padding: .2rem .5rem; border-radius: .4rem; }

.pdp-variant-group { margin-top: 1.4rem; }
.pdp-variant-label { font-size: .8rem; font-weight: 600; color: #3A493F; margin-bottom: .55rem; }
.pdp-variant-label strong { color: #16241C; }

.pdp-size-options { display: flex; gap: .5rem; flex-wrap: wrap; }
.pdp-size-btn {
  min-width: 2.75rem; height: 2.5rem; padding: 0 .6rem; border-radius: .6rem;
  border: 1px solid rgba(22,36,28,0.15); font-size: .85rem; font-weight: 600; color: #3A493F;
  transition: all .15s ease;
}
.pdp-size-btn:hover { border-color: #2F6B4F; }
.pdp-size-btn.active { background: #16241C; border-color: #16241C; color: #fff; }

.pdp-color-options { display: flex; gap: .65rem; }
.pdp-color-btn {
  width: 2rem; height: 2rem; border-radius: 999px; background: var(--swatch);
  border: 2px solid transparent; box-shadow: 0 0 0 1px rgba(22,36,28,0.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pdp-color-btn:hover { transform: scale(1.08); }
.pdp-color-btn.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #16241C; }

.qty-stepper {
  display: inline-flex; align-items: center; border: 1px solid rgba(22,36,28,0.15); border-radius: .7rem; overflow: hidden;
}
.qty-stepper button { width: 2.5rem; height: 2.5rem; font-size: 1.1rem; font-weight: 600; color: #3A493F; transition: background-color .15s ease; }
.qty-stepper button:hover { background: rgba(22,36,28,0.05); }
.qty-stepper input { width: 2.75rem; height: 2.5rem; text-align: center; border-left: 1px solid rgba(22,36,28,0.15); border-right: 1px solid rgba(22,36,28,0.15); font-size: .9rem; font-weight: 600; }

.pdp-toast {
  min-height: 1.2rem; font-size: .8rem; font-weight: 600; color: #255840; text-align: center; margin-top: .6rem;
}

.pdp-trust { display: flex; flex-direction: column; gap: .6rem; padding-top: 1.4rem; border-top: 1px solid rgba(22,36,28,0.08); }
.pdp-trust .trust-item { font-size: .8rem; font-weight: 600; }

.pdp-seller-card {
  display: flex; align-items: center; gap: .75rem; margin-top: 1.4rem; padding: .85rem;
  border: 1px solid rgba(22,36,28,0.1); border-radius: .9rem; transition: border-color .15s ease;
}
.pdp-seller-card:hover { border-color: #2F6B4F; }
.pdp-seller-avatar {
  width: 2.6rem; height: 2.6rem; border-radius: .7rem; background: #EEF4EF; color: #255840;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0;
}

/* ---------- Reviews ---------- */
.pdp-rating-summary { text-align: left; }
.pdp-rating-big { font-family: 'Fraunces', serif; font-weight: 600; font-size: 3rem; line-height: 1; color: #16241C; }
.pdp-rating-bars { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.pdp-rating-bar-row { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: #3A493F; }
.pdp-rating-bar-row > span:first-child { width: .7rem; }
.pdp-rating-bar-row > span:last-child { width: 2rem; text-align: right; }
.pdp-rating-bar { flex: 1; height: .4rem; border-radius: 999px; background: rgba(22,36,28,0.08); overflow: hidden; }
.pdp-rating-bar i { display: block; height: 100%; background: #F0A73C; border-radius: 999px; }

.pdp-review { background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 2px 10px rgba(22,36,28,0.05); }

@media (max-width: 1023px) {
  .pdp-buybox { position: static; margin-top: 2rem; }
}