/* ==========================================================================
   AFMD BUNDLE BARS
   Offer selector for try-ridge.html. Rendered by js/try-ridge.js from
   window.AFMD_OFFERS, so bundles are edited in product-data.js, not here.
   ========================================================================== */

.afmd-bundles {
  --afmd-blue: #3b82f6;
  --afmd-blue-text: #60a5fa;
  --afmd-card: #1a1f2a;
  --afmd-card-selected: #162c52;
  --afmd-ring: rgba(59, 130, 246, 0.3);
  --afmd-muted: #94a3b8;

  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 18px 0 22px;
}

.afmd-bundles__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.1px;
}
.afmd-bundles__heading::before,
.afmd-bundles__heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--afmd-ring);
}

/* ---- the bar ---- */
.afmd-bar { position: relative; display: block; cursor: pointer; }
.afmd-bar input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.afmd-bar__box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5px 10.25px;
  border-radius: 9px;
  background: var(--afmd-card);
  box-shadow: inset 0 0 0 1px var(--afmd-ring);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.afmd-bar input:checked + .afmd-bar__box {
  background: var(--afmd-card-selected);
  box-shadow: inset 0 0 0 2px var(--afmd-blue);
}
.afmd-bar:hover input:not(:checked) + .afmd-bar__box {
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.55);
}
.afmd-bar input:focus-visible + .afmd-bar__box {
  outline: 2px solid var(--afmd-blue);
  outline-offset: 2px;
}

/* ---- badge ---- */
.afmd-bar__badge {
  position: absolute;
  top: 0;
  right: 8px;
  transform: translateY(-100%);
  padding: 6px 8px;
  border-radius: 5px 5px 0 0;
  background: var(--afmd-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.afmd-bar--badged { margin-top: 24px; }

/* ---- top row ---- */
.afmd-bar__main {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 7px 0;
}

.afmd-bar__radio {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--afmd-ring);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.afmd-bar input:checked + .afmd-bar__box .afmd-bar__radio {
  background: var(--afmd-blue);
  box-shadow: 0 0 0 2px var(--afmd-blue);
}

.afmd-bar__content {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.afmd-bar__title {
  display: block;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}
.afmd-bar__sub {
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 19.6px;
}

.afmd-bar__pricing { text-align: right; flex: 0 0 auto; }
.afmd-bar__price {
  display: block;
  color: var(--afmd-blue-text);
  font-size: 20px;
  line-height: 28px;
}
.afmd-bar__full {
  display: block;
  color: var(--afmd-muted);
  font-size: 14px;
  line-height: 19.6px;
  text-decoration: line-through;
}

/* ---- contents panel ---- */
.afmd-bar__items {
  display: flex;
  justify-content: space-evenly;
  margin: 12px 0 4px;
  border: 1px solid var(--afmd-ring);
  border-radius: 6.75px;
}

.afmd-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  padding: 12px;
  text-align: center;
}
.afmd-item__img {
  width: 50px;
  height: 50px;
  border-radius: 4.5px;
  object-fit: cover;
  display: block;
}
.afmd-item__name { color: #fff; font-size: 13px; line-height: 18.2px; }
.afmd-item__price { color: var(--afmd-blue-text); font-size: 13px; font-weight: 700; line-height: 18.2px; }
.afmd-item__full { color: var(--afmd-muted); font-size: 12px; line-height: 16.8px; text-decoration: line-through; }

.afmd-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--afmd-blue);
}
.afmd-divider svg { display: block; }

/* ---- stacked variant: 5+ items won't fit in a row ---- */
.afmd-bar__items--stack { flex-direction: column; justify-content: flex-start; }
.afmd-bar__items--stack .afmd-item {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-align: left;
  width: 100%;
  padding: 10px 12px;
}
.afmd-bar__items--stack .afmd-item__name { flex: 1 1 auto; }
.afmd-bar__items--stack .afmd-item__price,
.afmd-bar__items--stack .afmd-item__full { text-align: right; }
.afmd-bar__items--stack .afmd-item__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 0 0 auto;
}
.afmd-bar__items--stack .afmd-divider {
  width: 100%;
  padding: 0;
  border-top: 1px solid var(--afmd-ring);
}
.afmd-bar__items--stack .afmd-divider svg { margin: -10px 0; }

/* ---- mobile ---- */
@media (max-width: 600px) {
  .afmd-bar__main { gap: 12px; }
  .afmd-bar__title { font-size: 17px; line-height: 24px; }
  .afmd-bar__price { font-size: 18px; line-height: 24px; }
  .afmd-bar__sub,
  .afmd-bar__full { font-size: 13px; }
  .afmd-item { padding: 10px 6px; gap: 4px; }
  .afmd-item__img { width: 42px; height: 42px; }
  .afmd-item__name { font-size: 11px; line-height: 15px; }
  .afmd-item__price { font-size: 12px; }
  .afmd-item__full { font-size: 11px; }
  .afmd-bar__items--stack .afmd-item { padding: 9px 10px; }
  .afmd-bar__items--stack .afmd-item__name { font-size: 13px; }
}

/* ==========================================================================
   PRODUCT GALLERY — matched to the Shopify product media layout
   Overrides the original .product-gallery rules in try-ridge.css.
   ========================================================================== */

.product-gallery__main {
  min-height: 0;
  padding: 0;
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: hidden;
}

.product-gallery__image {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  filter: none;
}

.product-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 5px 15px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  grid-template-columns: none;
}
.product-thumbs::-webkit-scrollbar { height: 4px; }
.product-thumbs::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.4); border-radius: 2px; }

.product-thumb {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  min-height: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  scroll-snap-align: start;
  transition: border-color 0.18s ease;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.18s ease;
}

.product-thumb:hover img { opacity: 0.9; }

.product-thumb:hover,
.product-thumb.is-active {
  border-color: #fff;
  background: none;
}
.product-thumb.is-active img { opacity: 1; }

@media (max-width: 900px) {
  .product-thumbs { padding: 5px 0; justify-content: flex-start; }
}

/* ==========================================================================
   MATERIAL DETAIL CARD
   Square 1:1 source replacing the old landscape render, so the crop origin
   moves off 58% (which was framing the old wide shot) back to centre and
   slightly high, keeping the hands and product above the caption gradient.
   ========================================================================== */

.problem-visual-card img { object-position: center center; }

@media (max-width: 900px) {
  .problem-visual-card { min-height: 0; aspect-ratio: 1 / 1; }
  .problem-visual-card img { object-position: center center; }
}

/* ---- material detail card: video takes the same box as the image ---- */
.problem-visual-card__video,
.problem-visual-card video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #030914;
}
.problem-visual-card__video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the ::after caption gradient must stay above the video */
.problem-visual-card::after { z-index: 1; }
.problem-visual-card figcaption { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .problem-visual-card__video { display: none; }
  .problem-visual-card { background: #030914 center/cover no-repeat url("../assets/ridge-material-detail-poster.jpg"); }
}

/* ==========================================================================
   MOBILE OVERFLOW FIX
   The thumb strip is a nowrap flex row (8 x 50px + gaps = ~486px). A grid
   item sizes to its content's min-content width by default, so the gallery
   column was forcing the whole page wider than the viewport instead of
   letting the strip scroll inside itself. min-width:0 lets overflow-x work.
   ========================================================================== */

.product-layout > *,
.product-gallery,
.product-thumbs,
.product-buybox { min-width: 0; }

@media (max-width: 620px) {
  .product-thumbs { padding: 5px 0; margin-top: 8px; }
  .product-thumb { width: 46px; height: 46px; }
}

/* ==========================================================================
   COMPARISON TABLE — MOBILE LEGIBILITY
   Was 10.5px labels / 11px headers with 10px padding, which reads as a
   cramped block rather than a table. Brought up to a readable size.
   ========================================================================== */

@media (max-width: 620px) {
  .comparison-row {
    grid-template-columns: 1.55fr .62fr .78fr;
    min-height: 58px;
  }
  .comparison-row > * { padding: 13px 11px; }
  .comparison-row > span:first-child { font-size: 13px; line-height: 1.35; }
  .comparison-head strong { font-size: 12px; letter-spacing: .01em; }
  .comparison-table { border-radius: 12px; }
}

@media (max-width: 400px) {
  .comparison-row { grid-template-columns: 1.5fr .6fr .74fr; }
  .comparison-row > * { padding: 12px 9px; }
  .comparison-row > span:first-child { font-size: 12.5px; }
}