/* Celeste Tienda: componentes del catálogo, kits y cotizador.
   Usa las variables de marca del tema Celeste y trae valores de respaldo. */
.cel-cats, .cel-catalogo, .cel-occ-grid, .cel-builder, .cel-idea, .cel-ck, .cel-q-grid {
	--c-azul: var(--cel-azul, #38A9F5); --c-morado: var(--cel-morado, #9B5DE5); --c-rosa: var(--cel-rosa, #E94B87); --c-naranja: var(--cel-naranja, #F59E0B);
	--c-fondo: var(--cel-fondo, #F8F9FC); --c-texto: var(--cel-texto, #17172F); --c-texto2: var(--cel-texto2, #5F6079); --c-borde: var(--cel-borde, #E8EAF2);
	--c-tinta: var(--cel-tinta-suave, #EEF0F8); --c-morado-s: var(--cel-morado-suave, #F3ECFD); --c-naranja-s: var(--cel-naranja-suave, #FEF4E2);
	--c-grad-btn: var(--cel-grad-btn, linear-gradient(100deg, #2E97E0 0%, #8A4FD8 45%, #D93C78 100%));
	--c-grad: var(--cel-grad, linear-gradient(100deg, #38A9F5 0%, #9B5DE5 38%, #E94B87 68%, #F59E0B 100%));
	--c-sombra: var(--cel-sombra, 0 10px 30px -12px rgba(23, 23, 47, .18));
	--c-sombra-s: var(--cel-sombra-s, 0 4px 14px -6px rgba(23, 23, 47, .14));
	font-family: var(--cel-f, "Poppins", system-ui, sans-serif);
	color: var(--c-texto);
	box-sizing: border-box;
}
.cel-cats *, .cel-catalogo *, .cel-builder *, .cel-q-grid * { box-sizing: border-box; }
.cel-aviso-admin { padding: 14px 16px; border: 1px dashed #C8B2EE; border-radius: 12px; background: #fff; color: #5F6079; font-size: 14px; }
.cel-wa-float svg, .cel-btn svg { flex: none; }

/* Botones (también definidos en el tema Celeste) */
.cel-btn,
body .cel-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 50px; padding: 0 26px; border-radius: 999px; border: 0;
	font: 600 15px/1 var(--cel-f, "Poppins", system-ui, sans-serif); cursor: pointer; white-space: nowrap;
	transition: transform .2s, box-shadow .2s, background .2s, color .2s;
	text-decoration: none;
}
.cel-btn svg { width: 18px; height: 18px; flex: none; }
body .cel-btn.cel-btn-p, body .cel-btn.cel-btn-p:hover, body .cel-btn.cel-btn-p:focus { background: var(--cel-grad-btn, linear-gradient(100deg, #2E97E0 0%, #8A4FD8 45%, #D93C78 100%)); color: #fff; box-shadow: 0 10px 24px -10px rgba(155, 93, 229, .7); }
body .cel-btn.cel-btn-p:hover { transform: translateY(-2px); }
body .cel-btn.cel-btn-o { background: #fff; color: var(--cel-rosa, #E94B87); box-shadow: inset 0 0 0 2px var(--cel-rosa, #E94B87); }
body .cel-btn.cel-btn-o:hover, body .cel-btn.cel-btn-o:focus { background: var(--cel-rosa-suave, #FDECF3); color: var(--cel-rosa, #E94B87); }
body .cel-btn.cel-btn-g { background: #fff; color: var(--cel-texto, #17172F); box-shadow: inset 0 0 0 1px var(--cel-borde, #E8EAF2); }
body .cel-btn.cel-btn-g:hover, body .cel-btn.cel-btn-g:focus { background: #fff; color: var(--cel-morado, #9B5DE5); box-shadow: inset 0 0 0 1.5px var(--cel-morado, #9B5DE5); }
body .cel-btn.cel-btn-wa, body .cel-btn.cel-btn-wa:focus { background: var(--cel-wa, #1FA855); color: #fff; }
body .cel-btn.cel-btn-wa:hover { background: var(--cel-wa-hover, #178A45); color: #fff; transform: translateY(-2px); }
body .cel-btn.cel-btn-s { min-height: 40px; padding: 0 18px; font-size: 13.5px; }
body .cel-btn.cel-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }


/* Miniaturas */
.cel-ph { width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--c-tinta); display: grid; place-items: center; }
.cel-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cel-ph.cel-ico svg { width: 42%; height: 42%; color: #fff; }
.cel-g1 { background: linear-gradient(140deg, #38A9F5, #9B5DE5); }
.cel-g2 { background: linear-gradient(140deg, #E94B87, #F59E0B); }
.cel-g3 { background: linear-gradient(140deg, #9B5DE5, #E94B87); }
.cel-g4 { background: linear-gradient(140deg, #F59E0B, #E94B87); }

/* [celeste_categorias] */
.cel-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px; }
body .cel-cat { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font: 500 13.5px/1.3 var(--cel-f, inherit); color: var(--c-texto); }
.cel-cat .cel-ph { box-shadow: var(--c-sombra-s); transition: transform .25s, box-shadow .25s; }
.cel-cat:hover .cel-ph { transform: translateY(-4px); box-shadow: var(--c-sombra); }
body .cel-cat:hover span { color: var(--c-rosa); }

/* [celeste_catalogo] */
.cel-catalogo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.cel-filters { position: sticky; top: 150px; display: grid; gap: 4px; }
.cel-filters h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-texto2); font-weight: 600; }
body .cel-fbtn {
	display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left;
	padding: 10px 14px; border-radius: 10px; border: 0; background: transparent; font: 500 14px var(--cel-f, inherit);
	color: var(--c-texto); cursor: pointer; line-height: 1.3;
}
body .cel-fbtn:hover, body .cel-fbtn:focus { background: var(--c-tinta); color: var(--c-texto); }
body .cel-fbtn.cel-on { background: var(--c-morado-s); color: #6B35B8; font-weight: 600; }
.cel-fbtn small { font-size: 12px; color: var(--c-texto2); font-weight: 500; }
.cel-cat-main { min-width: 0; }
.cel-cat-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cel-count { font-size: 14px; color: var(--c-texto2); }
.cel-cat-search { position: relative; width: min(100%, 320px); }
.cel-cat-search input[type=search] { width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--c-borde); background: #fff; padding: 0 16px 0 40px; font: 400 14px var(--cel-f, inherit); color: var(--c-texto); }
.cel-cat-search input:focus { outline: none; border-color: var(--c-morado); box-shadow: 0 0 0 4px var(--c-morado-s); }
.cel-cat-search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--c-texto2); }
.cel-chips-row { display: none; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 14px; }
body .cel-chips-row .cel-fbtn { width: auto; white-space: nowrap; border: 1px solid var(--c-borde); background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 13px; }
body .cel-chips-row .cel-fbtn.cel-on { border-color: var(--c-morado); background: var(--c-morado-s); }
.cel-pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cel-pcard { background: #fff; border: 1px solid var(--c-borde); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.cel-pcard[hidden] { display: none; }
.cel-pcard:hover { box-shadow: var(--c-sombra); transform: translateY(-3px); }
.cel-pcard .cel-ph { border-radius: 0; aspect-ratio: 4/3; }
.cel-pbody { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cel-pcat { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--c-morado); }
.cel-pbody h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.01em; margin: 0; line-height: 1.3; }
.cel-pbody h3 a { color: var(--c-texto); }
.cel-pbody p { font-size: 13.5px; color: var(--c-texto2); flex: 1; margin: 0; line-height: 1.5; }
.cel-price { font-size: 13px; color: var(--c-texto2); }
.cel-price b { color: var(--c-texto); font-weight: 600; }
.cel-acts { display: flex; gap: 8px; margin-top: 6px; }
body .cel-acts .cel-btn { flex: 1; min-height: 42px; font-size: 13.5px; padding: 0 14px; }
body .cel-acts .cel-btn.cel-added { background: var(--c-morado-s); color: #6B35B8; box-shadow: none; }
body .cel-icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-borde); display: grid; place-items: center; color: var(--cel-wa, #1FA855); flex: none; background: #fff; }
body .cel-icon-btn:hover { border-color: var(--cel-wa, #1FA855); color: var(--cel-wa, #1FA855); }
.cel-icon-btn svg { width: 20px; height: 20px; }
.cel-empty { padding: 40px; text-align: center; color: var(--c-texto2); background: #fff; border: 1px dashed var(--c-borde); border-radius: 18px; }
.cel-empty a { color: var(--c-morado); font-weight: 600; }

/* [celeste_ocasiones] */
.cel-occ-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body .cel-occ { background: #fff; border: 1px solid var(--c-borde); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--c-texto); transition: border-color .2s, transform .2s; }
body .cel-occ:hover { border-color: var(--c-morado); transform: translateY(-3px); color: var(--c-texto); }
.cel-occ h3 { font-size: 16.5px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.cel-occ p { font-size: 13.5px; color: var(--c-texto2); margin: 0; }
.cel-k-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.cel-k-ic svg { width: 22px; height: 22px; }
.cel-bg-rosa { background: var(--c-rosa); } .cel-bg-morado { background: var(--c-morado); } .cel-bg-azul { background: var(--c-azul); } .cel-bg-naranja { background: var(--c-naranja); }

/* [celeste_armador_kits] */
.cel-builder { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; scroll-margin-top: 140px; }
.cel-b-pasos { min-width: 0; display: grid; gap: 18px; }
.cel-b-step { border: 1px solid var(--c-borde); border-radius: 20px; padding: 24px; background: var(--c-fondo); min-width: 0; }
.cel-b-step h3 { font-size: 18px; font-weight: 600; display: flex; align-items: center; gap: 12px; margin: 0; letter-spacing: -.01em; }
.cel-num-s { width: 30px; height: 30px; font-size: 13px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c-grad-btn); flex: none; }
.cel-hint { font-size: 13px; color: var(--c-texto2); margin: 6px 0 16px 42px; }
.cel-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
body .cel-pill { border: 1px solid var(--c-borde); background: #fff; border-radius: 999px; padding: 9px 16px; font: 500 13.5px var(--cel-f, inherit); cursor: pointer; color: var(--c-texto); line-height: 1.2; }
body .cel-pill:hover, body .cel-pill:focus { border-color: var(--c-morado); background: #fff; color: var(--c-texto); }
body .cel-pill[aria-pressed="true"] { background: var(--c-morado); border-color: var(--c-morado); color: #fff; }
.cel-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body .cel-pick { position: relative; border: 1.5px solid var(--c-borde); background: #fff; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; text-align: left; font: 500 13px/1.3 var(--cel-f, inherit); color: var(--c-texto); transition: border-color .2s; }
body .cel-pick:hover, body .cel-pick:focus { border-color: #C8B2EE; background: #fff; color: var(--c-texto); }
body .cel-pick[aria-pressed="true"] { border-color: var(--c-morado); background: var(--c-morado-s); }
.cel-pick .cel-ph { border-radius: 10px; }
.cel-tick { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1.5px solid var(--c-borde); display: grid; place-items: center; }
.cel-tick svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.cel-pick[aria-pressed="true"] .cel-tick { background: var(--c-morado); border-color: var(--c-morado); }
.cel-pick[aria-pressed="true"] .cel-tick svg { opacity: 1; }
.cel-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.cel-summary { position: sticky; top: 150px; border-radius: 22px; background: var(--c-grad); padding: 2.5px; }
.cel-sum-in { background: #fff; border-radius: 20px; padding: 24px; display: grid; gap: 14px; }
.cel-eyebrow-s { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c-texto2); }
.cel-sum-in h3 { font-size: 18px; font-weight: 700; margin: 0; }
.cel-sum-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cel-sum-in li { font-size: 14px; padding-left: 22px; position: relative; }
.cel-sum-in li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--c-morado); border-bottom: 2px solid var(--c-morado); transform: rotate(-45deg); }
.cel-muted { font-size: 13px; color: var(--c-texto2); margin: 0; }
.cel-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-top: 1px solid var(--c-borde); padding-top: 12px; }
.cel-row b { font-weight: 600; }
body .cel-link { font-size: 13.5px; font-weight: 600; color: var(--c-morado); display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.cel-link svg { width: 16px; height: 16px; }

/* [celeste_idea_kit] */
.cel-idea { background: #fff; border: 1px solid var(--c-borde); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.cel-idea h3 { font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.cel-for { font-size: 12.5px; color: var(--c-texto2); }
.cel-idea ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; flex: 1; }
.cel-idea li { display: flex; gap: 8px; align-items: center; }
.cel-idea li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-rosa); flex: none; }
.cel-idea .cel-btn { align-self: flex-start; }

/* [celeste_kit_empresa] */
.cel-ck { border: 1px solid var(--c-borde); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; background: var(--c-fondo); height: 100%; }
.cel-ck-top { padding: 20px 22px; color: #fff; }
.cel-ck-top span { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; opacity: .92; }
.cel-ck-top h3 { font-size: 20px; font-weight: 700; margin: 4px 0 0; color: #fff; }
.cel-ck-azul { background: linear-gradient(135deg, #2E97E0, #8A4FD8); }
.cel-ck-morado { background: linear-gradient(135deg, #8A4FD8, #D93C78); }
.cel-ck-rosa { background: linear-gradient(135deg, #D93C78, #E58A0B); }
.cel-ck-naranja { background: linear-gradient(135deg, #E58A0B, #D93C78); }
.cel-ck-bd { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cel-ck-bd p { font-size: 13.5px; color: var(--c-texto2); margin: 0; }
.cel-ck ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13.5px; flex: 1; }
.cel-ck li { display: flex; gap: 9px; align-items: flex-start; }
.cel-ck li svg { width: 16px; height: 16px; color: var(--c-morado); flex: none; margin-top: 3px; }
.cel-ck .cel-btn { align-self: stretch; }

/* [celeste_cotizador] */
.cel-q-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.cel-card { background: #fff; border: 1px solid var(--c-borde); border-radius: 20px; padding: 24px; min-width: 0; }
.cel-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.cel-sub { font-size: 13.5px; color: var(--c-texto2); margin: 4px 0 0; }
.cel-qitems { display: grid; gap: 12px; margin-top: 18px; }
.cel-qitems:empty { display: none; }
.cel-qitem { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; border: 1px solid var(--c-borde); border-radius: 14px; padding: 12px; background: var(--c-fondo); }
.cel-qitem .cel-ph { width: 64px; border-radius: 10px; }
.cel-qmain { min-width: 0; }
.cel-qitem h3 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.cel-det { font-size: 12.5px; color: var(--c-texto2); margin-top: 2px; }
.cel-qitem textarea { margin-top: 8px; width: 100%; min-height: 42px; border: 1px solid var(--c-borde); border-radius: 10px; padding: 8px 10px; font: 400 13px var(--cel-f, inherit); resize: vertical; background: #fff; color: var(--c-texto); }
.cel-qitem textarea:focus { outline: none; border-color: var(--c-morado); }
.cel-qty { display: inline-flex; align-items: center; border: 1px solid var(--c-borde); border-radius: 999px; background: #fff; height: 36px; width: max-content; }
body .cel-qty button { width: 34px; height: 34px; border: 0; background: none; cursor: pointer; font-size: 17px; color: var(--c-texto); border-radius: 50%; padding: 0; line-height: 1; }
body .cel-qty button:hover, body .cel-qty button:focus { color: var(--c-morado); background: none; }
body .cel-qty input[type=number] { width: 52px; border: 0; text-align: center; font: 600 14px var(--cel-f, inherit); color: var(--c-texto); background: transparent; padding: 0; min-height: 0; height: 34px; -moz-appearance: textfield; box-shadow: none; }
.cel-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cel-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
body .cel-rm { border: 0; background: none; color: var(--c-texto2); font: 500 12.5px var(--cel-f, inherit); cursor: pointer; padding: 4px; }
body .cel-rm:hover, body .cel-rm:focus { color: #C42B63; background: none; }
.cel-q-empty { border: 1.5px dashed var(--c-borde); border-radius: 16px; padding: 30px 20px; text-align: center; color: var(--c-texto2); display: grid; gap: 12px; justify-items: center; margin-top: 18px; font-size: 14px; }
.cel-q-empty[hidden] { display: none; }
.cel-q-empty > svg { width: 40px; height: 40px; color: #C8B2EE; }
.cel-row-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cel-adder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; margin-top: 16px; align-items: end; }
body .cel-adder .cel-btn { min-height: 48px; }
.cel-f { display: grid; gap: 6px; min-width: 0; align-content: start; }
.cel-f[hidden] { display: none; }
.cel-full { grid-column: 1 / -1; }
.cel-f label, .cel-lb { font-size: 13px; font-weight: 500; color: var(--c-texto); }
.cel-f label i { font-style: normal; color: var(--c-rosa); }
body .cel-f input:not([type=checkbox]):not([type=radio]), body .cel-f select, body .cel-f textarea {
	width: 100%; font: 400 14.5px var(--cel-f, inherit); color: var(--c-texto); border: 1px solid var(--c-borde);
	border-radius: 12px; padding: 11px 14px; background: var(--c-fondo); min-height: 48px; box-shadow: none;
}
body .cel-f textarea { min-height: 100px; resize: vertical; }
body .cel-f input:focus, body .cel-f select:focus, body .cel-f textarea:focus { outline: none; border-color: var(--c-morado); box-shadow: 0 0 0 4px var(--c-morado-s); background: #fff; }
body .cel-b-step .cel-f input:not([type=checkbox]), body .cel-b-step .cel-f textarea { background: #fff; }
.cel-err { font-size: 12px; color: #C42B63; }
.cel-err:empty { display: none; }
.cel-bad input, .cel-bad textarea, .cel-bad select { border-color: #E0457E !important; }
.cel-seg { display: flex; gap: 8px; }
.cel-seg label { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 6px 10px; border: 1px solid var(--c-borde); border-radius: 12px; background: var(--c-fondo); cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1.3; }
.cel-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cel-seg label:has(input:checked) { border-color: var(--c-morado); background: var(--c-morado-s); color: #6B35B8; }
.cel-seg label:has(input:focus-visible) { outline: 3px solid var(--c-morado); outline-offset: 2px; }
.cel-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--c-texto2); font-weight: 400 !important; cursor: pointer; }
.cel-check input { width: 20px; height: 20px; accent-color: var(--c-morado); flex: none; margin: 1px 0 0; }
.cel-check a { color: var(--c-morado); text-decoration: underline; }
.cel-qf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 18px; }
.cel-q-side { position: sticky; top: 150px; display: grid; gap: 16px; min-width: 0; }
.cel-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cel-note { display: flex; gap: 12px; background: var(--c-naranja-s); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; color: #6B4A0B; }
.cel-note svg { width: 20px; height: 20px; flex: none; color: #C27C00; margin-top: 1px; }
.cel-result { grid-column: 1 / -1; border-radius: 14px; background: #EAF8EF; border: 1px solid #BFE6CD; padding: 18px; display: grid; gap: 12px; }
.cel-result[hidden] { display: none; }
.cel-result b { font-size: 15px; }
.cel-result pre { margin: 0; white-space: pre-wrap; font: 400 13px/1.55 var(--cel-f, inherit); background: #fff; border-radius: 10px; padding: 12px 14px; border: 1px solid #D6EEDD; max-height: 260px; overflow: auto; color: var(--c-texto); }
.cel-result .cel-row-btns { justify-content: flex-start; }

/* Flotantes */
body .cel-wa-float { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 95; width: 58px; height: 58px; border-radius: 50%; background: var(--cel-wa, #1FA855); display: grid; place-items: center; box-shadow: 0 10px 24px -8px rgba(31, 168, 85, .7); transition: transform .2s; color: #fff; }
body .cel-wa-float:hover { transform: scale(1.07); color: #fff; }
.cel-wa-float svg { width: 30px; height: 30px; }
.cel-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 99; background: #17172F; color: #fff; padding: 12px 14px 12px 18px; border-radius: 14px; font-size: 13.5px; box-shadow: 0 10px 30px -12px rgba(23, 23, 47, .4); max-width: calc(100% - 32px); display: flex; align-items: center; gap: 14px; font-family: var(--cel-f, inherit); }
.cel-toast[hidden], .cel-toast a[hidden] { display: none; }
body .cel-toast a { color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* Pantallas medianas y pequeñas */
@media (max-width: 1100px) {
	.cel-occ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cel-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cel-builder { grid-template-columns: minmax(0, 1fr) 300px; }
	.cel-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.cel-catalogo, .cel-builder, .cel-q-grid { grid-template-columns: minmax(0, 1fr); }
	.cel-filters { display: none; }
	.cel-chips-row { display: flex; }
	.cel-summary, .cel-q-side { position: static; }
}
@media (max-width: 600px) {
	.cel-cats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 8px; }
	.cel-cat { flex: 0 0 96px; scroll-snap-align: start; }
	.cel-occ-grid, .cel-fgrid, .cel-qf { grid-template-columns: minmax(0, 1fr); }
	.cel-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cel-pbody { padding: 12px; }
	.cel-pbody h3 { font-size: 14.5px; }
	.cel-pbody p, .cel-price { display: none; }
	.cel-acts { flex-direction: column; }
	.cel-acts .cel-icon-btn { display: none; }
	.cel-pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cel-b-step { padding: 18px; }
	.cel-hint { margin-left: 0; }
	.cel-card { padding: 18px; }
	.cel-adder { grid-template-columns: minmax(0, 1fr); }
	.cel-qitem { grid-template-columns: 52px minmax(0, 1fr); }
	.cel-qitem .cel-ph { width: 52px; }
	.cel-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* Cantidad dentro de formularios: no heredar el estilo de campo completo */
body .cel-f .cel-qty input[type=number] { width: 52px; min-height: 0; height: 34px; padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 0; }