/* Novili · El arte de regalar — hereda la tipografía del tema.
   Cambia los colores desde aquí (o sobrescribe las variables en tu CSS). */
.nvar, .nvar-tarjeta-mount {
	--nvar-ink: #231d1a;
	--nvar-muted: #6d635b;
	--nvar-line: #e7dfd6;
	--nvar-bg: #faf6f1;
	--nvar-card: #fff;
	--nvar-accent: #7a1f3d;
	--nvar-accent-ink: #fff;
	--nvar-ok: #2f6b3f;
	--nvar-bad: #a42a2a;
	color: var(--nvar-ink);
	margin: 24px 0;
}
.nvar *, .nvar-tarjeta-mount * { box-sizing: border-box; }
.nvar button, .nvar select, .nvar input, .nvar textarea,
.nvar-tarjeta-mount button, .nvar-tarjeta-mount input, .nvar-tarjeta-mount textarea { font: inherit; }

/* ---------- Pasos ---------- */
.nvar__steps { list-style: none; margin: 0 0 20px; padding: 0; display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--nvar-line); }
.nvar__step { flex: 0 0 auto; }
.nvar__step button { display: flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px; color: var(--nvar-muted); cursor: pointer; white-space: nowrap; }
.nvar__step button:disabled { opacity: .45; cursor: not-allowed; }
.nvar__step em { font-size: 11px; font-style: normal; color: var(--nvar-muted); }
.nvar__num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: 12px; }
.nvar__step.is-current button { color: var(--nvar-ink); border-bottom-color: var(--nvar-accent); font-weight: 600; }
.nvar__step.is-current .nvar__num { background: var(--nvar-accent); border-color: var(--nvar-accent); color: var(--nvar-accent-ink); }
.nvar__step.is-done .nvar__num { background: var(--nvar-ok); border-color: var(--nvar-ok); color: #fff; }

/* ---------- Layout ---------- */
.nvar__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.nvar__title { margin: 0 0 4px; font-size: 1.5rem; outline: none; }
.nvar__city { margin: 0 0 16px; color: var(--nvar-muted); font-size: .9rem; min-height: 1.2em; }
.nvar__tools { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: .9rem; color: var(--nvar-muted); }
.nvar__tools select { padding: 6px 8px; border: 1px solid var(--nvar-line); background: #fff; }

/* ---------- Productos ---------- */
.nvar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.nvar-p { display: flex; flex-direction: column; text-align: left; background: var(--nvar-card); border: 1px solid var(--nvar-line); padding: 0; cursor: pointer; color: inherit; transition: border-color .15s, box-shadow .15s; }
.nvar-p:hover { border-color: #cdbfb1; }
.nvar-p.is-selected { border-color: var(--nvar-accent); box-shadow: 0 0 0 2px var(--nvar-accent) inset; }
.nvar-p__img { position: relative; display: block; aspect-ratio: 1; background: var(--nvar-bg); overflow: hidden; }
.nvar-p__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nvar-p__tag { position: absolute; left: 8px; top: 8px; background: #fff; color: var(--nvar-bad); font-size: 11px; font-style: normal; padding: 3px 8px; border: 1px solid var(--nvar-bad); }
.nvar-p__name { display: block; padding: 12px 12px 0; font-weight: 600; line-height: 1.25; }
.nvar-p__desc { display: block; padding: 4px 12px 0; font-size: .82rem; color: var(--nvar-muted); }
.nvar-p__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding: 12px; }
.nvar-p__cta { font-size: .82rem; color: var(--nvar-accent); font-weight: 600; }
.nvar-p--skeleton { min-height: 260px; cursor: default; background: linear-gradient(90deg, var(--nvar-bg), #fff, var(--nvar-bg)); background-size: 200% 100%; animation: nvar-sk 1.2s linear infinite; }
@keyframes nvar-sk { to { background-position: -200% 0; } }

.nvar-empty { padding: 32px; text-align: center; background: var(--nvar-bg); border: 1px dashed var(--nvar-line); }

/* ---------- Resumen lateral ---------- */
.nvar__side { position: sticky; top: 90px; background: var(--nvar-bg); border: 1px solid var(--nvar-line); padding: 18px; }
.nvar-sum__h { margin: 0 0 10px; font-size: 1.1rem; }
.nvar-sum__details > summary { display: none; cursor: pointer; font-size: .9rem; margin-bottom: 8px; }
.nvar-sum__list { list-style: none; margin: 0 0 12px; padding: 0; }
.nvar-sum__list li, .nvar-review li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--nvar-line); font-size: .9rem; }
.nvar-sum__list small, .nvar-review small { color: var(--nvar-muted); text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
.nvar-sum__empty { color: var(--nvar-muted); }
.nvar-sum__row { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 4px; font-size: 1.05rem; }
.nvar-sum__total { font-size: 1.3rem; }
.nvar-sum__btns { display: flex; gap: 8px; margin-top: 12px; }
.nvar-sum__btns .nvar-btn { flex: 1; }

.nvar-review { list-style: none; margin: 0 0 12px; padding: 0; }
.nvar-review li { align-items: center; }
.nvar-review img, .nvar-review__ph { width: 56px; height: 56px; object-fit: cover; flex: 0 0 56px; background: var(--nvar-bg); display: grid; place-items: center; }
.nvar-review li > span:nth-child(2) { flex: 1; }

/* ---------- Botones / mensajes ---------- */
.nvar-btn { background: var(--nvar-accent); color: var(--nvar-accent-ink); border: 1px solid var(--nvar-accent); padding: 12px 18px; cursor: pointer; font-weight: 600; }
.nvar-btn:hover:not(:disabled) { filter: brightness(1.1); }
.nvar-btn:disabled { opacity: .5; cursor: not-allowed; }
.nvar-btn--ghost { background: transparent; color: var(--nvar-ink); border-color: var(--nvar-line); flex: 0 0 auto !important; }
.nvar-hint { color: var(--nvar-muted); font-size: .82rem; margin: 8px 0 0; }
.nvar-error { color: var(--nvar-bad); font-size: .9rem; margin: 8px 0 0; min-height: 0; }
.nvar-error:empty { display: none; }
.nvar-choices { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.nvar-choice { background: #fff; border: 1px solid var(--nvar-line); padding: 12px 16px; cursor: pointer; }
.nvar-choice.is-selected { border-color: var(--nvar-accent); box-shadow: 0 0 0 2px var(--nvar-accent) inset; font-weight: 600; }

/* ---------- Editor de tarjeta ---------- */
.nvar-card-editor { display: grid; grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: 28px; align-items: start; margin: 16px 0; }
.nvar-card-editor__preview { position: sticky; top: 90px; }
.nvar-card { position: relative; width: 100%; background: #fff center / cover no-repeat; border: 1px solid var(--nvar-line); box-shadow: 0 6px 20px rgba(0,0,0,.12); overflow: hidden; }
.nvar-card__txt { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 1.2em; line-height: 1.35; overflow-wrap: anywhere; }
.nvar-card__m { white-space: pre-wrap; }
.nvar-card__m.is-placeholder { opacity: .45; }
.nvar-label { margin: 0 0 8px; font-weight: 600; }
.nvar-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; margin-bottom: 20px; }
.nvar-tpl { background: #fff; border: 1px solid var(--nvar-line); padding: 4px; cursor: pointer; text-align: center; font-size: .72rem; color: var(--nvar-muted); }
.nvar-tpl img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; margin-bottom: 4px; }
.nvar-tpl[aria-checked="true"] { border-color: var(--nvar-accent); box-shadow: 0 0 0 2px var(--nvar-accent) inset; color: var(--nvar-ink); }
.nvar-field { display: block; margin-bottom: 14px; }
.nvar-field > span { display: block; font-size: .85rem; margin-bottom: 4px; color: var(--nvar-muted); }
.nvar-field input, .nvar-field textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--nvar-line); background: #fff; }
.nvar-field__count { display: block; text-align: right; color: var(--nvar-muted); }

/* ---------- Carrito ---------- */
.nvar-item td.product-name { border-left: 3px solid var(--nvar-accent, #7a1f3d); }
.nvar-qty { display: inline-block; min-width: 2ch; text-align: center; }

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
	.nvar__body { grid-template-columns: 1fr; }
	.nvar__side { position: sticky; top: auto; bottom: 0; z-index: 20; margin: 0 -16px; padding: 12px 16px; border-width: 1px 0 0; box-shadow: 0 -6px 16px rgba(0,0,0,.08); }
	.nvar-sum__h, .nvar__side > .nvar-hint { display: none; }
	.nvar-sum__details > summary { display: block; }
	.nvar-sum__list { max-height: 30vh; overflow: auto; }
	.nvar-sum__row { margin-top: 0; }
	.nvar-card-editor { grid-template-columns: 1fr; }
	.nvar-card-editor__preview { position: static; max-width: 300px; margin: 0 auto; }
	.nvar-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}


/* Búsqueda de productos y opciones del empaque/moño */
.nvar-search { width: 100%; padding: 12px 14px; margin: 0 0 16px; border: 1px solid var(--nvar-line); border-radius: 3px; background: #fff; }
.nvar-ribbon { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px; margin: 0 0 18px; border: 1px solid var(--nvar-line); background: #faf8f6; }
.nvar-ribbon .nvar-field { flex: 1 1 180px; margin: 0; }
.nvar-ribbon select { width: 100%; padding: 10px; border: 1px solid var(--nvar-line); background: #fff; }


/* ---------- Front premium: configurador por pasos inspirado en flujos de gift-builder ---------- */
.nvar { --nvar-ink:#25201c; --nvar-muted:#756b63; --nvar-line:#e6ddd3; --nvar-bg:#fbf8f4; --nvar-card:#fff; --nvar-accent:#762c43; --nvar-accent-ink:#fff; max-width:1440px; margin:34px auto; font-family:Montserrat,Arial,sans-serif; font-size:14px; }
.nvar__head { margin-bottom:28px; }
.nvar__steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; border:1px solid var(--nvar-line); background:#fff; overflow:hidden; }
.nvar__step { min-width:0; }
.nvar__step button { width:100%; min-height:74px; justify-content:flex-start; padding:14px 12px; border:0; border-right:1px solid var(--nvar-line); border-bottom:3px solid transparent; white-space:normal; text-align:left; }
.nvar__step:last-child button { border-right:0; }
.nvar__num { flex:0 0 30px; width:30px; height:30px; font-size:12px; }
.nvar__lbl { font-size:12px; line-height:1.35; }
.nvar__step.is-current button { background:#f8f1ec; border-bottom-color:var(--nvar-accent); }
.nvar__body { grid-template-columns:minmax(0,1fr) 330px; gap:34px; }
.nvar__title { font-family:'Playfair Display',Georgia,serif; font-size:clamp(25px,3vw,36px); font-weight:500; letter-spacing:-.025em; line-height:1.15; margin-bottom:10px; }
.nvar__city { margin-bottom:22px; }
.nvar__side { background:#fbf8f4; border:1px solid var(--nvar-line); padding:22px; box-shadow:0 8px 28px rgba(49,35,25,.04); }
.nvar-sum__h { font-family:'Playfair Display',Georgia,serif; font-size:24px; font-weight:500; }
.nvar-sum__row { border-top:1px solid var(--nvar-line); padding-top:15px; }
.nvar-sum__total { color:var(--nvar-accent); font-size:24px; }
.nvar-grid { grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:18px; }
.nvar-p { border:1px solid #e8e0d8; border-radius:2px; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.nvar-p:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(45,33,25,.08); }
.nvar-p.is-selected { border-color:var(--nvar-accent); box-shadow:0 0 0 1px var(--nvar-accent),0 8px 24px rgba(45,33,25,.06); }
.nvar-p__img { aspect-ratio:4/4.2; background:#f7f3ef; }
.nvar-p__img img { object-fit:contain; padding:12px; mix-blend-mode:multiply; }
.nvar-p__name { font-family:'Playfair Display',Georgia,serif; font-size:17px; font-weight:500; line-height:1.25; padding:14px 14px 0; }
.nvar-p__desc { padding:6px 14px 0; line-height:1.45; }
.nvar-p__foot { padding:14px; border-top:1px solid #f1ece7; margin-top:12px; }
.nvar-p__foot b { font-size:15px; }
.nvar-p__cta { display:inline-block; border-bottom:1px solid currentColor; padding-bottom:2px; }
.nvar-search { border-radius:0; border:1px solid #d9cec4; padding:14px 16px; margin-bottom:16px; }
.nvar__tools select,.nvar-ribbon select { border-radius:0; }
.nvar-ribbon { background:#fbf8f4; border:1px solid var(--nvar-line); padding:18px; }
.nvar-btn { min-height:46px; padding:13px 20px; letter-spacing:.01em; transition:filter .2s ease; }
.nvar-btn:not(:disabled) { box-shadow:0 4px 12px rgba(70,23,42,.12); }
.nvar-choices .nvar-choice { border-radius:0; padding:13px 18px; }
.nvar-drink-types { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:4px 0 20px; }
.nvar-drink-type { display:flex; align-items:center; justify-content:center; gap:10px; min-height:82px; border:1px solid var(--nvar-line); background:#fff; padding:14px; color:var(--nvar-ink); cursor:pointer; font-weight:600; }
.nvar-drink-type:hover,.nvar-drink-type.is-selected { border-color:var(--nvar-accent); background:#fbf5f6; box-shadow:inset 0 0 0 1px var(--nvar-accent); }
.nvar-drink-type__symbol { display:grid; place-items:center; width:30px; height:30px; border:1px solid #c9b6bb; border-radius:50%; color:var(--nvar-accent); font-size:17px; }
.nvar-search-hint { color:var(--nvar-muted); margin:0 0 8px; font-size:12px; }
.nvar-empty--choose { margin:8px 0 18px; }
.nvar-empty--setup { padding:22px; border:1px solid var(--nvar-line); background:var(--nvar-bg); }
@media (max-width: 960px) {
 .nvar__steps { display:flex; overflow-x:auto; }
 .nvar__step { flex:0 0 185px; }
 .nvar__body { grid-template-columns:1fr; gap:22px; }
 .nvar__side { position:sticky; bottom:0; top:auto; z-index:20; margin:0; padding:15px; border:1px solid var(--nvar-line); box-shadow:0 -8px 24px rgba(40,30,20,.08); }
 .nvar-sum__h,.nvar__side>.nvar-hint { display:none; }
 .nvar-sum__details>summary { display:block; }
}
@media (max-width:560px) {
 .nvar { margin:18px auto; }
 .nvar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .nvar-p__name { font-size:15px; padding:10px 9px 0; }
 .nvar-p__desc { padding:4px 9px 0; font-size:11px; }
 .nvar-p__foot { padding:10px 9px; align-items:flex-start; flex-direction:column; gap:6px; }
 .nvar-drink-types { gap:7px; }
 .nvar-drink-type { min-height:72px; flex-direction:column; gap:6px; padding:8px 4px; font-size:12px; }
 .nvar-ribbon { flex-direction:column; }
 .nvar-sum__btns { gap:7px; }
 .nvar-btn { padding:11px 12px; }
}