/* ============================================
   HAWK PRO — Product Detail Page CSS
   Loaded after css/style.css on product-detail.html only
   ============================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar {
  background-color: var(--light-50);
  border-bottom: 1px solid var(--gray-100);
  padding: var(--space-md) 0;
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
}

.breadcrumb a {
  color: var(--gray-500);
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--black);
}

.breadcrumb i {
  font-size: 10px;
  color: var(--gray-300);
}

.breadcrumb span {
  color: var(--dark-500);
  font-weight: 600;
}

/* ---------- Product Main Layout ---------- */
.product-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: start;
}

/* ---------- Gallery ---------- */
.product-gallery {
  position: sticky;
  top: calc(var(--topbar-height) + var(--header-height) + var(--space-lg));
  /* A grid item defaults to min-width:auto, which floors it at its min-content
     width. Swiper writes pixel widths onto its slides, so that floor is as wide
     as the whole gallery track — which is how this column ended up 1260px wide
     inside a 336px phone and pushed the page into horizontal scroll. */
  min-width: 0;
}

/* Aspect-ratio lives on this plain (non-Swiper-observed) wrapper via the
   padding-top trick — putting aspect-ratio directly on a Swiper-managed
   element (.swiper / .swiper-slide) creates a ResizeObserver feedback loop
   that Chromium resolves by clamping the box to its max layout size. */
.product-gallery-main-ratio {
  position: relative;
  width: 100%;
  padding-top: 100%;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--light-50);
  margin-bottom: var(--space-md);
}

.product-gallery-main {
  position: absolute;
  inset: 0;
}

.product-gallery-main .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
}

/* The arrows live in the wrap's side gutters rather than on top of the strip,
   so they never cover a thumbnail. The padding is only added when there are
   arrows to hold, which is why it hangs off .has-nav and not the wrap itself. */
.product-gallery-thumbs-wrap {
  position: relative;
}

.product-gallery-thumbs-wrap.has-nav {
  padding: 0 30px;
}

.thumbs-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  background-color: var(--white);
  color: var(--black);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.thumbs-nav:hover {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.thumbs-nav-prev {
  left: 0;
}

.thumbs-nav-next {
  right: 0;
}

/* Swiper adds this class at either end of the track. */
.thumbs-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

.thumbs-nav.swiper-button-disabled:hover {
  background-color: var(--white);
  border-color: var(--gray-100);
  color: var(--black);
}

/* Fixed height (not a percentage-padding trick) — a self-referential
   percentage size on a Swiper-observed slide's child creates a
   ResizeObserver feedback loop that grows the layout unboundedly. */
.product-gallery-thumbs {
  height: 92px;
  padding: 2px;
}

.product-gallery-thumbs .swiper-slide {
  height: 100%;
}

.product-gallery-thumbs .thumb-box {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--gray-100);
  cursor: pointer;
  opacity: 0.7;
  transition: all var(--transition-fast);
}

.product-gallery-thumbs .thumb-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-gallery-thumbs .swiper-slide-thumb-active .thumb-box {
  border-color: var(--black);
  opacity: 1;
}

.product-gallery-video-thumb i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white);
  font-size: 22px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* ---------- Product Info ---------- */
.product-info-brand {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.product-info-title {
  font-size: var(--fs-3xl);
  margin: var(--space-sm) 0 var(--space-md);
  line-height: 1.25;
}

.product-info-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--gray-100);
}

.product-info-sku {
  font-size: var(--fs-xs);
  color: var(--gray-400);
}

.product-info-stock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-success);
}

.product-info-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.product-info-price .price-current {
  font-size: var(--fs-4xl);
}

.product-info-coupon {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--dark-500);
  background-color: var(--light-50);
  border: 1px dashed var(--gray-200);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
}

.product-info-coupon i {
  color: var(--accent-sale);
}

.product-info-coupon .coupon-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background-color: var(--white);
  border: 1px dashed var(--dark-500);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}

/* Shown to signed-out visitors only (@guest in product-detail.blade.php). */
.product-info-register {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  color: var(--white);
  background-color: var(--black);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.product-info-register i {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.product-info-register span {
  flex: 1 1 220px;
  min-width: 0;
  line-height: 1.5;
}

.product-info-register .btn {
  flex-shrink: 0;
  background-color: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.product-info-register .btn:hover {
  background-color: transparent;
  color: var(--white);
}

.product-info-desc {
  font-size: var(--fs-base);
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

/* ---------- Variation ---------- */
.product-info-variation {
  margin-bottom: var(--space-lg);
}

.product-info-variation-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dark-500);
  margin-bottom: var(--space-sm);
}

.variation-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.variation-btn {
  padding: 10px 18px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--dark-500);
  transition: all var(--transition-fast);
}

.variation-btn:hover {
  border-color: var(--dark-500);
}

.variation-btn.active {
  border-color: var(--black);
  background-color: var(--black);
  color: var(--white);
}

/* Per-variation stock: an option with 0 pcs can't be picked. */
.variation-btn.is-sold-out {
  border-color: var(--gray-100);
  color: var(--gray-400);
  background-color: var(--light-50);
  cursor: not-allowed;
  text-decoration: line-through;
}

.variation-btn.is-sold-out:hover {
  border-color: var(--gray-100);
}

.variation-stock-note {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-sale);
}

/* ---------- Quantity + Actions ---------- */
.product-info-qty-row {
  display: flex;
  align-items: stretch;
  /* Wraps at every width, not just on phones. Between 992px and roughly
     1230px the info column is about 436px wide while the stepper plus both
     buttons need 534px, so "Buy Now" hung off the right of the page and took
     the whole document into horizontal scroll with it. */
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.qty-stepper {
  display: flex;
  align-items: center;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.qty-btn {
  width: 44px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-500);
  transition: all var(--transition-fast);
}

.qty-btn:hover {
  background-color: var(--light-50);
  color: var(--black);
}

.qty-input {
  width: 44px;
  text-align: center;
  font-weight: 600;
  color: var(--black);
  background: transparent;
}

.product-info-qty-row .btn {
  flex: 0 0 auto;
}

.product-info-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--gray-100);
}

.product-info-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--gray-600);
  transition: color var(--transition-fast);
}

.product-info-action-btn:hover {
  color: var(--black);
}

/* ---------- Share ---------- */
.product-share {
  position: relative;
}

/* Anchored to the button and above the content below it, which includes the
   trust badges and the sticky-ish gallery on desktop. */
.product-share-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  min-width: 190px;
  padding: var(--space-xs) 0;
  background-color: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.product-share-menu[hidden] {
  display: none;
}

.product-share-menu a,
.product-share-menu button {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: 10px var(--space-md);
  background: none;
  border: none;
  color: var(--dark-500);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}

.product-share-menu a:hover,
.product-share-menu button:hover {
  background-color: var(--light-50);
  color: var(--black);
}

.product-share-menu i {
  width: 16px;
  font-size: 15px;
  text-align: center;
}


/* ---------- Trust badges ---------- */
.product-info-trust {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--gray-600);
}

.trust-item i {
  font-size: var(--fs-lg);
  color: var(--black);
}

/* ---------- Downloads ---------- */
.product-info-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.download-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--dark-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.download-item:hover {
  color: var(--black);
}

/* ============================================
   PRODUCT TABS
   ============================================ */
.product-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  border-bottom: 2px solid var(--gray-100);
  margin-bottom: var(--space-2xl);
}

.product-tab {
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition-fast);
}

.product-tab:hover {
  color: var(--black);
}

.product-tab.active {
  color: var(--black);
  border-bottom-color: var(--black);
}

.product-tab-panel {
  display: none;
}

.product-tab-panel.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.product-tab-panel p {
  color: var(--gray-600);
  line-height: 1.75;
  margin-bottom: var(--space-md);
  max-width: 760px;
}

/* The full description is rich text now, so give the block elements the editor
   can produce — headings, lists, tables — sane spacing. Paragraphs are already
   covered by the rule above. */
.product-rich-text {
  max-width: 760px;
}

.product-rich-text > *:last-child {
  margin-bottom: 0;
}

.product-rich-text h2,
.product-rich-text h3,
.product-rich-text h4 {
  color: var(--black);
  font-size: var(--fs-lg);
  margin: var(--space-lg) 0 var(--space-xs);
}

.product-rich-text > *:first-child {
  margin-top: 0;
}

.product-rich-text ul,
.product-rich-text ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
  color: var(--gray-600);
  line-height: 1.75;
  /* The reset strips list markers globally; bring them back here. */
  list-style: revert;
}

.product-rich-text li {
  margin-bottom: var(--space-xs);
}

.product-rich-text strong {
  color: var(--black);
}

.product-rich-text a {
  color: var(--black);
  text-decoration: underline;
}

.product-rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.product-rich-text table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
}

.product-rich-text th,
.product-rich-text td {
  padding: var(--space-sm);
  border: 1px solid var(--gray-100);
  text-align: left;
  font-size: var(--fs-sm);
}

.product-tab-list {
  max-width: 760px;
}

.product-tab-list li {
  position: relative;
  padding-left: var(--space-lg);
  color: var(--gray-600);
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.product-tab-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: var(--black);
  border-radius: var(--radius-full);
}

/* ---------- Specifications table ---------- */
.spec-table {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
}

.spec-table tr {
  border-bottom: 1px solid var(--gray-100);
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: var(--space-md);
  font-size: var(--fs-sm);
}

.spec-table th {
  width: 40%;
  color: var(--gray-500);
  font-weight: 500;
}

.spec-table td {
  color: var(--black);
  font-weight: 600;
}

.spec-table tr:nth-child(odd) {
  background-color: var(--white);
}

/* ---------- Reviews ---------- */
.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xl);
  padding-bottom: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--gray-100);
}

.reviews-summary-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.reviews-summary-score .score {
  font-family: var(--font-heading);
  font-size: var(--fs-5xl);
  font-weight: 800;
  color: var(--black);
  line-height: 1;
}

.reviews-summary-score span:last-child {
  font-size: var(--fs-xs);
  color: var(--gray-400);
}

.reviews-summary-bars {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rating-bar-row {
  display: grid;
  grid-template-columns: 12px 1fr 24px;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--gray-500);
}

.rating-bar {
  height: 6px;
  background-color: var(--gray-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.rating-bar div {
  height: 100%;
  background-color: var(--black);
  border-radius: var(--radius-full);
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.review-card {
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--gray-100);
}

.review-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.review-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--dark-800);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.review-card-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--accent-success);
}

.review-date {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--gray-400);
}

.review-card p {
  margin: var(--space-sm) 0 0;
  color: var(--gray-600);
  line-height: 1.7;
}

.review-images {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.review-images img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
  .product-main-grid {
    /* minmax(0, …), not 1fr — see the note on .product-gallery above. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xl);
  }

  .product-gallery {
    position: static;
  }

  .product-info-trust {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  /* Dragging is the natural gesture on a phone, so the arrows give back some
     of their gutter to the thumbnails themselves. */
  .product-gallery-thumbs-wrap.has-nav {
    padding: 0 24px;
  }

  .thumbs-nav {
    width: 20px;
  }

  .product-info-title {
    font-size: var(--fs-2xl);
  }

  .product-info-price .price-current {
    font-size: var(--fs-3xl);
  }

  .product-info-qty-row {
    flex-wrap: wrap;
  }

  .product-info-qty-row .btn {
    flex: 1 1 100%;
  }

  .reviews-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  /* One scrollable strip rather than tabs wrapping onto a second row, where
     the active underline would sit against the wrong edge. */
  .product-tabs {
    overflow-x: auto;
    /* Stated outright. Setting overflow-x to auto makes the browser compute
       overflow-y as auto too, and .product-tab's -2px bottom margin leaves the
       content 2px taller than the box — so a full vertical scrollbar appeared
       beside the tabs over two pixels of overflow. */
    overflow-y: hidden;
    flex-wrap: nowrap;
    /* Momentum scrolling on iOS, and the strip snaps to whole tabs so one is
       never left half cut off. */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* The horizontal scrollbar is noise on a two-item strip; the tabs
       themselves show there is more to the right. */
    scrollbar-width: none;
  }

  .product-tabs::-webkit-scrollbar {
    display: none;
  }

  .product-tab {
    white-space: nowrap;
    scroll-snap-align: start;
    /* Tighter than the desktop padding so more than two tabs are reachable
       without scrolling on a narrow phone. */
    padding: var(--space-md) var(--space-sm);
  }
}