/* ================================
   COLORS / BACKGROUNDS / BORDERS
================================ */
.img-container { border-radius: 1.5rem; background-color: #1b1b1b; }
.btn-bg-gray { background-color: #101010; }
.btn-bg-blue { background-color: #007AFF; }
.summaryCard-bg-gray { background-color: #1b1b1b; }
.popupCardGrey { background-color: #2d2d2d; }
.popupIconGrey { background-color: #606060; }
.bg-transparent { background-color: transparent; }
.text-gray { color: #888888; } 
.text-gray-light { color: #b2b2b2; } 
.btn-border-gray {
  --tw-border-opacity: 0.2;
  border-color: rgb(178 178 178 / var(--tw-border-opacity, 1));
}
.fillform-black{background-color: #070707;}

/* Carousel dots */
.carousel-dot {
  width: 10px; height: 10px; border-radius: 9999px;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, opacity .15s ease;
}
.carousel-dot:hover { transform: scale(1.1); }
.carousel-dot-active { background: #ffffff; opacity: 1; }

/* Carousel arrows */
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.35); color: #111;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  cursor: pointer; transition: background-color .15s ease, transform .15s ease, opacity .15s ease;
  border: none;
}
.carousel-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
.carousel-arrow:active { transform: translateY(-50%) scale(0.98); }
.carousel-arrow-left { left: 1.5rem; }
.carousel-arrow-right { right: 1.5rem; }
.carousel-arrow svg { width: 18px; height: 18px; }
@media (max-width: 640px){ .carousel-arrow { width: 36px; height: 36px; } .carousel-arrow svg { width: 14px; height: 14px; } }

/* ================================
   RADIUS
================================ */
.rounded-product-select { border-radius: 1.25rem; }
.rounded-checkoutform { border-radius: 0.7rem; }
.rounded-checkout { border-radius: 0.5rem; }

/* ================================
   SPACING (MARGINS / PADDINGS / HEIGHTS)
================================ */
.mt-80px { margin-top: 5rem; }
.mb-100px { margin-bottom: 6.25rem; }
.btn-padding-store { padding: 1.875rem 1.875rem; }
.popup-padding-store { padding: 1.5rem 1.875rem; }
.btn-fixed-height { height: 11.25rem; }

/* ================================
   UTILITIES / MISC
================================ */
.is-hidden { display: none !important; }   /* reliable hide class (not purged) */

/* ================================
   PRODUCT IMAGE SHELL / CAROUSEL BASE
================================ */
.product-image-shell { position: relative; }          /* for dots/arrows positioning */
.product-image-shell { touch-action: pan-y; }         /* allow vertical page scroll */
.product-image-shell {
  width: 100%;
  height: 60rem;                                      /* fixed at ≥1500px */
  display: flex; align-items: center; justify-content: center;
  transition: height .4s ease, width .4s ease;
}
.product-image-shell > img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: initial; transition: width .4s ease, height .4s ease;
}

/* ================================
   FORM CONTROLS (SELECT)
================================ */
select.store-select{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23b2b2b2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 1rem;
  background-position: right 1.875rem center;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
select.store-select::-ms-expand { display: none; }

/* ================================
   RESPONSIVE / LAYOUT
================================ */

/* Match main content margins/padding to Selection Section below 1800px */
@media (max-width: 5000px) {
  .main-grid-top {
    max-width: 100rem; 
    width: 90vw;
    margin-left: auto; 
    margin-right: auto; 
  }
}
@media (max-width: 1800px) {
  .main-grid-top {
    max-width: 80rem;
    width: 90vw; 
  }
}
@media (max-width: 768px) {
  .main-grid-top {
    max-width: 80rem;
    width: 90vw; 
  }
}

@media (max-width: 5000px) {
  .main-grid {
    max-width: 80rem; 
    width: 82vw;
    margin-left: auto; 
    margin-right: auto; 
  }
}
@media (max-width: 1800px) {
  .main-grid {
    max-width: 80rem;
    width: 82vw; 
  }
}



/* Fix large-screen image size (container stays flexible) */
@media (min-width: 1800px) {
  .product-image-shell > img {
    width: 975px;   /* fixed image width */
    height: 548.44px;  /* fixed image height */
    max-width: none; max-height: none;
  }
}

/* Below 1500px: square container and scalable grid prioritizing right column */
@media (max-width: 1800px) {
  .product-image-shell {
    width: 100%; height: auto; aspect-ratio: 1.2/ 1;  /* enforce 1:1 only here */
  }
  .product-image-shell > img {
    width: 85%; height: auto; max-width: 100%; max-height: 100%;
  }
  .main-grid {
    /* Squeeze left column harder: can go down to 240px; prefer ~45vw below 1500px */
    grid-template-columns: minmax(clamp(240px, 45vw, 1040px), 1fr) 337px;
    gap: 2.5rem !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important;
  }
}

@media (max-width: 768px) {
  .main-grid {
    max-width: 80rem;
    width: 90vw; 
    padding-left: 0 !important; padding-right: 0 !important;
  }
  }

/* Below 1250px: reduce main content grid gap from gap-20 (5rem) to gap-14 (3.5rem) */
@media (max-width: 1250px) {
  .main-grid { gap: 2.5rem !important; }
}