/* ==========================================
   BODY
   ========================================== */

html.modal-open,
body.modal-open {
  overflow: hidden;
}


/* ==========================================
   PRODUCT MODAL
   ========================================== */

.product-modal {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 30px;

  visibility: hidden;

  opacity: 0;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;

}


.product-modal.active {

  visibility: visible;

  opacity: 1;

}


/* ==========================================
   PRODUCT OVERLAY
   ========================================== */

.product-modal-overlay {

  position: absolute;

  inset: 0;

  background:
    rgba(0, 0, 0, 0);

  backdrop-filter:
    blur(0px);

  transition:
    background-color 0.4s ease,
    backdrop-filter 0.4s ease;

}

.product-modal.active .product-modal-overlay {

  background:
    rgba(0, 0, 0, 0.65);

  backdrop-filter:
    blur(5px);

}


/* ==========================================
   PRODUCT MODAL CONTENT
   ========================================== */

.product-modal-content {

  position: relative;

  z-index: 2;

  width: min(100%,
      1050px);

  max-height: 90vh;

  overflow: hidden;

  background: #f7f7f5;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.25);

  transform:
    scale(0.97) translateY(20px);

  opacity: 0;

  transition:
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);

  border-radius: 12px;

}


.product-modal.active .product-modal-content {

  transform:
    scale(1) translateY(0);

  opacity: 1;

}


/* ==========================================
   CLOSE
   ========================================== */

.product-modal-close {

  position: absolute;

  top: 20px;

  right: 20px;

  z-index: 5;

  width: 36px;

  height: 36px;

  border: 1px solid #e8e8e6;

  border-radius: 50%;

  background: #ffffff;

  color: var(--black);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}


.product-modal-close:hover {

  transform:
    rotate(90deg);

  background-color: var(--black);

  border-color: var(--black);

  color: var(--white);

}


.product-modal-close svg {

  display: block;

}


/* ==========================================
   PRODUCT IMAGE
   ========================================== */

.product-modal-image-wrapper {

  height: 100%;

  min-height: 560px;

  background: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 30px;

  border-right: 1px solid #e8e8e6;

  position: relative;

}


.product-modal-image-wrapper img {

  width: 100%;

  height: 100%;

  max-height: 620px;

  object-fit: cover;

  display: block;

  border: 1px solid var(--black);

  border-radius: 6px;

  box-shadow:
    0 8px 24px rgba(9, 9, 9, 0.04);

  transform:
    scale(0.95);

  opacity: 0;

  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);

  will-change:
    transform, opacity;

}

.product-modal.active .product-modal-image-wrapper img {

  transform:
    scale(1);

  opacity: 1;

  transition-delay:
    0.08s;

}


/* ==========================================
   PRODUCT INFO
   ========================================== */

.product-modal-info {

  padding: 55px 50px;

  display: flex;

  flex-direction: column;

  justify-content: start;

  overflow-y: auto;

  max-height: 90vh;

  overscroll-behavior: contain;

}

.product-modal-info::-webkit-scrollbar {

  width: 4px;

}

.product-modal-info::-webkit-scrollbar-thumb {

  background: rgba(0, 0, 0, 0.15);

  border-radius: 4px;

}


.modal-product-category {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.18em;

  color: #777;

  margin-bottom: 18px;

}


.product-modal-info h2 {

  font-size:
    clamp(1.8rem, 4vw, 3rem);

  font-weight: 800;

  letter-spacing: -0.06em;

  line-height: 0.95;

}


.modal-price-block {

  margin-top: 20px;

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

}


.modal-price-mrp {

  font-size: 16px;

  font-weight: 500;

  color: #999;

  text-decoration: line-through;

}


.modal-price-sale {

  font-size: 24px;

  font-weight: 800;

  color: var(--black);

}


.modal-price-badge {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.04em;

  color: #fff;

  background: #1a8d1a;

  padding: 3px 8px;

  border-radius: 3px;

}


.modal-price-delivery {

  font-size: 12px;

  font-weight: 600;

  color: #555;

  background: #ebebe7;

  padding: 3px 8px;

  border-radius: 3px;

}


.modal-offers {

  margin-top: 18px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}


.modal-offer-tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: #f0faf0;

  border: 1px dashed #3aaf3a;

  border-radius: 5px;

  padding: 8px 14px;

  font-size: 12.5px;

  color: #1a6b1a;

  line-height: 1.3;

}


.modal-offer-tag svg {

  flex-shrink: 0;

  color: #1a8d1a;

}


.modal-delivery-tag {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: #f5f5f2;

  border: 1px solid var(--border);

  border-radius: 5px;

  padding: 8px 14px;

  font-size: 12.5px;

  color: #444;

  line-height: 1.3;

}


.modal-delivery-tag svg {

  flex-shrink: 0;

  color: #444;

}


.modal-product-description {

  margin-top: 20px;

  color: #666;

  font-size: 15px;

  line-height: 1.7;

}


/* ==========================================
   PRODUCT OPTIONS
   ========================================== */

.product-option {

  margin-top: 35px;

}


/* ==========================================
   OPTION HEADER
   ========================================== */

.option-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  margin-bottom: 15px;

}


.option-header>span {

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.1em;

}


/* ==========================================
   SIZE GUIDE BUTTON
   ========================================== */

.size-guide-button {

  border: none;

  background: none;

  padding: 0;

  font-family: inherit;

  font-size: 11px;

  font-weight: 700;

  text-decoration: underline;

  cursor: pointer;

  color: #555;

}


.size-guide-button:hover {

  color: #000;

}


/* ==========================================
   SIZE OPTIONS
   ========================================== */

.size-options {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}


.size-option {

  min-width: 52px;

  height: 46px;

  padding: 0 15px;

  border: 1px solid #c9c9c9;

  background: transparent;

  color: #090909;

  font-family: inherit;

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;

}

.size-option:hover {

  background: #090909;

  color: #ffffff;

  border-color: #090909;

}

.size-option.selected {

  background: #090909;

  color: #ffffff;

  border-color: #090909;

}


/* ==========================================
   SIZE ERROR
   ========================================== */

.size-error {

  display: none;

  margin-top: 10px;

  color: #c62828;

  font-size: 12px;

}


.size-error.visible {

  display: block;

}


/* ==========================================
   ACTION BUTTONS
   ========================================== */

.modal-actions {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-top: 35px;

}


.modal-btn {

  width: 100%;

  padding: 17px 20px;

  border: 2px solid var(--black);

  font-family: inherit;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.05em;

  cursor: pointer;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;

}

.modal-btn * {

  color: inherit;

  transition: color 0.2s ease;

}

.modal-btn:hover {
  transform: translate(-4px, -4px);
}


.modal-btn-primary {

  background: var(--black);

  color: var(--white);

}

.modal-btn-primary:hover {

  background: var(--white);

  color: var(--black);

  box-shadow: 4px 4px 0px var(--black);

}


.modal-btn-secondary {

  background: transparent;

  color: var(--black);

}

.modal-btn-secondary:hover {

  background: var(--accent-soft);

  color: var(--black);

  box-shadow: 4px 4px 0px var(--black);

}


/* ================================================= */
/* SIZE GUIDE MODAL */
/* ================================================= */

.size-guide-modal {

  position: fixed;

  inset: 0;

  z-index: 2000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 30px;

  visibility: hidden;

  opacity: 0;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

}


.size-guide-modal.active {

  visibility: visible;

  opacity: 1;

}


/* ==========================================
   SIZE GUIDE OVERLAY
   ========================================== */

.size-guide-overlay {

  position: absolute;

  inset: 0;

  background:
    rgba(0, 0, 0, 0.75);

  backdrop-filter:
    blur(6px);

}


/* ==========================================
   SIZE GUIDE CONTENT
   ========================================== */

.size-guide-content {

  position: relative;

  z-index: 2;

  width: min(100%,
      850px);

  max-height: 90vh;

  overflow-y: auto;

  padding: 45px;

  background: #f7f7f5;

}


.size-guide-content h2 {

  font-size:
    clamp(2rem, 4vw, 3.5rem);

  letter-spacing: -0.05em;

  margin-bottom: 30px;

}


/* ==========================================
   SIZE GUIDE IMAGE
   ========================================== */

.size-guide-content img {

  display: block;

  width: 100%;

  height: auto;

  max-height: 65vh;

  object-fit: contain;

}


/* ==========================================
   SIZE GUIDE CLOSE
   ========================================== */

.size-guide-close {

  position: absolute;

  top: 15px;

  right: 15px;

  width: 40px;

  height: 40px;

  border: none;

  border-radius: 50%;

  background: #fff;

  font-size: 26px;

  cursor: pointer;

}


/* ==========================================
   MOBILE
   ========================================== */

@media (max-width: 800px) {

  .product-modal {

    padding: 15px 12px;

    align-items: flex-start;

    overflow: hidden;

  }


  .product-modal-content {

    grid-template-columns: 1fr;

    max-height: calc(100dvh - 30px);

    margin-top: 5px;

    overflow-y: auto;

    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;

    border-radius: 10px;

  }


  .product-modal-image-wrapper {

    min-height: unset;

    max-height: none;

    height: auto;

    position: relative;

    top: auto;

    z-index: 1;

    background: #ecece9;

    padding: 25px 20px 15px;

  }


  .product-modal-image-wrapper img {

    max-height: 48vh;

    width: 100%;

    height: auto;

    object-fit: cover;

    display: block;

  }


  .product-modal-info {

    padding:
      25px 20px 35px;

    max-height: none;

    overflow-y: visible;

  }


  .product-modal-close {

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 10;

    background: rgba(255, 255, 255, 0.9);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);

  }


  .size-guide-content {

    padding: 30px 20px;

  }

}


/* ==========================================
   PRODUCT DETAILS STAGGERED REVEALS (active)
   ========================================== */

.product-modal-info .modal-product-category,
.product-modal-info h2,
.product-modal-info .modal-price-block,
.product-modal-info .modal-product-description,
.product-modal-info .modal-offers,
.product-modal-info .product-option,
.product-modal-info .modal-actions {

  opacity: 0;

  transform:
    translateY(12px);

  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);

  will-change:
    transform, opacity;

}


.product-modal.active .product-modal-info .modal-product-category,
.product-modal.active .product-modal-info h2,
.product-modal.active .product-modal-info .modal-price-block,
.product-modal.active .product-modal-info .modal-product-description,
.product-modal.active .product-modal-info .modal-offers,
.product-modal.active .product-modal-info .product-option,
.product-modal.active .product-modal-info .modal-actions {

  opacity: 1;

  transform:
    translateY(0);

}


.product-modal.active .product-modal-info .modal-product-category {
  transition-delay: 0.10s;
}

.product-modal.active .product-modal-info h2 {
  transition-delay: 0.16s;
}

.product-modal.active .product-modal-info .modal-price-block {
  transition-delay: 0.22s;
}

.product-modal.active .product-modal-info .modal-product-description {
  transition-delay: 0.26s;
}

.product-modal.active .product-modal-info .modal-offers {
  transition-delay: 0.30s;
}

.product-modal.active .product-modal-info .product-option {
  transition-delay: 0.34s;
}

.product-modal.active .product-modal-info .modal-actions {
  transition-delay: 0.40s;
}