/* ==========================================================================
   TechGrid: product detail page
   File: static/products/css/product_detail.css
   Loaded after style.css, so it uses the same design tokens (--accent, --line, ...).

   Contents
   1. Page and breadcrumbs
   2. Overview layout
   3. Image gallery
   4. Product information (brand, title, price, availability, purchase buttons, trust)
   5. Description
   6. Technical specifications
   7. Related products
   8. Back link
   ========================================================================== */


/* 1. Page and breadcrumbs
   -------------------------------------------------------------------------- */
.product-detail-section {
  padding-block: var(--space-5) var(--space-7);
}

.product-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--space-2);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.product-breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
}
.product-breadcrumbs a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.product-breadcrumbs [aria-hidden="true"] { color: var(--line-strong); }

.product-breadcrumbs__current {
  color: var(--text);
  font-weight: 500;
}


/* 2. Overview layout
   One column on phones. Gallery and information side by side from 56rem.
   -------------------------------------------------------------------------- */
.product-detail {
  display: grid;
  gap: var(--space-5);
  align-items: start;
}

@media (min-width: 56rem) {
  .product-detail {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-7);
  }

  /* The gallery stays in view while the longer information column scrolls */
  .product-gallery {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}


/* 3. Image gallery
   -------------------------------------------------------------------------- */
.product-gallery__main {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.product-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-gallery__placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: var(--space-4);
  background: var(--paper);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.product-detail__sale-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: 0.125rem var(--space-2);
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}

.product-gallery__thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.product-gallery__thumbnail {
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-gallery__thumbnail:hover { border-color: var(--line-strong); }

.product-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The selected thumbnail gets a blue outline drawn with box-shadow, so nothing shifts */
.product-gallery__thumbnail.is-active,
.product-gallery__thumbnail[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

@media (min-width: 40rem) {
  .product-gallery__thumbnail {
    width: 5rem;
    height: 5rem;
  }
}


/* 4. Product information
   -------------------------------------------------------------------------- */
.product-info__brand {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.product-info__title {
  margin-top: var(--space-1);
  font-size: var(--text-2xl);
  line-height: 1.12;
}

.product-info__sku {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.product-info__sku span {
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* Price */
.product-info__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.product-info__current-price {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1.05;
}

.product-info__old-price {
  font-size: var(--text-lg);
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Availability: a status light plus a text label */
.product-info__availability {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
}

.availability-dot {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--text-muted);
}
.availability-dot--available { background: var(--ok); }
.availability-dot--order { background: var(--warn); }
.availability-dot--unavailable { background: var(--text-muted); }

.product-info__summary {
  max-width: 60ch;
  margin-top: var(--space-4);
  color: var(--text-muted);
  line-height: 1.6;
}

/* Purchase actions
   Row 1: quantity, Add to cart, Buy now (they wrap on narrow screens)
   Row 2: Order via WhatsApp, full width
   The quantity stepper reuses .qty from the design system. */
.product-info__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.product-info__actions .qty { flex: none; }
.product-info__actions .qty__btn {
  width: 3rem;
  min-height: 3rem;
}

.product-detail__add-to-cart,
.product-detail__buy-now,
.product-detail__whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: 1 1 11rem;
  min-height: 3rem;
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Add to cart: the main action */
.product-detail__add-to-cart { background: var(--accent); color: #fff; }
.product-detail__add-to-cart:hover { background: var(--accent-hover); }

/* Buy now: the alternative, outlined */
.product-detail__buy-now {
  background: var(--white);
  color: var(--text);
  border-color: var(--line-strong);
}
.product-detail__buy-now:hover { border-color: var(--text); color: var(--text); }

/* Order via WhatsApp: full width, green like the rest of the site */
.product-detail__whatsapp {
  flex-basis: 100%;
  background: var(--ok);
  color: #fff;
}
.product-detail__whatsapp:hover { background: var(--ok-hover); color: #fff; }
.product-detail__whatsapp svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.product-detail__add-to-cart:disabled,
.product-detail__buy-now:disabled,
.product-detail__whatsapp[aria-disabled="true"] {
  background: #e3e7eb;
  color: #6b7681;
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}


/* Support and delivery notes */
.product-info__trust {
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.product-info__trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.product-info__trust-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.product-info__trust-item strong {
  display: block;
  font-weight: 600;
}

.product-info__trust-item p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}


/* 5. Description
   -------------------------------------------------------------------------- */
.product-content-section {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.product-content-section__heading > * + *,
.product-specs__heading > div > * + * { margin-top: var(--space-1); }

.product-content-section__eyebrow,
.product-specs__eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
}

.product-description {
  max-width: 68ch;
  margin-top: var(--space-4);
  line-height: 1.65;
}
.product-description > * + * { margin-top: var(--space-3); }


/* 6. Technical specifications
   -------------------------------------------------------------------------- */
.product-specs {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.product-specs__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

.product-specs__intro {
  max-width: 52ch;
  color: var(--text-muted);
}

.product-specs__count {
  padding: 0.125rem var(--space-3);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.product-specs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (min-width: 40rem) {
  .product-specs__grid {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
}

.product-spec-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease);
}
.product-spec-card:hover { border-color: var(--line-strong); }

.product-spec-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-spec-card__index {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.product-spec-card__icon { display: inline-flex; color: var(--accent); }
.product-spec-card__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-spec-card__content h3 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
}

.product-spec-card__content p {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.product-spec-card__bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
}

.product-spec-card__line {
  flex: 1;
  height: 1px;
  background: var(--line);
  transition: background-color var(--dur) var(--ease);
}

.product-spec-card__marker {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--line-strong);
  transition: background-color var(--dur) var(--ease);
}

.product-spec-card:hover .product-spec-card__line { background: var(--line-strong); }
.product-spec-card:hover .product-spec-card__marker { background: var(--accent); }

/* Help note under the specs */
.product-specs__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}

.product-specs__note-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
}

.product-specs__note p {
  flex: 1 1 16rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.product-specs__note a {
  font-weight: 600;
  white-space: nowrap;
}


/* 7. Related products
   The cards and the grid are the existing .product-card and .product-grid.
   -------------------------------------------------------------------------- */
.product-related {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.product-related__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}


/* 8. Back link
   -------------------------------------------------------------------------- */
.product-detail__back { margin-top: var(--space-7); }

.product-detail__back a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-weight: 500;
}