/* -------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------
   This file references --accent, --border, --text and --text-muted
   throughout, but nothing ever defined them. An undefined custom property
   makes the whole declaration invalid at computed-value time, so
   `background: var(--accent)` on the sheet's Apply button resolved to
   transparent — a white label on a white footer, which read as the button
   being missing entirely. Several `1px solid var(--border)` dividers were
   dropping out for the same reason. Values follow the brand palette in
   style.css.
   ------------------------------------------------------------------------- */
:root {
  --accent: #1D4A84;
  --border: #57B1FF40;
  --text: #1D4A84;
  --text-muted: #6B7A90;
}

/*==product listing===*/

section.listing_section {
  margin-top: 3.5rem;
}

.listing_banner {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-radius: 40px;
}

.listing_banner_bg {
  position: absolute;
  inset: 0;
  background-image: var(--desktop-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1F1F1F;
}

.listing_banner_content {
  position: relative;
  z-index: 2;
  text-align: center;
  min-height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.listing_banner_content h1 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

@media (max-width: 767px) {
  /* Two layers instead of one: a mobile upload that is missing (or 404s,
     as listing_banner_mobile.webp currently does) paints nothing, so the
     desktop artwork below shows through rather than leaving the banner as
     a flat #1F1F1F block. */
  .listing_banner_bg {
    background-image: var(--mobile-bg), var(--desktop-bg);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
  }

  /* The banner sat 120px below the header — main's 64px of top padding plus
     this 3.5rem margin. style_new.css trims main to 26px for pages that
     open with this banner; this brings the margin down to match, for 48px
     in total (a 60% reduction). Defined here because this file loads last
     and `section.listing_section` outranks a bare class selector. */
  section.listing_section {
    margin-top: 22px;
  }
}

/*--sidebar--*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 3rem;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff;
  padding: 2rem 3rem 1rem 3rem;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  cursor: pointer;
  background: #1D4A84;
  border-radius: 30px;
  padding: 12px 25px;
  font-size: 18px;
  font-weight: 600;
  border: 1px solid #1D4A84;
  cursor: pointer;
}

.filter-btn img {
  width: 20px;
}

button.clear_btn {
  background: #ffffff;
  border-radius: 30px;
  padding: 10px 25px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #1D4A84;
  color: #1d4a84;
}

.product-count {
  padding-left: 3rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #0F1010;
}

.sort-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #1D4A84;
}

.sort-dropdown {
  position: relative;
}

.sort-select {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid #1D4A84;
  border-radius: 30px;
  cursor: pointer;
  font-family: inherit;
}

.sort-dropdown span {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #1D4A84;

}

.sort-select svg {
  width: 14px;
  height: 14px;
  transition: transform .15s ease;
}

.sort-dropdown.open .sort-select svg {
  transform: rotate(180deg);
}

.sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-hover);
  list-style: none;
  margin: 0;
  padding: 6px;
  min-width: 190px;
  z-index: 50;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}

.sort-dropdown.open .sort-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sort-menu li {
  padding: 9px 12px;
  font-size: 16px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
}

.sort-menu li:hover,
.sort-menu li:focus-visible {
  background: #f1f4fd;
}

.sort-menu li.active {
  color: var(--accent);
  font-weight: 700;
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 45px;
  align-items: start;
  transition: grid-template-columns .15s ease;
}

.layout.filters-open {
  grid-template-columns: 300px 1fr;
}

/* ---------- Sidebar (desktop) ---------- */
/* Height follows the filters themselves — the old fixed 100vh left a tall
   empty tail below "Clear all" whenever the groups were collapsed. The
   max-height keeps it scrollable on short screens. */
.sidebar {
  background: transparent;
  border: 2px solid #57B1FF27;
  height: auto;
  max-height: calc(100vh - 140px);
  display: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cdcdcd #f1f1f1;
}

.layout.filters-open .desktop-sidebar {
  display: block;
  position: sticky;
  top: 100px;
  padding: 20px;
  margin-top: 2rem;
  border-radius: 20px;
}

.filter-group {
  border-bottom: 1px solid var(--border);
  padding: 18px 4px;
}

.filter-group:first-child {
  padding-top: 4px;
}

.filter-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 29px;
  letter-spacing: 0;
  vertical-align: middle;
  color: #0F1010;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  user-select: none;
}

.filter-group-title .toggle {
  font-size: 25px;
  line-height: 1;
  color: #0F1010;
  font-weight: 400;
}

.filter-options {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.filter-options.collapsed {
  display: none;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 17px;
  color: #0F1010;
  font-weight: 500;
  padding-bottom: 5px;
  cursor: pointer;
}

.checkbox-row.disabled {
  color: #9aa0aa;
  cursor: default;
}

.checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--bg-color);
  cursor: pointer;
  flex-shrink: 0;
}

.checkbox-row .count {
  margin-left: auto;
  font-size: 17px;
  color: #0F1010;
  font-weight: 500;
}

.price-range {
  margin-top: 14px;
}

.price-slider {
  width: 100%;
  accent-color: var(--accent);
  margin-bottom: 12px;
}

.price-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price-input input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 13px;
  color: var(--text);
}

.price-input span {
  color: var(--text-muted);
}

/* ---------- Product grid ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 2rem;
}

.layout.filters-open .product-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* Below ~1200px four across gets cramped — the card art is a fixed 225px
   box, so keep the previous 3 / 2 split there rather than squeezing it. */
@media (max-width: 1199px) {

  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .layout.filters-open .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* ---------- Mobile bottom sheet ---------- */
.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 22, 0.45);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.sheet-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.product_filter_sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 18px 18px 0 0;
  z-index: 90;
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.18);
}

.product_filter_sheet.open {
  transform: translateY(0);
}

.product_filter_sheet_handle {
  width: 40px;
  height: 4px;
  background: #dadde2;
  border-radius: 999px;
  margin: 10px auto 4px;
}

.product_filter_sheet_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 14px;
  border-bottom: 1px solid var(--border);
}

.product_filter_sheet_header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.product_filter_sheet_close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #f1f2f4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text);
}

.product_filter_sheet_close svg {
  width: 14px;
  height: 14px;
}

.product_filter_sheet_body {
  padding: 6px 18px 18px;
  overflow-y: auto;
  flex: 1;
}

.product_filter_sheet_body .filter-group:first-child {
  padding-top: 6px;
}

.product_filter_sheet_footer {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

.product_filter_sheet_footer button {
  flex: 1;
  border-radius: 10px;
  padding: 13px 0;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--border);
  cursor: pointer;
  background: #fff;
  color: var(--text);
}

.product_filter_sheet_footer .apply-btn {
  background: var(--accent);
  color: #fff;
  border: none;
}

.price-range {
  max-width: 420px;
  font-family: sans-serif;
}

.price-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.price-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.minus-icon {
  font-size: 20px;
  color: #999;
}

.price-track-wrap {
  position: relative;
  height: 24px;
  margin-bottom: 24px;
}

.price-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: #E5E5E5;
  border-radius: 2px;
  transform: translateY(-50%);
}

/* set left/width to match wherever your two range values land */
.price-track-active {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 20%;
  height: 4px;
  background: #1E3A8A;
  border-radius: 2px;
  transform: translateY(-50%);
}

/* the actual <input type="range"> tags, stacked exactly on top of each other */
.rng {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  /* track area ignores clicks */
}

.rng::-webkit-slider-runnable-track {
  background: transparent;
}

.rng::-moz-range-track {
  background: transparent;
}

.rng::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  /* only the thumb is draggable */
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1E3A8A;
  cursor: pointer;
  margin-top: 3px;
}

.rng::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1E3A8A;
  cursor: pointer;
}

.price-inputs {
  display: flex;
  gap: 12px;
}

.price-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #00000040;
}

/* The two amounts are typeable as well as slider-driven, so they render as
   inputs. Styled to sit flush inside the pill rather than looking like a
   second nested field. */
.price-input .price-amount-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 16px;
  color: #555;
}

.price-input:focus-within {
  border-color: var(--accent, #1d4a84);
  box-shadow: 0 0 0 3px rgba(29, 74, 132, .12);
}

/* Chrome/Safari draw spinners on numeric-looking fields in some locales */
.price-input .price-amount-input::-webkit-outer-spin-button,
.price-input .price-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

span.currency img {
  width: 18px;
}

.price-input .currency {
  font-weight: 600;
  color: #888;
}

.price-input .amount {
  font-size: 16px;
  color: #555;
}


/* OS to reduce motion */
@media (prefers-reduced-motion: reduce) {

  .layout,
  .sort-select svg,
  .sort-menu,
  .product_filter_sheet,
  .sheet-overlay {
    transition: none !important;
  }
}


.sidebar::-webkit-scrollbar {
  width: 2px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: #b2b2b2;
  border-radius: 20px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background: #bababa;
}

.best_card {
  box-shadow: -3px -1px 33px #b3b3b326, 0px 59px 59px #B3B3B317, 0px 133px 80px #B3B3B30D, 0px 237px 95px #B3B3B303;
}

.best_feat_icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.best_feats {
  padding: 12px 0px;
}

.best_feat {
  gap: 3px;
}


/*=========PRODUCT DETAIL================*/
section.product_detail_section {
  padding-top: 6rem;
}

.product_detail_layout {
  display: grid;
  grid-template-columns: 50% 1fr;
  gap: 40px;
}

.product_detail_gallery {
  position: sticky;
  top: 10px;
  align-self: flex-start;
}


/* ---- Gallery ---- */
.product_detail_main_image_wrap {
  position: relative;
  background: #cfe4fb;
  border-radius: 12px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
  height: 510px;
  width: 100%;
  border: 0.5px solid #000000;
}

.product_detail_main_image_wrap img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  pointer-events: none;
}

.product_detail_badge {
  background: #FAD2D2;
  color: #000000;
  position: absolute;
  top: 35px;
  left: 0px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.product_detail_thumb_row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.product_detail_thumb_nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #000000;
  background: #1D4A84;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product_detail_thumb_nav img {
  width: 7px;
}

.product_detail_thumb_nav:disabled {
  background: #a8b3c9;
  cursor: not-allowed;
}


.product_detail_thumb_track {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  /* required so flex:1 can actually shrink inside the grid column */
}

.product_detail_thumb_list {
  display: flex;
  gap: 10px;
  transition: transform .3s ease;
  will-change: transform;
}

.product_detail_thumb {
  background: #cfe4fb;
  border-radius: 8px;
  width: 150px;
  height: 128px;
  border: 0.5px solid #000000;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  padding: 8px;
}

.product_detail_thumb.product_detail_thumb--active {
  border-color: #1e3a8a;
}

.product_detail_thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}



/* ---- Lightbox / slider popup ---- */
.product_detail_lightbox_overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 25, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}

.product_detail_lightbox_overlay--open {
  opacity: 1;
  visibility: visible;
}

.product_detail_lightbox_stage {
  position: relative;
  width: min(90vw, 640px);
  height: min(80vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d9d9d9;
}

.product_detail_lightbox_stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.product_detail_lightbox_close,
.product_detail_lightbox_arrow {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
}

.product_detail_lightbox_close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  font-size: 20px;
}

.product_detail_lightbox_arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.product_detail_lightbox_arrow--prev {
  left: -60px;
}

.product_detail_lightbox_arrow--next {
  right: -60px;
}



.product_detail_lightbox_counter {
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%);
  color: #cfd6e4;
  font-size: 13px;
}

/* ---- Info panel ---- */
.product_detail_info h1 {
  margin: 0;
  color: var(--text-color);
  font-size: 35px;
  font-weight: 600;
}

.product_detail_subtitle {
  color: var(--text-color);
  font-weight: 400;
  margin: 4px 0 20px;
}

.product_detail_section_title {
  color: #1e3a8a;
  font-size: 23px;
  font-weight: 500;
  margin: 0 0 10px;
}

.product_detail_description p {
  margin: 0 0 22px;
}

/* ---- Accordion ---- */
.product_detail_accordion {
  border: 1px solid #dbe3ee;
}

.product_detail_accordion_header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #eaf1fd;
  border: 1px solid #000000;
  padding: 12px 16px;
  font-size: 21px;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  border-radius: 10px 10px 5px 5px;
}

.product_detail_accordion_icon {
  transition: transform .25s ease;
}

.product_detail_accordion_header[aria-expanded="true"] .product_detail_accordion_icon {
  transform: rotate(180deg);
}

.product_detail_accordion_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}

.product_detail_accordion_panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.product_detail_accordion_panel_inner {
  overflow: hidden;
  min-height: 0;
}

.product_detail_info_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 18px;
  font-weight: 400;
  border: 1px solid #000000;
  border-top: none;
  color: #000000;

}

.product_detail_info_table tr {
  border-top: 1px solid #00000066;
}

.product_detail_info_table tr:first-child {
  border-top: none;
}

.product_detail_info_table th,
.product_detail_info_table td {
  text-align: left;
  padding: 10px 16px;
  font-weight: 400;
}

.product_detail_info_table td {
  text-align: right;
  font-weight: 500;
}

/* ---- Purchase option radio cards ---- */
.product_detail_option_group {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 18px;
}

.product_detail_option {
  position: relative;
  border: 1px solid #000000;
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: #fff;
}

.product_detail_option:has(.product_detail_option_radio:checked) {
  border: 1px solid #000000;
}

.product_detail_option_radio {
  position: absolute !important;
  opacity: 0;
  width: 0;
  height: 0;
}

.product_detail_purchase {
  padding-top: 25px;
}

.product_detail_option_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product_price_rows {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product_detail_option_label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 18px;
  color: #000000;
}

.product_detail_radio_dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #94a3b8;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product_detail_radio_dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1e3a8a;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .15s ease, transform .15s ease;
}

.product_detail_option_radio:checked+.product_detail_option_top .product_detail_radio_dot,
.product_detail_option_radio:checked~.product_detail_option_top .product_detail_radio_dot {
  border-color: #1e3a8a;
}

.product_detail_option_radio:checked~.product_detail_option_top .product_detail_radio_dot::after {
  opacity: 1;
  transform: scale(1);
}

.product_detail_price_now {
  font-weight: 600;
  font-size: 19px;
  color: var(--text-color);
}

.product_detail_price_row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.product_detail_price_was {
  color: #33343473;
  text-decoration: line-through;
  font-weight: 600;
  font-size: 19px;
}

.product_detail_save_badge {
  display: inline-block;
  background: #dbeafe;
  color: #1e3a8a;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 8px;
  border-radius: 0px;
  margin: 6px 0 10px;
}

.product_detail_perks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 0.5px solid #000000;
  padding-bottom: 15px;
}

.product_detail_perk {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 17px;
  color: #060606;
}

.product_detail_perk svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---- Quantity + Add to cart ---- */
.product_detail_cart_row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0px;
}

.product_detail_qty {
  display: flex;
  align-items: center;
  border: 1px solid #000000;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.product_detail_qty_btn {
  padding: 12px 10px;
  border: none;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  color: #1a1a1a;
}

.product_detail_qty_btn:hover {
  background: #f3f4f6;
}

.product_detail_qty_btn:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
}

.product_detail_qty_value {
  width: 32px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
}

.product_detail_add_to_cart {
  flex: 1;
  height: 49px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);

  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.product_detail_add_to_cart:hover {
  filter: brightness(1.05);
}

.product_detail_add_to_cart:active {
  transform: translateY(1px);
}

/* ---- Secondary actions ---- */
.product_detail_secondary_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 20px 0 30px 0px;
}

.product_detail_secondary_btn {
  border: 1px solid #000000;
  border-radius: 999px;
  background: #fff;
  color: #1e3a8a;
  font-weight: 600;
  font-size: 15px;
  padding: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

button.product_detail_secondary_btn img {
  width: 14px;
}

.product_detail_secondary_btn:hover {
  background: #f6f9ff;
}

/* ---- Info banner ---- */
.product_detail_info_banner {
  background: #DFF0FE;
  border: 0.5px solid #000000;
  border-radius: 12px;
  padding: 35px 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 12px;
  margin-bottom: 20px;
}

.product_detail_info_item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 17px;
  color: #000000;
  line-height: 27px;

}

.product_detail_info_banner img {
  width: 20px;
}

.product_detail_info_item svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.product_detail_expand_list {
  border-top: 1px dashed #020202;
}

.product_detail_expand_item {
  border-bottom: 1px dashed #020202;
}

.product_detail_expand_header {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-color);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.product_detail_expand_icon {
  position: relative;
  width: 23px;
  height: 23px;
  flex-shrink: 0;
}

.product_detail_expand_icon::before,
.product_detail_expand_icon::after {
  content: "";
  position: absolute;
  background: #1e3a8a;
  border-radius: 2px;
  transition: transform .25s ease;
}

.product_detail_expand_icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.product_detail_expand_icon::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: 2px;
  transform: translateX(-50%);
}

.product_detail_expand_header[aria-expanded="true"] .product_detail_expand_icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.product_detail_expand_panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}

.product_detail_expand_panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.product_detail_expand_panel_inner {
  overflow: hidden;
  min-height: 0;
}

section.faq_section_product {
  width: 900px;
  margin: 0 auto;
}

section.faq_section_product h2 {
  text-align: center;
}

section.like_section {
  padding-top: 3rem;
}

section.like_section h2 span {
  display: block;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  padding-top: 5px;
}

a.view_all {
  border: 1px solid #1D4A84;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 20px;
}

section.like_section .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a.view_all:hover {
  background-color: #d2eaff;
}

.you_may_like_slider {
  padding-left: 3rem;
  padding-bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {

  .product_detail_expand_panel,
  .product_detail_expand_icon::after {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .product_detail_accordion_panel,
  .product_detail_accordion_icon,
  .product_detail_lightbox_overlay,
  .product_detail_thumb_list {
    transition: none !important;
  }
}

/*--why custom peptides --*/
.custom_table {
  display: grid;
  grid-template-columns: 1fr 30% 20%;
  width: 100%;
  position: relative;
}

/* Header row */
.custom_row.custom_header_row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: end;
}



.custom_cell.custom_header_brand {
  background: #D2EAFF;
  border-radius: 14px 14px 0 0;
  padding: 14px 10px 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.custom_cell.custom_header_brand svg {
  flex-shrink: 0;
}

.custom_cell.custom_header_others {
  text-align: center;
  font-weight: 500;
  color: #000000;
  font-size: 20px;
  padding: 14px 10px;
}

/* Divider under header */
.custom_row.custom_divider_row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.custom_row.custom_divider_row .custom_cell {
  border: 1px solid #000000;

}

.custom_row.custom_data_row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}

.custom_row.custom_data_row .custom_cell {
  padding: 20px 10px;
  border-bottom: 1px dashed #020202;
  display: flex;
  align-items: center;
}

.custom_row.custom_data_row:last-of-type .custom_cell.custom_cell_brand {
  border-radius: 0 0 14px 14px;
}

.custom_cell.custom_cell_label {
  color: var(--text-color);
  font-weight: 500;
  font-size: 20px;
}

.custom_cell.custom_cell_brand {
  background: #D2EAFF;
  justify-content: center;
  border-bottom: 1px dashed #000000;
}

.custom_cell.custom_header_brand img {
  width: 185px;
}

.custom_cell.custom_cell_others {
  justify-content: center;
  border-bottom: 1px dashed #000000;
}

.custom_check {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #1D4A84;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.custom_cross {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  border: 1px solid #1D4A84;
  color: #c9c9c9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.custom_cross img {
  width: 21px;
}

.custom_check img {
  width: 13px;
}

section.why_custom_section h2 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

section.why_custom_section h2 {
  text-align: center;
}

section.why_custom_section {
  padding: 4rem 0;
}



/*--review---*/

.customer_review_summary {
  display: grid;
  grid-template-columns: 1fr 45%;
  gap: 55px;
  align-items: stretch;
  margin-bottom: 48px;
}

/* Bars */
.customer_review_bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.customer_review_bar_row {
  display: grid;
  grid-template-columns: 34px 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

.customer_review_bar_label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 20px;
}

.customer_review_bar_label .customer_review_star {
  color: #1a3a6b;
  font-size: 20px;
}

.customer_review_bar_track {
  background: #DFF0FE;
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
  width: 100%;
}

.customer_review_bar_fill {
  background: #1D4A84;
  height: 100%;
  border-radius: 6px;
}

.customer_review_bar_count {
  font-size: 15px;
  color: #000000;
  text-align: right;
}

.customer_review_card {
  background: #DFF0FE;
  border-radius: 16px;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 0.5px solid #000000;
}

.customer_review_score {
  font-size: 40px;
  font-weight: 700;
  color: var(--text-color);
  line-height: 1.1;
}

.customer_review_based_on {
  font-size: 16px;
  color: var(--text-color);
  font-weight: 500;
  margin-top: 2px;
  margin-bottom: 14px;
}

.customer_review_stars {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.customer_review_bars img {
  width: 18px !important;
}

.customer_review_stars .customer_review_star {
  color: #1a3a6b;
  font-size: 22px;
}

.customer_review_write_btn {
  background: linear-gradient(90deg, #1D4A84 0%, #3E8CCA 100%);
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.customer_review_write_btn:hover {
  background: #1a3d70;
}

/* ---------- Recent Feedbacks ---------- */


.customer_review_feedback_list {
  display: flex;
  flex-direction: column;
}

.customer_review_feedback_item {
  padding: 18px 0;
  border-bottom: 1px solid #000000;
  position: relative;
}

.customer_review_feedback_stars {
  margin-bottom: 6px;
}

.customer_review_feedback_stars img {
  width: 20px;
}

span.customer_review_star img {
  width: 40px;
}

.customer_review_feedback_date {
  position: absolute;
  top: 18px;
  right: 0;
  font-size: 14px;
  color: var(--text-color);
}

.customer_review_feedback_name {
  font-size: 16px;
  color: #000000;
  margin-bottom: 4px;
}

.customer_review_feedback_headline {
  font-size: 19px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 10px;
}

.customer_review_feedback_text {
  font-size: 16px;
  color: #000000;
}

section.customer_review_wrapper h3 {
  padding-bottom: 15px;
}

.customer_review_view_more_wrap {
  text-align: center;
  margin-top: 28px;
}

.customer_review_view_more_btn {
  background: #fff;
  color: #1a3a6b;
  border: 1px solid #000000;
  padding: 10px 28px;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.customer_review_view_more_btn:hover {
  background: #f0f5fc;
}

section.customer_review_wrapper h2 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}

section.customer_review_wrapper h2 {
  text-align: center;
}

section.customer_review_wrapper {
  padding-bottom: 3rem;
}

section.customer_review_wrapper h3 {
  text-align: left;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .custom_table {
    grid-template-columns: 1fr 90px 70px;
  }

  .custom_cell.custom_header_brand {
    font-size: 11px;
    padding: 10px 4px 12px;
  }

  .custom_cell.custom_header_others {
    font-size: 13px;
  }

  .custom_cell_label {
    font-size: 13px;
  }

  .custom_row.custom_data_row .custom_cell {
    padding: 12px 6px;
  }

  .custom_check,
  .custom_cross {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .customer_review_bar_row {
    grid-template-columns: 30px 1fr 34px;
    font-size: 12px;
  }

  .customer_review_feedback_date {
    position: static;
    display: block;
    margin-bottom: 4px;
  }

  .customer_review_score {
    font-size: 28px;
  }

  .customer_review_write_btn {
    padding: 10px 22px;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .custom_table {
    grid-template-columns: 1fr 200px 100px;
  }

  .custom_cell.custom_header_brand img {
    width: 128px;
  }

  .custom_cell.custom_header_brand svg {
    width: 18px;
    height: 18px;
  }

  .custom_cell.custom_header_brand {
    font-size: 9px;
  }

  .custom_cell_label {
    font-size: 11.5px;
  }

  .customer_review_summary {
    grid-template-columns: 1fr;
  }

  /*css*/
  .product_detail_layout {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  section.faq_section_product {
    width: 100%;
    margin: 0 auto;
  }

  .you_may_like_slider {
    padding-left: 1rem;
    padding-bottom: 20px;
  }

  .product_detail_gallery {
    position: static;
    top: 10px;
    align-self: unset;
  }
}




@media (max-width: 980px) {

  .layout,
  .layout.filters-open {
    grid-template-columns: 1fr;
  }

  .desktop-sidebar {
    display: none !important;
  }

  .product-grid,
  .layout.filters-open .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .topbar {
    padding: 14px 16px;
  }

  .layout {
    padding: 0 16px 32px;
  }

  .product-grid {
    gap: 14px;
  }
}


/* =========================================================================
   PRODUCT / BUNDLE DETAIL — MOBILE
   =========================================================================
   These grids stayed two-across on a phone, and the comparison table's
   columns resolved wider than the viewport (1fr + 200px + 100px = 430px on
   a 371px container), pushing the whole page sideways.
   ========================================================================= */

@media (max-width: 768px) {

  .product_detail_perks,
  .product_detail_secondary_actions,
  .product_detail_info_banner {
    grid-template-columns: 1fr;
  }

  .product_detail_info_banner {
    padding: 22px 16px;
    gap: 14px;
  }

  .product_detail_secondary_actions {
    padding: 16px 0 24px;
  }

  /* Let the columns share the available width and the cells shrink, with
     overflow-x as the safety net so a stubborn cell scrolls the table
     rather than the page. */
  .custom_table {
    grid-template-columns: 1.15fr 1fr 1fr;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
  }

  .custom_cell {
    width: auto;
    min-width: 0;
    padding: 12px 8px;
    overflow-wrap: break-word;
  }
}


/* =========================================================================
   PRODUCT DETAIL — FRAME, STICKY GALLERY, ICONS, CARDS
   ========================================================================= */

/* ---- 1. Product image ----
   The artwork files are small (Retatrutide's is 120x179), and because the
   wrapper only sets max-width/max-height the image was never scaled up to
   fill its 510px frame. Scaling by 1.3 enlarges it 30% as asked, whatever
   the source dimensions. */
.product_detail_main_image_wrap img {
  transform: scale(1.3);
  transform-origin: center;
}

/* ---- 2. General Info accordion frame ----
   The outer box had a border but no radius while the inner header carried
   its own square black border, so the two outlines disagreed at the
   corners. One rounded frame, with the header clipped to match. */
.product_detail_accordion {
  border-radius: 12px;
  overflow: hidden;
}

.product_detail_accordion_header {
  border: none;
  border-bottom: 1px solid #dbe3ee;
}

.product_detail_accordion:last-of-type .product_detail_accordion_header[aria-expanded="false"] {
  border-bottom: none;
}

/* ---- 3. Sticky gallery ----
   .product_detail_gallery already asks for position:sticky, but
   `body { overflow-x: hidden }` in style.css makes the body its own scroll
   container, which silently disables sticky for everything inside it (the
   same thing that was breaking the mobile header). Scoped with :has() so
   only the detail pages drop that guard — html keeps overflow-x:hidden, so
   sideways overflow is still clipped at the viewport.

   No JS needed to stop the sticking: the gallery's containing block is
   .product_detail_layout, which ends before .why_custom_section, so the
   image releases exactly there. */
body:has(.product_detail_layout) {
  overflow-x: visible;
}

@media (min-width: 993px) {

  .product_detail_layout {
    align-items: start;
  }

  /* top:0 — the desktop header is not fixed, so there is nothing to clear
     and the 90px offset only read as dead space above the image. */
  .product_detail_gallery {
    position: sticky;
    top: 0;
    align-self: start;
  }
}

/* ---- 4. Trust icons ----
   The four source PNGs are different sizes and aspect ratios (36x36, 36x36,
   24x29, 34x34), so at a fixed width they rendered at four different
   heights. A square box plus object-fit gives them all the same footprint
   and keeps each one sharp. */
.product_detail_info_banner img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ---- 5. Why Custom Peptide comparison table ----
   The highlighted column had its blue fill but no outline, so it read as a
   flat block instead of the framed panel in the design. */
.custom_cell.custom_header_brand {
  border: 1px solid #57B1FF;
  border-bottom: none;
}

.custom_cell.custom_cell_brand {
  border-left: 1px solid #57B1FF;
  border-right: 1px solid #57B1FF;
}

.custom_row.custom_data_row:last-of-type .custom_cell.custom_cell_brand {
  border-bottom: 1px solid #57B1FF;
}

/* ---- 6. "You may also like" cards ----
   These use the same partial as the listing grid, but the 72px badge
   treatment was only ever applied under .best_marquee (home) and
   .product_listing (listing). Without it the detail page fell back to the
   default 40px pale-blue circle, which double-frames a badge that already
   has its own circle baked into the PNG. */
.you_may_like_slider .best_feat_icon {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

.you_may_like_slider .best_feat_icon img {
  width: 72px;
  height: 72px;
}

@media (max-width: 992px) {

  .product_detail_gallery {
    position: static;
  }
}

@media (max-width: 768px) {

  .product_detail_main_image_wrap img {
    transform: scale(1.25);
  }

  .you_may_like_slider .best_feat_icon img {
    width: 56px;
    height: 56px;
  }
}


/* =========================================================================
   WRITE-A-REVIEW MODAL
   ========================================================================= */

.review_modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 22, .5);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.review_modal_overlay[hidden] {
  display: none;
}

.review_modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 26px 26px;
  box-shadow: 0 30px 60px rgba(16, 24, 40, .25);
  max-height: 90vh;
  overflow-y: auto;
}

.review_modal h3 {
  margin: 0 0 6px;
  font-size: 24px;
  color: var(--text-color);
}

.review_modal_sub {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: left;
}

.review_modal_close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f1f2f4;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-color);
  transition: background .25s ease;
}

.review_modal_close:hover {
  background: #e2e6eb;
}

.review_field {
  display: block;
  margin-bottom: 14px;
}

.review_field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

.review_field em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-muted);
}

.review_field input,
.review_field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  box-sizing: border-box;
}

.review_field input:focus,
.review_field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(29, 74, 132, .12);
}

.review_field textarea {
  resize: vertical;
  min-height: 92px;
}

/* star picker */
.review_stars_input {
  display: inline-flex;
  gap: 4px;
}

.review_star_btn {
  border: none;
  background: none;
  padding: 0 2px;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #d9dee6;
  transition: color .15s ease, transform .15s ease;
}

.review_star_btn:hover {
  transform: scale(1.12);
}

.review_star_btn.is-on {
  color: #FFB400;
}

.review_form_error {
  margin: 0 0 12px;
  color: #d33;
  font-size: 14px;
  text-align: left;
}

.review_submit_btn {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}

.review_submit_btn:hover:not(:disabled) {
  opacity: .9;
  transform: translateY(-2px);
}

.review_submit_btn:disabled {
  opacity: .6;
  cursor: default;
}

/* ---------- Empty review state ----------
   Shown in place of the bar graph, score card and feedback list when the
   product has no reviews yet. `[hidden]` needs the explicit display:none
   because both state wrappers are flex/block containers. */
.customer_review_empty_state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 34px 16px 10px;
  text-align: center;
}

.customer_review_empty_state[hidden],
.customer_review_populated[hidden] {
  display: none;
}

.customer_review_empty_text {
  margin: 0;
  font-size: 17px;
  color: var(--text-muted);
}


.customer_review_view_more_btn[hidden] {
  display: none;
}

@media (max-width: 768px) {

  .customer_review_empty_state {
    padding: 24px 12px 6px;
    gap: 14px;
  }

  .customer_review_empty_text {
    font-size: 15px;
  }

  .review_modal {
    padding: 24px 18px 20px;
    border-radius: 18px;
  }

  .review_modal h3 {
    font-size: 21px;
  }

  .review_star_btn {
    font-size: 32px;
  }
}

/* =========================================================================
   PRODUCT DETAIL — MOBILE GALLERY + COMPARISON TABLE
   ========================================================================= */

/* The on-frame carousel controls are mobile-only; desktop keeps the
   thumbnail strip below the image. */
@media (min-width: 769px) {

  .product_detail_slide_nav,
  .product_detail_dots {
    display: none;
  }
}

@media (max-width: 768px) {

  /* ---- 1. Header bar to image ----
     main's 64px top padding stacked on the section's own 6rem left a 160px
     void under the header bar. 48px total, i.e. 70% off. */
  main:has(> .product_detail_section:first-child) {
    padding-top: 0;
  }

  section.product_detail_section {
    padding-top: 48px;
  }

  /* ---- 2. Carousel on the frame instead of a thumbnail strip ----
     The strip cost 128px of vertical space to show thumbnails too small to
     read on a phone. Dots along the bottom of the frame and arrows on its
     edges do the same job inside the image itself. */
  .product_detail_thumb_row {
    display: none;
  }

  .product_detail_slide_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #57B1FF66;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1D4A84;
    cursor: pointer;
  }

  .product_detail_slide_prev {
    left: 10px;
  }

  .product_detail_slide_next {
    right: 10px;
  }

  .product_detail_dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
  }

  .product_detail_slide_nav[hidden],
  .product_detail_dots[hidden] {
    display: none;
  }

  .product_detail_dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #1D4A8459;
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
  }

  .product_detail_dot--active {
    width: 18px;
    border-radius: 4px;
    background: #1D4A84;
  }

  /* ---- 3. Why Custom Peptides ----
     The divider row is three empty bordered cells; at this width it reads as
     a stray blank band between the header and the first difference. The
     label sizing below is written as `.custom_cell.custom_cell_label`
     because the single-class mobile rules further up never beat the
     two-class base rule, so the text was still rendering at the desktop
     20px/500. */
  .custom_row.custom_divider_row {
    display: none;
  }

  .custom_cell.custom_cell_label {
    font-size: 12px;
    font-weight: 400;
  }
}