/* ============================================
   OLIABO PRODUCT HEADER — Gallery + Sticky Buy Box
   ============================================ */

.opd__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 960px) {
  .opd__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
  }
}

/* ─────────────────────────────────────────────
   LEFT: GALLERY
   ───────────────────────────────────────────── */

.opd__gallery {
  min-width: 0;
}

/* Mobile: horizontal snap-scroll of all images; hide ticker.
   Layout is flex (not grid) so each frame's width is driven by its
   own aspect-ratio against a shared row height. Result is a uniform
   film-strip tray: every item is the same vertical height, but each
   keeps its native proportions (portrait images & portrait videos
   narrow at 4/5, landscape videos wider at their native ratio). */
@media (max-width: 959px) {
  .opd__gallery {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--space-sm);
    margin-inline: calc(-1 * var(--space-lg));
    padding-inline: var(--space-lg);
  }

  .opd__gallery::-webkit-scrollbar { display: none; }

  /* Flatten rows — children become direct flex items of .opd__gallery */
  .opd__gallery-row { display: contents; }

  /* Uniform tray height — aspect-ratio (inherited from base, or
     overridden by --video-aspect for landscape videos) computes
     each frame's width against this fixed height. Tracks what a
     16:9 landscape video previously occupied at the 78% grid-cell
     width, so the visual rhythm is preserved. */
  .opd__img-frame {
    height: 40vw;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  .opd__ticker { display: none; }
}

/* Desktop: stacked 2-col rows with ticker between */
@media (min-width: 960px) {
  .opd__gallery {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }

  .opd__gallery-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

.opd__img-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--clr-bg-card-secondary);
}

.opd__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.opd__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8e2d6 0%, #d4ccbb 40%, #c9bfaa 100%);
}

/* ─── Video frames (apply at all breakpoints) ──────────────
   Portrait videos inherit the 4/5 aspect ratio from .opd__img-frame
   so they sit alongside images consistently. Landscape videos use
   the native aspect ratio exposed by JS as --video-aspect (falling
   back to 16/9 if the metadata hasn't loaded yet). Desktop layers
   a span-2 / align-self: stretch override on top so landscape
   videos match the adjacent image's row height. */
.opd__more-frame--video {
  background: #000;
}

.opd__more-frame--video.opd__more-frame--landscape {
  aspect-ratio: var(--video-aspect, 16 / 9);
}

.opd__more-frame--video .opd__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Centered play button overlay — visible until the user clicks. */
.opd__more-frame--video .opd__video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: rgba(253, 252, 250, 0.92);
  color: var(--clr-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.opd__more-frame--video .opd__video-play:hover {
  transform: scale(1.06);
  background: var(--clr-white, #fff);
}

.opd__more-frame--video .opd__video-play:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 4px;
}

.opd__more-frame--video .opd__video-play-icon {
  display: inline-flex;
  /* Optical alignment — the play triangle's visual center
     sits slightly right of the geometric center. */
  transform: translateX(2px);
}

/* Hidden once playback starts. */
.opd__more-frame--video.is-playing .opd__video-play {
  opacity: 0;
  pointer-events: none;
}

/* Ticker strip beneath feature image */
.opd__ticker {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--clr-bg-card-secondary);
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.opd__ticker-track {
  display: flex;
  gap: var(--space-xl);
  white-space: nowrap;
  animation: opd-ticker 40s linear infinite;
  width: max-content;
}

.opd__ticker:hover .opd__ticker-track { animation-play-state: paused; }

.opd__ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.opd__ticker-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-brand-accent);
  flex-shrink: 0;
}

.opd__ticker-accent {
  color: var(--clr-brand-alt);
  opacity: 0.8;
}

@keyframes opd-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .opd__ticker-track { animation: none; }
}

/* "More images" horizontal scroller (desktop only — mobile uses the unified gallery scroller above) */
@media (min-width: 960px) {
  .opd__more {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .opd__more {
    position: relative;
  }

  .opd__more-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--space-md)) / 2);
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .opd__more-track::-webkit-scrollbar { display: none; }

  .opd__more-frame { scroll-snap-align: start; }

  /* Desktop-only landscape behavior: span both grid columns and
     stretch to match the adjacent image's row height (vs. the
     base aspect-ratio rule, which mobile falls back to). */
  .opd__more-frame--video.opd__more-frame--landscape {
    grid-column: span 2;
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
  }

  /* Controls wrapper becomes transparent — buttons position themselves
     directly inside .opd__more (which is position: relative above). */
  .opd__more-controls { display: contents; }

  .opd__more-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 1px solid var(--clr-border-dark);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.95);
    color: var(--clr-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    /* Hidden by default — JS toggles .is-visible based on scroll position
       so each arrow only appears when its direction has scroll room. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease,
                background-color 0.2s ease, border-color 0.2s ease;
  }

  .opd__more-btn[data-opd-more-prev] { left: var(--space-sm); }
  .opd__more-btn[data-opd-more-next] { right: var(--space-sm); }

  .opd__more-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .opd__more-btn:hover {
    background: var(--clr-white, #fff);
    border-color: var(--clr-primary);
  }

  .opd__more-btn:focus-visible {
    outline: 2px solid var(--clr-brand-accent);
    outline-offset: 2px;
  }
}

/* Mobile: collapse "more" wrapper so its frames flow into the unified gallery scroller */
@media (max-width: 959px) {
  .opd__more,
  .opd__more-track {
    display: contents;
  }
  .opd__more-controls { display: none; }
}

/* ─────────────────────────────────────────────
   RIGHT: BUY BOX
   ───────────────────────────────────────────── */

.opd__buybox {
  min-width: 0;
}

.opd__buybox-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 960px) {
  .opd__buybox-inner {
    position: sticky;
    top: calc(80px + var(--space-md));
  }
}

/* 1 — Header */
.opd__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.opd__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.4;
}

.opd__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.018em;
  text-transform: uppercase;
  color: var(--clr-primary);
  overflow-wrap: break-word;
}

.opd__subtitle {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  color: var(--clr-primary);
}

/* 2 — Rating */
.opd__rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.opd__stars {
  color: var(--clr-brand-accent);
  font-size: 14px;
  letter-spacing: 2px;
}

.opd__rating-count {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--clr-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.opd__rating-count:hover { border-color: currentColor; }

/* 3 — Short Description (from product resource) */
.opd__short-description {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--clr-primary);
}

.opd__short-description p { margin: 0 0 var(--space-sm); }
.opd__short-description p:last-child { margin-bottom: 0; }
.opd__short-description strong,
.opd__short-description b { font-weight: 600; color: var(--clr-primary); }
.opd__short-description em,
.opd__short-description i { font-style: italic; }

/* Variant select */
.opd__variant-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.opd__variant-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-primary);
  opacity: 0.75;
}

.opd__variant-select {
  width: 100%;
  padding: 12px var(--space-md);
  background: var(--clr-white);
  border: 1px solid var(--clr-border-dark);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--clr-primary);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%233c422e' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.opd__variant-select:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 2px;
}

/* 4 — Purchase options */
.opd__purchase {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.opd__purchase-label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--clr-primary);
  opacity: 0.75;
}

.opd__option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--clr-white);
  border: 1px solid var(--clr-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.opd__option:hover { border-color: var(--clr-border-dark); }

.opd__option.is-selected {
  border: 2px solid var(--clr-primary);
  padding: calc(var(--space-md) - 1px);
  background: rgba(60, 66, 46, 0.02);
}

.opd__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opd__option-badge {
  position: absolute;
  top: -10px;
  left: var(--space-md);
  padding: 3px 10px;
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.opd__option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.opd__option-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.opd__option-price {
  font-size: 18px;
  font-weight: 600;
  color: var(--clr-primary);
  white-space: nowrap;
}

.opd__option-price sup {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.6;
  margin-left: 2px;
}

.opd__option-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.opd__option-detail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 12px;
  font-weight: 400;
  color: var(--clr-text-secondary);
}

.opd__option-detail svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* 5 — ATC row */
.opd__atc-row {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.opd__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--clr-border-dark);
  border-radius: var(--radius-md);
  background: var(--clr-white);
  overflow: hidden;
  flex-shrink: 0;
}

.opd__qty-btn {
  width: 40px;
  height: 100%;
  min-height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--clr-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.opd__qty-btn:hover { background: rgba(60, 66, 46, 0.05); }
.opd__qty-btn:focus-visible { outline: 2px solid var(--clr-brand-accent); outline-offset: -2px; }

.opd__qty-input {
  width: 40px;
  text-align: center;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--clr-primary);
  -moz-appearance: textfield;
  appearance: textfield;
}

.opd__qty-input::-webkit-outer-spin-button,
.opd__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.opd__atc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px var(--space-xl);
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.opd__atc-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.opd__atc-btn:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 4px;
}

.opd__atc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* 6 — Trust row (horizontal, pipe-separated, full ATC width, centered) */
.opd__trust {
  list-style: none;
  margin: 0;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--clr-border-light);
  border-bottom: 1px solid var(--clr-border-light);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: var(--space-md);
  row-gap: var(--space-xs);
  text-align: center;
}

.opd__trust-item {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--clr-primary);
  white-space: nowrap;
}

.opd__trust-item:not(:last-child)::after {
  content: '|';
  margin-left: var(--space-md);
  color: var(--clr-primary);
  opacity: 0.35;
  font-weight: 300;
}

@media (min-width: 600px) {
  .opd__trust-item { font-size: 13px; }
}

/* 7 — Description (long, with rich-text formatting preserved) */
.opd__description {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--clr-text-secondary);
}

.opd__description p { margin: 0 0 var(--space-sm); }
.opd__description p:last-child { margin-bottom: 0; }
.opd__description strong,
.opd__description b {
  font-weight: 600;
  color: var(--clr-primary);
}
.opd__description em,
.opd__description i {
  font-style: italic;
}
.opd__description a {
  color: var(--clr-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.opd__description ul,
.opd__description ol {
  margin: 0 0 var(--space-sm);
  padding-left: var(--space-lg);
}
.opd__description li { margin-bottom: 4px; }

/* 8 — Benefits list */
.opd__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.opd__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.55;
  color: var(--clr-primary);
}

.opd__benefit-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(60, 66, 46, 0.08);
  color: var(--clr-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* 9 — Accordions */
.opd__accordions {
  display: flex;
  flex-direction: column;
}

.opd__accordion {
  border-top: 1px solid var(--clr-border-light);
}

.opd__accordion:last-child {
  border-bottom: 1px solid var(--clr-border-light);
}

.opd__accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-primary);
}

.opd__accordion-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.opd__accordion[aria-expanded="true"] .opd__accordion-icon {
  transform: rotate(45deg);
}

.opd__accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.opd__accordion[aria-expanded="true"] .opd__accordion-content {
  grid-template-rows: 1fr;
}

.opd__accordion-inner {
  overflow: hidden;
}

.opd__accordion-body {
  padding: 0 0 var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.7;
  color: var(--clr-text-secondary);
}

.opd__accordion-body p { margin: 0 0 var(--space-sm); }
.opd__accordion-body p:last-child { margin-bottom: 0; }
.opd__accordion-body ul { margin: 0 0 var(--space-sm); padding-left: var(--space-md); }
.opd__accordion-body li { margin-bottom: 4px; }
.opd__accordion-body strong,
.opd__accordion-body b {
  font-weight: 600;
  color: var(--clr-primary);
}
.opd__accordion-body em,
.opd__accordion-body i {
  font-style: italic;
}

/* ─────────────────────────────────────────────
   STICKY MOBILE ATC BAR
   ───────────────────────────────────────────── */

.opd__sticky-atc {
  display: none;
}

@media (max-width: 959px) {
  .opd__sticky-atc {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--clr-white);
    border-top: 1px solid var(--clr-border-light);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.06);
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
  }
}

.opd__sticky-atc-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 560px;
  margin: 0 auto;
}

.opd__sticky-atc-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.opd__sticky-atc-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clr-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.opd__sticky-atc-price {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--clr-text-secondary);
}

.opd__sticky-atc-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px var(--space-lg);
  background: var(--clr-primary);
  color: var(--clr-text-inverse);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.opd__sticky-atc-btn:hover { opacity: 0.9; }
.opd__sticky-atc-btn:focus-visible { outline: 2px solid var(--clr-brand-accent); outline-offset: 2px; }

/* Always reserve bottom space on mobile so content isn't obscured by the sticky bar */
@media (max-width: 959px) {
  .opd { padding-bottom: 76px; }
}

/* ─────────────────────────────────────────────
   UNAVAILABLE STATE — out of stock / inactive /
   not available in country. Purchase options
   remain visible (so shoppers can see the
   subscribe offer) but are visually muted and
   non-interactive. ATC button is disabled.
   ───────────────────────────────────────────── */

.opd__status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: var(--space-sm);
  padding: 6px 12px;
  background: rgba(60, 66, 46, 0.06);
  border: 1px solid rgba(60, 66, 46, 0.18);
  border-radius: var(--radius-sm, 4px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-primary);
  line-height: 1.4;
}

.opd--unavailable .opd__option.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.4);
}

.opd--unavailable .opd__option.is-disabled,
.opd--unavailable .opd__option.is-disabled * {
  pointer-events: none;
}

.opd__limited-stock {
  margin: var(--space-sm) 0 0;
  font-size: 13px;
  color: var(--clr-text-secondary);
  line-height: 1.5;
}

/* Disabled qty stepper */
.opd__qty-btn:disabled,
.opd__qty-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Disabled sticky ATC (mobile) — match main ATC disabled treatment */
.opd__sticky-atc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}