/* Tienda Mah Tables — marco verde ficha, bolsa lateral (desktop) o arriba (celular) */
body.tienda{--marco:#8DBE3F; padding-bottom:calc(var(--outer) + env(safe-area-inset-bottom));}
.tienda .mat{max-width:1180px; padding:16px 20px 24px; gap:20px;}

.barra{display:flex; align-items:center; justify-content:space-between; gap:14px;}
.volver{display:flex; align-items:center; gap:6px; text-decoration:none; font-size:14px; font-weight:600; color:var(--porcelana); min-height:44px;}
.volver span:first-child{font-size:18px;}
.barra-der{display:flex; align-items:center; gap:10px;}
.bolsa-btn{display:none; height:46px; padding:0 16px 0 8px;}
.ficha.mini-tienda{width:26px; height:34px; border-radius:5px; font-size:16px; color:var(--rojo-ficha); box-shadow:0 2px 0 var(--rosa);}

.logo-fila{display:flex; justify-content:center;}
.tienda .logo .ficha{width:44px; height:58px; font-size:28px; box-shadow:0 4px 0 #8DBE3F, 0 7px 12px rgba(30,40,60,.2);}
.tienda .logo-1{font-size:32px;}
.tienda .logo-2{font-size:36px;} .tienda .logo-2.m{font-size:27px;} .tienda .logo-2.l{font-size:23px;}

.encabezado{display:flex; flex-direction:column; gap:10px; max-width:680px;}
.encabezado .eyebrow{font-size:12px;}
.encabezado h1{font-size:40px; line-height:1; color:var(--porcelana);}
.encabezado p{margin:0; font-size:15px; line-height:1.5; color:var(--texto-2b); text-wrap:pretty;}

.categorias{display:flex; gap:6px; overflow-x:auto; margin:0 -9px; padding:0 9px; scrollbar-width:none;}
.categorias::-webkit-scrollbar{display:none;}
.categorias button{flex:none; height:40px; padding:0 16px; border:0; border-radius:999px; font-size:14px; background:#fff; color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--linea-2);}
.categorias button[aria-pressed="true"]{background:var(--porcelana); color:#fff; box-shadow:none; font-weight:600;}
.buscar{display:flex; gap:10px; flex-wrap:wrap;}
.buscar input, .buscar select{height:44px; border-radius:12px; border:1.5px solid var(--linea-2); background:#fff; font:inherit; font-size:15px; color:var(--tinta); padding:0 14px;}
.buscar input{flex:1 1 220px; min-width:0;} .buscar select{flex:0 1 220px;}

.tienda-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start;}
.productos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.prod{background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 0 0 1.5px var(--linea); display:flex; flex-direction:column;}
.prod-foto{position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:0; padding:0; width:100%; cursor:pointer;
  background-color:var(--bg); background-image:radial-gradient(circle,var(--dot) 2.5px,transparent 3.5px); background-size:16px 16px; box-shadow:inset 0 0 0 5px var(--edge);}
.prod-foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.prod-foto .sin-foto{padding:6px 10px; border-radius:999px; background:rgba(255,251,242,.92); font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--texto-3);}
.e0{--bg:#F6CCD6; --dot:#EC9AAE; --edge:#F08A6B;} .e1{--bg:#EAF2FA; --dot:#9DBDE3; --edge:#3D6FB6;} .e2{--bg:#FFF4D6; --dot:#F1CF5E; --edge:#C9A24A;}
.e3{--bg:#1E2F55; --dot:#33598F; --edge:#3BA6C9;} .e4{--bg:#E3F2E8; --dot:#A9D4B8; --edge:#2E8B57;} .e5{--bg:#FDEAF1; --dot:#F4BFD0; --edge:#D2457F;}
.etiqueta{position:absolute; top:12px; left:12px; padding:4px 9px; border-radius:999px; background:var(--rosa); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; z-index:1;}
.etiqueta.agotado{background:var(--texto-3);}
.prod-txt{padding:12px 12px 14px; display:flex; flex-direction:column; gap:6px; flex:1;}
.prod-cat{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dorado-texto);}
.prod-nombre{font-family:'DM Serif Display',serif; font-size:18px; line-height:1.12; color:var(--porcelana); text-wrap:pretty; background:none; border:0; padding:0; text-align:left; cursor:pointer;}
.prod-desc{font-size:13px; line-height:1.4; color:var(--texto-3); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.prod-pie{margin-top:auto; padding-top:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;}
.precio{font-family:'DM Serif Display',serif; font-size:22px; color:var(--tinta);}
.precio s{font-family:'Work Sans',sans-serif; font-size:13px; color:var(--texto-3); margin-left:6px;}
.agregar{height:40px; padding:0 14px; border:0; border-radius:10px; font-weight:700; font-size:14px; background:var(--rosa); color:#fff; box-shadow:0 3px 0 var(--rosa-sombra);}
.agregar.en{background:var(--jade); box-shadow:0 3px 0 var(--jade-sombra);}
.agregar:disabled{background:#C9C2B4; box-shadow:none; cursor:default;}
.pronto{background:var(--rosa-claro); color:#7A2A4E; border-radius:14px; padding:18px; text-align:center; margin:0;}
.ver-mas{display:block; margin:18px auto 0; height:46px; padding:0 22px;}

.bolsa{display:none; order:-1; border-radius:20px; background:var(--porcelana); padding:10px; box-shadow:inset 0 0 0 3px var(--porcelana), inset 0 0 0 4.5px var(--dorado);}
.bolsa.abierta{display:block;}
.bolsa-in{border-radius:13px; background:var(--crema); padding:20px; display:flex; flex-direction:column; gap:14px;}
.bolsa-head{display:flex; justify-content:space-between; align-items:baseline;}
.bolsa-head h2{font-size:26px; color:var(--porcelana);}
.bolsa-cerrar{border:0; background:transparent; font-size:14px; font-weight:600; color:var(--porcelana); height:40px;}
.bolsa-vacia{font-size:14px; line-height:1.5; color:var(--texto-3);}
.item{display:grid; grid-template-columns:40px 1fr auto; gap:10px; align-items:center; padding-bottom:12px; border-bottom:1px solid #EFE6D3;}
.item-foto{width:40px; height:40px; border-radius:8px; overflow:hidden; background-color:var(--bg); background-image:radial-gradient(circle,var(--dot) 2px,transparent 3px); background-size:10px 10px; box-shadow:inset 0 0 0 3px var(--edge);}
.item-foto img{width:100%; height:100%; object-fit:cover; display:block;}
.item-txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.item-txt b{font-size:14px; font-weight:600;} .item-txt span{font-size:13px; color:var(--texto-3);}
.item-qty{display:flex; align-items:center; gap:4px;}
.item-qty button{width:32px; height:32px; border:0; border-radius:8px; background:var(--linea-3); font-size:16px; font-weight:700; color:var(--tinta);}
.subtotal{display:flex; justify-content:space-between; align-items:baseline; font-size:15px; color:var(--texto-2b);}
.subtotal b{font-family:'DM Serif Display',serif; font-weight:400; font-size:24px; color:var(--tinta);}
.bolsa-nota{font-size:13px; color:var(--texto-3);}
.pagar{height:52px; font-size:16px; width:100%;}
.pagar:disabled{background:#C9C2B4; box-shadow:none; cursor:default;}
.pago-aviso{background:var(--rosa-claro); color:#7A2A4E; border-radius:12px; padding:12px 14px; font-size:14px; line-height:1.45; display:flex; flex-direction:column; gap:8px;}
.pago-aviso a{display:flex; justify-content:space-between; gap:10px; background:#fff; border-radius:10px; padding:9px 12px; text-decoration:none; font-weight:600; color:var(--porcelana);}

.info{background:#fff; border-radius:14px; box-shadow:0 0 0 1.5px var(--linea); padding:18px 20px;}
.info h2{font-size:22px; color:var(--porcelana); margin-bottom:6px;}
.info p{margin:8px 0; font-size:15px; color:var(--texto-2);} .info .nota{font-size:13px; color:var(--texto-3);}

.barra-movil{position:sticky; bottom:0; margin:16px calc(var(--outer) * -1) calc((var(--outer) + env(safe-area-inset-bottom)) * -1); z-index:10;
  background:rgba(255,251,242,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-top:1.5px solid var(--dorado);
  padding:10px 14px calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:12px;}
.ficha.tienda-ficha{width:30px; height:40px; border-radius:6px; font-size:18px; color:var(--rojo-ficha); box-shadow:0 3px 0 var(--rosa), 0 5px 8px rgba(30,40,60,.18);}
.barra-movil-txt{display:flex; flex-direction:column; flex:1; min-width:0;}
.barra-movil-txt span{font-size:13px; color:var(--texto-3);}
.barra-movil-txt b{font-family:'DM Serif Display',serif; font-weight:400; font-size:22px; line-height:1.1;}
.barra-movil .btn-rosa{height:48px; padding:0 20px; font-size:15px;}

.modal{position:fixed; inset:0; background:rgba(20,42,36,.62); display:flex; align-items:center; justify-content:center; padding:16px; z-index:20;}
.modal-card{background:var(--crema); border-radius:20px; max-width:520px; width:100%; max-height:92vh; overflow:auto; padding:18px; position:relative; box-shadow:inset 0 0 0 3px var(--crema), inset 0 0 0 4.5px var(--dorado), 0 24px 40px -12px rgba(0,0,0,.5);}
.modal-x{position:absolute; top:12px; right:12px; width:36px; height:36px; border-radius:10px; border:0; background:var(--rosa-claro); color:#7A2A4E; font-size:16px; font-weight:700; z-index:2;}
.gal{aspect-ratio:1; border-radius:14px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background-color:var(--bg); background-image:radial-gradient(circle,var(--dot) 2.5px,transparent 3.5px); background-size:16px 16px; box-shadow:inset 0 0 0 5px var(--edge);}
.gal img{width:100%; height:100%; object-fit:contain; display:block; background:#fff;}
.thumbs{display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;}
.thumbs button{width:56px; height:56px; border-radius:10px; overflow:hidden; border:2px solid transparent; padding:0; background:none;}
.thumbs button.on{border-color:var(--rosa);}
.thumbs img{width:100%; height:100%; object-fit:cover; display:block;}
.m-cat{display:block; margin-top:14px;}
.m-nombre{font-size:26px; line-height:1.1; color:var(--porcelana); margin:4px 0;}
.m-datos{font-size:13px; color:var(--texto-3); margin:0;}
.m-docs{display:flex; flex-direction:column; gap:8px; margin:14px 0 0;}
.m-docs-t{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--dorado-texto);}
.m-docs a{display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 12px; border-radius:12px; background:#fff; box-shadow:0 0 0 1.5px var(--linea); text-decoration:none; font-size:15px; font-weight:600; color:var(--porcelana);}
.m-docs .pdf{font-size:10px; font-weight:700; letter-spacing:.06em; color:var(--rojo-ficha); border:1.5px solid var(--rojo-ficha); border-radius:5px; padding:3px 5px;}
.m-desc{white-space:pre-line; margin:10px 0 0; font-size:15px; line-height:1.55; color:var(--texto-2);}
.m-pie{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap;}
.m-pie .agregar{height:48px; padding:0 20px; font-size:15px; flex:1 1 160px;}

@media (min-width:900px){
  .tienda .mat{padding:32px 48px 36px; gap:28px;}
  .bolsa-btn{display:inline-flex;}
  .logo-fila{justify-content:flex-start;}
  .tienda .logo .ficha{width:60px; height:80px; font-size:38px;}
  .tienda .logo-1{font-size:40px;}
  .tienda .logo-2{font-size:48px;} .tienda .logo-2.m{font-size:36px;} .tienda .logo-2.l{font-size:30px;}
  .encabezado .eyebrow{font-size:14px;} .encabezado h1{font-size:56px;} .encabezado p{font-size:17px;}
  .categorias{margin:0; padding:0;}
  .tienda-grid{grid-template-columns:minmax(0,1fr) 320px; gap:28px;}
  .productos{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}
  .prod-txt{padding:16px 16px 18px;} .prod-nombre{font-size:21px;}
  .bolsa{display:block; order:0; position:sticky; top:20px;}
  .bolsa-cerrar{display:none;}
  .barra-movil{display:none !important;}
}

/* Pago único: entrega y aviso de gracias */
.entrega{display:flex; gap:8px;}
.entrega button{flex:1; min-height:44px; padding:6px 10px; border-radius:12px; border:0; background:#fff; box-shadow:0 0 0 1.5px var(--linea-2, #E2D6BC); font:inherit; font-size:13.5px; font-weight:600; color:var(--tinta); cursor:pointer;}
.entrega button[aria-checked="true"]{background:var(--porcelana); color:#fff; box-shadow:none;}
.pago-seguro{text-align:center;}
.gracias{padding:16px 18px; border-radius:14px; background:#E3F2E8; color:#1D6340; font-size:16px; font-weight:600; line-height:1.45;}