/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* Fit portrait videos inside the viewport instead of sizing them by width alone. */
#vmodal .modal-dialog.videoshort {
  width: calc(100% - 32px);
  max-width: 500px;
  margin: 16px auto;
}
#vmodal .videoshort .modal-header {
  align-items: center;
  gap: 16px;
  padding: 16px 24px !important;
  text-transform: none !important;
}
#vmodal .videoshort .modal-header .h4 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-btn-lg);
  font-weight: 500;
  line-height: 1.4;
}
#vmodal .videoshort .modal-header .close { flex-shrink: 0; }
#vmodal .videoshort .modal-body { padding: 16px 24px !important; }
#vmodal .videoshort iframe {
  width: min(100%, calc(56.25vh - 123.75px));
  width: min(100%, calc(56.25dvh - 123.75px));
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0 auto;
}

/* Keep the shipping selector independent of the mobile category menu styles. */
.pm-shipping-selector .dropdown-menu .dropdown-item {
  width: 100%;
  margin: 0;
  padding: .65rem 1rem;
  border: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
}

.extra-content-menu .pm-shipping-selector {
  margin: .75rem .75rem .75rem 0;
}

.extra-content-menu .pm-shipping-selector.open .dropdown-menu,
.extra-content-menu .pm-shipping-selector.show .dropdown-menu {
  top: auto;
  bottom: calc(100% + .75rem);
  right: 0;
  left: auto;
  width: max-content;
  min-width: 10rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
  margin: 0;
  padding: .5rem 0;
  background: #fff;
  border: 1px solid var(--border-color);
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .12);
}

/* .form-control-div usa el shorthand border: con var(--border-color), así que
   pisa el border-color de .is-invalid. Redefinimos la variable en el error */
.form-control-div.is-invalid {
  --border-color: var(--danger-color);
}