/* =========================================================
 * MADU UX - Celular
 * Menu hamburguesa, barra de compra fija, formularios que no
 * hacen zoom en iOS y areas de toque de 44px.
 * Todo vive abajo de 1024px: en escritorio no cambia nada.
 * ========================================================= */

.madu-ham{display:none}
.madu-nav[hidden]{display:none}
.madu-buy{display:none}

@media (max-width:1024px){

/* ---------- header ---------- */
header.sitio nav.men{display:none !important}

.madu-ham{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 11px;flex:0 0 44px;
  background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.madu-ham span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.madu-ham[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.madu-ham[aria-expanded="true"] span:nth-child(2){opacity:0}
.madu-ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

header.sitio .hrow{display:flex;align-items:center;gap:4px;min-height:60px}
header.sitio .logo{flex:0 0 auto;width:54px;height:54px}
header.sitio .logo img{width:54px;height:54px}
header.sitio .icos{margin-left:auto;display:flex;align-items:center;gap:0}
header.sitio .icos a{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  position:relative;-webkit-tap-highlight-color:transparent;
}
header.sitio .icos a svg{width:21px;height:21px}
header.sitio .icos .madu-cart-n{position:absolute;top:4px;right:2px}

/* ---------- cajon del menu ---------- */
.madu-nav{position:fixed;inset:0;z-index:10000}
.madu-nav__fondo{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .22s}
.madu-nav.abierto .madu-nav__fondo{opacity:1}
.madu-nav__caja{
  position:absolute;top:0;left:0;bottom:0;width:87%;max-width:350px;
  background:#fff;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .24s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  box-shadow:0 0 30px rgba(0,0,0,.25);
}
.madu-nav.abierto .madu-nav__caja{transform:none}
.madu-nav__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid #ececec;position:sticky;top:0;background:#fff;z-index:2;
}
.madu-nav__top strong{font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.madu-nav__x{width:44px;height:44px;border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:#111}

.madu-nav__buscar{display:flex;gap:8px;padding:14px 16px 10px}
.madu-nav__buscar input[type=search]{
  flex:1;min-height:46px;font-size:16px;padding:0 12px;
  border:1px solid #d8d8d8;border-radius:8px;background:#fafafa;
}
.madu-nav__buscar button{
  min-height:46px;padding:0 16px;border:0;border-radius:8px;
  background:#111;color:#fff;font-size:14px;cursor:pointer;
}

.madu-nav__menu ul{list-style:none;margin:0;padding:0}
.madu-nav__menu li{border-bottom:1px solid #f0f0f0;position:relative}
.madu-nav__menu li a{
  display:block;padding:15px 52px 15px 16px;font-size:16px;line-height:1.3;
  color:#111;text-decoration:none;
}
.madu-nav__menu .sub-menu{display:none;background:#fafafa}
.madu-nav__menu li.abierto > .sub-menu{display:block}
.madu-nav__menu .sub-menu a{padding-left:30px;font-size:15px;color:#444}
.madu-nav__menu .sub-menu .sub-menu a{padding-left:44px;font-size:14px}
.madu-nav__mas{
  position:absolute;top:0;right:0;width:52px;height:51px;
  border:0;border-left:1px solid #f0f0f0;background:none;cursor:pointer;
}
.madu-nav__mas::after{
  content:"";display:block;width:9px;height:9px;margin:0 auto;
  border-right:2px solid #666;border-bottom:2px solid #666;
  transform:translateY(-3px) rotate(45deg);transition:transform .2s;
}
.madu-nav__mas[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}

.madu-nav__extras{list-style:none;margin:14px 0 0;padding:0;border-top:8px solid #f4f4f4}
.madu-nav__extras li{border-bottom:1px solid #f0f0f0}
.madu-nav__extras a{display:block;padding:14px 16px;font-size:15px;color:#333;text-decoration:none}
.madu-nav__wa{
  display:block;margin:16px;padding:14px;border-radius:10px;text-align:center;
  background:#25D366;color:#fff;font-weight:600;font-size:15px;text-decoration:none;
}
.madu-nav__envio{margin:0 16px 26px;font-size:13px;color:#777;text-align:center}

/* ---------- barra de compra fija ---------- */
body.madu-buy-on{padding-bottom:74px}
body.madu-buy-on a.wapp{bottom:92px}
.madu-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  display:flex;align-items:center;gap:12px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid #e6e6e6;
  box-shadow:0 -6px 20px rgba(0,0,0,.10);
  transform:translateY(110%);transition:transform .22s ease;
}
body.madu-buy-on .madu-buy{transform:none}
.madu-buy__t{min-width:0;flex:1;line-height:1.25}
.madu-buy__t b{display:block;font-size:12.5px;font-weight:500;color:#666;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.madu-buy__t span,.madu-buy__t .amount{font-size:17px;font-weight:700;color:#111}
.madu-buy__t del{display:none}
.madu-buy__b{
  flex:0 0 auto;min-height:48px;padding:0 22px;border:0;border-radius:9px;
  background:#111;color:#fff;font-size:15px;font-weight:600;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.madu-buy__b:disabled{opacity:.55}
.madu-buy__b.ok{background:#25a244}

/* ---------- galeria: la tira de miniaturas deja de ocupar media pantalla ---------- */
.woocommerce-product-gallery .flex-control-thumbs{
  display:flex !important;flex-wrap:nowrap !important;gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:10px 0 0 !important;padding:0 0 4px !important;
  scroll-snap-type:x proximity;
}
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar{height:0}
.woocommerce-product-gallery .flex-control-thumbs li{
  flex:0 0 66px;width:66px !important;margin:0 !important;padding:0 !important;
  list-style:none;scroll-snap-align:start;
}
.woocommerce-product-gallery .flex-control-thumbs img{
  width:66px !important;height:66px !important;object-fit:cover;border-radius:7px;
}

/* la foto principal no se come dos pantallas */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .woocommerce-product-gallery__image img{
  max-height:64vh;
}
.woocommerce-product-gallery .woocommerce-product-gallery__image img{
  width:100%;object-fit:contain;
}

/* ---------- migas ---------- */
.woocommerce-breadcrumb{
  white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  font-size:12px;padding-bottom:6px;
}
.woocommerce-breadcrumb::-webkit-scrollbar{height:0}

/* ---------- formularios: 16px para que iOS no haga zoom ---------- */
input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=number],input[type=search],input[type=password],select,textarea{
  font-size:16px !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea{
  min-height:48px;border-radius:8px;padding:10px 12px;
}
.woocommerce form .form-row textarea{min-height:92px}
.woocommerce form .form-row label{display:block;font-size:14px;margin-bottom:5px}
.woocommerce form .form-row{margin-bottom:14px}
.select2-container .select2-selection--single{height:48px !important}
.select2-container .select2-selection--single .select2-selection__rendered{line-height:46px !important;font-size:16px}
.select2-container .select2-selection--single .select2-selection__arrow{height:46px !important}
.select2-search__field{font-size:16px !important;min-height:44px}

/* opciones de envio y de pago: fila entera tocable */
.woocommerce-checkout #shipping_method li,
.woocommerce-checkout .wc_payment_methods > li{
  display:flex;align-items:flex-start;gap:11px;padding:12px 0;margin:0;
  border-bottom:1px solid #f1f1f1;
}
.woocommerce-checkout #shipping_method input[type=radio],
.woocommerce-checkout .wc_payment_methods input[type=radio],
.woocommerce-form__input-checkbox,
.woocommerce-checkout input[type=checkbox]{
  width:22px !important;height:22px !important;margin:1px 0 0 !important;flex:0 0 22px;
}
.woocommerce-checkout #shipping_method label,
.woocommerce-checkout .wc_payment_methods label{
  font-size:15px;line-height:1.35;padding:0;margin:0;flex:1;
}
#place_order,.woocommerce #payment #place_order{
  min-height:56px;font-size:17px;width:100%;border-radius:10px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading{font-size:19px;margin:22px 0 12px}

/* ---------- cantidad con - y + ---------- */
.madu-qty{
  display:inline-flex;align-items:stretch;border:1px solid #dcdcdc;
  border-radius:9px;overflow:hidden;background:#fff;
}
.madu-qty button{
  width:46px;min-height:48px;border:0;background:#f6f6f6;color:#111;
  font-size:21px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.madu-qty button:active{background:#ececec}
.madu-qty input.qty{
  width:54px !important;min-width:54px;text-align:center;
  border:0 !important;border-left:1px solid #eee !important;border-right:1px solid #eee !important;
  min-height:48px;font-size:16px !important;border-radius:0 !important;-moz-appearance:textfield;
}
.madu-qty input.qty::-webkit-outer-spin-button,
.madu-qty input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- botones de la ficha ---------- */
.single_add_to_cart_button,.comprarYa,button.comprarYa{min-height:50px;font-size:15px}
.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.woocommerce div.product form.cart .madu-qty{flex:0 0 auto}
.woocommerce div.product form.cart .single_add_to_cart_button{flex:1 1 180px}

/* ---------- listado de productos ---------- */
ul.products li.product a img{border-radius:8px}

/* ---------- que nada se salga de pantalla ---------- */
img,table,iframe{max-width:100%}
.woocommerce-tabs .panel{overflow-x:auto}

button,a,input[type=submit]{touch-action:manipulation}
}

@media (prefers-reduced-motion:reduce){
  .madu-nav__caja,.madu-nav__fondo,.madu-buy,.madu-ham span{transition:none !important}
}