/* ======================================================
   product.css — 12.20.2025 — 06:52 PM Texas Time (CST)
   GDRankin The Bee Place 3.0 — TBP-3.5 SandBox

   GOAL (why this exists):
   - Stop the "stacked full-size images on desktop" regression.
   - Stop mobile horizontal overflow caused by hero/gallery images.
   - Match the v7 markup (tbp-media-desktop + tbp-thumb*), and
     DO NOT include legacy gallery systems (tbp-gallery--desktop,
     tbp-gallery-thumbs, tbp-gallery-thumb, etc.).

   NOTE:
   - This file intentionally includes a few scoped guardrail rules
     using .tbp-product-page ... !important to override legacy
     leftovers elsewhere during the refactor.
   ====================================================== */


/* ------------------------------------------------------
   SAFETY: Box model consistency inside product page only
   ------------------------------------------------------ */
.tbp-product-page,
.tbp-product-page * ,
.tbp-product-page *::before,
.tbp-product-page *::after {
  box-sizing: border-box;
}

/* Remove default figure margins (prevents overflow + weird spacing) */
.tbp-product-page figure {
  margin: 0;
}

/* ======================================================
   CRITICAL FIX — WHITE "DASHES" ABOVE THUMBS
   These are almost certainly list markers and/or <hr> elements.
   We hard-disable markers (including ::marker) and hide <hr>
   inside the thumb column/list.
   ====================================================== */

.tbp-product-page .tbp-thumb-column ul,
.tbp-product-page .tbp-thumb-column ol,
.tbp-product-page .tbp-thumb-column li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tbp-product-page .tbp-thumb-column li::marker {
  content: "" !important;
}

.tbp-product-page .tbp-thumb-column hr,
.tbp-product-page .tbp-thumb-list hr {
  display: none !important;
}


/* ======================================================
   PAGE FRAME
   ====================================================== */

.tbp-product-page {
  background: #000;
  color: #FAF5E2;
  padding: 1.5rem 1rem 5rem;
  width: 100%;
  overflow-x: hidden; /* last-resort guardrail */
}

.tbp-product-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.5rem;
}

.tbp-product-snippets {
  width: 100%;
}

.tbp-product-media {
  flex: 1 1 0;
  min-width: 0;
}

.tbp-product-summary {
  flex: 0 0 420px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}


/* Optional top banner area on product page */
.tbp-prod-banner {
  max-width:1200px;
  margin:0 auto 1rem;
}


/* ======================================================
   SUMMARY (right side)
   ====================================================== */

.tbp-summary-top {
  display: flex;
  gap: 0.75rem;
}

.tbp-summary-block--h { flex: 1.5 1 0; min-width: 0; }
.tbp-summary-block--i { flex: 1.45 1 0; min-width: 0; }
.tbp-summary-block--j { width: 100%; }


/* ======================================================
   ACCORDION
   ====================================================== */

.tbp-accordion details {
  margin-bottom: 0.35rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #181818;
  border-radius: 6px;
}

.tbp-accordion summary {
  cursor: pointer;
  outline: none;
}

.tbp-snippet-raw {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}


/* ======================================================
   SNIPPET LIST RENDERING (TBP 3.0)
   Scoped to snippet content ONLY
   ====================================================== */

.tbp-snippet-raw .tbp-list {
  margin: 0.75rem 0 1rem 1.25rem;
  padding: 0;
  list-style-position: outside;
}

/* Main list items (primary topics) */
.tbp-snippet-raw .tbp-list-main {
  color: #F5C400;              /* gold */
  font-size: 1.05rem;
  font-weight: 600;
  list-style-type: disc;
  margin: 0.35rem 0;
}

/* Sub list items (details under topic) */
.tbp-snippet-raw .tbp-list-sub {
  color: #FAF5E2;              /* soft white */
  font-size: 0.95rem;
  font-style: italic;
  list-style-type: circle;
  margin: 0.2rem 0 0.4rem 1.25rem;
}

/* Mobile tightening */
@media (max-width: 640px) {
  .tbp-snippet-raw .tbp-list {
    margin-left: 1rem;
  }

  .tbp-snippet-raw .tbp-list-main {
    font-size: 1rem;
  }

  .tbp-snippet-raw .tbp-list-sub {
    font-size: 0.9rem;
  }
}





/* ======================================================
   GALLERY (v7)
   Desktop: thumbs-left + hero
   Mobile: swipe gallery
   ====================================================== */

/* --- Desktop default --- */

/* CRITICAL GUARDRAIL: Never show the mobile swipe gallery on desktop */
.tbp-product-page .tbp-gallery--mobile {
  display: none !important;
}

.tbp-product-page .tbp-media-desktop {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

/* Thumbnail column */
.tbp-product-page .tbp-thumb-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}

/* === Desktop thumb window support (CRITICAL) ===
   Prevent flexbox from shrinking thumbnails to "fit" (crunch/distortion).
   We want overflow + internal scroll instead.
*/
.tbp-product-page .tbp-thumb {
  flex: 0 0 auto; /* prevents shrink-to-fit */
}

.tbp-product-page .tbp-thumb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;              /* enables internal scroll window */
  overscroll-behavior: contain;
  scrollbar-width: none;         /* hide scrollbar (Firefox) */
}

.tbp-product-page .tbp-thumb-list::-webkit-scrollbar {
  display: none;                 /* hide scrollbar (WebKit) */
}

/* When using arrows overlay, add internal padding so arrows don't cover thumbs */
.tbp-product-page .tbp-thumb-list.tbp-thumb-list--window {
  padding-top: 34px;
  padding-bottom: 34px;
}

/* Position context for overlay arrows */
.tbp-product-page .tbp-thumb-column.tbp-thumb-column--window {
  position: relative;
}

/* Desktop thumb arrows — gold scheme aligned with mobile */
.tbp-product-page .tbp-thumb-arrow {
  appearance: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid #C9B037;      /* gold */
  color: #C9B037;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  cursor: pointer;
  user-select: none;
}

.tbp-product-page .tbp-thumb-arrow:active {
  color: #FFF06A;
  border-color: #FFF06A;
}

.tbp-product-page .tbp-thumb-arrow--up {
  top: 0;
}

.tbp-product-page .tbp-thumb-arrow--down {
  bottom: 0;
}

.tbp-product-page .tbp-thumb-arrow.is-hidden {
  display: none !important;
}

.tbp-product-page .tbp-thumb {
  appearance: none;
  border: 1px solid #CFBA6F;
  background: #000;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 100px;
  overflow: hidden;
}

.tbp-product-page .tbp-thumb img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tbp-product-page .tbp-thumb--active {
  box-shadow: 0 0 0 2px #ffffff;
}

.tbp-product-page .tbp-thumb--more {
  border: 1px solid #CFBA6F;
  background: #111;
  color: #CFBA6F;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 4px;
  text-align: center;
  user-select: none;
  width: 90px;
}

/* Hero frame */
.tbp-product-page .tbp-gallery-main {
  flex: 1 1 auto;
  min-width: 0;
  background: #000;
  padding: 4px;
  border-radius: 4px;
}

.tbp-product-page .tbp-gallery-main-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.tbp-product-page .tbp-gallery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 1rem;
  font-size: 0.95rem;
  color: #ccc;
}


/* --- Mobile overrides --- */

@media (max-width: 640px) {

  .tbp-product-layout {
    flex-direction: column;
  }

  .tbp-product-summary {
    flex: 1 1 auto;
    max-width: none;
  }

  /* Mobile: hide desktop thumbs/hero block */
  .tbp-product-page .tbp-media-desktop {
    display: none !important;
  }

  /* Mobile: show the swipe gallery */
  .tbp-product-page .tbp-gallery--mobile {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tbp-product-page .tbp-gallery--mobile .tbp-gallery-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .tbp-product-page .tbp-gallery--mobile .tbp-gallery-item {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    scroll-snap-align: start;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tbp-product-page .tbp-gallery--mobile img {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }
}


/* ======================================================
   MOBILE HERO GALLERY NAV (ARROWS + DOTS)
   ====================================================== */

@media (max-width: 640px) {

  .tbp-gallery--mobile {
    position: relative;
  }

  .tbp-gallery--mobile .tbp-gallery-track {
    scrollbar-width: none;
  }
  .tbp-gallery--mobile .tbp-gallery-track::-webkit-scrollbar {
    display: none;
  }

  .tbp-mobgal-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid #C9B037;
    color: #C9B037;
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
    user-select: none;
  }

  .tbp-mobgal-arrow--prev { left: 10px; }
  .tbp-mobgal-arrow--next { right: 10px; }

  .tbp-mobgal-arrow:active {
    color: #FFF06A;
    border-color: #FFF06A;
  }

  .tbp-mobgal-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
  }

  .tbp-mobgal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #8F7A2E;
    background: rgba(143,122,46,0.35);
    padding: 0;
    cursor: pointer;
  }

  .tbp-mobgal-dot.is-active {
    background: #FFD700;
    border-color: #FFD700;
  }
}

@media (min-width: 641px) {
  .tbp-mobgal-dots,
  .tbp-mobgal-arrow {
    display: none !important;
  }
}


/* ======================================================
   END OF FILE: product.css
   ====================================================== */