/* LUQ-002 responsive mobile pass (owner-approved six-state mockup). Loaded AFTER styles.css, catalogue.css, luq002.css and each page's inline
   <style>, so it can override legacy fixed widths/inline 90%/75% rules ONLY inside the media queries below. Desktop (>=992px) is untouched
   except the shared sizing guards. Colours stay the existing navy/turquoise/Poppins; no business logic here. */

:root {
	--luqm-gutter: 8px;
	--luqm-navy: #2d3f64;
	--luqm-text: #1f2d4d;
	--luqm-muted: #4a5a78;
	--luqm-border: #dce3ec;
}

/* 1. Dialogs (login selector/email/phone/register/recovery, every token modal, address, profile contact, product). */
@media (max-width: 767.98px) {
	.modal-dialog {
		width: min(calc(100vw - 2 * var(--luqm-gutter)), 500px);
		max-width: none;
		margin: var(--luqm-gutter) auto;
		height: calc(100% - 2 * var(--luqm-gutter)); /* % of the fixed .modal: follows the real (dynamic) viewport, unlike vh */
		display: flex;
		align-items: center;
	}
	.modal-dialog.modal-dialog-centered { align-items: center; }
	/* legacy inline `style="width:90%"` and `.modal_solicitud2 .modal-content{width:75%}` */
	.modal-dialog .modal-content,
	.modal_solicitud2 .modal-content { width: 100% !important; max-width: 100%; max-height: 100%; }
	.modal-content { overflow: hidden; }
	/* Access dialogs follow their content; legacy tienda height:100% otherwise leaves a large empty panel. */
	:is(#modalLoginSelector, #modalLogin, #modalPhone, #modalCodePhone, #modalConfirmarEmailLogin,
		#modalRecoverPassword1, #modalRecoverPassword2, #modalRecoverPassword3, #modalRegister, #modalCodeRegister,
		#modalUpdatePhone, #modalUpdateEmail, #modalCodePhoneCheckout, #modalPhoneProfile, #modalCodePhoneProfile,
		#modalEmailProfile, #modalCodeEmailProfile, #changePasswordModal) :is(.modal-content, .modal-body) { height: auto; max-height: 100%; }
	.modal-header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; min-width: 0; }
	.modal-header > :first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
	.modal-header .separador { display: none; }
	.modal-header .btn-close { flex: 0 0 auto; position: static; margin: 0; width: 44px; height: 44px; padding: 0; background-position: center; background-origin: content-box; background-size: 16px; }
	.modal-header .modal--login__back { min-width: 44px; min-height: 44px; display: flex; align-items: center; }
	.modal-header .modal--login__back button { min-width: 44px; min-height: 44px; }
	.modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; font-size: 1rem; overflow-wrap: anywhere; }
	.modal-footer { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
	.modal-body .col-md-4, .modal-body .col-md-6, .modal-body .col-md-8, .modal-body .col-md-12 { width: 100%; flex: 0 0 100%; max-width: 100%; }
	/* iOS zooms on focus below 16px: keep every form control at 16px computed */
	.modal input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .modal select, .modal textarea,
	.input input, .input select, .input textarea { font-size: 16px; min-height: 44px; }
	.modal .btn, .modal button.button--primary, .modal button.button--blue-login, .modal button.button--white, .modal button.button--secondary { min-height: 44px; }
}

/* 2. Six OTP cells (phones/tablet only; >=768px keeps the legacy 3rem boxes, 2px grey border and flex row untouched):
   always fit, 44px touch where the width allows, 4px grid gap, no inner horizontal scroll. */
@media (max-width: 767.98px) {
	.inputsSeparados { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; justify-content: stretch; max-width: 100%; }
	.inputsSeparados input {
		width: 100%; min-width: 0; height: 48px; min-height: 44px; box-sizing: border-box;
		padding: 0 !important; font-size: 20px; line-height: 1; text-align: center; border-radius: 12px !important;
	}
	.inputsSeparados input:focus-visible { outline: 3px solid #5393d0; outline-offset: 1px; }
}
@media (min-width: 420px) and (max-width: 767.98px) { .inputsSeparados { gap: 8px; } }

/* 3. Catalogue: four templates. Mobile = compact photo left, copy right, price + 44px add below. Desktop rules in catalogue.css stay. */
@media (max-width: 575.98px) {
	.prods.web_1, .prods.web_2, .prods.web_3, .prods.web_4 { width: 100%; flex: 0 0 100%; max-width: 100%; padding-top: 8px; padding-bottom: 8px; }
	.prods .stores--item-2 { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px; height: auto; min-width: 0; }
	.prods .stores--item-2__img { grid-column: 1; grid-row: 1; width: 88px; height: 88px; overflow: hidden; border-radius: 12px; }
	.prods .stores--item-2__img img, .prods .stores--item-2__img svg, .web_1 .stores--item-2__img img, .web_1 .stores--item-2__img svg, .web_4 .stores--item-2__img img {
		width: 88px; height: 88px; object-fit: cover; display: block;
	}
	.prods .stores--item-2__txt { grid-column: 2; grid-row: 1; min-width: 0; padding: 0 !important; height: auto; position: static; }
	/* templates without a photo (web_2 / web_3): copy takes the full row */
	.prods .stores--item-2 > .stores--item-2__txt:only-child { grid-column: 1 / -1; }
	.prods .stores--item-2__txt h3 { height: auto; min-height: 0; margin: 0 0 4px; font-size: 16px; line-height: 1.3; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
	.prods .cuerpo_card, .prods .cuerpo_card p, .prods .cuerpo_card ul { font-size: 14px !important; line-height: 1.4 !important; text-align: left !important; overflow-wrap: anywhere; }
	.prods .div_but, .prods .div_but_pri { position: static; margin: 8px 0 0; padding: 0; width: 100%; max-width: 100%; display: block; }
	.prods .div_but .price, .prods .div_but_pri .price { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; width: 100%; padding: 0; }
	.prods .stores--item-2__txt .price .moneda { flex: 1 1 auto; width: auto; float: none !important; margin: 0; font-size: 18px; overflow-wrap: anywhere; }
	.prods .price button, .prods .price .button--add, .prods .stores--item-2 .btn-blue-home { float: none !important; flex: 0 0 auto; width: auto; min-width: 44px; min-height: 44px; }
	/* template 4 keeps its quantity actions: they wrap inside the card instead of overflowing it */
	/* the legacy `.div_topN{height:100px!important}` clips/overlaps copy once title + description need more than 100px */
	.prods [class*="div_top"] { height: auto !important; min-height: 0; }
	/* template 4 quantity: legacy stacks two absolutely positioned buttons (fine at 26px, overlapping at 44px) -> one row  [-] n [+] */
	.prods .input-group { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; width: auto; position: static; }
	.prods .input-group-btn { position: static !important; margin: 0 !important; }
	.prods .minusBtn { order: 1; }
	.prods .boxInput { order: 2; width: 56px; flex: 0 0 56px; padding: 0 !important; display: flex; align-items: center; }
	.prods .boxInput .form-control { width: 100%; min-width: 0; padding-left: 0; padding-right: 0; font-size: 16px; }
	.prods .plussBtn { order: 3; }
	.prods .buttonContainer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
	.prods .buttonContainer .rightcontent { flex: 0 1 auto; max-width: 100%; }
	.prods .buttonContainer .btn-blue-home { float: none !important; flex: 1 1 96px; width: auto; max-width: 100%; }
	.prods .btn-group-sm > .btn, .prods .input-group-btn .btn { min-width: 44px; min-height: 44px; }
	.web_4 .stores--item-2__txt .row, .web_4 .button--amount { max-width: 100%; flex-wrap: wrap; margin-left: 0; margin-right: 0; }
	.web_4 .button--amount button { min-width: 44px; min-height: 44px; }
}

/* 3a. MOBILE4 (owner-approved 03Nov): Visual (web_1) and Compacta (web_2) are different cards on phones. Heights are content-driven
   (min-height only), so long names/descriptions grow the card instead of being clipped. */
@media (max-width: 575.98px) {
	/* Visual / .web_1: tall HORIZONTAL card, large photo left (124px, 96px at <=359), copy right, price + add below the copy. */
	.prods.web_1 .stores--item-2 { grid-template-columns: 124px minmax(0, 1fr); column-gap: 12px; min-height: 166px; align-items: start; }
	.prods.web_1 .stores--item-2__img { width: 124px; height: 124px; border-radius: 16px; }
	.prods.web_1 .stores--item-2__img img, .prods.web_1 .stores--item-2__img svg { width: 124px; height: 124px; object-fit: contain; }
	.prods.web_1 .stores--item-2__txt h3 { font-size: 17px; }

	/* Compacta / .web_2: the photo lives INSIDE the text block, so that block becomes the grid: 72px photo | name + description,
	   then price + 44px add on its own row aligned right. */
	.prods.web_2 .stores--item-2 { min-height: 112px; align-items: stretch; }
	.prods.web_2 .stores--item-2__txt {
		grid-column: 1 / -1; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-content: start; align-items: start;
	}
	.prods.web_2 .stores--item-2__txt > img, .prods.web_2 .stores--item-2__txt > svg {
		grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 72px !important; height: 72px !important; float: none; margin: 0; object-fit: contain; border-radius: 12px; display: block;
	}
	.prods.web_2 .stores--item-2__txt > h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 16px; }
	.prods.web_2 .stores--item-2__txt > .cuerpo_card { grid-column: 2; grid-row: 2; min-width: 0; margin: 0; }
	.prods.web_2 .stores--item-2__txt > .buttonContainer { grid-column: 2; grid-row: 3; margin: 0 !important; width: 100%; }
	.prods.web_2 .buttonContainer .price { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 0; }
	/* The legacy template-4 buttonContainer rule must not stretch Compacta's add action. */
	.prods.web_2 .buttonContainer .price .btn-blue-home { flex: 0 0 44px; width: 44px; max-width: 44px; height: 44px; margin: 0 !important; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 359.98px) {
	.prods.web_1 .stores--item-2 { grid-template-columns: 96px minmax(0, 1fr); column-gap: 8px; min-height: 166px; }
	.prods.web_1 .stores--item-2__img { width: 96px; height: 96px; }
	.prods.web_1 .stores--item-2__img img, .prods.web_1 .stores--item-2__img svg { width: 96px; height: 96px; }
	.prods.web_1 .stores--item-2__txt h3 { font-size: 16px; }
}

/* 3c. MOBILE4 home: on phones the whole carousel comes FIRST, then title, explanation and search (CSS order only: one DOM, no duplicated IDs/images). */
@media (max-width: 767.98px) {
	.luq-hero__carousel { order: -1; }
	.luq-hero__text { order: 1; }
}

/* 3d. MOBILE4 cart footer (#modalCarrito): two label/amount rows with the amounts at the far end, then ONE full-width CTA with the total on its right.
   Same nodes/IDs as before; only layout. The generic `.modal-footer{flex-wrap:nowrap}` of section 1 no longer squeezes them into one row. */
@media (max-width: 767.98px) {
	#modalCarrito .modal-header { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px 8px; }
	#modalCarrito .modal-header .title-modal { grid-column: 1; grid-row: 1; }
	#modalCarrito .modal-header > .txt { grid-column: 1; grid-row: 2; }
	#modalCarrito .modal-header::before { pointer-events: none; }
	#modalCarrito .modal-header .btn-close { z-index: 1; grid-column: 2; grid-row: 1 / 3; align-self: start; }
	.modal--shopping .modal-footer { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; align-items: stretch; }
	.modal--shopping .modal-footer > * { margin: 0; min-width: 0; }
	.modal--shopping .modal-footer .total { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; }
	.modal--shopping .modal-footer .total .price { margin-left: auto; text-align: right; overflow-wrap: anywhere; }
	.modal--shopping .modal-footer #luq_cart_finish {
		display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; width: 100%; min-height: 48px; margin-top: 4px; padding: 8px 16px;
	}
	.modal--shopping .modal-footer #luq_cart_finish .s_c_total { float: none !important; margin-left: auto; max-width: 100%; overflow-wrap: anywhere; text-align: right; }
}

/* 3b. The merchant header is fixed and, with a long name + search + categories, is ~205px high on a phone while the catalogue only reserves 80px:
   the first cards sat behind it. On phones it sticks only when the screen is tall enough; otherwise it scrolls away (no content hidden). */
@media (max-width: 767.98px) {
	body:has(section.catalogue) nav.header.header--checkout { position: relative; }
	body:has(section.catalogue) section.catalogue { padding-top: 16px !important; } /* beats the legacy inline padding-top:5rem that reserved room for the old fixed header */
}
@media (max-width: 767.98px) and (min-height: 700px) {
	body:has(section.catalogue) nav.header.header--checkout { position: sticky; top: 0; }
}

/* 4. Product detail (#AddProductModal / #AddProductModal2): contained image, scrolling options, footer always in flow. */
@media (max-width: 767.98px) {
	#AddProductModal .modal-dialog, #AddProductModal2 .modal-dialog { max-width: none; }
	#AddProductModal .modal-content, #AddProductModal2 .modal-content { display: flex; flex-direction: column; }
	#AddProductModal .modal-title, #AddProductModal2 .modal-title { margin: 0 !important; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; text-align: left; }
	#AddProductModal .modal-header .row, #AddProductModal2 .modal-header .row { margin: 0; min-width: 0; flex: 1 1 auto; }
	#AddProductModal .imgResponsive2, #AddProductModal2 .imgResponsive2 { height: auto; max-height: 160px; display: flex; justify-content: center; overflow: hidden; }
	#AddProductModal .imgvisor, #AddProductModal2 .imgvisor { max-width: 50% !important; max-height: 160px; width: auto; height: auto; object-fit: contain; }
	#AddProductModal .cardDetail, #AddProductModal2 .cardDetail { margin-top: 12px !important; }
	#AddProductModal .text-descr, #AddProductModal2 .text-descr { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
	#AddProductModal .scrollModal { max-height: none; overflow: visible; padding-top: 12px !important; }
	#AddProductModal #attributos label, #AddProductModal #attributos span, #AddProductModal2 label { overflow-wrap: anywhere; min-width: 0; }
	#AddProductModal #attributos .row, #AddProductModal #attributos [class*="col-"] { max-width: 100%; }
	#AddProductModal #attributos input[type=radio], #AddProductModal #attributos input[type=checkbox] { width: 20px; height: 20px; flex: 0 0 auto; }
	#AddProductModal .modal-footer, #AddProductModal2 .modal-footer { position: sticky; bottom: 0; z-index: 1; background: #fff; border-top: 1px solid var(--luqm-border); display: grid; grid-template-columns: minmax(136px, 1fr) minmax(0, 1.2fr); align-items: center; }
	#AddProductModal .spinnerContent, #AddProductModal2 .spinnerContent { margin: 0 !important; min-width: 0; width: 100%; }
	#AddProductModal .spinnerContent #spinner, #AddProductModal2 .spinnerContent #spinner { margin-left: 0; }
	#AddProductModal .modal-footer .button--amount span, #AddProductModal2 .modal-footer .button--amount span { min-width: 44px; }
	/* the legacy `width:200%;max-width:140%` inline style made the quantity field wider than the dialog */
	#AddProductModal .button--amount, #AddProductModal2 .button--amount { width: 100% !important; max-width: 100% !important; display: flex; align-items: center; }
	#AddProductModal .button--amount button, #AddProductModal2 .button--amount button { min-width: 44px; min-height: 44px; flex: 0 0 auto; }
	#AddProductModal .button--amount span, #AddProductModal2 .button--amount span { flex: 1 1 auto; min-width: 0; }
	#AddProductModal .button--amount input, #AddProductModal2 .button--amount input { width: 100%; min-width: 0; padding-left: 0; padding-right: 0; }
	#AddProductModal .subtotalCart, #AddProductModal2 .subtotalCart { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 8px !important; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #2c6cb2; border-color: #2c6cb2; }
	#AddProductModal .subtotalCart p, #AddProductModal2 .subtotalCart p { padding: 0; }
	#AddProductModal .subtotalCart span, #AddProductModal2 .subtotalCart span { float: none; font-size: 18px; overflow-wrap: anywhere; }
}

/* 5. Address create/edit (checkout + profile): one column, bounded map, suggestion list inside the viewport. */
@media (max-width: 767.98px) {
	#crearDireccion .modal-dialog, #editarDireccion .modal-dialog { max-width: none; }
	#crearDireccion .row > [class*="col-"], #editarDireccion .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
	#crearDireccion [id*="map"], #editarDireccion [id*="map"] { height: 180px !important; max-height: 200px; width: 100% !important; }
	.autocomplete-suggestions { max-width: calc(100vw - 2 * var(--luqm-gutter)); max-height: 40vh !important; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
	.autocomplete-suggestion, .suggestion-item { min-height: 44px; display: flex; align-items: center; padding: 8px 12px !important; overflow-wrap: anywhere; }
	.pac-container { max-width: calc(100vw - 2 * var(--luqm-gutter)); }
}

/* 6. Profile / Mis pedidos: contained header + tabs, readable order cards, no empty status pill. */
@media (max-width: 767.98px) {
	.profile .nav-tabs, .profile .nav, #profileTab { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.profile .nav-tabs .nav-link, .profile .nav .nav-link { white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
	/* Each account tab keeps its icon and full label inside one button; the tab strip scrolls locally. */
	.profile #myTab .nav-item { flex: 0 0 auto; margin-right: 8px; }
	.profile #myTab .nav-link { width: max-content; gap: 8px; padding: 12px; }
	.profile #myTab .nav-link img { width: 32px; flex: 0 0 32px; }
	.profile #myTab .nav-link .info { width: auto; min-width: 0; padding-left: 0; }
	.profile #myTab .nav-link .info .title { margin-bottom: 0; }
	.list-detail .item { max-width: 100%; overflow: hidden; }
	.list-detail .item--header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
	.list-detail .item--header__logo { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
	.list-detail .item--header .status { max-width: 100%; overflow-wrap: anywhere; }
	.list-detail .item--header a { min-height: 44px; display: inline-flex; align-items: center; }
	.list-detail .item--body { display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 0; overflow-wrap: anywhere; font-size: 16px; }
	.list-detail .item--footer, .list-detail .item--footer .date { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; font-size: 14px; color: var(--luqm-muted); }
	.list-detail .item--footer .date-item { min-width: 0; overflow-wrap: anywhere; }
	/* the legacy `.div_pagination{padding:0 10rem}` + `.pagination.px-5.mx-5` made the pager 100% + 320px wide */
	.div_pagination { padding: 0; overflow-x: visible; max-width: 100%; }
	.div_pagination .pagination { flex-wrap: wrap; justify-content: center; gap: 4px; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
	.div_pagination .page-link { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
}

/* 7. Sizing guards only. Deliberately NO html/body overflow clipping here: it would hide real out-of-bounds elements
   (browser_mobile_layout.py neutralizes the legacy catalogue.css body clip and proves the genuine page width). */
@media (max-width: 991.98px) {
	img, svg, video { max-width: 100%; }
	nav.header { max-width: 100vw; }
}

/* 8. Narrow phones (<=359px): spend the body gutter on the OTP cells so all six reach 44px at 320. */
@media (max-width: 359.98px) {
	.modal .modal-body { padding-left: 12px; padding-right: 12px; }
	.modal-body .row { margin-left: 0; margin-right: 0; }
	.modal-body .row > * { padding-left: 0; padding-right: 0; }
	.modal-body .inputsSeparados { margin-left: -8px; margin-right: -8px; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
	.modal.fade .modal-dialog, .modal-backdrop.fade { transition: none !important; }
}