/* =========================================================================
   LAUGO ARMS BRASIL — PDP (product detail) with gallery + zoom
   Loads after site.css + product.css (reuses tokens, lockup, feature tiles).
   ========================================================================= */

.pdp { background: var(--bg); }
.pdp .wrap { padding-top: var(--s-7); }

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-ui); font-size: 11.5px; color: var(--t-4);
  letter-spacing: 0.04em; padding: 8px 0 26px; display: flex; flex-wrap: wrap; gap: 8px;
}
.breadcrumb a { color: var(--t-3); }
.breadcrumb a:hover { color: var(--red-bright); }
.breadcrumb span { color: var(--t-4); }

/* Top: gallery + buy box */
.pdp-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }

/* ---- Gallery ---- */
.gallery { display: flex; flex-direction: column; gap: 16px; }
.gallery-main {
  position: relative; aspect-ratio: 1.3 / 1; background: #0c0c0d;
  border: 1px solid var(--line); overflow: hidden; cursor: zoom-in;
}
.gallery-main__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transition: opacity .35s var(--ease);
}
.gallery-main__img.swapping { opacity: 0; }
/* inner zoom layer */
.gallery-zoom {
  position: absolute; inset: 0; z-index: 3; opacity: 0;
  background-repeat: no-repeat; background-color: #0c0c0d;
  background-size: 230%; transition: opacity .2s var(--ease); pointer-events: none;
}
.gallery-main.is-zoom .gallery-zoom { opacity: 1; }
.gallery-main.is-zoom { cursor: crosshair; }
.zoom-hint {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  font-family: var(--font-techno); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--t-3); background: rgba(0,0,0,0.5); padding: 5px 9px; display: flex; gap: 7px; align-items: center;
}
.zoom-hint svg { width: 12px; height: 12px; stroke: var(--t-2); fill: none; }
.gallery-main.is-zoom .zoom-hint { opacity: 0; }

.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.16); color: #fff;
  transition: all .18s var(--ease);
}
.gallery-arrow:hover { background: var(--red); border-color: var(--red); }
.gallery-arrow.prev { left: 14px; } .gallery-arrow.next { right: 14px; }
.gallery-arrow svg { width: 18px; height: 18px; }

.gallery-thumbs { display: flex; gap: 10px; overflow: hidden; }
.gallery-thumb {
  flex: 0 0 calc((100% - 40px) / 5);
  aspect-ratio: 1.3 / 1; background: #0c0c0d; border: 1px solid var(--line);
  overflow: hidden; cursor: pointer; padding: 0; transition: border-color .18s var(--ease);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb:hover { border-color: var(--t-4); }
.gallery-thumb.is-active { border-color: var(--red-bright); }

/* ---- Buy box ---- */
.buybox { display: flex; flex-direction: column; gap: 18px; }
.buybox h1 {
  font-family: var(--font-techno); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: 0.06em; text-transform: uppercase; color: #fff; line-height: 1.15; margin: 0;
}
.buybox .price { font-family: var(--font-ui); font-weight: 700; font-size: 22px; color: #fff; letter-spacing: 0.02em; }
.buybox .price small { font-size: 13px; color: var(--t-3); font-weight: 500; margin-left: 8px; }
.buybox .reviews { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--red-bright); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; }
.buybox .reviews .stars { letter-spacing: 2px; color: rgba(255,255,255,0.85); }
.buybox .desc { font-size: 14px; line-height: 1.7; color: var(--t-2); margin: 0; }

.option { display: flex; flex-direction: column; gap: 8px; }
.option label { font-family: var(--font-ui); font-weight: 700; font-size: 13px; color: #fff; letter-spacing: 0.04em; }
.option select {
  appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid #cfcfd2; padding: 12px 38px 12px 14px; font-family: var(--font-ui); font-size: 14px; color: #111; cursor: pointer;
}
.option select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }

.buy-actions { display: flex; gap: 12px; align-items: stretch; margin-top: 4px; }
.qty { display: inline-flex; border: 1px solid var(--line); background: var(--bg-2); }
.qty button { background: transparent; border: none; color: #fff; width: 38px; font-size: 16px; cursor: pointer; }
.qty input { width: 46px; text-align: center; background: transparent; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); color: #fff; font-family: var(--font-ui); font-size: 14px; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.add-cart {
  flex: 1; background: var(--red-bright); color: #fff; border: none;
  font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background .18s var(--ease); padding: 0 24px;
}
.add-cart:hover { background: var(--red); }
.buybox .sku { font-family: var(--font-techno); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-4); }

/* ---- Description / tabs ---- */
.pdp-desc { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); padding-top: clamp(28px,4vw,44px); }
.pdp-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: clamp(36px,5vw,56px); }
.pdp-tabs button { background: none; border: none; padding: 0 0 14px; font-family: var(--font-ui); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-3); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.pdp-tabs button.is-active { color: #fff; border-bottom-color: var(--red-bright); }

.kit-contents { max-width: 980px; margin: clamp(40px,6vw,64px) auto 0; }
.kit-contents h3 { font-family: var(--font-ui); font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
.kit-contents ul { margin: 0; padding-left: 20px; }
.kit-contents li { font-size: 14.5px; color: var(--t-2); line-height: 1.9; }
.kit-contents li ul { margin: 4px 0; }
.kit-contents li em { color: var(--t-4); font-style: italic; }

/* ---- Specifications table ---- */
.specs-table { max-width: 980px; margin: clamp(40px,6vw,64px) auto 0; }
.specs-table h3 { font-family: var(--font-ui); font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin: 0 0 18px; }
.specs-table table { width: 100%; border-collapse: collapse; }
.specs-table tr { border: 1px solid var(--line); }
.specs-table th { text-align: left; width: 50%; background: var(--bg-2); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 14px 18px; border-right: 1px solid var(--line); }
.specs-table td { padding: 14px 18px; font-size: 14px; color: var(--t-2); }

/* ---- Related products ---- */
.related { max-width: 1180px; margin: clamp(48px,7vw,90px) auto 0; padding-bottom: clamp(40px,6vw,72px); }
.related h3 { font-family: var(--font-ui); font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; margin: 0 0 28px; }
.related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,2.4vw,28px); }
.rel-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.rel-card__media { width: 100%; aspect-ratio: 1.1/1; display: grid; place-items: center; }
.rel-card__media image-slot { width: 100%; height: 100%; }
.rel-card .name { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; line-height: 1.3; }
.rel-card .price { font-family: var(--font-techno); font-size: 12px; letter-spacing: 0.06em; color: var(--t-3); }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; padding: 5vh 5vw; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; }
.lightbox__close { position: absolute; top: 24px; right: 28px; color: #fff; font-family: var(--font-techno); font-size: 13px; letter-spacing: 0.18em; cursor: pointer; background: none; border: none; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; display: grid; place-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); color: #fff; cursor: pointer; }
.lightbox__nav.prev { left: 24px; } .lightbox__nav.next { right: 24px; }
.lightbox__nav svg { width: 22px; height: 22px; }

@media (max-width: 1080px) {
  .pdp-top { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .gallery-main { cursor: default; }
  .related__grid { grid-template-columns: 1fr; }
}