/* ---------------------------------------------------------------------------
   Mobile containment.

   The legacy stylesheet was written for desktop and several components carry
   fixed widths that push past a 375px viewport, dragging the whole page into
   horizontal scroll. Rather than chase each one, the page itself is contained
   and the components that legitimately need to scroll (data tables) keep their
   own scroll container.

   Verified with: window.scrollTo(400, y) — the page must not move.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Tables stay scrollable inside their own wrapper — containing the page
     must not make the results unreadable. */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* Bootstrap 3's negative gutters overflow once the body is contained. */
  .container,
  .container1170 {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Footer: style.css floats the Important Links sub-list (`.imp1{float:left}`)
   and never clears it. Once the columns stack, the Subscribe Now heading
   wraps alongside that float and its text is pushed to the right edge
   instead of starting at the column's left. Clear it at the column. */
@media (max-width: 991px) {
  .footer .col-md-3,
  .footer .col-md-6 {
    clear: both;
  }
}

/* ---------------------------------------------------------------------------
   Mobile slide-out nav.

   Legacy pins this to a 300px panel of fixed 357px height, which leaves a
   dead strip beside the menu and clips the list if it ever grows. Widened to
   the full viewport and given room to breathe: real tap targets, hairline
   separators, and a surface that reads as a panel rather than a floating box.
   Overrides live here rather than in legacy-inline.css so the ported file
   stays a faithful copy of header.php's <style> block.
--------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .side-collapse {
    width: 100%;
    /* Legacy pins bottom:0, which stretches the panel down the whole screen
       even for three links. Let it hug its content and scroll only if it
       outgrows the viewport. */
    height: auto;
    bottom: auto;
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    /* Legacy animates `width`, which can't work once the panel is full-bleed:
       the links would reflow the whole time. Slide it in instead. */
    transition: transform 0.3s ease;
    transform: translateX(0);
  }

  .side-collapse.in {
    /* `in` is legacy's *closed* state. Held off-canvas rather than hidden, so
       the slide has something to animate; pointer-events keeps the off-screen
       links from swallowing taps. */
    width: 100%;
    transform: translateX(-100%);
    pointer-events: none;
  }

  /* style.css paints .navbar-collapse #eee and forces .navbar-inverse
     transparent, so the panel's own background never shows — set it here. */
  .side-collapse .navbar-collapse {
    padding: 0;
    border-top: 0;
    box-shadow: none;
    max-height: none;
    background: #fff;
  }

  .side-collapse .navbar-nav {
    margin: 0;
    width: 100%;
  }

  /* Outguns `ul.nav.navbar-nav li{margin-top:13px!important}`, which otherwise
     wedges a gap above every row. */
  .side-collapse ul.nav.navbar-nav > li {
    width: 100%;
    margin: 0 !important;
    text-align: left;
    font-size: 1em !important;
  }

  .side-collapse .navbar-nav > li > a {
    display: block;
    padding: 15px 20px !important;
    line-height: 1.4;
    font-size: 14px;
    letter-spacing: 1px;
    color: #333;
    border-bottom: 1px solid #ececec;
  }

  /* The caret sits at the far edge of the row rather than trailing the label. */
  .side-collapse .navbar-nav > li > a .mobile-view-icon {
    float: right;
  }

  .side-collapse .dropdown-menu {
    position: static;
    float: none;
    width: 100%;
    border: 0;
    box-shadow: none;
    background: #f7f7f7;
    padding: 0;
    margin: 0;
    left: 0;
  }

  .side-collapse .dropdown-menu > li > a {
    padding: 12px 20px 12px 34px !important;
    border-bottom: 1px solid #ececec;
    white-space: normal;
  }
}

/* Product grid: two cards per row above 480px (see ProductGrid's column
   classes), but a phone is too narrow to split — give each card the full
   width again at or below that. The bound matches legacy's own 480px
   breakpoint for .view_imagerotate, whose fixed right/bottom offsets assume a
   full-width card; splitting the row at the same width it appears would strand
   the badge in the middle of the ring. */
@media (max-width: 480px) {
  #main_engagemaent .col-xs-6 {
    width: 100%;
  }
}

/* The stepper's chevron is a .stage::before pinned at right:-10px, so the last
   stage's arrow juts past its container and gives the whole page a ~10px
   horizontal scroll on narrow screens. It's legacy chrome worth keeping, so
   clip it at the wrapper. Global rather than per-page: the stepper appears on
   the diamond search, the ring listings and the detail pages alike.
   overflow-y is paired here on purpose, not left to its default: setting
   only overflow-x makes the browser compute overflow-y as "auto" per spec
   (any axis left at the "visible" default gets auto-promoted once the other
   axis isn't visible), and the same chevron shape also overflows ~10px
   vertically - so without this, that spec rule turns a 10px, invisible-in-
   practice overflow into a real, visible scrollbar around the stepper. */
.top-navigation-wrap {
  overflow-x: hidden;
  overflow-y: hidden;
}

/* ---------------------------------------------------------------------------
   Product viewer image/thumbnail gap.

   style.css makes `.preview` a column flexbox (`.preview{flex-direction:
   column}`) sitting inside `.wrapper{display:flex}` alongside `.details` —
   flex's default align-items:stretch then stretches `.preview` to match
   `.details`'s height (title + description + buy box, often taller than the
   image). `.preview-pic{flex-grow:1}` fills that extra height by growing the
   image box itself rather than the video/photo inside it, leaving genuine
   dead space between the image and the thumbnail strip below it — reproduced
   live at 1440px: a ~127px gap (measured: .preview-pic computed to 536px tall
   while its video content only rendered 410px). Un-growing it lets any
   leftover column height fall below the thumbnails instead, where it's not
   visually read as a broken layout.
--------------------------------------------------------------------------- */
.preview-pic {
  flex-grow: 0;
}

/* ---------------------------------------------------------------------------
   Product spec-section header rule alignment.

   ".Product Details:" and "Can be set with one of the following center
   stone(s):" sit in two independent col-sm-6 columns, each with its own
   .spec-title carrying its own border-bottom directly under its own text
   (style.css: padding-top:35px, padding-bottom:15px, border-bottom:1px).
   The second heading is long enough to wrap to a second line anywhere
   between roughly 1024px and the sm/md breakpoint, while the first never
   wraps — so their rules land at different heights and no longer read as
   one shared divider. Reproduced live at 1024px: 47px vs 79px tall, rules
   32px apart. Both headings are fixed copy (not per-product data), so a
   height reserved for the longer one is safe everywhere, not just this
   breakpoint. min-height is in px, not em, because .spec-title is
   border-box here (verified live: min-height sets the total rendered
   height 1:1, not just the content box) — an em value keyed to
   line-height alone came up short once padding was accounted for.
--------------------------------------------------------------------------- */
.item-specifications-wrap .spec-title {
  min-height: 79px;
}

/* ---------------------------------------------------------------------------
   Listing category chip row (ProductGrid's .ring-settings/.setting-option).

   style.css floats each chip at a fixed 16% width regardless of its label's
   length ("9 STONE RINGS" vs "PLAIN GOLD BAND"), so around 1024px — wide
   enough for one row of six, not wide enough for every 2-3-word label to
   stay on one line — some chips wrap to two lines and others don't, and
   since floats don't equalise sibling height, the row's bottom edge comes
   out ragged (measured live: alternating 27px/54px tall in the same row,
   same top). A fixed min-height would fix that width but wrongly pad the
   1440px case, where every label already fits on one line at 27px — so
   this switches the row to flex instead: align-items:stretch (flex's
   default) matches every chip in a row to whichever one is naturally
   tallest, self-adjusting per breakpoint rather than a guessed pixel value.
   Verified live: 1024px goes from a 27/54px mix to a flat 54px row; 1440px
   stays untouched at 27px. float:none on the chip itself is required —
   flex items ignore width but not float, and a still-floated child inside
   a flex container can end up misplaced.
--------------------------------------------------------------------------- */
.setting-option {
  display: flex;
  flex-wrap: wrap;
}

.ring-settings {
  float: none;
}

/* ---------------------------------------------------------------------------
   Product viewer thumbnail strip.

   The backup's style.css sizes these as `li{width:18%;margin-right:2.5%}`,
   which at a stacked full-width column makes each item ~150px against a 49px
   swatch: seven of them then overflow onto a second row, each wrapped in a tab
   border enclosing ~100px of empty space.

   Live renders them content-sized instead — roughly 52px each with even gaps,
   centred as a single row under the image, every thumb carrying the same light
   border. Measured off the live page at 768px; the backup stylesheet is stale
   on this point.
--------------------------------------------------------------------------- */
ul.preview-thumbnail.nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;
  border: none;
}

ul.preview-thumbnail.nav-tabs > li {
  width: auto;
  margin: 0;
  float: none;
}

ul.preview-thumbnail.nav-tabs > li > a,
ul.preview-thumbnail.nav-tabs > li.active > a,
ul.preview-thumbnail.nav-tabs > li.active > a:focus,
ul.preview-thumbnail.nav-tabs > li.active > a:hover {
  display: block;
  padding: 2px;
  margin: 0;
  border: 1px solid #ddd;
  border-radius: 0;
  line-height: 0;
  background: #fff;
}

ul.preview-thumbnail.nav-tabs > li > a img {
  display: block;
  width: 49px;
  height: auto;
}

/* Shipping list. Live floats each item 50% wide so the twelve entries
   alternate down two columns under the "Item Comes With:" / "Order With
   Confidence:" pair of headings. The rule is not in the ported style.css —
   without it the list runs as one column. */
.shipping-details ul.list-green > li {
  float: left;
  width: 50%;
}