/* Mobile stability and embedded-browser compatibility for Ngoc An Hy V10. */
html {
  min-height: 100%;
  height: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  height: auto !important;
}

body:not(.modal-open) {
  height: auto !important;
  overflow-y: auto !important;
  padding-right: 0 !important;
  position: static !important;
}

main {
  overflow-x: hidden;
  overflow-y: visible !important;
}

#top,
#story,
#collection,
#contact,
[id^="product-"] {
  scroll-margin-top: 110px;
}

button,
a,
input,
select {
  touch-action: manipulation;
}

.order-modal {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.nah-field-error {
  display: block;
  margin: -1px 2px 0;
  color: #a22f2f;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.nah-field-error[hidden] {
  display: none !important;
}

.field.is-invalid input,
.field.is-invalid select {
  border-color: #b64545 !important;
  background: #fffafa !important;
  box-shadow: 0 0 0 3px rgba(182, 69, 69, 0.1) !important;
}

.consent.is-invalid {
  padding: 10px 12px;
  border: 1px solid rgba(182, 69, 69, 0.35);
  border-radius: 10px;
  background: #fffafa;
}

.form-status.is-error {
  color: #8c2d2d;
  background: #fff0f0;
}

.nah-fallback-layer {
  z-index: 120;
}

.nah-fallback-order .order-product-lock {
  grid-template-columns: minmax(0, 1fr) auto;
}

.nah-fallback-detail .nah-fallback-detail-buy {
  width: 100%;
  min-height: 48px;
}

body.nah-fallback-active .floating-contact {
  display: none !important;
}

@media (max-width: 700px) {
  html.nah-mobile-optimized [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html.nah-mobile-optimized .hero:after,
  html.nah-mobile-optimized .story__seal {
    animation: none !important;
  }

  .product-card {
    content-visibility: auto;
    contain-intrinsic-size: 720px;
  }

  .modal-layer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    overflow: hidden;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(8, 30, 27, 0.9);
  }

  .detail-modal {
    width: calc(100% - 12px);
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
    margin: 6px;
    padding: 10px 10px calc(70px + env(safe-area-inset-bottom));
    border-radius: 18px;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 9px;
    animation: none;
    overflow: hidden;
  }

  .detail-modal__gallery {
    min-width: 0;
  }

  .detail-modal__gallery .gallery__stage {
    aspect-ratio: auto;
    height: clamp(175px, 34dvh, 260px);
    border-radius: 14px;
  }

  .detail-modal__gallery .gallery__slide {
    object-fit: contain;
    background: var(--jade-pale);
  }

  .detail-modal .gallery__thumbs {
    display: none;
  }

  .detail-modal__copy {
    min-width: 0;
    padding: 0 4px;
  }

  .detail-modal__copy .kicker {
    display: none;
  }

  .detail-modal__copy h2 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 25px;
    line-height: 1.05;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .detail-modal__variant {
    margin: 3px 0 0;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .detail-modal__price {
    margin-top: 5px;
    font-size: 19px;
    line-height: 1.2;
  }

  .detail-modal__copy > p:not(.kicker):not(.detail-modal__variant) {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .detail-modal__copy ul {
    display: none;
  }

  .detail-modal .detail-buy-button,
  .detail-modal .nah-fallback-detail-buy {
    z-index: 9;
    width: auto;
    min-height: 50px;
    margin: 0;
    position: absolute;
    right: 14px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 14px;
    font-size: 13px;
    box-shadow: 0 12px 30px rgba(18, 61, 54, 0.38);
  }

  .detail-modal .modal-close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    font-size: 23px;
  }

  .order-modal {
    width: calc(100% - 12px);
    min-height: 0;
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
    margin: 6px;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 18px;
    animation: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .order-modal__heading {
    padding: 0 38px 0 0;
  }

  .order-modal__heading .kicker {
    display: none;
  }

  .order-modal__heading h2 {
    font-size: 24px;
    line-height: 1.08;
  }

  .order-modal__heading > p:not(.kicker) {
    margin-top: 5px;
    font-size: 10.5px;
    line-height: 1.4;
  }

  .order-modal form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 7px;
    margin-top: 10px;
  }

  .field--wide {
    grid-column: 1 / -1;
  }

  .field {
    min-width: 0;
    gap: 3px;
  }

  .field input,
  .field select,
  .order-modal form button {
    font-size: 16px !important;
  }

  .field input,
  .field select {
    min-height: 42px;
    padding: 0 10px;
    border-radius: 9px;
    transform: none !important;
  }

  .field > span,
  .turnstile-label {
    font-size: 10px;
    line-height: 1.25;
  }

  .order-product-lock,
  .nah-fallback-order .order-product-lock {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 52px;
    gap: 5px 8px;
    padding: 8px 11px;
    border-radius: 11px;
  }

  .order-product-lock > span {
    display: none;
  }

  .order-product-lock:before {
    top: 12px;
    right: 10px;
    width: 22px;
    height: 22px;
  }

  .order-product-lock > strong,
  .order-product-lock > small {
    padding-right: 27px;
    font-size: 12px;
    line-height: 1.25;
  }

  .consent {
    gap: 7px;
    font-size: 10px;
    line-height: 1.3;
  }

  .consent input {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
  }

  .turnstile-field {
    gap: 3px;
  }

  .turnstile-widget {
    min-height: 65px;
    overflow: hidden;
  }

  .turnstile-status,
  .nah-field-error,
  .form-status {
    font-size: 10px;
    line-height: 1.35;
  }

  .order-modal form > .primary-button {
    min-height: 44px;
  }

  .form-status {
    padding: 8px 10px;
  }

  .modal-close {
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
  }

  .order-success-layer {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 700px) and (max-height: 700px) {
  .detail-modal__gallery .gallery__stage {
    height: clamp(160px, 30dvh, 210px);
  }

  .detail-modal__copy > p:not(.kicker):not(.detail-modal__variant) {
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 390px) {
  .order-modal {
    padding-right: 10px;
    padding-left: 10px;
  }

  .order-modal__heading h2 {
    font-size: 22px;
  }
}

@media (max-width: 340px) {
  .order-modal form {
    grid-template-columns: 1fr;
  }

  .field--wide {
    grid-column: auto;
  }
}

html.nah-embedded-webview .site-header,
html.nah-embedded-webview .modal-layer,
html.nah-embedded-webview .order-success-layer {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.nah-embedded-webview *,
html.nah-embedded-webview *:before,
html.nah-embedded-webview *:after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  .modal-layer,
  .order-modal,
  .detail-modal {
    animation: none !important;
  }
}