/* ==========================================================================
   Component: Product detail page (gallery + buy box + tabs)
   Requires: common.css
   ========================================================================== */

.di-pdp {
  padding-block: 34px 20px;
}

.di-pdp__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 42px;
  align-items: start;
}

/* --------------------------------------------------------------------------
   1. Gallery
   -------------------------------------------------------------------------- */

.di-gallery__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius);
  background-color: var(--di-cream);
  overflow: hidden;
}

.di-gallery__stage img {
  max-width: 62%;
  max-height: 84%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 14px 26px rgba(31, 36, 33, .22));
  transition: transform .35s ease;
}

.di-gallery__stage.is-zoomed img { transform: scale(1.35); }

.di-gallery__flag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 8px 10px;
  border-radius: var(--di-radius-pill);
  background-color: var(--di-gold);
  color: var(--di-white);
  font-size: var(--di-fs-xs);
  font-weight: 600;
}

.di-gallery__zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  padding: 9px;
  border: 1px solid var(--di-border);
  border-radius: 50%;
  background-color: var(--di-white);
  box-shadow: var(--di-shadow-sm);
  cursor: pointer;
}

.di-gallery__thumbs {
  position: relative;
  margin-top: 14px;
  padding-inline: 34px;
}

.di-gallery__thumb-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.di-gallery__thumb-track::-webkit-scrollbar { display: none; }

.di-gallery__thumb {
  flex: 0 0 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 8px;
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  background-color: var(--di-cream);
  cursor: pointer;
  transition: border-color var(--di-transition);
}

.di-gallery__thumb img { max-height: 100%; width: auto; }

.di-gallery__thumb[aria-current="true"] { border-color: var(--di-gold); }

.di-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--di-border);
  border-radius: 50%;
  background-color: var(--di-white);
  cursor: pointer;
}

.di-gallery__nav--prev { left: 0; }
.di-gallery__nav--next { right: 0; }
.di-gallery__nav[disabled] { opacity: .35; pointer-events: none; }

/* --------------------------------------------------------------------------
   2. Buy box
   -------------------------------------------------------------------------- */

.di-buybox__title {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--di-text);
}

.di-buybox__subtitle {
  margin: 0 0 10px;
  font-size: var(--di-fs-md);
  font-weight: 400;
  color: #45504a;
}

.di-buybox__author {
  margin: 0 0 12px;
  font-size: var(--di-fs-sm);
  color: var(--di-text-muted);
}

.di-buybox__author a { color: var(--di-gold); font-weight: 500; }

.di-buybox__rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 16px;
  font-size: var(--di-fs-sm);
  color: var(--di-text-muted);
}

.di-buybox__stars { display: inline-flex; gap: 2px; }

.di-buybox__rating strong { color: var(--di-text); font-weight: 500; }

.di-buybox__rating span[aria-hidden] { color: var(--di-border); }

.di-buybox__meta {
  margin: 0 0 20px;
  padding: 18px 0;
  border-block: 1px solid var(--di-border);
  list-style: none;
  display: grid;
  gap: 10px;
}

.di-buybox__meta li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--di-fs-sm);
  color: var(--di-text);
}

.di-buybox__meta dt,
.di-buybox__meta-label {
  min-width: 92px;
  color: var(--di-text-muted);
}

.di-buybox__meta .di-icon { margin-top: 3px; }

.di-buybox__stock { color: #1f7a45; font-weight: 500; }

.di-buybox__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.di-buybox__price-now {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--di-text);
}

.di-buybox__price-old {
  font-size: var(--di-fs-md);
  color: var(--di-text-muted);
  text-decoration: line-through;
}

.di-buybox__price-off {
  padding: 3px 9px;
  border-radius: 4px;
  background-color: var(--di-cream-2);
  color: #8a6a2f;
  font-size: var(--di-fs-xs);
  font-weight: 600;
}

/* Quantity stepper */
.di-qty {
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  margin-bottom: 18px;
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius-sm);
  overflow: hidden;
}

.di-qty__btn {
  width: 42px;
  border: 0;
  background-color: var(--di-white);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--di-text);
  cursor: pointer;
  transition: background-color var(--di-transition);
}

.di-qty__btn:hover { background-color: var(--di-cream); }
.di-qty__btn[disabled] { opacity: .4; cursor: default; }

.di-qty__input {
  width: 56px;
  border: 0;
  border-inline: 1px solid var(--di-border);
  text-align: center;
  font-family: inherit;
  font-size: var(--di-fs-base);
  color: var(--di-text);
  -moz-appearance: textfield;
}

.di-qty__input::-webkit-outer-spin-button,
.di-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.di-qty__input:focus { outline: none; }

/* Actions */
.di-buybox__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.di-buybox__actions .di-btn { padding-block: 13px; }

.di-buybox__links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--di-border);
}

.di-buybox__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: inherit;
  font-size: var(--di-fs-sm);
  color: var(--di-text);
  cursor: pointer;
}

.di-buybox__link:hover { color: var(--di-gold); }
.di-buybox__link[aria-pressed="true"] { color: var(--di-gold); font-weight: 500; }

/* Trust strip */
.di-buybox__trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.di-buybox__trust li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.di-buybox__trust b {
  display: block;
  font-size: var(--di-fs-xs);
  font-weight: 600;
  color: var(--di-text);
}

.di-buybox__trust span {
  font-size: 11px;
  line-height: 1.45;
  color: var(--di-text-muted);
}

/* --------------------------------------------------------------------------
   3. Tabs
   -------------------------------------------------------------------------- */

.di-tabs {
  margin-top: 34px;
  border: 1px solid var(--di-border);
  border-radius: var(--di-radius);
  background-color: var(--di-white);
  overflow: hidden;
}

.di-tabs__list {
  display: flex;
  gap: 4px;
  padding: 0 10px;
  border-bottom: 1px solid var(--di-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.di-tabs__list::-webkit-scrollbar { display: none; }

.di-tabs__tab {
  position: relative;
  flex: none;
  padding: 16px 14px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--di-fs-sm);
  color: var(--di-text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.di-tabs__tab[aria-selected="true"] {
  color: var(--di-gold);
  font-weight: 500;
}

.di-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  background-color: var(--di-gold);
}

.di-tabs__panel {
  padding: 26px 28px 30px;
}

.di-tabs__panel[hidden] { display: none; }

.di-tabs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.di-prose h3 {
  margin: 0 0 12px;
  font-size: var(--di-fs-md);
  font-weight: 600;
}

.di-prose h4 {
  margin: 22px 0 8px;
  font-size: var(--di-fs-sm);
  font-weight: 600;
}

.di-prose p {
  margin: 0 0 14px;
  font-size: var(--di-fs-sm);
  line-height: 1.8;
  color: #4b524e;
}

.di-prose ul {
  margin: 0;
  padding-left: 18px;
  font-size: var(--di-fs-sm);
  line-height: 1.9;
  color: #4b524e;
}

/* Spec table (Product Details tab) */
.di-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--di-fs-sm);
}

.di-spec th,
.di-spec td {
  padding: 11px 14px;
  border: 1px solid var(--di-border);
  text-align: left;
}

.di-spec th {
  width: 200px;
  font-weight: 500;
  color: var(--di-text-muted);
  background-color: var(--di-cream);
}

/* Side card in the description tab */
.di-sidecard {
  padding: 22px;
  border-radius: var(--di-radius);
  background-color: var(--di-cream);
}

.di-sidecard__list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.di-sidecard__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.di-sidecard__list b {
  display: block;
  font-size: var(--di-fs-sm);
  font-weight: 600;
}

.di-sidecard__list span {
  font-size: var(--di-fs-xs);
  line-height: 1.6;
  color: var(--di-text-muted);
}

.di-share__title {
  margin: 0 0 10px;
  font-size: var(--di-fs-sm);
  font-weight: 600;
}

.di-share__list {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.di-share__list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--di-white);
  box-shadow: var(--di-shadow-sm);
  transition: transform var(--di-transition);
}

.di-share__list a:hover { transform: translateY(-2px); }

/* Reviews */
.di-review {
  padding: 16px 0;
  border-bottom: 1px solid var(--di-border);
}

.di-review:last-child { border-bottom: 0; }

.di-review__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.di-review__name { font-size: var(--di-fs-sm); font-weight: 600; }
.di-review__date { font-size: var(--di-fs-xs); color: var(--di-text-muted); }

.di-review__text {
  margin: 0;
  font-size: var(--di-fs-sm);
  line-height: 1.7;
  color: #4b524e;
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  .di-pdp__layout { grid-template-columns: 1fr; gap: 28px; }
  .di-buybox__trust { grid-template-columns: repeat(2, 1fr); }
  .di-tabs__grid { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 575.98px) {
  .di-pdp { padding-block: 22px 10px; }
  .di-gallery__stage img { max-width: 70%; }
  .di-buybox__actions { grid-template-columns: 1fr; gap: 10px; }
  .di-buybox__links { gap: 18px; }
  .di-tabs__panel { padding: 20px 16px 24px; }
  .di-spec th { width: 130px; }
  .di-buybox__meta dt,
  .di-buybox__meta-label { min-width: 82px; }
}