body:has(.product-page) {
  /* overflow: hidden; */
}

body:has(.product-page) .footer {
  /* display: none; */
}

.product-page {
  display: flex;
  height: calc(100vh - 2vw);
  /* overflow: hidden; */
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  width: calc(100vw - var(--custom-scrollbar-width)) !important;
  margin-top: 2vw !important;
}

.product-image-section {
  flex: 0 0 50%;
  /* max-height: calc(100vh - 2vw); */
  /* padding: 2vw 0 2vw 2vw; */
  position: relative;
}

.product-image-section .product-images {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: white;
}

.product-image-section .product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.product-image-section .product-image:first-child {
  opacity: 1;
}

.product-info-section {
  flex: 0 0 50%;
  height: 100%;
  overflow-y: auto;
  color: black;
}

.product-info-content {
  padding: 2vw;
}

.product-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--spacing-l);
}

.product-info-content h1 {
  margin: 0;
}

.product-page .price {
  margin: 0;
}

.add-to-cart-btn {
  width: 100%;
  padding: var(--spacing-xs);
  background-color: var(--color-blue);
  color: #e9e9e9;
  border: none;
  cursor: pointer;
  margin-bottom: 2vw;
}

.add-to-cart-btn:hover {
  background-color: var(--color-darkblue);
}

.sold-out-text {
  text-align: center;
  color: var(--color-red);
  margin-bottom: 2vw;
}

.product-info-blocks {
  margin-bottom: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.product-info-block {
  display: flex;
  flex-direction: column;
  gap: 0.25vw;
}

.product-info-block-title {
  color: var(--color-light-blue);
  font-weight: 600;
}

.product-info-block-text {
  color: var(--color-black);
}

.stock-info {
  color: var(--color-gray-600);
}

.product-page label {
  display: block;
}

.custom-length-section {
  display: flex;
  align-items: center;
  gap: 0;
  /* margin-top: var(--spacing-l); */
  margin-bottom: var(--spacing-l);
  background-color: #d4d4d4;
  height: 1.5vw;
  width: fit-content;
}

/* Custom checkbox */
.customize-length-checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 1.5vw;
  height: 100%;
  background-color: #d4d4d4;
  border: none;
  cursor: pointer;
  margin: 0;
  position: relative;
  line-height: 3;
}

.customize-length-checkbox {
  background-color: var(--color-darkblue);
}

/* Checkmark via pseudo-element */
.customize-length-checkbox::after {
    content: '';
    display: none;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9vw;
    line-height: 1;
    font-family: 'HAL Stars', sans-serif;
    font-variation-settings: "wght" 700;
    -webkit-font-smoothing: antialiased;
}

.customize-length-checkbox:not(:checked)::after {
    display: none;
}

.customize-length-checkbox:checked::after {
  content: '✓';
  display: flex;
      font-size: 1.15vw !important;
}

.custom-length-section label {
  flex: 1;
  font-weight: 700;
  font-size: var(--text-m);
  color: var(--color-black);
  cursor: pointer;
  padding: 0.5vw;
  white-space: nowrap;
  line-height: 1.2;
}

/* Number input */
.custom-length-input {
  height: 100%;
  background-color: var(--color-darkblue);
  color: white;
  border: none;
  padding: 0;
  font-size: var(--text-m);
  font-weight: 600;
  width: 1.75vw;
  /* min-width: 80px; */
  cursor: text;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.custom-length-input:focus {
  outline: none;
}

#custom-length-mobile-select:focus {
  outline: none;
}

/* Hide WebKit/Blink native spinners */
.custom-length-input::-webkit-inner-spin-button,
.custom-length-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

/* Custom stepper wrapper */
.custom-length-steppers {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5vw;
  position: relative;
  background-color: var(--color-darkblue);
}

.stepper-icon {
  font-size: 1vw;
  color: white;
  user-select: none;
  pointer-events: none;
  line-height: 1;
  font-size: 1.15vw !important;
}

.custom-length-btn {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;
}

.custom-length-btn.increment {
  top: 0;
}

.custom-length-btn.decrement {
  bottom: 0;
}

.unit-label {
  background-color: var(--color-darkblue);
  color: white;
  font-weight: 600;
  font-size: var(--text-m);
  height: 100%;
  display: inline-flex;
  align-items: center;
  padding-right: var(--spacing-xs);
}

.no-returns-note {
  margin-top: var(--spacing-s);
  font-size: var(--text-s);
  color: var(--color-blue);
  font-weight: 500;
}

.no-returns-note{
  padding: 1vw;
  margin: 0;
  background: white;
}

@media (max-width: 768px) {
  body:has(.product-page) {
    overflow: auto;
  }
  .product-page {
    flex-direction: column;
    height: auto;
    overflow: visible;
    margin-top: 5vw !important;
  }
  .product-image-section {
    flex: 0 0 100%;
    max-height: none;
  }
  .product-info-content {
    padding: 5vw;
  }
  .add-to-cart-btn {
    margin-bottom: 5vw;
  }
  .sold-out-text {
    margin-bottom: 5vw;
  }
  .custom-length-section {
        height: 7.75vw;

  }
  .customize-length-checkbox {
    width: 7.75vw;
  }
  .customize-length-checkbox::after {
    font-size: 2.25vw;
  }
  .customize-length-checkbox:checked::after {
    font-size: 2.875vw !important;
  }
  .custom-length-input {
    width: 4.375vw;
  }
  .custom-length-steppers {
    width: 7.75vw;
  }
  .stepper-icon {
    font-size: 2.875vw !important;
  }
  .product-info-block {
    gap: 0.625vw;
  }
  .custom-length-section label {
    padding: 1.25vw;
  }
  .add-to-cart-btn{
    padding: var(--spacing-s);
  }
}