/* ==========================================================================
   Cabecera interactiva: sugerencias de búsqueda, menú de cuenta y carrito lateral
   ========================================================================== */

/* --- Buscador con sugerencias ------------------------------------------- */

.nh-search-form { position: relative; }
.nh-search-form.is-suggesting { border-radius: 27px 27px 27px 27px; background: #fff; }
.nh-search-form.is-loading button svg { animation: nh-pulse .9s ease-in-out infinite; }
@keyframes nh-pulse { 50% { opacity: .35; } }

.nh-suggest {
	position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; right: 0;
	max-height: min(70vh, 620px); overflow: auto; overscroll-behavior: contain;
	background: #fff; border: 1px solid var(--nh-line); border-radius: 22px;
	box-shadow: 0 24px 60px -20px rgba(15, 30, 51, .35);
	padding: 10px;
	animation: nh-drop .16s ease-out;
}
@keyframes nh-drop { from { opacity: 0; transform: translateY(-6px); } }
.nh-suggest[hidden] { display: none; }
.nh-suggest__sec { padding: 6px 8px 8px; }
.nh-suggest__label {
	display: flex; justify-content: space-between; align-items: center;
	margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--nh-muted);
}
.nh-suggest__clear { border: 0; background: none; color: var(--nh-blue); font: inherit; text-transform: none; letter-spacing: 0; cursor: pointer; padding: 0; }
.nh-suggest__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.nh-chip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px; border-radius: var(--nh-pill);
	background: var(--nh-mist); color: var(--nh-ink); font-size: 14px; font-weight: 600; text-decoration: none;
	border: 1px solid transparent;
}
.nh-chip svg { color: var(--nh-muted); }
.nh-chip small { color: var(--nh-muted); font-weight: 500; }
.nh-chip--cat { background: var(--nh-sky); color: var(--nh-blue); }
.nh-chip:hover, .nh-chip.is-active { border-color: var(--nh-blue); background: #fff; }

.nh-suggest__list { display: grid; gap: 2px; }
.nh-sp {
	display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center;
	padding: 8px; border-radius: 14px; color: var(--nh-ink); text-decoration: none;
}
.nh-sp:hover, .nh-sp.is-active { background: var(--nh-mist); }
.nh-sp img { width: 52px; height: 52px; object-fit: contain; background: var(--nh-mist); border-radius: 12px; padding: 4px; box-sizing: border-box; }
.nh-sp:hover img, .nh-sp.is-active img { background: #fff; }
.nh-sp__txt { min-width: 0; display: grid; gap: 2px; }
.nh-sp__name { font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nh-sp__name mark { background: #FFF1C2; color: inherit; border-radius: 3px; padding: 0 1px; }
.nh-sp__cat { font-size: 12.5px; color: var(--nh-muted); display: flex; gap: 8px; align-items: center; }
.nh-sp__cat em { font-style: normal; font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 6px; }
.nh-sp__cat .is-sale { background: var(--nh-peach); color: var(--nh-warn); }
.nh-sp__cat .is-out { background: var(--nh-mist); color: var(--nh-muted); }
.nh-sp__price { font-family: var(--nh-font-display); font-weight: 700; font-size: 15.5px; white-space: nowrap; text-align: right; }
.nh-sp__price del { display: block; font-family: var(--nh-font-body); font-weight: 500; font-size: 12px; color: var(--nh-muted); }
.nh-sp__price ins { text-decoration: none; }

.nh-suggest__ai {
	display: flex; gap: 10px; align-items: flex-start; margin: 2px 4px 8px; padding: 10px 14px; border-radius: 14px;
	background: linear-gradient(100deg, #EEF5FF, #F4EFFF); color: var(--nh-ink); font-size: 14px; line-height: 1.4;
}
.nh-suggest__ai svg { color: #6B4EFF; flex: none; margin-top: 2px; }
.nh-suggest__ai b { color: #4B32D9; margin-right: 4px; }
.nh-suggest__thinking { display: flex; align-items: center; gap: 8px; margin: 4px; padding: 12px 14px; border-radius: 14px; background: var(--nh-mist); color: var(--nh-muted); font-size: 14px; }
.nh-suggest__thinking svg { color: #6B4EFF; }
.nh-suggest__thinking i { width: 6px; height: 6px; border-radius: 50%; background: #6B4EFF; opacity: .3; animation: nh-dot 1s infinite; }
.nh-suggest__thinking i:nth-of-type(2) { animation-delay: .15s; }
.nh-suggest__thinking i:nth-of-type(3) { animation-delay: .3s; }
@keyframes nh-dot { 50% { opacity: 1; transform: translateY(-2px); } }
.nh-suggest__empty { margin: 6px 8px 10px; padding: 14px; border-radius: 14px; background: var(--nh-mist); color: var(--nh-muted); font-size: 14.5px; }
.nh-suggest__all {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	margin-top: 4px; padding: 12px 14px; border-top: 1px solid var(--nh-line); border-radius: 0 0 14px 14px;
	color: var(--nh-blue); font-weight: 700; font-size: 14.5px; text-decoration: none;
}
.nh-suggest__all:hover, .nh-suggest__all.is-active { background: var(--nh-sky); }

/* --- Menú de Mi cuenta -------------------------------------------------- */

.nh-acct { position: relative; }
.nh-account__caret { width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); opacity: .6; margin-left: 2px; transition: transform .2s; }
.nh-acct.is-open .nh-account__caret { transform: rotate(-135deg) translateY(-1px); }
.nh-acct__menu {
	position: absolute; z-index: 60; top: calc(100% + 12px); right: -12px; width: 290px;
	background: #fff; border: 1px solid var(--nh-line); border-radius: 20px;
	box-shadow: 0 24px 60px -20px rgba(15, 30, 51, .35); padding: 8px;
	animation: nh-drop .16s ease-out;
}
.nh-acct__menu::before { /* puente para no perder el hover */
	content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.nh-acct__menu[hidden] { display: none; }
.nh-acct__head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 14px; border-bottom: 1px solid var(--nh-line); margin-bottom: 6px; }
.nh-acct__head b { display: block; font-size: 15px; }
.nh-acct__head small { display: block; color: var(--nh-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.nh-acct__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--nh-blue); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.nh-acct__list { list-style: none; margin: 0; padding: 0; }
.nh-acct__list a {
	display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px;
	color: var(--nh-ink); font-weight: 600; font-size: 14.5px; text-decoration: none;
}
.nh-acct__list a svg { color: var(--nh-blue); flex: none; }
.nh-acct__list a:hover, .nh-acct__list a:focus-visible { background: var(--nh-mist); outline: none; }
.nh-acct__item--customer-logout { border-top: 1px solid var(--nh-line); margin-top: 6px; padding-top: 6px; }
.nh-acct__item--customer-logout a, .nh-acct__item--customer-logout a svg { color: var(--nh-warn); }
.nh-acct__guest { padding: 12px 10px 10px; display: grid; gap: 10px; }
.nh-acct__guest p { margin: 0; color: var(--nh-muted); font-size: 14px; }
.nh-acct__login { width: 100%; box-sizing: border-box; min-height: 44px; }
.nh-acct__register { width: 100%; box-sizing: border-box; min-height: 44px; }
.nh-acct__perk { display: flex; gap: 8px; align-items: center; margin: 2px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--nh-peach); color: var(--nh-orange-dark); font-size: 13.5px; font-weight: 700; }

/* --- Carrito lateral ---------------------------------------------------- */

html.nh-lock, html.nh-lock body { overflow: hidden; }
.nh-drawer { position: fixed; inset: 0; z-index: 9990; }
.nh-drawer[hidden] { display: none; }
.nh-drawer__overlay { position: absolute; inset: 0; background: rgba(15, 30, 51, .45); opacity: 0; transition: opacity .25s; backdrop-filter: blur(2px); }
.nh-drawer__panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
	background: #fff; display: flex; flex-direction: column; outline: none;
	box-shadow: -30px 0 60px -30px rgba(15, 30, 51, .4);
	transform: translateX(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.nh-drawer.is-open .nh-drawer__overlay { opacity: 1; }
.nh-drawer.is-open .nh-drawer__panel { transform: none; }
.nh-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 14px 24px; border-bottom: 1px solid var(--nh-line); }
.nh-drawer__head h2 { margin: 0; font-size: 22px; }
.nh-drawer__count { color: var(--nh-muted); font-family: var(--nh-font-body); font-weight: 500; font-size: 16px; }
.nh-drawer__close { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--nh-mist); color: var(--nh-ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.nh-drawer__close:hover { background: var(--nh-line); }
.nh-drawer__loading { position: absolute; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; opacity: 0; transition: opacity .2s; }
.nh-drawer__loading::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--nh-orange); animation: nh-bar 1s ease-in-out infinite; }
@keyframes nh-bar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.nh-drawer.is-busy .nh-drawer__loading { opacity: 1; }

.nh-cart-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Barra de envío gratis */
.nh-ship { padding: 14px 24px; background: var(--nh-sky); }
.nh-ship p { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; color: var(--nh-blue); }
.nh-ship__bar { display: block; height: 7px; border-radius: 9px; background: rgba(0, 84, 166, .15); overflow: hidden; }
.nh-ship__bar i { display: block; height: 100%; border-radius: inherit; background: var(--nh-blue); transition: width .4s ease; }
.nh-ship.is-done { background: var(--nh-green-soft); }
.nh-ship.is-done p { color: var(--nh-green); }
.nh-ship.is-done .nh-ship__bar i { background: var(--nh-green); }

/* Productos */
.nh-cart-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.nh-ci-list { list-style: none; margin: 0; padding: 6px 24px; }
.nh-ci {
	display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 14px; align-items: start;
	padding: 16px 0; border-bottom: 1px solid var(--nh-line);
	transition: opacity .2s, transform .25s;
}
.nh-ci:last-child { border-bottom: 0; }
.nh-ci.is-busy { opacity: .55; pointer-events: none; }
.nh-ci.is-leaving { opacity: 0; transform: translateX(30px); }
.nh-ci__img img { width: 76px; height: 76px; object-fit: contain; background: var(--nh-mist); border-radius: 14px; padding: 6px; box-sizing: border-box; display: block; }
.nh-ci__info { display: grid; gap: 3px; min-width: 0; }
.nh-ci__name { font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--nh-ink); text-decoration: none; }
.nh-ci__name:hover { color: var(--nh-blue); }
.nh-ci__meta { font-size: 12.5px; color: var(--nh-muted); }
.nh-ci__unit { font-size: 13px; color: var(--nh-muted); }
.nh-ci__row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.nh-ci__total { font-family: var(--nh-font-display); font-weight: 700; font-size: 16px; white-space: nowrap; }
.nh-ci__remove { display: inline-flex; gap: 5px; align-items: center; border: 0; background: none; color: var(--nh-muted); font: inherit; font-size: 13px; cursor: pointer; padding: 4px; }
.nh-ci__remove:hover { color: var(--nh-warn); }

.nh-qty { display: inline-flex; align-items: center; border: 1.5px solid var(--nh-line); border-radius: var(--nh-pill); height: 36px; }
.nh-qty button { width: 34px; height: 100%; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--nh-ink); cursor: pointer; padding: 0; border-radius: var(--nh-pill); }
.nh-qty button:hover:not(:disabled) { background: var(--nh-mist); }
.nh-qty button:disabled { opacity: .3; cursor: default; }
.nh-qty input { width: 34px; height: 100%; border: 0; padding: 0; text-align: center; font-weight: 700; font-size: 14.5px; background: none; -moz-appearance: textfield; box-shadow: none; }
.nh-qty input::-webkit-outer-spin-button, .nh-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Total y botones */
.nh-cart-foot { padding: 16px 24px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--nh-line); background: #fff; box-shadow: 0 -12px 30px -20px rgba(15, 30, 51, .25); display: grid; gap: 10px; }
.nh-cart-foot__sub { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-weight: 700; font-size: 16px; }
.nh-cart-foot__sub small { color: var(--nh-muted); font-weight: 500; }
.nh-cart-foot__sub b { font-family: var(--nh-font-display); font-size: 22px; }
.nh-cart-foot__note { margin: -4px 0 4px; font-size: 12.5px; color: var(--nh-muted); }
.nh-cart-foot__pay { width: 100%; box-sizing: border-box; min-height: 52px; font-size: 16px; }
.nh-cart-foot__view { text-align: center; font-weight: 700; font-size: 14.5px; color: var(--nh-blue); padding: 4px; }

/* Vacío */
.nh-cart-empty { flex: 1; overflow: auto; padding: 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nh-cart-empty__icon { width: 84px; height: 84px; border-radius: 50%; background: var(--nh-sky); color: var(--nh-blue); display: grid; place-items: center; margin-bottom: 10px; }
.nh-cart-empty h3 { margin: 0; font-size: 22px; }
.nh-cart-empty p { margin: 0 0 14px; color: var(--nh-muted); max-width: 300px; }
.nh-cart-empty__cats { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--nh-line); width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nh-cart-empty__cats a { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--nh-mist); color: var(--nh-ink); font-weight: 600; font-size: 13.5px; text-decoration: none; text-align: left; }
.nh-cart-empty__cats a svg { color: var(--nh-blue); flex: none; }
.nh-cart-empty__cats a:hover { background: var(--nh-sky); }

/* Aviso inferior */
.nh-toast {
	position: fixed; z-index: 9995; left: 50%; bottom: 24px; transform: translate(-50%, 20px);
	display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px);
	padding: 12px 14px 12px 18px; border-radius: 16px; background: var(--nh-ink); color: #fff;
	box-shadow: 0 20px 40px -12px rgba(15, 30, 51, .5); font-size: 14.5px; font-weight: 600;
	opacity: 0; transition: opacity .25s, transform .25s;
}
.nh-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.nh-toast[hidden] { display: none; }
.nh-toast button { border: 0; border-radius: 10px; padding: 8px 12px; background: rgba(255,255,255,.14); color: #fff; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.nh-toast button:hover { background: rgba(255,255,255,.24); }

/* Botón de la ficha mientras agrega */
.single_add_to_cart_button.loading { opacity: .7; pointer-events: none; }
.woocommerce ul.products li.product .added_to_cart { display: none; }

/* --- Celular ------------------------------------------------------------- */

@media (max-width: 767px) {
	.nh-account { display: flex; }
	.nh-account__text, .nh-account__caret { display: none; }
	.nh-hdr { position: relative; }
	.nh-acct { position: static; }
	.nh-acct__menu { top: calc(100% - 4px); left: 12px; right: 12px; width: auto; }
	.nh-suggest { top: calc(100% + 6px); max-height: 65vh; }
	.nh-sp { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; }
	.nh-sp img { width: 46px; height: 46px; }
	.nh-ci-list, .nh-drawer__head { padding-left: 18px; padding-right: 18px; }
	.nh-cart-foot { padding-left: 18px; padding-right: 18px; }
	.nh-ci { grid-template-columns: 64px minmax(0, 1fr) auto; }
	.nh-ci__img img { width: 64px; height: 64px; }
	.nh-toast { bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.nh-drawer__panel, .nh-drawer__overlay, .nh-ci, .nh-toast { transition: none; }
	.nh-suggest, .nh-acct__menu { animation: none; }
}

/* --- Columna del carrito (pantallas anchas) ------------------------------ */
.nh-rail { display: none; }
@media (min-width: 1280px) {
	html.nh-has-rail body { margin-right: 148px; }
	html.nh-has-rail .nh-float--right.nh-wa, html.nh-has-rail .nh-float--right.nh-top, html.nh-has-rail .nh-top.nh-float--right { right: calc(148px + var(--nh-float-gap)); }
	.nh-rail {
		display: flex; flex-direction: column; position: fixed; z-index: 9970; top: var(--wp-admin--admin-bar--height, 0px); right: 0; bottom: 0; width: 148px;
		background: #fff; border-left: 1px solid var(--nh-line); box-shadow: -8px 0 24px -18px rgba(15,30,51,.35);
		font-size: 13px; text-align: center; animation: nh-rail-in .25s ease-out;
	}
	.nh-rail[hidden] { display: none; }
	.nh-rail.is-flash .nh-rail__top { animation: nh-rail-flash 1.2s ease-out; }
	.nh-rail-content { display: flex; flex-direction: column; min-height: 0; height: 100%; }
	.nh-rail__top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; border-bottom: 1px solid var(--nh-line); }
	.nh-rail__label { color: var(--nh-ink); font-weight: 600; }
	.nh-rail__sub { font-family: var(--nh-font-display); font-size: 17px; font-weight: 800; color: var(--nh-orange-dark, #C9520F); }
	.nh-rail__sub .woocommerce-Price-amount { white-space: nowrap; }
	.nh-rail__bar { width: 100%; height: 8px; border-radius: 99px; background: var(--nh-mist); overflow: hidden; margin-top: 4px; }
	.nh-rail__bar i { display: block; height: 100%; background: var(--nh-blue); border-radius: 99px; }
	.nh-rail__bar.is-done i { background: var(--nh-green, #1B8A5A); }
	.nh-rail__ship { font-size: 11.5px; line-height: 1.3; color: var(--nh-muted); }
	.nh-rail__ship.is-done { color: var(--nh-green, #1B8A5A); font-weight: 700; }
	.nh-rail__go { margin-top: 6px; width: 100%; padding: 7px 8px; border: 1px solid #A9B5C6; border-radius: 999px; color: var(--nh-ink); font-weight: 600; text-decoration: none; background: #fff; }
	.nh-rail__go:hover { border-color: var(--nh-blue); color: var(--nh-blue); }
	.nh-rail__list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; scrollbar-width: thin; }
	.nh-rail__item { padding: 12px 10px; border-bottom: 1px solid var(--nh-line); display: flex; flex-direction: column; align-items: center; gap: 6px; transition: opacity .2s; }
	.nh-rail__item.is-busy { opacity: .5; pointer-events: none; }
	.nh-rail__img { display: block; width: 104px; height: 104px; border-radius: 10px; background: var(--nh-mist); overflow: hidden; }
	.nh-rail__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 6px; box-sizing: border-box; }
	.nh-rail__price { font-size: 14px; font-weight: 800; color: var(--nh-ink); }
	.nh-rail__qty { display: inline-flex; align-items: center; border: 2px solid var(--nh-orange); border-radius: 999px; height: 32px; overflow: hidden; }
	.nh-rail__qty button { width: 32px; height: 100%; border: 0; background: none; color: var(--nh-ink); font-size: 17px; font-weight: 700; display: grid; place-items: center; cursor: pointer; padding: 0; }
	.nh-rail__qty button:hover:not(:disabled) { background: var(--nh-peach, #FFEDE3); }
	.nh-rail__qty button:disabled { opacity: .35; cursor: default; }
	.nh-rail__qty span { min-width: 20px; font-weight: 700; }
}
@keyframes nh-rail-in { from { transform: translateX(100%); } }
@keyframes nh-rail-flash { 0% { background: var(--nh-sky); } 100% { background: transparent; } }
