/** Shopify CDN: Minification failed

Line 246:0 Unexpected "}"

**/
/* ============================================
   MAIN PRODUCT SECTION - CSS
   Silverback Moto Co.
   ============================================ */

/* --------------------------------
   LAYOUT
   -------------------------------- */
.product-section {
  padding: 0;
  overflow-x: hidden;
}

.product-section__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 1024px) {
  .product-section__container {
    padding: 0 32px;
  }
}

/* Breadcrumb */
.product-breadcrumb {
  display: flex;
  font-size: 12px;
  color: #666;
  padding: 0;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

@media (min-width: 1024px) {
  .product-breadcrumb {
    justify-content: flex-start;
  }
}

.product-breadcrumb a {
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease;
}

.product-breadcrumb a:hover {
  color: #000;
}

.product-breadcrumb__sep {
  margin: 0 4px;
  color: #999;
}

/* Main Layout Grid */
.product-layout {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .product-layout {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
  }
}

/* --------------------------------
   PRODUCT GALLERY - Desktop
   -------------------------------- */
.product-gallery {
  position: relative;
}

.product-gallery__desktop {
  display: none;
}

@media (min-width: 1024px) {
  .product-gallery__desktop {
    display: block;
    position: relative;
  }
  
  /* Gallery scroll container - height will be set by JS to match info panel */
  .product-gallery__scroll {
    display: flex;
    flex-direction: column;
    gap: 0; /* NO GAP */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .product-gallery__scroll::-webkit-scrollbar {
    display: none;
  }
}

.product-gallery__item {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0; /* Remove any line-height spacing */
}

.product-gallery__image {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom; /* Remove bottom gap */
}

.product-gallery__video {
  width: 100%;
  aspect-ratio: 3/4;
}

.product-gallery__video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------
   PRODUCT GALLERY - Mobile Carousel
   -------------------------------- */
.product-gallery__mobile {
  display: block;
  position: relative;
}

@media (min-width: 1024px) {
  .product-gallery__mobile {
    display: none;
  }
}

.product-gallery__carousel {
  overflow: hidden;
  touch-action: pan-x;
  position: relative; /* anchor for .product-badge (sibling of __track) */
}

.product-gallery__track {
  display: flex;
  transition: transform 0.3s ease;
}

.product-gallery__slide {
  flex: 0 0 100%;
  min-width: 100%;
  line-height: 0;
  position: relative; /* anchor for .product-badge overlay */
}

.product-gallery__slide-image {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* Progress Bar */
.product-gallery__progress {
  height: 3px;
  background: #e5e5e5;
  margin: 0 0 16px;
}

.product-gallery__progress-bar {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

/* --------------------------------
   PRODUCT INFO
   -------------------------------- */
.product-info {
  padding: 8px 16px 20px;
}

@media (min-width: 1024px) {
  .product-info {
    padding: 8px 0 40px 40px;
  }
}

.product-info__inner {
  display: flex;
  flex-direction: column;
}

/* Header */
.product-info__header {
  margin-bottom: 20px;
  text-align: center;
}

@media (min-width: 1024px) {
  .product-info__header {
    text-align: left;
  }
}

.product-info__title {
  font-family: var(--font-heading, 'Helvetica Neue', sans-serif);
  font-size: 24px;
  font-weight: 500;
  margin: 8px 0;
  line-height: 1.2;
  color: #000;
}

@media (min-width: 768px) {
  .product-info__title {
    font-size: 28px;
  }
}

.product-info__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
}

@media (min-width: 1024px) {
  .product-info__price {
    justify-content: flex-start;
  }
}
}

.product-info__price-current {
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.product-info__price-compare {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
}

/* --------------------------------
   PRODUCT FORM
   -------------------------------- */
.product-form {
  display: flex;
  flex-direction: column;
}

.product-form__option {
  margin-bottom: 16px;
}

.product-form__option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.product-form__option-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000;
  margin: 0;
}

.product-form__size-guide {
  font-size: 12px;
  font-weight: 400;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 0;
}

.product-form__size-guide:hover {
  color: #000;
}

.product-form__size-guide svg {
  width: 14px;
  height: 14px;
}

/* Size Selector - Square buttons matching mockup */
.product-form__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-form__size {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0 12px;
}

@media (max-width: 1023px) {
  .product-form__sizes {
    gap: 6px;
  }
  
  .product-form__size {
    min-width: 38px;
    height: 38px;
    font-size: 13px;
    padding: 0 10px;
  }
}

.product-form__size:hover:not(:disabled):not(.product-form__size--selected) {
  background: #f0f0f0;
}

.product-form__size--selected {
  background: #000;
  border-color: #000;
  color: #fff;
}

.product-form__size--unavailable {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
  border-color: #ccc;
  color: #999;
}

/* Color Swatches */
.product-form__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.product-form__swatch {
  width: 50px;
  height: 65px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease;
  background: transparent;
  padding: 0;
}

.product-form__swatch:hover,
.product-form__swatch--selected {
  border-color: #000;
}

.product-form__swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Promo Banner - Green */
.product-promo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #BFFF00;
  margin-bottom: 16px;
}

.product-promo__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-promo__icon svg {
  width: 20px;
  height: 20px;
  color: #000;
}

.product-promo__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.product-promo__code {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000;
}

.product-promo__text {
  font-size: 12px;
  color: #000;
}

/* Submit Button - Black */
.product-form__submit {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

.product-form__submit .btn {
  width: 100%;
  background: #000;
  color: #fff;
  border: none;
  padding: 16px 24px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s ease;
}

.product-form__submit .btn:hover {
  background: #333;
}

.product-form__submit .btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.product-form__loading {
  display: none;
}

.product-form__submit.is-loading .product-form__loading {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.product-form__submit.is-loading [data-add-to-cart-text] {
  visibility: hidden;
}

/* Trust Indicators */
.product-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.product-trust__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #666;
}

.product-trust__item svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #000;
}

/* --------------------------------
   ACCORDIONS
   -------------------------------- */
.product-accordions {
  border-top: 1px solid #e5e5e5;
}

.product-accordion {
  border-bottom: 1px solid #e5e5e5;
}

.product-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: none;
  border: none;
  cursor: pointer;
  color: #000;
  text-align: left;
}

.product-accordion__header:hover {
  color: #333;
}

.product-accordion__icons {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  position: relative;
}

.product-accordion__icons .icon-plus,
.product-accordion__icons .icon-minus {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.2s ease;
}

.product-accordion__icons .icon-minus {
  opacity: 0;
}

.product-accordion.is-open .product-accordion__icons .icon-plus {
  opacity: 0;
}

.product-accordion.is-open .product-accordion__icons .icon-minus {
  opacity: 1;
}

.product-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* JS sets max-height on .is-open; no CSS fallback needed */

.product-accordion__content {
  padding: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.product-accordion__content p {
  margin: 0 0 12px 0;
}

.product-accordion__content p:last-child {
  margin-bottom: 0;
}

.product-accordion__content ul {
  margin: 0;
  padding-left: 20px;
}

.product-accordion__content li {
  margin-bottom: 6px;
}

/* --------------------------------
   SIZE GUIDE MODAL
   -------------------------------- */
.size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.size-guide-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.size-guide-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.size-guide-modal__content {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  padding: 32px;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.size-guide-modal.is-open .size-guide-modal__content {
  transform: translateY(0);
}

.size-guide-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  transition: color 0.2s ease;
}

.size-guide-modal__close:hover {
  color: #000;
}

.size-guide-modal__title {
  font-family: var(--font-heading, 'Helvetica Neue', sans-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #000;
}

.size-guide-modal__subtitle {
  font-size: 13px;
  color: #666;
  margin: 0 0 20px 0;
}

.size-guide-modal__table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}

.size-guide-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.size-guide-modal__table th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px;
  border-bottom: 2px solid #000;
  color: #000;
}

.size-guide-modal__table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
}

.size-guide-modal__table tbody tr:hover {
  background: #f9f9f9;
}

.size-guide-modal__note {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

/* --------------------------------
   LIGHTBOX - Full screen gallery
   -------------------------------- */
.product-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

/* Clickable overlay behind images */
.product-lightbox__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 0;
}

.product-lightbox__close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

.product-lightbox__close:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}

.product-lightbox__close svg {
  width: 20px;
  height: 20px;
}

/* Desktop: Vertical scroll, centered images, NO GAPS */
.product-lightbox__content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.product-lightbox__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
}

.product-lightbox__item {
  flex-shrink: 0;
  width: 100%;
  max-width: 900px;
  font-size: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
}

.product-lightbox__item img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Mobile lightbox.
   ARCHITECTURE: each .product-lightbox__item is absolutely positioned and fills
   the inner. JS sets a transform per item based on (item-index − currentIndex)
   so only the active slide is visible at translateX(0); previous slide sits at
   translateX(-100%), next at translateX(100%), far slides parked at ±200%.

   Why this matters: the previous architecture used a single flex-row container
   ~14×100vw wide with one transform on the inner. Past ~7-8 slides, mobile
   compositing engines (especially WebKit) become unreliable on a container
   that wide — slides go black or render misaligned. Per-item transforms keep
   every slide's bounding box at 100vw, so the compositor never has to deal
   with a giant element. */
@media (max-width: 1023px) {
  .product-lightbox {
    background: #000;
  }

  .product-lightbox__close {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
  }

  .product-lightbox__close:hover {
    background: #fff;
    border-color: #fff;
    color: #000;
  }

  .product-lightbox__content {
    overflow: hidden !important;
    touch-action: pan-x;
    position: relative;
  }

  .product-lightbox__inner {
    /* Override desktop's flex-column. Inner is now just a positioning context. */
    display: block;
    flex-direction: unset;
    flex-wrap: unset;
    align-items: unset;
    position: relative;
    width: 100%;
    height: 100%;
    transition: none;
    will-change: auto;
    transform: none !important; /* kill any leftover inline transform from old code path */
  }

  .product-lightbox__item {
    /* Each slide is absolute-positioned, full-bleed within the inner.
       JS assigns the transform inline. Default off-screen-right keeps slides
       hidden until JS runs (no flash of stacked content). */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 60px 16px 80px;
    box-sizing: border-box;
    transform: translate3d(200%, 0, 0);
    transition: transform 0.3s ease;
    will-change: transform;
  }

  .product-lightbox__item img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    transition: transform 0.3s ease;
    transform-origin: center center;
    border-radius: 4px;
  }

  .product-lightbox__item img.is-zoomed {
    transform: scale(2);
    object-fit: cover;
  }

  /* Placeholder shown while a slide's image is still loading */
  .product-lightbox__item[data-loading="true"]::before {
    content: '';
    position: absolute;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: lightbox-spin 0.7s linear infinite;
  }

  @keyframes lightbox-spin {
    to { transform: rotate(360deg); }
  }

  /* Mobile lightbox counter */
  .product-lightbox__counter {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.5);
    padding: 6px 14px;
    border-radius: 20px;
  }
}

@media (min-width: 1024px) {
  .product-lightbox__counter {
    display: none;
  }
}

/* --------------------------------
   STICKY MOBILE BAR
   -------------------------------- */
.product-sticky-bar {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border-top: 1px solid #e5e5e5;
  padding: 12px 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.product-sticky-bar.is-visible {
  transform: translateY(0);
}

@media (min-width: 1024px) {
  .product-sticky-bar {
    display: none;
  }
}

.product-sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.product-sticky-bar__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.product-sticky-bar__title {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-sticky-bar__price {
  font-size: 14px;
  font-weight: 600;
}

.product-sticky-bar__btn {
  flex-shrink: 0;
  background: #000;
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
}

/* --------------------------------
   DISPLAY-ONLY META ROWS
   (Fit, Color — not variant selectors, just labels)
   Label styling matches .product-form__option-label for visual consistency.
   -------------------------------- */
.product-form__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
}

.product-form__meta-row:last-of-type {
  border-bottom: none;
}

.product-form__meta-label {
  font-family: "bc-liguria", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #000;
  margin: 0;
  min-width: 64px;
  flex-shrink: 0;
}

.product-form__meta-value {
  font-family: var(--font-body);
  font-size: 14px;
  color: #000;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.product-form__color-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
/* --------------------------------
   LIGHTBOX ZOOM MODE
   --------------------------------
   Triggered when a user double-taps (mobile), pinch-zooms (mobile), or clicks
   a slide (desktop). The focused slide gets .is-zoom-active and the content
   container gets .has-zoom-active. While zoomed:
   - every other slide drops to opacity 0 (solo focus)
   - the focused slide pops out to fill the viewport (desktop) or overrides
     its carousel translate (mobile)
   - the <img> inside accepts inline transform: translate + scale set by JS
*/

/* Solo focus — hide every slide except the zoomed one */
.product-lightbox__content.has-zoom-active .product-lightbox__item:not(.is-zoom-active) {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Active-zoomed slide gets z-index priority */
.product-lightbox__item.is-zoom-active {
  z-index: 100;
}

/* Image styling shared between mobile and desktop while zoomed.
   max-height: none lets the scaled image overflow vertically (clipped by the
   slide's overflow:hidden). transition: none keeps drag-pan instantaneous. */
.product-lightbox__item.is-zoom-active img {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  max-height: none !important;
  transition: none !important;
  transform-origin: center center;
}

.product-lightbox__item.is-zoom-active img:active {
  cursor: grabbing;
}

/* Desktop: zoomed slide pops out of the flex-column scroll layout to fill the
   entire viewport. Without this, the slide stays at its scrolled position
   capped at max-width:900px, so pan/zoom is hemmed in by sibling slides. */
@media (min-width: 1024px) {
  .product-lightbox__item.is-zoom-active {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 !important;
    padding: 60px !important;
    max-width: none !important;
    width: 100vw !important;
    height: 100vh !important;
  }

  .product-lightbox__item.is-zoom-active img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
  }
}

/* Mobile: when a slide enters zoom mode, force translate3d(0) so it sits at
   viewport center regardless of its prior carousel transform (which is still
   sitting on the inline style). */
@media (max-width: 1023px) {
  .product-lightbox__item.is-zoom-active {
    transform: translate3d(0, 0, 0) !important;
    transition: none !important;
  }
}

/* ============================================
   PRODUCT BADGE OVERLAY
   ============================================
   Renders on top of each gallery slide (desktop + mobile carousel).
   Position and size are controlled by modifier classes set from per-product
   metafields (custom.badge_position, custom.badge_size).

   Sizing strategy: each size cap is a fixed pixel pair (max-width AND
   max-height). The img inside uses width:auto height:auto so it scales to
   fit within the cap while preserving its native aspect ratio. This handles
   both vertical badges (the Cordura/RE ZRO strap is ~1:6.7 — height drives,
   width stays slim) and horizontal/square badges (width drives, height
   stays short) without the user needing to know the difference.

   Position uses percentages so insets stay proportional to image size —
   3-4% reads as a tasteful margin on a 1200px desktop image and a 390px
   mobile image alike.
*/

.product-badge {
  position: absolute;
  z-index: 5;
  pointer-events: none; /* clicks pass through to the image */
  line-height: 0;
}

.product-badge img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  /* object-fit handles aspect ratio for any badge shape (vertical strap,
     square logo, horizontal banner) regardless of the SVG's natural size
     reporting. The container has fixed dimensions (set per size class
     below), and the img fills it while preserving its own aspect.

     !important on the size declarations is defensive: something in
     theme.css.liquid was zeroing the img's computed width/height
     (verified by inline-style override test). This guarantees the
     rules win the cascade regardless of source-order or theme rules. */
}

/* Position variants — desktop defaults */
.product-badge--top-left    { top: 3%;    left: 3%;  }
.product-badge--top-right   { top: 3%;    right: 3%; }
.product-badge--bottom-left { bottom: 3%; left: 3%;  }
.product-badge--bottom-right{ bottom: 3%; right: 3%; }

/* Object-position aligns visible content to the chosen corner. Without
   this, a vertical Cordura strap rendered with object-fit: contain
   centers itself in the box, leaving empty space between the corner
   inset and the visible badge. */
.product-badge--top-left    img { object-position: left top;     }
.product-badge--top-right   img { object-position: right top;    }
.product-badge--bottom-left img { object-position: left bottom;  }
.product-badge--bottom-right img { object-position: right bottom; }

/* Size variants — desktop. Fixed container dimensions guarantee non-zero
   render size. !important matches the img rules above for the same
   reason — to win the cascade against the theme's competing rules. */
.product-badge--small  { width: 60px  !important; height: 110px !important; }
.product-badge--medium { width: 90px  !important; height: 165px !important; }
.product-badge--large  { width: 130px !important; height: 230px !important; }

/* Tablet (≤1023px): scaled-down sizes for mobile carousel layout. The
   gallery switches to 100vw images at this breakpoint, so the badge needs
   to come down with it. Insets bump from 3% to 4% — on a narrower image
   the percentage maps to a smaller absolute distance, and 3% reads as
   cramped against the image edge. */
@media (max-width: 1023px) {
  .product-badge--top-left,
  .product-badge--top-right    { top: 4%; }
  .product-badge--bottom-left,
  .product-badge--bottom-right { bottom: 4%; }
  .product-badge--top-left,
  .product-badge--bottom-left  { left: 4%; }
  .product-badge--top-right,
  .product-badge--bottom-right { right: 4%; }

  .product-badge--small  { width: 48px  !important; height: 90px  !important; }
  .product-badge--medium { width: 72px  !important; height: 135px !important; }
  .product-badge--large  { width: 105px !important; height: 185px !important; }
}

/* Phone (≤767px): smallest tier — common phone widths 320-414px. The
   container image is ~390px wide here, so tablet's 72px medium would
   read as ~18% of image — too dominant. 55px is closer to ~14%. */
@media (max-width: 767px) {
  .product-badge--small  { width: 38px !important; height: 70px  !important; }
  .product-badge--medium { width: 55px !important; height: 105px !important; }
  .product-badge--large  { width: 80px !important; height: 145px !important; }
}