@media(max-width:800px){
  body[data-customer-view="inicio"] .customer-app-header{display:none}
  body[data-customer-view="inicio"] .page-chrome{padding:0 0 calc(92px + env(safe-area-inset-bottom))!important}
  body[data-customer-view="inicio"]{width:100%!important;overflow-x:clip!important}
  body[data-customer-view="inicio"] .content-layout,body[data-customer-view="inicio"] .shell,body[data-customer-view="inicio"] #page-content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  body[data-customer-view="inicio"] .marketplace-welcome{position:relative;left:50%;width:100vw!important;max-width:none!important;min-height:210px;margin:0 0 0 -50vw!important;padding:calc(30px + env(safe-area-inset-top)) 16px 24px!important;border:0!important;border-radius:0 0 24px 24px!important;background:linear-gradient(145deg,#0b922f,#18aa40);box-shadow:none!important}
  body[data-customer-view="inicio"] .marketplace-home-products{margin:20px 10px 0}
  body[data-customer-view="inicio"] .toast-container{left:10px;right:10px}
  body[data-customer-view="inicio"] .marketplace-welcome h1{font-size:1.35rem!important}
  body[data-customer-view="inicio"] .marketplace-welcome p{margin-top:1px;font-size:.84rem}
  body[data-customer-view="inicio"] .marketplace-cart-shortcut{color:#fff;background:transparent}
  body[data-customer-view="inicio"] .marketplace-cart-shortcut .customer-home-bell{width:25px;height:25px}
  body[data-customer-view="inicio"] .marketplace-search{grid-template-columns:minmax(0,1fr) 42px;gap:0;margin-top:4px;padding:3px 4px 3px 14px;border-radius:16px}
  body[data-customer-view="inicio"] .marketplace-search>.icon{display:none}
  body[data-customer-view="inicio"] .marketplace-search input{min-height:44px!important;padding:0!important;color:#23362a!important;background:#fff!important}
  body[data-customer-view="inicio"] .marketplace-search button{display:grid;width:42px;height:42px;padding:0;place-items:center;color:#32463a;background:#fff}
  body[data-customer-view="inicio"] .marketplace-search button .icon{display:block;width:20px;height:20px}
  body[data-customer-view="inicio"] .marketplace-search button span{display:none}
  .customer-store-context{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:11px 1px 7px;padding:9px 11px;border:1px solid #e1e9e3;border-radius:13px;background:#fff}
  .customer-store-context a{flex:0 0 auto;color:#159b39;font-size:.68rem;font-weight:850;text-decoration:none}
  .customer-store-context span{min-width:0;overflow:hidden;color:#78867d;font-size:.62rem;text-align:right;white-space:nowrap;text-overflow:ellipsis}
  .customer-store-context strong{color:#24412d}
  .marketplace-home-categories{margin:18px 0}
  .marketplace-home-categories .marketplace-section-heading>a{color:#159b39;font-size:.68rem;font-weight:850;text-decoration:none}
  .marketplace-home-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .marketplace-home-category-grid>a{display:flex;min-width:0;min-height:98px;align-items:center;justify-content:center;gap:7px;padding:8px 4px;flex-direction:column;color:#283d2e;border:1px solid #e3e9e4;border-radius:15px;background:#fff;box-shadow:0 6px 16px rgba(15,61,28,.06);text-decoration:none}
  .marketplace-home-category-grid span{display:grid;width:45px;height:45px;place-items:center;color:#fff;border-radius:14px;background:linear-gradient(145deg,#159b39,#08772a);font-size:1.15rem;font-weight:900}
  .marketplace-home-category-grid strong{width:100%;overflow:hidden;font-size:.62rem;text-align:center;white-space:nowrap;text-overflow:ellipsis}
  .marketplace-home-promotion{display:grid;grid-template-columns:minmax(0,1fr) 110px;min-height:130px;align-items:center;gap:10px;margin:0 0 20px;padding:17px;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,#e8f7df,#f5fbef);box-shadow:0 7px 20px rgba(34,96,42,.08)}
  .marketplace-home-promotion small,.marketplace-home-promotion strong,.marketplace-home-promotion span{display:block}
  .marketplace-home-promotion small{color:#159b39;font-size:.65rem;font-weight:900;text-transform:uppercase}
  .marketplace-home-promotion strong{margin:5px 0;color:#11672a;font-size:1.18rem;line-height:1.1}
  .marketplace-home-promotion span{color:#65766a;font-size:.66rem}
  .marketplace-home-promotion img{width:110px;height:105px;object-fit:contain}
  body[data-customer-view="tienda"] .delivery-hero{min-height:0!important;height:auto!important;padding:16px!important;color:#fff!important;border:0!important;border-radius:0 0 22px 22px!important;background:linear-gradient(145deg,#0b922f,#18aa40)!important;box-shadow:none!important}
  body[data-customer-view="tienda"] .delivery-hero h2{margin:0 0 5px!important;color:#fff!important;font-size:1.22rem!important}
  body[data-customer-view="tienda"] .delivery-hero p{margin:0 0 11px!important;color:#e8f8ec!important;font-size:.72rem!important;line-height:1.35!important}
  body[data-customer-view="tienda"] .delivery-search{min-height:48px!important;border:0!important;border-radius:14px!important;background:#fff!important;box-shadow:none!important}
  body[data-customer-view="tienda"] .delivery-search button{background:#fff!important;color:#274332!important}
  body[data-customer-view="tienda"] .customer-store-context{margin:8px 0 5px;padding:8px 10px}
  body[data-customer-view="tienda"] .category-chip.active{color:#fff!important;border-color:#159b39!important;background:#159b39!important}
  body[data-customer-view="tienda"] .product-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  body[data-customer-view="tienda"] .product-card{display:grid!important;grid-template-columns:86px minmax(0,1fr)!important;width:100%!important;min-height:108px!important;height:auto!important;max-height:132px!important;margin:0!important;padding:0!important;overflow:hidden!important;border:1px solid #e3e9e4!important;border-radius:15px!important;background:#fff!important;box-shadow:0 4px 12px rgba(15,61,28,.05)!important}
  body[data-customer-view="tienda"] .product-media{display:grid!important;width:86px!important;min-height:108px!important;height:100%!important;margin:0!important;padding:6px!important;place-items:center!important;background:#f8faf8!important}
  body[data-customer-view="tienda"] .product-media img{width:74px!important;height:88px!important;max-height:88px!important;object-fit:contain!important}
  body[data-customer-view="tienda"] .product-card-body{display:flex!important;min-width:0!important;height:auto!important;margin:0!important;padding:8px 9px!important;flex-direction:column!important;justify-content:center!important}
  body[data-customer-view="tienda"] .product-card-body h2{margin:3px 0!important;font-size:.82rem!important;line-height:1.15!important}
  body[data-customer-view="tienda"] .product-card-body>p{margin:0 0 3px!important;overflow:hidden!important;font-size:.61rem!important;line-height:1.2!important;white-space:nowrap!important;text-overflow:ellipsis!important}
  body[data-customer-view="tienda"] .product-footer{display:grid!important;grid-template-columns:minmax(0,1fr) 34px!important;align-items:center!important;min-height:34px!important;margin:0!important;padding:0!important}
  body[data-customer-view="tienda"] .product-footer .button{display:grid!important;width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;place-items:center!important;color:#fff!important;border-radius:50%!important;background:#159b39!important;font-size:1.25rem!important;line-height:1!important;text-decoration:none!important}
  body[data-customer-view="tienda"] .product-footer .button:after{content:none!important}
  .marketplace-see-all{display:block;margin:11px 0 18px;color:#159b39;text-align:center;font-size:.75rem;font-weight:850;text-decoration:none}
  .marketplace-home-products{margin-top:20px}
  .marketplace-home-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .marketplace-home-product{display:block;min-width:0;padding:7px;color:inherit;border:1px solid #e3e9e4;border-radius:15px;background:#fff;box-shadow:0 8px 24px rgba(15,61,28,.08);text-decoration:none}
  .marketplace-home-product>img{display:block;width:100%;height:92px;object-fit:contain;border-radius:10px;background:#f7faf7}
  .marketplace-home-product span,.marketplace-home-product strong,.marketplace-home-product small,.marketplace-home-product b{display:block}
  .marketplace-home-product strong{margin-top:6px;overflow:hidden;font-size:.66rem;white-space:nowrap;text-overflow:ellipsis}
  .marketplace-home-product small{margin:2px 0 4px;overflow:hidden;color:#7c8981;font-size:.54rem;white-space:nowrap;text-overflow:ellipsis}
  .marketplace-home-product b{color:#159b39;font-size:.72rem}
}

/* Experiencia completa del cliente en computadora. No afecta pantallas de 800 px o menos. */
@media (min-width: 801px) {
  body[data-role="visitante"],
  body[data-role="cliente"] {
    color: #172033;
    background:
      radial-gradient(circle at 8% 0%, rgba(15, 76, 129, .08), transparent 28rem),
      linear-gradient(180deg, #f3f7fb 0, #f8fafc 38rem, #f5f7fa 100%) !important;
  }

  body[data-role="visitante"] .page-chrome,
  body[data-role="cliente"] .page-chrome {
    min-height: 100vh;
    padding: 16px 24px 64px;
  }

  body[data-role="visitante"] .content-layout,
  body[data-role="cliente"] .content-layout {
    width: min(100%, 1440px);
    margin-inline: auto;
    padding: 0;
  }

  body[data-role="visitante"] .customer-app-header,
  body[data-role="cliente"] .customer-app-header {
    position: sticky;
    z-index: 800;
    top: 12px;
    min-height: 68px;
    margin-bottom: 24px;
    padding: 11px 16px;
    border-color: rgba(148, 163, 184, .34);
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .09);
    backdrop-filter: blur(14px);
  }

  body[data-role="visitante"] .customer-app-brand > img,
  body[data-role="cliente"] .customer-app-brand > img {
    width: 44px;
    height: 44px;
    padding: 3px;
    border-radius: 12px;
  }

  body[data-role="visitante"] .customer-app-brand strong,
  body[data-role="cliente"] .customer-app-brand strong { font-size: 1rem; }

  body[data-role="visitante"] .customer-header-stores,
  body[data-role="visitante"] .customer-header-cart,
  body[data-role="visitante"] .customer-header-auth,
  body[data-role="cliente"] .customer-header-stores,
  body[data-role="cliente"] .customer-header-cart,
  body[data-role="cliente"] .customer-header-auth {
    min-height: 42px;
    border-radius: 10px;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
  }

  body[data-role="visitante"] .customer-header-stores:hover,
  body[data-role="visitante"] .customer-header-cart:hover,
  body[data-role="visitante"] .customer-header-auth:hover,
  body[data-role="cliente"] .customer-header-stores:hover,
  body[data-role="cliente"] .customer-header-cart:hover,
  body[data-role="cliente"] .customer-header-auth:hover { transform: translateY(-1px); }

  body.page-catalogo[data-customer-view="tienda"] .delivery-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 180px !important;
    min-height: 230px !important;
    align-items: center !important;
    gap: 32px !important;
    margin: 0 0 16px !important;
    padding: 32px 38px !important;
    overflow: hidden;
    color: #fff;
    border: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(125deg, #0d3159 0%, #0f4c81 55%, #2e9870 100%) !important;
    box-shadow: 0 18px 42px rgba(15, 76, 129, .18) !important;
  }

  body.page-catalogo[data-customer-view="tienda"] .delivery-hero h2 {
    max-width: 760px;
    margin: 0 0 10px !important;
    color: #fff !important;
    font-size: clamp(2rem, 3vw, 3rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em;
  }

  body.page-catalogo[data-customer-view="tienda"] .delivery-hero p {
    max-width: 680px;
    margin: 0 0 22px !important;
    color: #dbeafe !important;
    font-size: .95rem;
  }

  body.page-catalogo[data-customer-view="tienda"] .delivery-hero-visual {
    display: grid !important;
    place-items: center;
  }

  body.page-catalogo[data-customer-view="tienda"] .delivery-hero-visual img {
    width: 150px;
    height: 150px;
    padding: 15px;
    object-fit: contain;
    border-radius: 28px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 35px rgba(6, 24, 44, .2);
  }

  body.page-catalogo[data-customer-view="tienda"] .delivery-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: min(100%, 650px);
    min-height: 50px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(7, 29, 51, .18);
  }

  body.page-catalogo[data-customer-view="tienda"] .delivery-search input {
    min-width: 0;
    padding: 0 13px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.page-catalogo[data-customer-view="tienda"] .delivery-search button {
    min-width: 110px;
    min-height: 42px;
    border-radius: 9px !important;
    background: #f97316 !important;
  }

  body.page-catalogo[data-customer-view="tienda"] .customer-store-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
    padding: 12px 16px;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    background: rgba(255,255,255,.82);
  }

  body.page-catalogo[data-customer-view="tienda"] .customer-store-context a {
    color: #0f4c81;
    font-weight: 850;
    text-decoration: none;
  }

  body.page-catalogo[data-customer-view="tienda"] .category-rail {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    padding: 3px 0 7px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  body.page-catalogo[data-customer-view="tienda"] .category-chip {
    display: inline-flex;
    min-width: max-content;
    min-height: 40px;
    align-items: center;
    padding: 0 16px;
    color: #334155;
    border: 1px solid #d7e1ec;
    border-radius: 999px;
    background: #fff;
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
  }

  body.page-catalogo[data-customer-view="tienda"] .category-chip:hover,
  body.page-catalogo[data-customer-view="tienda"] .category-chip.active {
    color: #fff;
    border-color: #0f4c81;
    background: #0f4c81;
  }

  body.page-catalogo[data-customer-view="tienda"] .product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.page-catalogo[data-customer-view="tienda"] .combo-grid { margin-bottom: 18px; }

  body.page-catalogo[data-customer-view="tienda"] .product-card {
    display: flex !important;
    min-width: 0;
    min-height: 410px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dbe4ee !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 26px rgba(15, 23, 42, .07) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  }

  body.page-catalogo[data-customer-view="tienda"] .product-card:hover {
    border-color: #9fb5ca !important;
    box-shadow: 0 18px 38px rgba(15, 76, 129, .13) !important;
    transform: translateY(-4px);
  }

  body.page-catalogo[data-customer-view="tienda"] .product-media {
    position: relative;
    display: grid !important;
    min-height: 235px;
    padding: 18px;
    place-items: center;
    background: linear-gradient(180deg, #f8fafc, #eef4f8) !important;
  }

  body.page-catalogo[data-customer-view="tienda"] .product-media > a {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
  }

  body.page-catalogo[data-customer-view="tienda"] .product-media img {
    width: 100% !important;
    height: 200px !important;
    max-width: 100%;
    object-fit: contain !important;
    transition: transform 180ms ease;
  }

  body.page-catalogo[data-customer-view="tienda"] .product-card:hover .product-media img { transform: scale(1.035); }

  body.page-catalogo[data-customer-view="tienda"] .product-card-body {
    display: flex !important;
    min-width: 0;
    padding: 17px !important;
    flex: 1;
    flex-direction: column;
  }

  body.page-catalogo[data-customer-view="tienda"] .product-card-body h2 {
    margin: 8px 0 6px !important;
    font-size: 1.02rem !important;
    line-height: 1.25 !important;
  }

  body.page-catalogo[data-customer-view="tienda"] .product-card-body h2 a { color: #14243a; text-decoration: none; }

  body.page-catalogo[data-customer-view="tienda"] .product-card-body > p {
    display: -webkit-box;
    margin: 0 0 14px;
    overflow: hidden;
    color: #64748b;
    font-size: .78rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.page-catalogo[data-customer-view="tienda"] .product-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 13px;
    border-top: 1px solid #edf1f5;
  }

  body.page-catalogo[data-customer-view="tienda"] .product-footer > strong,
  body.page-catalogo[data-customer-view="tienda"] .promo-price-wrap strong { color: #0f4c81; font-size: 1.08rem; }

  body.page-catalogo[data-customer-view="tienda"] .product-footer .button {
    display: grid !important;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    place-items: center;
    border-radius: 12px !important;
    background: #f97316 !important;
    font-size: 1.25rem;
  }

  body.page-carrito .cart-form { width: min(100%, 1320px); margin-inline: auto; }

  body.page-carrito .cart-checkout-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(380px, .75fr);
    align-items: start;
    gap: 22px;
  }

  body.page-carrito .cart-summary-card,
  body.page-carrito .checkout-card {
    overflow: hidden;
    border: 1px solid #dbe4ee !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .08) !important;
  }

  body.page-carrito .checkout-card { position: sticky; top: 108px; }
  body.page-carrito .cart-summary-toolbar,
  body.page-carrito .checkout-card-header { padding: 18px 20px !important; background: #f7fafc !important; }
  body.page-carrito .checkout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 18px 20px; }
  body.page-carrito .checkout-field-wide,
  body.page-carrito .checkout-field-action { grid-column: 1 / -1; }
  body.page-carrito .marketplace-payment-methods { display: grid; gap: 9px; margin: 0; padding: 0 20px 18px; border: 0; }
  body.page-carrito .marketplace-payment-option { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 12px; border: 1px solid #dbe4ee; border-radius: 12px; }
  body.page-carrito .marketplace-payment-option:has(input:checked) { border-color: #2e9870; background: #eef9f4; }
  body.page-carrito .checkout-delivery-fees { margin: 0 20px 20px; }
  body.page-carrito .cart-form > .action-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

  body[data-role="visitante"] .empty-state,
  body[data-role="cliente"] .empty-state {
    max-width: 760px;
    margin: 36px auto;
    padding: 48px 36px !important;
    border: 1px solid #dbe4ee !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .07) !important;
    text-align: center;
  }
}

@media (min-width: 801px) and (max-width: 1180px) {
  body.page-catalogo[data-customer-view="tienda"] .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.page-carrito .cart-checkout-shell { grid-template-columns: 1fr; }
  body.page-carrito .checkout-card { position: static; }
}

/* Responsive para Android/iOS: telefonos compactos, grandes y horizontal. */
@media (max-width: 800px) {
  html { min-width: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-width: 0 !important; width: 100% !important; overflow-x: hidden !important; }
  body *, body *::before, body *::after { box-sizing: border-box; }
  body img, body svg, body video, body canvas { max-width: 100%; }
  body input, body select, body textarea, body button { max-width: 100%; font: inherit; }
  body input, body select, body textarea { font-size: 16px !important; }
  .page-chrome, .content-layout, .shell, #page-content, .delivery-main, .customer-main, .customer-page {
    min-width: 0 !important; width: 100% !important; max-width: 100% !important;
  }
  .customer-app-header {
    width: 100% !important; max-width: none !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  .customer-app-brand, .customer-app-brand span { min-width: 0; }
  .customer-app-brand strong, .customer-app-brand small {
    display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .customer-app-nav {
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important; max-width: 720px !important; margin-inline: auto !important;
    padding-bottom: 4px !important;
  }
  .customer-app-nav a { min-width: 0 !important; touch-action: manipulation; }
  .customer-app-nav a span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .marketplace-welcome, .delivery-hero { width: 100% !important; max-width: none !important; }
  .marketplace-search, .delivery-search { width: 100% !important; min-width: 0 !important; }
  .marketplace-search input, .delivery-search input { min-width: 0 !important; width: 100% !important; }
  .category-list, .category-chips, .store-pills {
    max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .category-list::-webkit-scrollbar, .category-chips::-webkit-scrollbar, .store-pills::-webkit-scrollbar { display: none; }
  .product-grid, .marketplace-home-product-grid { width: 100%; min-width: 0; }
  .product-card, .marketplace-home-product, .product-card-body { min-width: 0 !important; }
  .product-card h2, .product-card p, .marketplace-home-product strong, .marketplace-home-product small { overflow-wrap: anywhere; }
  .customer-store-context { max-width: 100%; }
}

@media (max-width: 359px) {
  body[data-customer-view="inicio"] .marketplace-welcome { padding-inline: 12px !important; }
  body[data-customer-view="inicio"] .marketplace-welcome h1 { padding-right: 38px; font-size: 1.12rem !important; }
  body[data-customer-view="inicio"] .marketplace-welcome p { font-size: .76rem; }
  .marketplace-home-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .marketplace-home-product > img { height: 88px; }
  body[data-customer-view="tienda"] .product-card { grid-template-columns: 76px minmax(0, 1fr) !important; }
  body[data-customer-view="tienda"] .product-media { width: 76px !important; }
  body[data-customer-view="tienda"] .product-media img { width: 66px !important; }
  .customer-app-nav { gap: 1px !important; padding-inline: 3px !important; }
  .customer-app-nav a { padding-inline: 2px !important; }
  .customer-app-nav a span { font-size: .56rem !important; }
  .customer-app-nav .icon { width: 20px !important; height: 20px !important; }
}

@media (min-width: 431px) and (max-width: 800px) {
  body[data-customer-view="inicio"] .marketplace-welcome > *,
  body[data-customer-view="inicio"] .marketplace-home-products,
  body[data-customer-view="tienda"] #page-content > * { max-width: 680px; margin-left: auto; margin-right: auto; }
  .marketplace-home-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .marketplace-home-product > img { height: 120px; }
  body[data-customer-view="tienda"] .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-height: 520px) and (orientation: landscape) and (max-width: 950px) {
  .customer-app-nav { padding-block: 3px !important; }
  .customer-app-nav a { min-height: 48px !important; }
  .customer-app-nav a span { display: none; }
  body[data-customer-view="inicio"] .marketplace-welcome {
    min-height: 0 !important; padding-top: max(14px, env(safe-area-inset-top)) !important; padding-bottom: 14px !important;
  }
}

.customer-session-card {
  display: flex;
  width: min(100%, 760px);
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px auto 110px;
  padding: 16px;
  border: 1px solid #f0d5d5;
  border-radius: 18px;
  background: #fff;
}
.customer-session-card strong, .customer-session-card span { display: block; }
.customer-session-card strong { color: #17251c; font-size: .95rem; }
.customer-session-card > div > span { margin-top: 3px; color: #738078; font-size: .75rem; }
.customer-logout-button {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  color: #b42318;
  border: 1px solid #efb4af;
  border-radius: 12px;
  background: #fff5f4;
  font-weight: 800;
  text-decoration: none;
  touch-action: manipulation;
}
.customer-logout-button .icon { width: 18px; height: 18px; }

/* Catalogo del cliente en computadora: la vista movil conserva su diseno propio. */
@media (min-width: 801px) {
  body.page-catalogo .customer-app-header {
    display: flex !important;
    width: min(100%, 1440px);
    min-height: 62px;
    align-items: center;
    gap: 16px;
    margin: 0 auto 16px;
    padding: 10px 14px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  }

  body.page-catalogo .customer-app-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: #112033;
    text-decoration: none;
  }

  body.page-catalogo .customer-app-brand > img {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    object-fit: contain;
    border: 1px solid #d7e1ec;
    border-radius: 10px;
    background: #ffffff;
  }

  body.page-catalogo .customer-app-brand span,
  body.page-catalogo .customer-app-brand strong,
  body.page-catalogo .customer-app-brand small {
    display: block;
  }

  body.page-catalogo .customer-app-brand strong {
    font-size: 0.94rem;
    line-height: 1.1;
  }

  body.page-catalogo .customer-app-brand small {
    margin-top: 3px;
    color: #607086;
    font-size: 0.7rem;
  }

  body.page-catalogo .customer-app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  body.page-catalogo .customer-header-stores,
  body.page-catalogo .customer-header-cart,
  body.page-catalogo .customer-header-auth {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid #d7e1ec;
    border-radius: 8px;
    color: #112033;
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
  }

  body.page-catalogo .customer-header-stores {
    color: #0f4c81;
    border-color: #bfd5ea;
    background: #e8f2fb;
  }

  body.page-catalogo .customer-header-stores:hover {
    color: #ffffff;
    border-color: #0f4c81;
    background: #0f4c81;
  }

  body.page-catalogo .customer-header-cart {
    position: relative;
  }

  body.page-catalogo .customer-header-cart .icon {
    width: 18px;
    height: 18px;
  }

  body.page-catalogo .customer-header-cart:hover,
  body.page-catalogo .customer-header-auth:hover {
    border-color: #9fb5ca;
    background: #f8fbff;
  }

  body.page-catalogo .customer-header-login,
  body.page-catalogo .customer-header-account {
    color: #ffffff;
    border-color: #0f4c81;
    background: #0f4c81;
  }

  body.page-catalogo .customer-header-login:hover,
  body.page-catalogo .customer-header-account:hover {
    color: #ffffff;
    border-color: #0a3156;
    background: #0a3156;
  }

  body.page-catalogo .customer-header-register {
    color: #ffffff;
    border-color: #f97316;
    background: #f97316;
  }

  body.page-catalogo .customer-header-register:hover {
    color: #ffffff;
    border-color: #d85f08;
    background: #d85f08;
  }

  body.page-catalogo .customer-header-logout {
    color: #9f1239;
    border-color: #fecdd3;
    background: #fff1f2;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 260px;
    align-content: center;
    gap: 18px;
    margin: 0 0 22px;
    padding: 32px 28px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-welcome-copy {
    max-width: 820px;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-welcome h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(2rem, 3.4vw, 3.15rem);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -0.035em;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-welcome p {
    margin: 13px 0 0;
    color: #475569;
    font-size: 1rem;
    line-height: 1.5;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-search {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    width: min(100%, 620px);
    min-height: 48px;
    margin-top: 4px;
    padding: 3px 4px 3px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-search:focus-within {
    border-color: #2e9870;
    box-shadow: 0 0 0 3px rgba(46, 152, 112, 0.14), 0 10px 22px rgba(15, 23, 42, 0.08);
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-search input {
    min-width: 0;
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    box-shadow: none;
    color: #0f172a;
    background: #ffffff;
    font-size: 0.92rem;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-search button {
    display: inline-flex;
    min-width: 96px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 17px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    background: #2e9870;
    font-size: 0.86rem;
    font-weight: 850;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-search button:hover {
    background: #217756;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-products {
    margin: 0;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-section-heading span {
    color: #2e9870;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-section-heading h2 {
    margin: 4px 0 0;
    color: #112033;
    font-size: 1.45rem;
    line-height: 1.2;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product {
    display: flex;
    min-width: 0;
    min-height: 292px;
    flex-direction: column;
    padding: 10px;
    overflow: hidden;
    color: inherit;
    border: 1px solid #d7e1ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product:hover {
    border-color: #b8c8dc;
    box-shadow: 0 12px 30px rgba(6, 43, 95, 0.12);
    transform: translateY(-2px);
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product > img {
    display: block;
    width: 100%;
    height: 190px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 10px;
    background: #f4f8fc;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product > span,
  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product strong,
  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product small,
  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product b {
    display: block;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product > span {
    min-width: 0;
    margin-top: auto;
    padding: 10px 2px 2px;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product strong,
  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product strong {
    color: #112033;
    font-size: 0.9rem;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product small {
    margin: 4px 0 7px;
    color: #607086;
    font-size: 0.72rem;
  }

  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product b {
    color: #2e9870;
    font-size: 0.9rem;
  }
}

@media (max-width: 800px) {
  .customer-header-stores,
  .customer-header-action-label,
  .customer-header-auth {
    display: none !important;
  }
}

@media (min-width: 801px) and (max-width: 1080px) {
  body.page-catalogo[data-customer-view="inicio"] .marketplace-home-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .customer-session-card { align-items: stretch; flex-direction: column; margin-inline: 10px; width: auto; }
  .customer-logout-button { width: 100%; }
}

/* Vista de tiendas para computadora: mantiene el flujo del catalogo sin dejarlo plano. */
@media (min-width: 801px) {
  body.page-catalogo[data-customer-view="tiendas"] .marketplace-welcome {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 220px;
    align-content: center;
    gap: 16px;
    margin: 0 0 22px;
    padding: 30px 28px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-welcome-copy {
    max-width: 760px;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-overline,
  body.page-catalogo[data-customer-view="tiendas"] .marketplace-section-heading span {
    color: #2e9870;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-welcome h1 {
    margin: 6px 0 0;
    color: #0f172a;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -0.035em;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-welcome p {
    margin: 11px 0 0;
    color: #475569;
    font-size: 1rem;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-search {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    width: min(100%, 620px);
    min-height: 48px;
    margin-top: 4px;
    padding: 3px 4px 3px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-search input {
    min-width: 0;
    min-height: 40px;
    padding: 0 4px;
    border: 0;
    box-shadow: none;
    color: #0f172a;
    background: #ffffff;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-search button {
    display: inline-flex;
    min-width: 96px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 17px;
    border: 0;
    border-radius: 7px;
    color: #ffffff;
    background: #2e9870;
    font-size: 0.86rem;
    font-weight: 850;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-stores-section {
    margin: 0;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 12px;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-section-heading h2 {
    margin: 4px 0 0;
    color: #112033;
    font-size: 1.45rem;
    line-height: 1.2;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-section-heading small {
    color: #607086;
    font-size: 0.78rem;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    min-height: 164px;
    overflow: hidden;
    color: inherit;
    border: 1px solid #d7e1ec;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-card:hover {
    border-color: #9fb5ca;
    box-shadow: 0 12px 30px rgba(6, 43, 95, 0.12);
    transform: translateY(-2px);
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-logo {
    display: grid;
    min-width: 0;
    place-items: center;
    padding: 14px;
    background: #f4f8fc;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-logo img {
    width: 82px;
    height: 82px;
    object-fit: contain;
    border-radius: 12px;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-info {
    min-width: 0;
    padding: 14px;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-status span {
    display: inline-flex;
    padding: 3px 7px;
    color: #147630;
    border-radius: 8px;
    background: #e5f8e9;
    font-size: 0.58rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-card.is-closed .marketplace-store-status span {
    color: #9a3412;
    background: #fff1e8;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-info h3 {
    margin: 7px 0 3px;
    overflow: hidden;
    color: #112033;
    font-size: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-info p {
    margin: 0;
    overflow: hidden;
    color: #607086;
    font-size: 0.72rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 15px;
    color: #607086;
    font-size: 0.68rem;
  }

  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-meta strong {
    color: #2e9870;
    white-space: nowrap;
  }
}

@media (min-width: 801px) and (max-width: 1080px) {
  body.page-catalogo[data-customer-view="tiendas"] .marketplace-store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Login de computadora: composición simple y estable, sin panel partido. */
@media (min-width: 801px) {
  body.page-login .login-shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    min-height: 100svh !important;
    padding: 32px !important;
    background: linear-gradient(180deg, #eef4f9, #f8fbff) !important;
  }

  body.page-login .login-mobile-logo {
    display: none !important;
  }

  body.page-login .compact-login-card {
    align-self: center !important;
    width: min(100%, 430px) !important;
    max-width: 430px !important;
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid #d7e1ec !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12) !important;
    transform: none !important;
  }

  body.page-login .compact-login-card .auth-card-head {
    display: block !important;
    grid-template-columns: none !important;
    margin-top: 0 !important;
    text-align: left !important;
  }

  body.page-login .login-return-row {
    position: static !important;
    margin: 0 0 16px !important;
  }

  body.page-login .login-return-row .button {
    min-height: 36px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    color: #0f4c81 !important;
    background: #ffffff !important;
  }
}

/* Encabezado del cliente en todas sus pantallas de computadora. */
@media (min-width: 801px) {
  .customer-app-header {
    display: flex !important;
    width: min(100%, 1440px);
    min-height: 62px;
    align-items: center;
    gap: 16px;
    margin: 0 auto 16px;
    padding: 10px 14px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
  }

  .customer-app-brand {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: #112033;
    text-decoration: none;
  }

  .customer-app-brand > img {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    object-fit: contain;
    border: 1px solid #d7e1ec;
    border-radius: 10px;
    background: #ffffff;
  }

  .customer-app-brand span,
  .customer-app-brand strong,
  .customer-app-brand small {
    display: block;
  }

  .customer-app-brand strong {
    font-size: 0.94rem;
    line-height: 1.1;
  }

  .customer-app-brand small {
    margin-top: 3px;
    color: #607086;
    font-size: 0.7rem;
  }

  .customer-app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .customer-header-stores,
  .customer-header-cart,
  .customer-header-auth {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid #d7e1ec;
    border-radius: 8px;
    color: #112033;
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
  }

  .customer-header-stores {
    color: #0f4c81;
    border-color: #bfd5ea;
    background: #e8f2fb;
  }

  .customer-header-stores:hover,
  .customer-header-cart:hover,
  .customer-header-auth:hover {
    border-color: #9fb5ca;
    background: #f8fbff;
  }

  .customer-header-stores:hover {
    color: #ffffff;
    border-color: #0f4c81;
    background: #0f4c81;
  }

  .customer-header-cart {
    position: relative;
  }

  .customer-header-cart .icon {
    width: 18px;
    height: 18px;
  }

  .customer-header-login,
  .customer-header-account {
    color: #ffffff;
    border-color: #0f4c81;
    background: #0f4c81;
  }

  .customer-header-login:hover,
  .customer-header-account:hover {
    color: #ffffff;
    border-color: #0a3156;
    background: #0a3156;
  }

  .customer-header-register {
    color: #ffffff;
    border-color: #f97316;
    background: #f97316;
  }

  .customer-header-register:hover {
    color: #ffffff;
    border-color: #d85f08;
    background: #d85f08;
  }

  .customer-header-logout {
    color: #9f1239;
    border-color: #fecdd3;
    background: #fff1f2;
  }
}
