/* 13-product-media.css — Post-form image previews, product gallery + thumbnail rail, description see more/less,
   brand-name overflow rules.
   Part of the old css/styles.css (lines 2627–3153); unused rules since removed.
   The number is the load order: later files override earlier ones, exactly
   as later lines in the single file used to. Keep them linked in order. */

/* ── Post-form image previews (goods.js: preview-img-wrap/-img/-remove/-replace) ── */
.preview-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 2;
  padding: 0;
  background: #e74c3c;
  color: white;
}
.preview-remove:active { opacity: 0.8; }

/* ── Product Image Gallery (product detail page) ── */
.product-gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #f5f5f5;
  user-select: none;
}
.gallery-track {
  display: flex;
  /* No transition — switching photos is an instant jump to the next
     image, not a sliding animation. */
}
/* width (not just min-width) matters here: with flex-shrink:0 and no
   width set, a slide's size falls back to its *content's* natural size —
   for a wide/landscape photo, once its height locks to the container's
   height, its own natural width at that height can come out wider than
   the container. flex-shrink:0 then refuses to shrink it back down, so
   the slide itself renders wider than the visible viewport — the visible
   window (overflow:hidden on .product-gallery) just shows whatever falls
   in its first 100%, which is the slide's *left* portion, making the
   photo look left-anchored instead of centered even though object-position
   is centered *within the oversized slide*. Explicit width:100% removes
   any dependency on the image's own intrinsic size, so every slide is
   always exactly one viewport wide no matter the photo's shape. */
.gallery-slide {
  width: 100%;
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.gallery-slide img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: zoom-in;
}
.gallery-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 5;
}
.gallery-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  border: 1px solid rgba(0,0,0,0.15);
}
.gallery-dot.active {
  background: #fff;
  transform: scale(1.3);
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  color: #333;
  transition: background 0.15s;
}
.gallery-arrow:hover { background: #fff; }
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }

/* ── Closed/sold chat items in list ── */
.chat-item-closed {
  opacity: 0.7;
}
.chat-item-closed:hover {
  background: #fafafa;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT DESCRIPTION — SEE MORE / SEE LESS  +  BRAND NAME OVERFLOW
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Description paragraph — always contained ───────────────────────────── */
.product-details #productDescription {
  /* Stay inside the 16px side padding of .product-details */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* Base readable style */
  font-size: 0.9rem;
  color: #555;
  line-height: 1.65;

  /* No bottom margin when collapsed — the button provides spacing */
  margin-bottom: 0;

  /* Prevent any word (URL, hash, etc.) from bursting the container */
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Collapsed: 4-line clamp with a soft fade so user knows there's more */
.product-details #productDescription.mk-desc-collapsed {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Fade the last line away */
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}

/* Expanded: full text, no clamp, comfortable bottom gap before purchase btns */
.product-details #productDescription.expanded {
  display: block;          /* remove -webkit-box */
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-mask-image: none;
          mask-image: none;
  margin-bottom: 4px;
}

/* ── See more / See less button ─────────────────────────────────────────── */
.mk-desc-toggle-btn {
  /* Stays in normal document flow, directly after the <p> */
  display: block;           /* full-width so tap target is easy */
  width: 100%;
  box-sizing: border-box;

  /* Spacing: small top gap from the faded text, bigger bottom gap before chips */
  padding: 6px 0 10px;
  margin: 0;                /* .product-details already has 16px side padding */

  background: none;
  border: none;
  text-align: left;

  color: #19378C;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: opacity 0.15s;

  /* Chevron arrow via CSS — no icon font needed */
  display: flex;
  align-items: center;
  gap: 4px;
}

.mk-desc-toggle-btn::after {
  content: '▾';
  font-size: 0.8rem;
  line-height: 1;
  transition: transform 0.2s ease;
  display: inline-block;
}

.mk-desc-toggle-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.mk-desc-toggle-btn:hover  { opacity: 0.7; }
.mk-desc-toggle-btn:active { opacity: 0.45; }

/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT GALLERY REDESIGN — image card + side thumbnail rail + on-image chips
   ═══════════════════════════════════════════════════════════════════════════ */
.product-media {
  display: flex;
  gap: 8px;
  padding: 10px 10px 0;
  background: #fff;
}
.product-gallery-main {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
}
/* #productImages carries BOTH .product-img-wrap AND .product-gallery-main.
   .product-img-wrap alone no longer sets any height clamp (removed above —
   it used to, and that fought aspect-ratio:4/5 below, silently changing the
   box's real rendered shape depending on container width instead of
   staying a stable 4:5). This rule is now just a safety net in case a
   clamp like that ever gets reintroduced on .product-img-wrap elsewhere:
   aspect-ratio stays the only thing deciding this box's height, so every
   listing gets the same fixed box and object-fit:cover below always has
   one consistent shape to crop into. */
.product-img-wrap.product-gallery-main {
  min-height: 0;
  max-height: none;
}
/* Browser handles all cropping/centering natively — no JS, no backdrop
   layer. object-fit:cover scales the photo up just enough to fill the
   (now-stable) box, crops evenly off whichever pair of edges overflows,
   and object-position:center keeps it centered. */
.product-gallery-main img,
.product-gallery-main .gallery-slide img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 1;
  cursor: zoom-in;
}
.product-gallery-main .product-gallery,
.product-gallery-main .gallery-track,
.product-gallery-main .gallery-slide {
  height: 100%;
}
.gallery-badges {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 78%;
  z-index: 6;
}
.gallery-badges .product-detail-chip {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border: none;
}
.gallery-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  z-index: 6;
  pointer-events: none;
}
.product-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 60px;
  flex-shrink: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.product-gallery-thumbs::-webkit-scrollbar { display: none; }
.product-gallery-thumbs .thumb {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #f0f0f0;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.7;
  transition: border-color 0.15s, opacity 0.15s;
}
.product-gallery-thumbs .thumb.active { border-color: #19378C; opacity: 1; }
.product-gallery-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 6 slides (5 photos + 1 video) is the maximum a listing can have. At the
   default 60px thumb size, 6 of them (330px + gaps ≈ 400px) don't fit
   within the main gallery's height on most common phone widths (a 4:5
   aspect-ratio image is only ~330-380px tall in the 360-390px screen-width
   range) — meaning the 6th thumbnail, always the video since it's appended
   last, would sit below the fold and need a scroll to discover. Shrinking
   to 50px/6px-gap when there are 6 slides (330px total) fits comfortably
   even on the smallest common screens, so the video thumbnail is always
   visible without scrolling. Applied via JS in updateProductPage's thumb
   rendering, based on slides.length. */
.product-gallery-thumbs.compact { width: 50px; gap: 6px; }
.product-gallery-thumbs.compact .thumb { width: 50px; height: 50px; border-radius: 10px; }

/* Single-image listings: no thumbs to show — collapse the rail so the
   main photo goes full-width and is actually centered, instead of being
   shifted left by a reserved-but-empty 60px column + gap. */
.product-gallery-thumbs:empty { display: none; }
.product-media:has(.product-gallery-thumbs:empty) { gap: 0; }

/* ── Description, labeled ─────────────────────────────────────────────── */
.product-desc-section { padding: 4px 0 4px; }
.product-desc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding-bottom: 6px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 8px;
}
.product-desc-header .label { font-weight: 700; font-size: 0.95rem; color: #1a1a2e; }
.product-desc-header .desc-chevron {
  font-size: 20px;
  color: #888;
  transition: transform 0.2s ease;
}
.product-desc-header .desc-chevron.rotated { transform: rotate(180deg); }

/* ── Brand name overflow — home UI ──────────────────────────────────────── */

/* Brand shortcut row circles */
.brand-shortcuts .brand span {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

/* Hero banner brand name */
.brand-banner-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hero banner tagline */
.brand-banner-tagline {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Brand chip on product detail */
.chip-brand {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex !important;
  vertical-align: middle;
}

/* Tappable variant — only rendered when the good carries a real brandId
   (see updateProductPage in firebase.js). Needs to read as a link, since
   the plain chip next to it on other listings is just a label. */
.chip-brand-link {
  cursor: pointer;
  align-items: center;
  gap: 2px;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
}
.chip-brand-link:hover,
.chip-brand-link:focus-visible {
  background: #cdd8ec;
  border-color: #19378C;
  outline: none;
}
.chip-brand-link:focus-visible {
  box-shadow: 0 0 0 2px rgba(25, 55, 140, 0.35);
}
.chip-brand-link:active { transform: scale(0.97); }
.chip-brand-chevron {
  opacity: 0.65;
  margin-left: 1px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .chip-brand-link { transition: none; }
  .chip-brand-link:active { transform: none; }
}

/* Global last-resort: any unhandled user text */
p, h1, h2, h3, h4, h5, h6, span, li, td, th {
  overflow-wrap: break-word;
}