/* Profile-only presentation. Product and cart styles come from all-prod-shoppers. */

.wpb_video_widget.vc_video-aspect-ratio-235 .wpb_video_wrapper {
  padding-top: 90%;
}

/* ============================================================
   Redes sociales centradas (en vez de a la izquierda) y botones "Envío
   internacional" / "Envío dentro de EE. UU." con el ícono de play circular
   a la izquierda del texto (sin el ícono de mundo/bandera).
   Solo la Live Store del shopper: en la del seller las redes se quedan a
   la izquierda (associated_inventory.css, compartido, no se toca).
   ============================================================ */

.seller-live-store-top #redesAsocDiv .redesAsocHTMLcontainer .redesUl {
  justify-content: center !important;
}

/* En associated_inventory.css #redesAsocDiv solo ocupa grid-column:1 (deja
   la columna 2 libre, donde antes iba el botón Follow al lado). Con Follow
   ya movido a su propia fila (.mdp-shopper-actions-row), aquí no hay nada
   más compartiendo esta fila — así que se expande a las dos columnas para
   que el centrado sea sobre el ancho completo de la tarjeta, no solo el de
   la columna angosta. */
.seller-live-store-top #redesAsocDiv {
  grid-column: 1 / -1 !important;
}

/* Mismo ::before genérico compartido (ver .live-deals-notice más abajo),
   esta vez sobre el propio grid #landinAsocContainer: al ser display:grid,
   ese ::before entra como un ítem fantasma más y descuadra el resto de
   las celdas (redes, howto, etc.) — por eso se veía descentrado en mobile. */
.seller-live-store-top #landinAsocContainer::before {
  content: none !important;
  display: none !important;
}

.mdp-shopper-howto .accordion-panel .accordion .accordion-trigger {
  justify-content: flex-start !important;
  gap: 14px !important;
}

.mdp-shopper-howto .accordion-panel .accordion .accordion-trigger .chevron {
  margin-left: 0 !important;
  flex-shrink: 0;
}

.seller-live-store-top #landinAsocContainer > .live-deals-notice {
  grid-column: 1 / -1;
  /* Fila 5: la 4 ahora la ocupa .mdp-shopper-actions-row (Follow + Cita
     privada), debajo de las redes sociales. */
  grid-row: 5;
}

/* ============================================================
   Follow (40%) + Cita privada (60%) — fila propia debajo de las redes
   sociales, solo en la Live Store del shopper (associated_inventory.css,
   compartido con la del seller, no se toca).
   ============================================================ */

.seller-live-store-top #landinAsocContainer > .mdp-shopper-actions-row {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  gap: 10px;
  width: 100%;
}

/* Mismo ::before genérico compartido que afectaba a .live-deals-notice y
   .mdp-seller-embed-toprow — se neutraliza preventivamente aquí también. */
.mdp-shopper-actions-row::before {
  content: none !important;
  display: none !important;
}

/* 40%/60% con flex-grow (no width%) a proposito: el padre tiene
   "gap: 10px" entre los dos botones, y width:40%/60% + gap sumaban MAS del
   100% del contenedor (el gap se agrega aparte, no se resta del ancho) —
   por eso "Cita privada" se salia por la derecha sin dejar espacio. Con
   flex-basis:0 y flex-grow en proporcion 2:3, flexbox reparte el ancho que
   sobra DESPUES de descontar el gap, así los dos botones + el gap siempre
   suman exactamente el 100% del contenedor. */
.mdp-shopper-actions-row .seguirShopper_span {
  flex: 2 1 0;
  min-width: 0;
}

/* Mayor especificidad que ".seller-live-store-top button.seguirShopper"
   (associated_inventory.css) para ganarle a sus !important de ancho fijo. */
.seller-live-store-top .mdp-shopper-actions-row button.seguirShopper {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 10px !important;
}

.mdp-cita-privada-btn {
  display: flex !important;
  flex: 3 1 0;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-width: 0;
  height: 52px;
  border-radius: 999px !important;
  background: #0962f5 !important;
  color: #fff !important;
  font: 800 16px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  text-decoration: none !important;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px !important;
  box-sizing: border-box;
  white-space: nowrap;
}

.mdp-cita-privada-btn:hover,
.mdp-cita-privada-btn:visited,
.mdp-cita-privada-btn:active {
  color: #fff !important;
}

.mdp-cita-privada-btn:hover {
  opacity: 0.88;
}

.mdp-cita-privada-btn i {
  color: #fff !important;
  font-size: 0.95em;
}

@media (max-width: 640px) {
  .seller-live-store-top .mdp-shopper-actions-row button.seguirShopper {
    height: 44px !important;
    font-size: 15px !important;
  }

  .mdp-cita-privada-btn {
    height: 44px;
    font-size: 14px;
    gap: 6px;
  }
}

@media (max-width: 450px) {
  .seller-live-store-top .mdp-shopper-actions-row button.seguirShopper {
    height: 39px !important;
    font-size: 13px !important;
  }

  .mdp-cita-privada-btn {
    height: 39px;
    font-size: 12px;
  }
}

.live-deals-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 84px;
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 16px 22px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #f8fbff;
  text-align: left;
}

/* Neutraliza un ::before genérico (de un reset/clearfix compartido en otra
   hoja de estilos) que aparecía dentro de esta caja sin ningún propósito. */
.live-deals-notice::before {
  content: none !important;
  display: none !important;
}

.live-deals-notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: #e5f0ff;
  color: #1688f0;
  font-size: 26px;
}

.live-deals-notice-content h4 {
  margin: 0 0 3px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.live-deals-notice-content p {
  margin: 0;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.mdp-profile-products-error {
  width: min(760px, calc(100% - 28px));
  margin: 20px auto;
  padding: 14px 16px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #991b1b;
  font: 600 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .live-deals-notice {
    gap: 12px;
    min-height: 72px;
    padding: 14px 16px;
  }

  .live-deals-notice-icon {
    width: 46px;
    height: 46px;
    min-width: 46px;
    font-size: 21px;
  }

  .live-deals-notice-content h4 {
    font-size: 15px;
  }

  .live-deals-notice-content p {
    font-size: 12px;
  }
}

@media (max-width: 395px) {
  .live-deals-notice-content h4 {
    font-size: 13px;
  }
}

/* ============================================================
   "Venta directa de {seller}" — carrusel embebido de productos
   de la cuenta de seller de un shopper (asocmeta.2ndAccount).
   El catálogo en sí (tarjetas, carrusel) lo estiliza el plugin
   mydealPay/all-prod-sellers/style.css; aquí solo va el header
   propio de este contexto y el popup informativo.
   ============================================================ */

.mdp-seller-embed {
  /* Sin max-width propio a propósito: el catálogo del shopper justo arriba
     (#asocProdContentDiv) tampoco lo tiene, y las tarjetas de producto
     (.product, width en %) deben verse del mismo tamaño en ambos catálogos
     de esta misma página. Un cap aquí las hacía ver más chicas que en la
     tienda real del seller. */
  width: 100%;
  margin: 22px auto 0;
  padding: 0 4px;
  box-sizing: border-box;
}

.mdp-seller-embed[hidden] {
  display: none !important;
}

/* El título ahora es corto ("Venta directa", sin el nombre) así que le
   alcanza el ancho para compartir fila con "Ver todos" incluso en mobile;
   el subtítulo (con el nombre) va debajo, en su propia fila a lo ancho. */
.mdp-seller-embed-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px 12px;
}

.mdp-seller-embed-toprow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

/* Neutraliza un ::before genérico (mismo reset/clearfix compartido que
   afectaba a .live-deals-notice) que aparecía dentro de esta fila. */
.mdp-seller-embed-toprow::before {
  content: none !important;
  display: none !important;
}

.mdp-seller-embed-info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mdp-seller-embed-title {
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
}

.mdp-seller-embed-info-icon {
  color: #9ca3af;
  font-size: 1rem;
}

.mdp-seller-embed-subtitle {
  margin: 3px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}

.mdp-seller-embed-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 2px;
  border: none;
  background: none;
  color: #0962f5;
  font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.mdp-seller-embed-viewall:hover {
  color: #0350d9;
}

.mdp-seller-embed-viewall i {
  font-size: 0.75rem;
}

.mdp-seller-embed-viewall[hidden] {
  display: none !important;
}

/* ---------- Popup "Venta directa" (bottom sheet en mobile, modal centrado en desktop) ---------- */

.mdp-seller-info-sheet {
  position: fixed;
  inset: 0;
  z-index: 10030;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mdp-seller-info-sheet[hidden] {
  display: none !important;
}

.mdp-seller-info-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mdp-seller-info-sheet.is-open .mdp-seller-info-sheet-backdrop {
  opacity: 1;
}

.mdp-seller-info-sheet-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 10px 24px 26px;
  border-radius: 20px 20px 0 0;
  background: #fff;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.28s ease;
}

.mdp-seller-info-sheet.is-open .mdp-seller-info-sheet-panel {
  transform: translateY(0);
}

.mdp-seller-info-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 6px auto 16px;
  border-radius: 999px;
  background: #e2e5eb;
}

.mdp-seller-info-sheet-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #f3f4f6;
  color: #374151;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.mdp-seller-info-sheet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 6px auto 16px;
  border: 2px solid #0962f5;
  border-radius: 50%;
  color: #0962f5;
  font-size: 22px;
}

.mdp-seller-info-sheet-panel h3 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 1.2rem;
  font-weight: 800;
}

.mdp-seller-info-sheet-text {
  margin: 0 0 8px;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.4;
}

.mdp-seller-info-sheet-ok {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 0;
  border: none;
  border-radius: 12px;
  background: #0962f5;
  color: #fff;
  font: 700 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
}

.mdp-seller-info-sheet-ok:hover {
  background: #0350d9;
}

@media (min-width: 560px) {
  .mdp-seller-info-sheet {
    align-items: center;
  }

  .mdp-seller-info-sheet-panel {
    border-radius: 20px;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: transform 0.22s ease, opacity 0.22s ease;
  }

  .mdp-seller-info-sheet.is-open .mdp-seller-info-sheet-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .mdp-seller-info-sheet-handle {
    display: none;
  }
}

/* ============================================================
   Catálogo del shopper oculto mientras NO está en vivo (columna
   `onLive` de asocmeta) — el aviso de arriba cambia de texto y el
   catálogo (#asocProdContentDiv, del shortcode mydealPay_all_prod_shopper)
   simplemente no se muestra hasta que vuelva a transmitir.
   ============================================================ */
.live-deals-notice-content p[hidden] {
  display: none !important;
}

.mdp-shopper-not-live #asocProdContentDiv {
  display: none !important;
}