/* Row classes: first <tr> is the title, second <tr> is the content */
tr.title td {
  background: var(--bg-color, #1C1C1D);
  padding: 10px 16px 0;
  border-top: none;
}

tr.title td h5 {
  margin: 0;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  background: var(--button-color, #78787C);
  display: block;
  padding: 9px 17px;
  border-radius: 6px 6px 0 0;
}

tr.title td h5 a {
  color: white;
  text-decoration: none;
}

tr.title td h5 a:hover {
  text-decoration: underline;
}

tr.content td {
  padding-top: 12px;
}

tr.content td[colspan] {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Synopsis-text row (nested 2nd row: <tr class="content"><td colspan="2">
   <h5><strong>Synopsis</strong></h5> …) */
tr.content td h5,
tr.content td h5 strong {
  margin: 0 0 8px;
  font-size: 2rem;
  color: white;
}

/* Base table */
table {
  border-collapse: collapse;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;

  background: var(--bg-color, #1C1C1D);
  border-radius: 12px;
  border: 1px solid #2a2a2e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Gap between stacked feed panels — every table after the first in a column */
#feed1 table ~ table,
#feed2 table ~ table,
#feed3 table ~ table,
#feed4 table ~ table {
  margin-top: 15px;
}

/* Inner panel — the nested feed table (poster/details/Synopsis), search-bar gray */
table[border="0"] {
  background: var(--button-color, #78787C);
  border: none;
  border-radius: 0;
}

/* Per-feed column backgrounds — button rollover gray (#44444f) */
#feed1,
#feed2,
#feed3,
#feed4 {
  background: #44444f;
}

/* 2px gap between the colored feed columns */
#feed1,
#feed2,
#feed3,
#feed4 {
  border-left: 2.5px solid transparent;
  border-right: 2.5px solid transparent;
  background-clip: padding-box;
  border-radius: 12px;
  overflow: hidden;
}

/* Connect the title chip to the inner gray panel — drop the white divider
   on the feed row and collapse the spacer <p></p> */
tr.feed > td {
  border-top: none;
}
tr.feed > td > p:first-child {
  margin: 0;
  height: 0;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}

/* Image cell */
td[width] {
  width: 200px;
  max-width: 100%;
  padding: 16px;
  vertical-align: top;
  text-align: center;
}

td[width] img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Details cell (vendor/type/price) */
td[valign] {
  padding: 16px 16px 16px 0;
  vertical-align: top;
}

td[valign] p {
  margin: 0;
  line-height: 1.8;
}

/* Content cell (synopsis, details, etc.) — text is shown IN FULL, no clamp */
td[colspan] {
  padding: 0 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

td[colspan] h5 {
  margin: 16px 0 8px;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  padding-bottom: 4px;
}

/* Synopsis body text — nested <tr class="content"><td colspan="2">
   <p><span>…the long synopsis…</span></p> — shown IN FULL, no clamp */
tr.content td[colspan] p {
  margin: 0;
  line-height: 1.6;
  font-size: 2rem;
  color: white;
}

/* Strong labels (Vendor:, Type:, etc.) */
td[valign] strong,
td[colspan] strong {
  color: white;
}

/* Emphasis / footer notes */
td[colspan] em {
  font-size: 1rem;
  color: white;
}

td[colspan] a {
  color: #0066cc;
  text-decoration: none;
}

td[colspan] a:hover {
  text-decoration: underline;
}

/* Stray empty h5s (your markup has some) */
td[colspan] h5:empty,
td[colspan] h5:only-child br {
  display: none;
}

td[colspan] h5:has(br:only-child) {
  display: none;
}

/* Feed column header */
.content-title {
  font-size: 2.4rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  text-align: center;
  padding: 16px 12px;
  margin: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

/* Feed titles double as show/hide toggles for their content — collapsed by
   default; clicking a title flips .feed-open on the panel */
.feed-panel .content-title {
  cursor: pointer;
  user-select: none;
}

.feed-panel .content-title::after {
  content: ' ▾';
}

.feed-panel.feed-open .content-title::after {
  content: ' ▴';
}

.feed-panel [data-feed-render] {
  display: none;
}

.feed-panel.feed-open [data-feed-render] {
  display: block;
}

/* Horizontal feeds (e.g. #feed4) — rendered as a Bootstrap carousel of
   product cards, on the dark theme */
#feed4 .carousel {
  padding-bottom: 34px;   /* room for the indicator dots */
}

/* 10% shrink is a WIDTH cap on the card (see .feed-card), no transform —
   scaled/clipped layers raster at non-integral pixels and round the slide's
   top edge between frames (the "top of the image cuts off" on rotation).
   Rotation is Bootstrap 3's own carousel driver with every slide pinned to
   the same px height + the inner pinned (equalizeCarouselHeights in feeds.js),
   so the left-slide swap never changes layout height — nothing settles. */

/* Bootstrap's own driver still toggles the .active/.next/.prev/.left/.right
   classes every slide — we just re-map those class poses from `left` (a
   LAYOUT property: animating it forces a layout + repaint every frame, and
   soft image edges re-rasterize at a different sub-pixel rounding each frame
   — the "incoming images bounce") to `transform: translateX`, which the
   compositor animates with zero per-frame repaint. */
#feed4 .carousel-inner > .item {
  -webkit-transition: -webkit-transform 0.6s linear;
          transition: transform 0.6s linear;
}

#feed4 .carousel-inner > .next,
#feed4 .carousel-inner > .prev {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin-top: 0;
  margin-right: 0;
  padding: 0;
  font-weight: 400;
  font-size: inherit;
  border-radius: 0;
  cursor: default;
}

#feed4 .carousel-inner > .next {
  transform: translateX(100%);
}

#feed4 .carousel-inner > .prev {
  transform: translateX(-100%);
}

#feed4 .carousel-inner > .next.left,
#feed4 .carousel-inner > .prev.right {
  transform: translateX(0);
}

#feed4 .carousel-inner > .active.left {
  transform: translateX(-100%);
}

#feed4 .carousel-inner > .active.right {
  transform: translateX(100%);
}

#feed4 .carousel-indicators {
  bottom: 2px;
}

#feed4 .carousel-indicators li {
  border-color: #56565A;
  background: #343438;
}

#feed4 .carousel-indicators .active {
  background: var(--button-color, #78787C);
  border-color: var(--button-color, #78787C);
}

/* Slides sit on a centered, narrow product card. table-layout: fixed makes
   the td column width depend on the table width, NOT the (still-loading)
   image content — with auto layout an unloaded 0x0 img shrinks the td, the
   padding-bottom frame computes shorter, then snaps taller when the image
   lands (the "lift then dip back down" during rotation). Fixed layout keeps
   the frame height constant no matter what the image is doing. */
#feed4 .feed-card {
  width: 100%;
  table-layout: fixed;
  max-width: 306px;   /* ~90% of the original 340px: the 10% shrink, width-based */
  margin: 0 auto;
}

/* Three cards side by side per slide, centered; the last slide's short
   group (e.g. 2 cards) centers via flex's justify-content */
#feed4 .feed4-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#feed4 .feed4-card-wrap {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  padding: 0 8px;
}

/* On mobile/tablet the bottom panels (#feed1/2/3) live inside the padded
   col-md-10 wrapper, whose extra col padding double-steps them 15px narrower
   than the search bar and #feed4 above. Strip the WRAPPER padding instead of
   the panels' — the panels keep their own gutter so the dark cards never run
   edge-to-edge and swallow the sides of the gray title headers */
@media (max-width: 991px) {
  .feed-matrix {
    padding-left: 0;
    padding-right: 0;
  }
  #feed1.feed-open,
  #feed2.feed-open,
  #feed3.feed-open {
    padding-bottom: 15px;
  }
}

@media (max-width: 767px) {
  #feed4 .feed4-card-wrap {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .content-title {
    font-size: 2.0rem;
  }
}

/* Product name sits BELOW the image/price on its own row with a reserved
   height, so every slide is the same height (prevents title/image overlap
   during carousel transitions). The bottom cell also carries the card's
   bottom-corner radius — a <table> can't clip cell backgrounds through its
   overflow, so the title cell's own fill painted square corners here. */
#feed4 .feed-card tr.title td {
  text-align: center;
  padding: 0 16px 16px;
  border-radius: 0 0 12px 12px;
}

#feed4 .feed-card tr.title td h5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  margin: 0;
  border-radius: 6px;
  font-size: 1.5rem;
  letter-spacing: 0.3px;
}

/* Product image filling a fixed-ratio frame (aspect-ratio, no padding trick).
   Frame ratio 1:0.6149 (~61.49% height) is slightly SHORTER than the art's
   natural 1:0.6405, so object-fit:cover (anchored to the top) crops ~4% off
   the BOTTOM of the portrait art. The img FILLS the frame box exactly rather
   than rendering at its own fractional height:auto size — with a fractional
   natural size the art re-rasterizes at a different rounding every frame of
   the carousel slide (left is layout/paint per frame) and the images bob at
   their top edge mid-rotation.
   No side padding here — the td[colspan] padding provides the gutters. */
#feed4 .feed-card .feed-card-img {
  position: relative;
  aspect-ratio: 1 / 0.6149;
  overflow: hidden;
}

#feed4 .feed-card .feed-card-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;   /* crop comes from the bottom, like before */
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

#feed4 .feed-card .feed td {
  text-align: center;
  color: #e6e6e6;
}

/* Price and Pre-order badge sit in the title chip BELOW the product name —
   the badge (Pre-order) to the left of the price on the same line */
#feed4 .feed-card .feed-card-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 0;
}

#feed4 .feed-price-sale {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
}

#feed4 .feed-price-was {
  font-size: 1.4rem;
  color: #9a9aa0;
  text-decoration: line-through;
  margin-left: 10px;
}

/* Pre-order badge (natural pill, no absolute positioning) */
#feed4 .feed-card-badge {
  display: inline-block;
  margin: 0;
  padding: 3px 12px;
  background: #2e7d32;
  color: #ffffff;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 12px;
}

/* Chevron arrows as round chips that don't straddle the card */
#feed4 .carousel-control {
  background-image: none;
  opacity: 0.9;
  width: 7%;
  text-shadow: none;
  color: #ffffff;
}

#feed4 .carousel-control:hover,
#feed4 .carousel-control:focus {
  color: #ffffff;
}

#feed4 .carousel-control .glyphicon {
  font-size: 1.6rem;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #56565A;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Truncated entries — the Synopsis/content row stays in the markup but is
   hidden until the "Read More" button expands it */
tr.content {
  display: none;
}

/* Read More button row */
tr.read-more-row td {
  padding: 16px;
  text-align: center;
  vertical-align: middle;
}

button.read-more {
  background: #56565A;
  color: white;
  border: 1px solid #56565A;
  border-radius: 25px;
  padding: 6px 20px;
  font-size: 1.4rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

button.read-more:focus,
button.read-more:active {
  color: white;
  outline: 0;
  box-shadow: none;
}

button.read-more:hover {
  background: #44444f;
  color: white;
  border-color: var(--bg-color, #1C1C1D);
}