/* ===== Amazon-like top bar (desktop + mobile) ===== */
:root{
  --az-green:#00453e;
  --az-green-darker:#013b35;
  --az-text:#e6e6e6;
  --az-white:#fff;
  --az-yellow:#ffd814;
  --az-border:#2a4b45;
  --az-sub-bg:#0f1111;
  /* ancho base mínimo del header en desktop */
  --az-fixed-width:1024px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:#f5f6f6}

/* ===== Desktop header ===== */
.az-header{
  min-width: var(--az-fixed-width);
  background:var(--az-green);
  color:var(--az-text);
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 2px 0 rgba(0,0,0,.1);
}

/* fila superior */
.az-row{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
}
.az-logo img{height:55px;display:block}
.az-hamburger{background:transparent;border:0;padding:6px;cursor:pointer}
.az-hamburger span{display:block;width:18px;height:2px;background:var(--az-text);margin:3px 0}

.az-deliver{display:flex;flex-direction:column;line-height:1;color:var(--az-text);text-decoration:none;padding:2px 8px;border-radius:4px}
.az-deliver:hover{outline:1px solid var(--az-border)}
.az-deliver .line1{font-size:11px;color:#cfd8d5}
.az-deliver .line2{font-size:12px;font-weight:700;color:var(--az-white)}

.az-search{flex:1;display:flex;align-items:center;background:#fff;border-radius:6px;overflow:hidden}
.az-select{border:0;background:#eef3f3;padding:9px 8px;font-size:13px}
.az-input{flex:1;border:0;padding:10px 12px;font-size:14px}
.az-input:focus{outline:none}
.az-btn-search{border:0;background:#febd69;padding:10px 14px;cursor:pointer}

.az-lang,.az-account{position:relative}
.az-lang-btn,.az-account-btn{background:transparent;border:0;color:var(--az-text);cursor:pointer;text-align:left}
.az-account-btn .small{display:block;font-size:11px;color:#cfd8d5}
.az-account-btn .big{font-size:13px;font-weight:700;color:#fff}
.az-returns{color:#fff;text-decoration:none;padding:6px 8px}
.az-returns .small{display:block;font-size:11px;color:#cfd8d5}
.az-returns .big{font-size:13px;font-weight:700}
.az-cart{display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;padding:6px 8px}
.az-cart-count{background:#f08804;color:#111;border-radius:10px;padding:0 6px;font-weight:700}
.az-cart-text{font-size:13px;font-weight:700}

/* submenú desktop */
.az-sub{
  display:flex;align-items:center;gap:14px;
  padding:8px 10px;border-top:1px solid var(--az-border);
  background:var(--az-green-darker);color:#fff
}
.az-sub a{color:#fff;text-decoration:none;font-size:14px;padding:6px 8px;border-radius:4px}
.az-sub a:hover{outline:1px solid var(--az-border)}
.az-sub .az-all{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06)}
.az-sub .az-sub-right{margin-left:auto}
.az-sub .pill{background:var(--az-yellow);color:#111;border-radius:999px;padding:6px 12px;font-weight:700}

/* flyouts */
.az-flyout{z-index:9999;display:none;position:absolute;top:100%;right:0;background:#fff;color:#111;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.2);min-width:220px;padding:10px;margin-top:6px}
.az-flyout.wide{min-width:540px;max-width:680px;right:0;padding:16px}
.az-flyout.show{display:block}
.az-flyout a{display:block;color:#111;text-decoration:none;padding:6px 8px;border-radius:6px}
.az-flyout a:hover{background:#f3f3f3}
.az-flyout h4{margin:8px 8px 4px;font-size:13px;color:#444}
.az-fly-col{min-width:240px}
.az-cta{display:inline-block;background:var(--az-yellow);padding:8px 12px;border-radius:6px;font-weight:700;margin:4px 8px;color:#111}
.az-note{font-size:12px;color:#555;margin:4px 8px}

/* drawer */
.az-drawer{position:fixed;inset:0 auto 0 0;width:320px;background:#fff;transform:translateX(-100%);transition:transform .25s ease;z-index:1001;box-shadow:2px 0 16px rgba(0,0,0,.2);display:flex;flex-direction:column}
.az-drawer.open{transform:translateX(0)}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1000}
.backdrop.show{opacity:1;pointer-events:auto}
.no-scroll{overflow:hidden}
.az-drawer-header{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #eee;background:#f8f8f8}
.az-drawer-header .close{background:transparent;border:0;font-size:18px;cursor:pointer}
.az-drawer-header .title{font-weight:700}
.az-drawer-body{padding:10px 0;overflow:auto}
.az-section{padding:6px 0;border-bottom:1px solid #eee}
.az-section-title{font-size:13px;color:#555;padding:6px 14px}
.az-section a{display:block;color:#111;text-decoration:none;padding:8px 14px}
.az-section a:hover{background:#f6f6f6}

/* layout general */
.container{max-width:1200px;margin:24px auto;padding:0 16px}

/* ===== Reglas para ancho mínimo fijo del header en desktop ===== */
/* Quita límites/centrado de filas del header y fija un ancho mínimo */
.az-header .az-row,
.az-header .az-sub{
  max-width:none !important;
  margin:0 !important;
  min-width:var(--az-fixed-width);
  white-space:nowrap;
  flex-wrap:nowrap;
}
/* Estos bloques no se encogen */
.az-header .az-logo,
.az-header .az-deliver,
.az-header .az-lang,
.az-header .az-account,
.az-header .az-returns,
.az-header .az-cart{ flex:0 0 auto; }
/* El buscador sí es flexible (con base mínima) */
.az-header .az-search{ flex:1 0 360px; min-width:360px; }

/* ===== Mobile header (3 filas) ===== */
.mz-mobile{display:none;background:#00453e;color:#fff;border-bottom:1px solid #2a4b45}
.mz-logo img{height:55px;display:block}
.mz-row{display:flex;align-items:center;gap:10px;padding:8px 10px}
.mz-row-1{justify-content:flex-start}

/* Identifícate (una sola definición, texto plano) */
.mz-identify{white-space: nowrap;
  margin-left:auto;color:#fff;font-size:13px;font-weight:600;
  text-decoration:none;padding:2px 0;line-height:1;
}
.mz-identify:hover{opacity:.95; }

.mz-icon{color:#fff;text-decoration:none;font-size:18px;padding:6px}

/* pestañas móviles */
.mz-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;           /* sigue pudiendo desplazarse */
    overflow-y:hidden;
    white-space:nowrap;
    -webkit-overflow-scrolling: touch;
	scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge antiguo */
  }
.mz-tabs::-webkit-scrollbar{ display:none; } /* Chrome/Safari/Edge */
.mz-tabs a{
  white-space:nowrap;text-decoration:none;font-size:13px;color:#fff;
  background:rgba(255,255,255,.1);padding:6px 10px;border-radius:999px;
  border:1px solid #2a4b45;
}
.mz-tabs a:hover{background:rgba(255,255,255,.18)}
  /* (opcional) estiliza la barra de scroll en navegadores webkit */
  .mz-tabs::-webkit-scrollbar{ height: 6px; }
  .mz-tabs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.25); border-radius: 999px; }
  .mz-tabs::-webkit-scrollbar-track{ background: transparent; }
}
/* Mostrar texto "Carrito" por defecto */
.az-cart .az-cart-text { display: inline; }

/* Cuando el ancho de la ventana sea menor a 1100px, ocultar el texto */
@media (max-width: 1100px){
  .az-cart .az-cart-text { display: none; }
  .az-cart { gap: 4px; }            /* opcional: reduce el espacio */
}

/* ===== SOLO móvil: ocultar header desktop, mostrar móvil ===== */
@media (max-width:600px){
  .az-header .az-row,
  .az-header .az-sub{ display:none !important; }
  .mz-mobile{ display:block; }
}

/* ===== FLAGS ===== */
.fls{
  vertical-align:middle;
}

/* ===== Móvil: barra Entregar a [ZIP] + sheet + LISTO ===== */
@media (max-width:600px){
  .mz-row-4{ padding:0; }
  .mz-ship{
    display:flex;align-items:center;gap:10px;width:100%;
    padding:10px 12px;background:#0e7465;color:#e9f5f3;text-decoration:none;
    border-top:1px solid #08382f;border-bottom:1px solid #08382f;
  }
  .mz-ship-pin{font-size:16px;line-height:1}
  .mz-ship-text{flex:1;min-width:0;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:700;color:#fff}
  .mz-ship-text .act{color:#c8ffe9;font-weight:700}
  .mz-ship-caret{margin-left:auto;opacity:.95;font-size:16px;line-height:1}

  .mz-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:9998}
  .mz-backdrop.show{opacity:1;pointer-events:auto}

  .mz-sheet{
    position:fixed;left:0;right:0;bottom:-100%;background:#fff;border-radius:12px 12px 0 0;
    box-shadow:0 -4px 20px rgba(0,0,0,.25);transition:bottom .35s cubic-bezier(.4,0,.2,1);
    z-index:9999;display:flex;flex-direction:column;max-height:80vh;overflow:visible;
  }
  .mz-sheet.show{bottom:0}

  .mz-sheet-header{padding:14px 16px;border-bottom:1px solid #ddd}
  .mz-sheet-title{font-weight:700;font-size:15px;color:#111}
  .mz-sheet-body{flex:1;overflow-y:auto;padding:16px;font-size:14px;color:#222}
  .mz-sheet-text{margin-bottom:12px;color:#333;line-height:1.4}
  .mz-sheet-btn{display:block;width:100%;text-align:center;padding:10px 0;border-radius:999px;border:1px solid #ccc;background:#f2f2f2;color:#111;font-weight:600;margin-bottom:12px;text-decoration:none}
  .mz-sheet-btn.yellow{background:#ffd814;border-color:#f0c400}
  .mz-sheet-link{display:block;color:#007185;font-size:13px;text-decoration:none;padding:6px 0}
  .mz-sheet-link:hover{text-decoration:underline}

  /* “Listo” texto blanco arriba-derecha, sin fondo negro */
  .mz-sheet-footer{display:none}
  .mz-sheet-done{
    display:none;position:absolute;right:12px;top:-24px;z-index:10001;
    background:transparent;border:0;box-shadow:none;padding:0;
    color:#fff;font-weight:800;font-size:12px;letter-spacing:.06em;line-height:1;cursor:pointer;
  }
  .mz-sheet.show .mz-sheet-done{display:inline-block}
}
/* Garantía: nunca mostrar LISTO en desktop */
@media (min-width:601px){
  .mz-sheet-done{display:none !important;}
}

/* ===== Panel Cuenta (slide-in right) ===== */
.mz-acc{
  position:fixed; top:0; bottom:0; right:-100%;
  width:88%; max-width:420px;
  background:#fff; color:#111;
  z-index:10001; /* por encima del backdrop móvil */
  box-shadow:-4px 0 20px rgba(0,0,0,.25);
  transition:right .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.mz-acc.show{ right:0; }

.mz-acc-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid #ddd;
}
.mz-acc-title{ font-weight:700; font-size:15px; }
.mz-acc-close{
  background:transparent; border:0; color:#007185; font-weight:800;
  letter-spacing:.06em; cursor:pointer;
}

.mz-acc-body{ flex:1; overflow:auto; padding:12px 16px 18px; }
.mz-acc-block{ border-bottom:1px solid #eee; padding:12px 0; }
.mz-acc-block:last-child{ border-bottom:0; }
.mz-acc-block-title{ font-weight:700; font-size:14px; margin:0 0 8px; color:#111; }
.mz-acc-link{ display:block; color:#007185; text-decoration:none; padding:6px 0; font-size:14px; }
.mz-acc-link:hover{ text-decoration:underline; }

.mz-acc-inline{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; }
.mz-acc-lang{ display:flex; gap:8px; }
.mz-acc-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #ccc; border-radius:999px; padding:6px 10px;
  color:#111; text-decoration:none; font-size:13px; background:#f7f7f7;
}
.mz-acc-pill:hover{ background:#eee; }

/* Botón "Identifícate" como texto-link */
.mz-identify{ background:transparent; border:0; color:#fff; font-size:13px; font-weight:600; padding:2px 0; line-height:1; cursor:pointer; }
.mz-identify:hover{ text-decoration:underline; opacity:.95; }

    .az-drawer-header{
      display:flex; align-items:center; gap:.5rem;
      padding:10px 12px;
      background:#232f3e; color:#fff;
    }
    .az-drawer-header .title{ flex:1; font-weight:700; }
    .az-drawer-actions{ margin-left:auto; }

    .az-drawer-user{
      display:inline-flex; align-items:center; gap:.4rem;
      background:transparent; border:0; color:#fff;
      font-weight:600; padding:6px 10px; border-radius:8px;
      text-decoration:none; cursor:pointer;
    }
    .az-drawer-user:hover{ background:rgba(255,255,255,.12); }
    .az-drawer-user .ico{ line-height:1; }
	
	/* Links superiores dentro del flyout cuando hay sesión */
.az-acc-toplinks{
  display:flex; align-items:center; gap:.5rem;
  margin: 4px 0 8px;
}
.az-toplink{
  color:#007185; font-weight:600; text-decoration:none;
}
.az-toplink:hover{ text-decoration:underline; }
.az-topsep{ color:#999; }