/* =================================================================
   TECHNO TRUCK — Product detail page

   product.html has always linked this file, but it was never on the
   server: /shop/assets/css/product.css returned WordPress's 404 page,
   and store.css carries no .pdp rules at all. Every product page was
   rendering unstyled, with the gallery image at full natural width.

   Written against the tokens already declared in store.css, so the
   page inherits the shop's existing palette, radii and shadows
   rather than introducing a second visual language.
   ================================================================= */

/* ============================================================
   LAYOUT
   ============================================================ */

.pdp {
  padding: 28px 0 64px;
}

.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ============================================================
   GALLERY

   min-width:0 matters: a grid child defaults to min-content
   width, which is what let the image push the column to its
   natural 974px and blow the layout apart.
   ============================================================ */

.pdp__gallery { min-width: 0; position: sticky; top: 88px; }

.gallery__main {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery__main .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

.gallery__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--c-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, transform .15s ease;
}

.gallery__zoom:hover { background: #fff; transform: scale(1.06); }

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* Most parts ship a single photo, so the thumbnail strip is usually
   empty. Without this it still reserves its margin and leaves an
   unexplained gap under the main image. */
.gallery__thumbs:empty { display: none; }

.gallery__thumbs img,
.gallery__thumbs button {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  padding: 0;
  cursor: pointer;
  display: block;
}

.gallery__thumbs .is-active,
.gallery__thumbs img.is-active { border-color: var(--c-primary); }

/* ============================================================
   INFO COLUMN
   ============================================================ */

.pdp__info { min-width: 0; }

.pdp__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pdp__brand {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-primary-700);
  background: var(--c-primary-50);
  padding: 4px 10px;
  border-radius: 999px;
}

.pdp__sku { font-size: 13px; color: var(--c-text-3); }

.pdp__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  color: var(--c-text);
  margin: 0 0 12px;
}

.pdp__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.pdp__rating .stars { color: var(--c-primary); letter-spacing: 1px; }
.pdp__rating-text { font-size: 13px; color: var(--c-text-3); }

.pdp__stock { font-size: 13px; font-weight: 700; }
.pdp__stock.in { color: var(--c-success); }
.pdp__stock.out { color: var(--c-error); }

.pdp__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 18px;
}

.pdp__price-now {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  color: var(--c-text);
}

.pdp__price-was {
  font-size: 17px;
  color: var(--c-text-3);
  text-decoration: line-through;
}

.pdp__price-save {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-success);
  background: rgba(31, 168, 92, .10);
  padding: 4px 10px;
  border-radius: 999px;
}

.pdp__short { color: var(--c-text-2); line-height: 1.65; margin-bottom: 20px; }

/* ---------- fitment box ---------- */

/* Icon, text and the "Change truck" link belong on one row.

   This was display:block, and the tick SVG carries no width attribute
   — only stroke-width — so it stretched to the full column and made
   the box 654px tall. That was the awkward grey slab. */
.pdp__fit {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 20px;
}

.pdp__fit > svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--c-success);
}

.pdp__fit > div { flex: 1 1 auto; min-width: 0; }
.pdp__fit > .btn { flex: 0 0 auto; }

.pdp__fit strong { display: block; font-size: 14px; color: var(--c-text); }
.pdp__fit small { display: block; margin-top: 2px; font-size: 13px; color: var(--c-text-3); }

.fitment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--c-text-2);
}

.fitment-list li { padding: 3px 0; }

/* ---------- quantity + buy ---------- */

/* .pdp__buy is the container holding the quantity stepper and the
   "Add to cart" button. .pdp__buy-row is the smaller row beneath it
   ("Ask a mechanic" / "Save for later"). I had these two the wrong
   way round, which left the button 102px tall and full width. */
.pdp__buy {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pdp__buy > .btn {
  flex: 1 1 240px;
  min-height: 52px;
  font-size: 16px;
}

.pdp__buy-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.qty {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 1px solid var(--c-border-2);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  min-height: 52px;
}

.qty__btn {
  width: 44px;
  border: 0;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}

.qty__btn:hover { background: var(--c-surface-2); }

.qty__input {
  width: 56px;
  border: 0;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--c-text);
  background: #fff;
  /* A number input renders its own spinners and a short intrinsic
     height, which left it floating 22px tall inside a 52px box. */
  appearance: textfield;
  -moz-appearance: textfield;
}

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

.qty__input:focus { outline: none; }

/* ---------- perks ---------- */

.pdp__perks {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pdp__perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--c-text-2);
}

.pdp__perks svg { flex: 0 0 auto; color: var(--c-primary); }

/* ============================================================
   TABS
   ============================================================ */

.pdp__tabs, .tabs { margin-top: 48px; }

.tabs__nav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
}

.tab {
  border: 0;
  background: none;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-3);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}

.tab:hover { color: var(--c-text); }
.tab.is-active { color: var(--c-text); border-bottom-color: var(--c-primary); }

.tabs__body { padding-top: 22px; }

.tabpanel { display: none; color: var(--c-text-2); line-height: 1.7; }
.tabpanel.is-active { display: block; }

.tabpanel h3 {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--c-text);
  margin: 20px 0 8px;
}

.tabpanel h3:first-child { margin-top: 0; }
.tabpanel ul { padding-left: 20px; margin: 8px 0; }
.tabpanel li { padding: 3px 0; }

/* ---------- specs table ---------- */

.specs { width: 100%; border-collapse: collapse; font-size: 14px; }

.specs tr { border-bottom: 1px solid var(--c-border); }
.specs td { padding: 10px 12px; }
.specs td:first-child { font-weight: 600; color: var(--c-text); width: 40%; }
.specs td:last-child { color: var(--c-text-2); }

/* ---------- questions ---------- */

.qa__item { border-bottom: 1px solid var(--c-border); padding: 14px 0; }
.qa__q { font-weight: 700; color: var(--c-text); margin: 0 0 6px; }
.qa__a { margin: 0; color: var(--c-text-2); }

/* ============================================================
   RELATED / UPSELL
   ============================================================ */

.related, .upsell { margin-top: 56px; }

.upsell__grid, .related .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* The related strip below reuses .card, which store.css already
   styles. The upsell strip does not — product.js builds it from
   .upsell__card with a bare <img>, <strong>, <em> and <button>, so
   without these rules it rendered as raw browser defaults: full-size
   images, italic prices and a grey system button. Deliberately
   mirrors .card so the two strips read as one design. */

.upsell__card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}

.upsell__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.upsell__card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  padding: 16px;
  border-bottom: 1px solid var(--c-border);
}

.upsell__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px;
  flex: 1 1 auto;
}

.upsell__body strong {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
  /* Two lines maximum, and always two lines' worth of space, so a
     one-line name doesn't leave its card shorter than its
     neighbours. Same trick store.css uses on .card__title. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.upsell__body em {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 22px;
  font-weight: 800;
  color: var(--c-text);
}

.upsell__body button {
  margin-top: auto;
  width: 100%;
  padding: 11px;
  background: var(--c-dark);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s ease;
}

.upsell__body button:hover { background: var(--c-primary); color: var(--c-dark); }

/* ============================================================
   LIGHTBOX

   The markup ships with an empty <img>, so it must stay hidden
   until a source is set or the page shows a broken-image icon.
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 17, .88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 24px;
}

.lightbox.is-open { display: flex; }

.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius);
  display: block;
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

/* ============================================================
   MODAL
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 17, .6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1900;
  padding: 24px;
}

.modal.is-open { display: flex; }

.modal__panel {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  max-height: 84vh;
  overflow: auto;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--c-border);
  font-weight: 700;
}

.modal__body { padding: 20px; color: var(--c-text-2); line-height: 1.65; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
  .pdp__grid { grid-template-columns: 1fr; gap: 28px; }
  .pdp__gallery { position: static; }
}

@media (max-width: 560px) {
  .pdp { padding: 18px 0 48px; }
  .pdp__price-now { font-size: 28px; }
  /* Stepper on its own line, then a full-width Add to cart — thumb
     reach matters more than compactness here.

     The flex-basis must be dropped as well: once the direction is
     column it applies to HEIGHT, which stretched the button to 240px
     tall. */
  .pdp__buy { flex-direction: column; align-items: stretch; }
  .pdp__buy > .btn { flex: 0 0 auto; }
  .qty { align-self: flex-start; }
  .pdp__fit { flex-wrap: wrap; }
  .pdp__fit > div { flex: 1 1 100%; order: 2; }
  .pdp__fit > .btn { order: 3; }
  .upsell__grid, .related .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}