/* ============================================================
   product-detail.css — e-commerce Product Detail page
   Ported 1:1 from src/views/pages/shop/ProductDetail.vue
   ============================================================ */

.pdp {
  width: 100%;
  padding-bottom: 80px;              /* pb-20 */
  background: var(--page-bg);
}
.pdp-inner {
  display: flex;
  flex-direction: column;
  padding-top: 46px;                 /* pt-[46px] */
  width: 100%;
  background: #fbfbfb;
}
@media (min-width: 1024px) {
  .pdp-inner { padding-left: 128px; padding-right: 128px; }  /* lg:px-32 */
}

/* ---------- Top: gallery + info ---------- */
.pdp-top {
  display: flex;
  flex-direction: column;
  gap: 40px;                         /* gap-[40px] */
}
@media (min-width: 1024px) {
  .pdp-top { flex-direction: row; }
}

/* ----- Gallery (left) ----- */
.pdp-gallery {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  gap: 10px;                         /* gap-[10px] */
  padding: 0 12px;
}
@media (min-width: 1024px) {
  .pdp-gallery { width: 400px; padding: 0; }
}
.pdp-main-img {
  width: 100%;
  object-fit: contain;
  cursor: pointer;
}
@media (min-width: 1024px) {
  .pdp-main-img { width: 400px; height: 400px; }
}
.pdp-thumbs {
  width: 100%;
  overflow-x: auto;
  display: flex;
  gap: 12px;                         /* gap-3 */
  padding: 8px 0;
}
.pdp-thumb {
  min-width: 50px;
  height: 49.29px;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s;
}
.pdp-thumb.active,
.pdp-thumb:hover { border-color: #000; }
.pdp-thumb img {
  width: 32.88px;
  height: 44.57px;
  object-fit: contain;
}
/* thin scrollbar (custom-horizontal-scroll) */
.pdp-thumbs::-webkit-scrollbar { width: 2px; height: 5px; }
.pdp-thumbs::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 2px; }
.pdp-thumbs::-webkit-scrollbar-thumb { background: #888; border-radius: 2px; }
.pdp-thumbs::-webkit-scrollbar-thumb:hover { background: #555; }

/* ----- Info (right) ----- */
.pdp-info {
  display: flex;
  flex-direction: column;
  padding: 0 17px;                   /* px-[17px] */
}
.pdp-name {
  color: #000;
  font-size: 1.5rem;                 /* text-2xl */
  font-weight: 600;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  line-height: 1.25;
}
.pdp-desc {
  color: #000;
  font-family: 'Barlow', sans-serif;
  font-size: 0.875rem;               /* text-sm */
  font-weight: 400;
  margin-top: 10px;
}
@media (min-width: 1024px) {
  .pdp-desc { width: 388px; }
}

/* ----- Attribute selector ----- */
.pdp-attrs {
  display: flex;
  gap: 34px;                         /* gap-[34px] */
  width: 100%;
  flex-wrap: wrap;
}
.pdp-attr {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 21px;
}
.pdp-attr-label {
  color: #000;
  font-size: 0.875rem;
  font-weight: 400;
  font-family: 'Barlow Condensed', sans-serif;
}
.attr-select { position: relative; width: fit-content; min-width: 168px; }
.attr-select-trigger {
  height: 35px;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 21px;
  font-size: 11px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  user-select: none;
  text-transform: none;
}
.attr-select-trigger svg { width: 16px; height: 16px; transition: transform 0.2s; }
.attr-select.open .attr-select-trigger svg { transform: rotate(180deg); }
.attr-select-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #000;
  z-index: 40;
  display: none;
}
.attr-select.open .attr-select-menu { display: block; }
.attr-select-opt {
  padding: 5px 21px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s;
}
.attr-select-opt:hover { background: #c63afe1a; color: #000; }
.attr-select-opt.selected { background: #c63afe1a; color: #000; }

/* ----- Pricing radios ----- */
.pdp-pricing {
  display: flex;
  flex-direction: column;
  gap: 19px;
  margin-top: 18px;
  max-width: 28rem;                  /* max-w-md */
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.price-left { display: flex; align-items: center; gap: 12px; }
.price-radio {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 2px solid #d1d5db;         /* border-gray-300 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s;
}
.price-row.active .price-radio { border-color: var(--color-primary); }
.price-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--color-primary);
  transform: scale(0);
  transition: transform 0.15s;
}
.price-row.active .price-radio-dot { transform: scale(1); }
.price-label-wrap { display: flex; align-items: center; gap: 8px; }
.price-label {
  color: #1f2937;                    /* gray-800 */
  font-size: 1.125rem;               /* text-lg */
  font-family: 'Barlow Condensed', sans-serif;
}
.price-value {
  font-size: 1.25rem;                /* text-xl */
  font-weight: 600;
  color: #000;
  font-family: 'Barlow Condensed', sans-serif;
}

/* info tooltip */
.price-info { position: relative; display: inline-flex; }
.price-info svg { width: 18px; height: 18px; color: #6b7280; cursor: pointer; }
.price-tooltip {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-66%);
  margin-top: 8px;
  width: 20rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 50;
}
.price-info:hover .price-tooltip { opacity: 1; visibility: visible; }
.price-tooltip .tt-title {
  font-family: 'Barlow', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}
.price-tooltip .tt-body {
  margin-top: 8px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #4b5563;
}
@media (min-width: 768px) {
  .price-tooltip { transform: translateX(16px); top: auto; bottom: 100%; margin-top: 0; margin-bottom: 8px; }
}

/* ----- Checkout + quantity ----- */
.pdp-buy {
  display: flex;
  width: fit-content;
  gap: 7px;
  margin-top: 31px;
}
.pdp-checkout {
  background: #fbfbfb;
  border: 1px solid #000;
  border-radius: 0;
  color: #000;
  padding: 5px 32px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.pdp-checkout:hover { background: #000; color: #fff; }
.pdp-qty {
  width: 60px;
  padding: 5px 8px;
  color: #fff;
  background: #000;
  text-align: center;
  outline: none;
  border: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
}
/* strip number spinners */
.pdp-qty::-webkit-outer-spin-button,
.pdp-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-qty { -moz-appearance: textfield; }

/* ----- Accordions ----- */
.pdp-accordions { width: 100%; margin-top: 41px; }
.pdp-accordions hr { border: none; border-top: 1px solid #d9d9d9; margin: 0; }
.acc {
  width: 100%;
  display: block;
  padding: 16px 13px;
}
.acc-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.acc-title {
  color: #000;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}
.acc-btn svg { width: 24px; height: 24px; color: #000; flex-shrink: 0; }
.acc-icon-minus { display: none; }
.acc.open .acc-icon-plus { display: none; }
.acc.open .acc-icon-minus { display: block; }
.acc-body {
  width: 100%;
  background: #fbfbfb;
  padding-left: 69px;
  margin-top: 34px;
  overflow-x: auto;
  display: none;
}
@media (min-width: 1024px) { .acc-body { padding-left: 132px; } }
.acc.open .acc-body { display: block; }

.acc-body p { font-family: 'Barlow', sans-serif; font-size: 0.9rem; line-height: 1.7; color: #222; margin-bottom: 12px; }
.acc-body ul { margin: 12px 0; padding-left: 20px; list-style: disc; }
.acc-body li { font-family: 'Barlow', sans-serif; font-size: 0.9rem; line-height: 1.7; color: #222; margin-bottom: 6px; }
.acc-body table { border-collapse: collapse; width: 100%; max-width: 600px; }
.acc-body td, .acc-body th {
  border: 1px solid #757474;
  padding: 6px 10px;
  font-family: 'Barlow', sans-serif;
  font-size: 0.875rem;
  text-align: left;
}
.acc-body th { background: #f3f3f3; font-weight: 700; }

/* FAQ list inside accordion */
.faq-item { border-bottom: 1px solid #e5e7eb; width: 100%; max-width: 729px; }
.faq-q {
  width: 100%;
  padding: 16px 0;
  display: flex;
  gap: 23px;
  align-items: flex-start;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.faq-q svg { width: 16px; height: 16px; margin-top: 7px; flex-shrink: 0; transform: rotate(-90deg); transition: transform 0.2s; color: #000; }
.faq-item.open .faq-q svg { transform: rotate(0deg); }
.faq-q-title { color: #000; font-size: 0.875rem; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; }
.faq-a { padding: 0 0 16px 39px; display: none; }
.faq-item.open .faq-a { display: block; }
.faq-a p { color: #000; font-size: 0.875rem; font-family: 'Barlow Condensed', sans-serif; margin: 0; line-height: 1.6; }

/* ----- Related products ----- */
.pdp-related { width: 100%; display: block; padding: 16px 13px; }
.pdp-related-title { color: #000; font-size: 1rem; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; }
.pdp-related-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) { .pdp-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pdp-related-grid { grid-template-columns: repeat(3, 1fr); } }
.rel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  text-align: center;
}
.rel-card img { width: 244px; height: 200px; object-fit: contain; cursor: pointer; max-width: 100%; }
.rel-name { color: #000; font-size: 1.125rem; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; margin-top: 12px; }
.rel-desc { color: #000; font-size: 0.875rem; font-family: 'Barlow', sans-serif; margin-top: 8px; }
.rel-price { color: #000; font-size: 0.875rem; font-weight: 800; margin-top: 8px; font-family: 'Barlow Condensed', sans-serif; }
.rel-stock { color: #000; font-size: 11px; font-weight: 700; margin-top: 4px; font-family: 'Barlow Condensed', sans-serif; }