/* =========================================================
   LUHU - STYLES LIMPIO
   Archivo consolidado sin bloques duplicados innecesarios.
   Mantiene el diseño y funcionalidades visuales actuales.
========================================================= */

:root {
  --black: #10100f;
  --ink: #171717;
  --white: #ffffff;
  --stone: #f3f0ea;
  --sand: #ded4c5;
  --soft: #faf8f4;
  --gray: #77736d;
  --muted: #aaa49b;
  --line: #e8e1d7;
  --dark-line: #2b2a27;
  --accent: #c9a66b;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 24px 70px rgba(16, 16, 15, .10);
  --gap: clamp(16px, 3vw, 32px);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, system-ui, sans-serif;
  background: var(--soft);
  color: var(--ink);
  line-height: 1.6;
}

/* Respeta el atributo hidden en el panel y en toda la web.
   Sin esto, clases como .admin-login y .admin-app podían seguir mostrándose aunque JS las marcara como hidden. */
[hidden] {
  display: none !important;
}


body:has(.cart-panel.open),
body:has(.product-modal.open),
body:has(.size-guide-modal.open) {
  overflow: hidden;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.container {
  max-width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 var(--gap);
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 16, 15, .94);
  color: var(--white);
  border-bottom: 1px solid var(--dark-line);
  backdrop-filter: blur(16px);
}

.nav-inner {
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-img {
  height: 50px;
  width: auto;
  display: block;
}

.footer-logo-img {
  height: 62px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  color: rgba(255, 255, 255, .72);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nav-links a:hover {
  color: var(--white);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-btn {
  background: var(--white);
  color: var(--black);
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 800;
}

.cart-btn #cartCount,
.mobile-bottom-nav #mobileCartCount {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--black);
  font-size: .76rem;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--white);
  display: block;
}

.hero {
  background: radial-gradient(circle at top left, rgba(201, 166, 107, .26), transparent 32%), var(--black);
  color: var(--white);
  padding: clamp(70px, 10vw, 118px) 0 58px;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .82fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: center;
}

.eyebrow {
  color: var(--accent);
  font-size: 1.0rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 900;
  margin-bottom: 14px;
}

.hero h1,
.section-header h2,
.rule-card h2,
.buy-grid h2,
.buy-panel h2,
.cuts-banner h2,
.contact-card h2 {
  font-family: Syne, sans-serif;
  letter-spacing: -.055em;
  line-height: .96;
  font-variant-numeric: lining-nums;
}

.hero h1 {
  font-size: clamp(3rem, 7vw, 6.4rem);
  max-width: 800px;
  margin-bottom: 26px;
}

.hero-desc {
  color: rgba(255, 255, 255, .72);
  max-width: 590px;
  font-size: clamp(1rem, 1.45vw, 1.16rem);
  margin-bottom: 30px;
}

.hero-ctas {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 13px 24px;
  font-weight: 900;
  border: 0;
  transition: transform .22s, opacity .22s, background .22s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--white);
  color: var(--black);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, .24);
  color: var(--white);
  background: transparent;
}

.btn-dark {
  background: var(--black);
  color: var(--white);
}

.btn-soft {
  background: #ede7dc;
  color: var(--black);
}

.full {
  width: 100%;
}

.hero-proof {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.hero-proof span {
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .72);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .78rem;
  font-weight: 800;
}

.hero-showcase {
  position: relative;
}

.hero-main-card {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #25231f;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .28);
}

.hero-img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  object-fit: cover;
  display: block;
}

.hero-main-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 55%);
}

.hero-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 2;
  background: var(--white);
  color: var(--black);
  border-radius: 999px;
  padding: 9px 15px;
  font-weight: 900;
}

.hero-mini-card {
  position: absolute;
  right: -18px;
  bottom: 42px;
  z-index: 3;
  width: min(260px, 75%);
  background: rgba(255, 255, 255, .92);
  color: var(--black);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.hero-mini-card strong {
  display: block;
  font-family: Syne, sans-serif;
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: 8px;
}

.hero-mini-card span {
  color: var(--gray);
  font-weight: 800;
}

.ticker {
  background: var(--black);
  color: var(--white);
  overflow: hidden;
}

.ticker-track {
  width: max-content;
  display: flex;
  gap: 28px;
  padding: 13px 0;
  animation: ticker 24s linear infinite;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: .82rem;
  letter-spacing: .08em;
}

.section {
  padding: clamp(58px, 8vw, 96px) 0;
}

.section-compact {
  padding: 34px 0;
}

.section-light {
  background: var(--white);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 34px;
}

.section-header h2,
.rule-card h2,
.buy-grid h2,
.cuts-banner h2,
.contact-card h2 {
  font-size: clamp(2rem, 4vw, 3.6rem);
}

.section-header a {
  color: var(--gray);
  font-weight: 900;
}

.section-subtitle {
  color: var(--gray);
  max-width: 590px;
  margin-top: 10px;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.trust-grid article {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.trust-grid span {
  color: var(--accent);
  font-weight: 900;
}

.trust-grid h3 {
  font-family: Syne, sans-serif;
  font-size: 1.3rem;
  margin: 6px 0;
}

.trust-grid p {
  color: var(--gray);
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.category-card,
.featured-card,
.product-image {
  border: 0;
  text-align: left;
  font: inherit;
}

.category-card {
  position: relative;
  min-height: 360px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--white);
  background: #222;
  transition: transform .25s, box-shadow .25s;
}

.category-card:hover,
.featured-card:hover,
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.category-img,
.featured-card img,
.product-img,
.cart-item img,
#modalImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-card::after,
.featured-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, .08));
  z-index: 1;
}

.category-label {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  background: rgba(255, 255, 255, .92);
  color: var(--black);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.category-content {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.category-content h3,
.featured-card h3,
.product-body h3,
.rule-options h3,
.buy-steps h3,
.customer-form h3 {
  font-family: Syne, sans-serif;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums;
}

.category-content h3 {
  font-size: 1.55rem;
  line-height: 1;
  margin-bottom: 8px;
}

.category-content p {
  color: rgba(255, 255, 255, .76);
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.featured-card {
  position: relative;
  min-height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  transition: transform .25s, box-shadow .25s;
}

.featured-card div {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 20px;
}

.featured-card span {
  display: inline-flex;
  background: var(--accent);
  color: var(--black);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 900;
  margin-bottom: 10px;
}

.featured-card h3 {
  font-size: 1.32rem;
  line-height: 1;
  margin-bottom: 8px;
}

.featured-card p {
  color: rgba(255, 255, 255, .72);
}

.rule-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 20px;
}

.rule-card,
.rule-options article,
.buy-steps article,
.contact-card,
.pricing-note {
  border-radius: var(--radius-lg);
}

.rule-dark {
  background: var(--black);
  color: var(--white);
  padding: clamp(30px, 5vw, 58px);
}

.rule-dark p:last-child {
  color: rgba(255, 255, 255, .72);
  margin-top: 20px;
  max-width: 520px;
}

.rule-options {
  display: grid;
  gap: 18px;
}

.rule-options article {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 28px;
}

.rule-options span {
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: .74rem;
  font-weight: 900;
}

.rule-options h3 {
  font-size: 1.7rem;
  margin: 8px 0;
}

.rule-options p {
  color: var(--gray);
}

.highlight-rule {
  border-color: rgba(201, 166, 107, .6) !important;
  box-shadow: 0 20px 60px rgba(201, 166, 107, .18);
}

.cuts-tabs,
.selector-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cut-pill,
.selector-btn {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 15px;
  font-weight: 900;
}

.selector-btn.active,
.selector-btn:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.product-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}

.product-image {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--stone);
  position: relative;
  overflow: hidden;
}

.product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .20), transparent 48%);
}

.product-img {
  transition: transform .35s;
}

.product-card:hover .product-img {
  transform: scale(1.04);
}

.product-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: var(--black);
  color: var(--white);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .70rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.product-body {
  padding: 18px;
}

.product-title-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 5px;
}

.product-title-row h3 {
  font-size: 1.15rem;
  line-height: 1.05;
}

.mini-label {
  white-space: nowrap;
  background: #f5ead7;
  color: #7b5a23;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: .66rem;
  font-weight: 900;
}

.product-variant {
  color: var(--gray);
  font-size: .9rem;
  margin-bottom: 12px;
}

.product-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}

.meta-pill {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.product-footer {
  display: grid;
  gap: 14px;
}

.product-price {
  font-family: Syne, sans-serif;
  font-weight: 900;
  font-size: 1.1rem;
}

.product-price small {
  display: block;
  color: var(--gray);
  font-family: Inter, system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 800;
}

.wholesale-hint,
.modal-help {
  color: var(--gray);
  font-size: .86rem;
}

.add-btn {
  background: var(--black);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  padding: 11px 14px;
  font-weight: 900;
  width: 100%;
}

.buy-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 28px;
  align-items: start;
}

.buy-grid>div>p:last-child {
  color: var(--gray);
  margin-top: 18px;
}

.buy-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.buy-steps article {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 24px;
}

.buy-steps strong {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-family: Syne, sans-serif;
  margin-bottom: 18px;
}

.buy-steps h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.buy-steps p {
  color: var(--gray);
}

.cuts-banner {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(34px, 6vw, 70px);
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
}

.cuts-banner p {
  color: rgba(255, 255, 255, .68);
  margin: 18px 0 28px;
}

.cut-pill {
  border-color: rgba(255, 255, 255, .24);
  color: var(--white);
  background: transparent;
}

.cut-pill.active,
.cut-pill:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.fit-info {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  padding: 28px;
}

.fit-info h3 {
  font-family: Syne, sans-serif;
  font-size: 1.9rem;
  line-height: 1;
}

.contact-card {
  background: var(--sand);
  padding: clamp(34px, 6vw, 62px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
}

.contact-card p {
  color: #5d554b;
  margin-top: 14px;
  max-width: 620px;
}

.contact-actions {
  display: grid;
  gap: 12px;
  min-width: 230px;
}

.cart-panel {
  position: fixed;
  top: 0;
  right: -460px;
  width: min(460px, 100%);
  height: 100vh;
  background: var(--white);
  z-index: 80;
  padding: 22px;
  transition: right .25s;
  display: flex;
  flex-direction: column;
  box-shadow: -30px 0 90px rgba(0, 0, 0, .18);
}

.cart-panel.open {
  right: 0;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.cart-header .eyebrow {
  margin-bottom: 2px;
}

.cart-header h2 {
  font-family: Syne, sans-serif;
  font-size: 2rem;
  line-height: 1;
}

.cart-header button,
.modal-close {
  border: 0;
  background: transparent;
  font-size: 2rem;
  cursor: pointer;
}

.cart-items {
  flex: 1;
  overflow: auto;
  padding: 16px 0;
  display: grid;
  gap: 12px;
}

.empty-cart {
  background: var(--soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.empty-cart p {
  color: var(--gray);
}

.cart-price-mode {
  background: #f7efe1;
  color: #694b18;
  border: 1px solid #ead8b5;
  border-radius: var(--radius);
  padding: 11px 12px;
  font-size: .88rem;
  font-weight: 800;
}

.cart-price-mode.active {
  background: #edf7e9;
  color: #2b6b2b;
  border-color: #cfe7c8;
}

.cart-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  align-items: center;
}

.cart-item img {
  width: 72px;
  height: 88px;
  border-radius: 12px;
}

.cart-item-info strong,
.cart-item-info span,
.cart-item-info small {
  display: block;
}

.cart-item-info span,
.cart-item-info small {
  color: var(--gray);
  font-size: .84rem;
}

.cart-item-actions {
  display: grid;
  gap: 6px;
}

.cart-item-actions button {
  border: 0;
  background: var(--soft);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: .78rem;
  font-weight: 900;
}

.customer-form {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 16px 0;
}

.customer-form h3 {
  font-size: 1.2rem;
}

.customer-form label {
  display: grid;
  gap: 5px;
  color: var(--gray);
  font-size: .84rem;
  font-weight: 800;
}

.customer-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
  background: var(--soft);
}

.customer-form input:focus {
  border-color: var(--black);
  background: var(--white);
}

.cart-footer {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: grid;
  gap: 12px;
}

.cart-summary {
  display: grid;
  gap: 6px;
  color: var(--gray);
  font-size: .93rem;
}

.cart-summary strong {
  color: var(--black);
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .48);
  z-index: 70;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.product-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}

.product-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.product-modal-card {
  position: relative;
  width: min(980px, 100%);
  max-height: min(88vh, 880px);
  overflow: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .28);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
}

.modal-image-wrap {
  position: relative;
  min-height: 620px;
  background: var(--stone);
}

.modal-info {
  padding: clamp(24px, 4vw, 42px);
}

.modal-info h2 {
  font-family: Syne, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.05em;
  margin-bottom: 14px;
}

.modal-description {
  color: var(--gray);
  margin-bottom: 18px;
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 18px 0;
}

.detail-list span {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  color: var(--gray);
  font-size: .86rem;
}

.detail-list strong {
  color: var(--black);
}

.selector-group {
  margin: 18px 0;
}

.selector-group h3,
.quantity-row h3 {
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.quantity-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin: 20px 0;
}

.quantity-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.quantity-control button {
  width: 38px;
  height: 38px;
  border: 0;
  background: var(--soft);
  font-weight: 900;
}

.quantity-control span {
  min-width: 44px;
  text-align: center;
  font-weight: 900;
}

.price-preview {
  text-align: right;
  display: grid;
  gap: 2px;
}

.price-preview span {
  color: var(--gray);
}

.price-preview strong {
  font-family: Syne, sans-serif;
  font-size: 1.32rem;
}

.mobile-bottom-nav {
  display: none;
}

.footer {
  background: var(--black);
  color: var(--white);
  padding: 58px 0 86px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 36px;
}

.footer p,
.footer a,
.footer-bottom {
  color: rgba(255, 255, 255, .58);
}

.footer a {
  display: block;
  margin-top: 8px;
}

.footer a:hover {
  color: var(--white);
}

.footer h3 {
  font-family: Syne, sans-serif;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.footer-bottom {
  border-top: 1px solid var(--dark-line);
  margin-top: 40px;
  padding-top: 20px;
  font-size: .86rem;
}

.catalog-hero {
  background: radial-gradient(circle at top left, rgba(201, 166, 107, .24), transparent 34%), var(--black);
  color: var(--white);
  padding: clamp(70px, 10vw, 118px) 0 clamp(46px, 7vw, 70px);
}

.catalog-hero h1 {
  font-family: Syne, sans-serif;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  line-height: .94;
  letter-spacing: -.055em;
  max-width: 860px;
  margin-bottom: 22px;
}

.catalog-hero p:not(.eyebrow) {
  color: rgba(255, 255, 255, .72);
  max-width: 680px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.catalog-hero-actions {
  margin-top: 28px;
}

.stock-badge {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  background: rgba(255, 255, 255, .94);
  color: var(--black);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .70rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.customer-form select,
.customer-form input[type="url"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
  background: var(--soft);
  color: var(--ink);
}

.customer-form select:focus,
.customer-form input[type="url"]:focus {
  border-color: var(--black);
  background: var(--white);
}

.conditional-fields {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: #fffaf2;
}

.conditional-fields[hidden] {
  display: none;
}

.form-hint {
  color: var(--gray);
  font-size: .82rem;
  font-weight: 700;
}

.catalog-hero .btn-soft {
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .24);
}

.catalog-hero .btn-dark {
  background: var(--white);
  color: var(--black);
}

.catalog-main {
  padding-top: clamp(28px, 5vw, 54px);
}

.catalog-intro {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 340px);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 26px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--white), #f6efe4);
}

.catalog-intro h1 {
  font-family: Syne, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: .96;
  letter-spacing: -.055em;
  margin-bottom: 12px;
}

.catalog-intro p:not(.eyebrow) {
  color: var(--gray);
  max-width: 680px;
}

.catalog-intro-card {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.catalog-intro-card strong {
  font-family: Syne, sans-serif;
  font-size: 1.3rem;
  line-height: 1;
}

.catalog-intro-card span {
  color: rgba(255, 255, 255, .72);
  font-size: .92rem;
}

.nav-item {
  position: relative;
}

.nav-catalog-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .72);
  background: transparent;
  border: 0;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 22px 0;
}

.nav-catalog-trigger:hover,
.nav-mega:hover .nav-catalog-trigger,
.nav-mega:focus-within .nav-catalog-trigger {
  color: var(--white);
}

.nav-catalog-trigger span {
  font-size: .82rem;
  transition: transform .2s ease;
}

.nav-mega:hover .nav-catalog-trigger span,
.nav-mega:focus-within .nav-catalog-trigger span,
.nav-mega.open .nav-catalog-trigger span {
  transform: rotate(180deg);
}

.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  display: grid;
  background: rgba(16, 16, 15, .98);
  border: 1px solid var(--dark-line);
  border-radius: 22px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, .30);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  box-sizing: border-box;
  overflow: hidden;
  width: min(1080px, calc(100vw - 32px));
  grid-template-columns: 1.15fr repeat(4, minmax(0, .9fr));
  gap: 10px;
  padding: 16px;
}

.nav-mega:hover .mega-menu,
.nav-mega:focus-within .mega-menu,
.nav-mega.open .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-column {
  display: grid;
  align-content: start;
  gap: 8px;
  border-radius: 16px;
  min-width: 0;
  padding: 14px;
}

.mega-column-featured {
  background: linear-gradient(135deg, rgba(201, 166, 107, .20), rgba(255, 255, 255, .05));
  border: 1px solid rgba(201, 166, 107, .22);
}

.mega-eyebrow {
  color: var(--accent);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
}

.mega-column strong,
.mega-column h3 {
  color: var(--white);
  font-family: Syne, sans-serif;
  line-height: 1;
}

.mega-column strong {
  font-size: 1.35rem;
}

.mega-column h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.mega-column p {
  color: rgba(255, 255, 255, .62);
  font-size: .86rem;
}

.mega-column a {
  color: rgba(255, 255, 255, .68);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.25;
  padding: 8px 10px;
  border-radius: 999px;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.mega-column a:hover {
  background: rgba(255, 255, 255, .09);
  color: var(--white);
  transform: translateX(2px);
}

.mega-column .mega-all {
  width: 100%;
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  padding: 10px 14px;
  background: var(--accent);
  color: var(--black);
  margin-top: 4px;
}

.mega-column .mega-all:hover {
  background: var(--white);
  color: var(--black);
}

.mega-column-sale {
  background: linear-gradient(135deg, rgba(201, 166, 107, .28), rgba(255, 255, 255, .08));
  border: 1px solid rgba(201, 166, 107, .34);
  align-self: start;
  min-width: 0;
  min-height: auto;
  height: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.mega-column-sale h3 {
  color: var(--accent);
}

.mega-column-sale a {
  box-sizing: border-box;
  width: auto;
  min-width: 190px;
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 22px;
  background: var(--accent);
  color: var(--black);
}

.mega-column-sale a:hover {
  background: var(--white);
  color: var(--black);
}

.mega-column-sale a::before {
  content: none;
  display: none;
}

.mega-column-sale p {
  color: rgba(255, 255, 255, .72);
  margin-top: 2px;
  display: none;
}

.catalog-current-card {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 100%;
  border: 1px solid rgba(201, 166, 107, .22);
}

.catalog-current-card span {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.catalog-current-card strong {
  font-family: Syne, sans-serif;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: .95;
  letter-spacing: -.04em;
}

.catalog-current-card p {
  color: rgba(255, 255, 255, .70) !important;
  font-size: .92rem;
}

.catalog-current-card a {
  width: max-content;
  margin-top: 4px;
  background: var(--accent);
  color: var(--black);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: .82rem;
}

.catalog-current-card a:hover {
  background: var(--white);
}

.catalog-current-card a[hidden] {
  display: none;
}

.catalog-current-card.sale-view {
  background: linear-gradient(135deg, #191713, #6a4a18);
  border-color: rgba(201, 166, 107, .42);
}

.mega-column:not(.mega-column-featured):not(.mega-column-sale) a {
  position: relative;
  margin-left: 12px;
  padding-left: 18px;
}

.mega-column:not(.mega-column-featured):not(.mega-column-sale) a::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(201, 166, 107, .75);
  transform: translateY(-50%);
}

.mega-column:not(.mega-column-featured) h3 {
  margin-left: 0;
}

.catalog-intro-minimal {
  display: block;
  padding: 0;
  margin-bottom: 22px;
  border: 0;
  background: transparent;
}

.catalog-intro-minimal .catalog-current-card {
  width: 100%;
  min-height: auto;
  padding: clamp(18px, 3vw, 26px);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 22px;
  row-gap: 10px;
}

.catalog-intro-minimal .catalog-current-card span,
.catalog-intro-minimal .catalog-current-card strong,
.catalog-intro-minimal .catalog-current-card p {
  grid-column: 1;
}

.catalog-intro-minimal .catalog-current-card a {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: end;
  width: max-content;
  max-width: 220px;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}

.mega-menu .mega-column:not(.mega-column-sale) h3 {
  color: var(--accent);
}

.home-page .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(16, 16, 15, .62);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
}

.home-page .nav-inner {
  height: 72px;
}

/* Cambia el tamaño del logo en el nav__bar solo en el INICIO */
/* .home-page .logo-img {
  height: 90px;
} */

.home-page .nav-links a,
.home-page .nav-catalog-trigger {
  color: rgba(255, 255, 255, .82);
  font-size: .74rem;
}

.home-page .nav-links a:hover,
.home-page .nav-catalog-trigger:hover,
.home-page .nav-mega:hover .nav-catalog-trigger,
.home-page .nav-mega:focus-within .nav-catalog-trigger {
  color: var(--white);
}

.home-page .cart-btn {
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
}

.home-page .cart-btn #cartCount {
  background: var(--accent);
  color: var(--black);
}

.hero-clean {
  position: relative;
  min-height: 100vh;
  padding: 0;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}

.hero-clean::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(9, 12, 17, .94) 0%, rgba(9, 12, 17, .78) 26%, rgba(9, 12, 17, .32) 58%, rgba(9, 12, 17, .12) 100%),
    linear-gradient(180deg, rgba(9, 12, 17, .38) 0%, transparent 34%, rgba(9, 12, 17, .60) 100%);
}

.hero-clean::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(circle at 18% 55%, rgba(201, 166, 107, .18), transparent 28%);
  pointer-events: none;
}

.hero-clean .hero-showcase {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-clean .hero-main-card {
  min-height: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: var(--black);
}

.hero-clean .hero-img {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  object-fit: cover;
  object-position: 68% center;
  filter: saturate(.95) contrast(1.04);
}

.hero-clean .hero-main-card::after,
.hero-clean .hero-badge,
.hero-clean .hero-mini-card {
  display: none;
}

.hero-clean .hero-inner {
  position: relative;
  z-index: 3;
  display: block;
  padding-top: 72px;
}

.hero-clean .hero-content {
  max-width: 600px;
  margin-left: clamp(0px, 2vw, 26px);
  transform: translateY(-8px);
}

.hero-clean .eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font-size: 1.1rem;
  letter-spacing: .14em;
  margin-bottom: 18px;
}

.hero-clean .eyebrow::before,
.hero-clean .eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
  border-radius: 999px;
}

.hero-clean h1 {
  color: var(--white);
  text-wrap: balance;
  max-width: 660px;
  font-size: clamp(2.4rem, 4.2vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.065em;
  margin-bottom: 22px;
}

.hero-clean h1::first-letter {
  letter-spacing: -.08em;
}

.hero-clean .hero-desc {
  color: rgba(255, 255, 255, .84);
  max-width: 520px;
  font-size: clamp(.98rem, 1.12vw, 1.12rem);
  line-height: 1.6;
  margin-bottom: 26px;
}

.hero-clean .hero-ctas {
  gap: 12px;
}

.hero-clean .btn {
  border-radius: 999px;
  font-size: .94rem;
  min-height: 52px;
  padding: 13px 26px;
}

.hero-clean .btn-primary {
  background: var(--accent);
  color: var(--black);
  box-shadow: 0 18px 48px rgba(201, 166, 107, .20);
}

.hero-clean .btn-primary:hover {
  background: var(--white);
}

.hero-clean .btn-outline {
  background: rgba(201, 166, 107, .10);
  border: 1px solid rgba(201, 166, 107, .55);
  color: var(--accent);
  backdrop-filter: blur(12px);
}

.hero-clean .hero-proof {
  gap: 12px;
  margin-top: 28px;
}

.hero-clean .hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(12px);
  padding: 8px 14px;
}

.proof-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: rgba(255, 255, 255, .76);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  font-weight: 900;
}

.hero-scroll strong {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent);
}

.home-page .ticker {
  background: var(--black);
  color: var(--white);
  border-bottom: 1px solid var(--dark-line);
}

@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 1100px) {

  .products-grid,
  .featured-grid,
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-inner,
  .rule-grid,
  .buy-grid,
  .cuts-banner,
  .contact-card {
    grid-template-columns: 1fr;
  }

  .hero-main-card,
  .hero-img {
    min-height: 440px;
  }

  .buy-steps {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--black);
    padding: 20px var(--gap);
    flex-direction: column;
    align-items: start;
    border-bottom: 1px solid var(--dark-line);
  }

  .navbar.open .nav-links {
    display: flex;
  }

  .hero {
    padding-top: 48px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 15vw, 4.2rem);
  }

  .hero-showcase {
    display: none;
  }

  .trust-grid,
  .products-grid,
  .featured-grid,
  .categories-grid,
  .buy-steps,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .section-header,
  .quantity-row {
    align-items: start;
    flex-direction: column;
  }

  .product-modal-card {
    grid-template-columns: 1fr;
    max-height: 90vh;
  }

  .modal-image-wrap {
    min-height: 330px;
  }

  .detail-list {
    grid-template-columns: 1fr;
  }

  .price-preview {
    text-align: left;
  }

  .cart-panel {
    width: 100%;
    right: -100%;
  }

  .cart-item {
    grid-template-columns: 64px 1fr;
  }

  .cart-item-actions {
    grid-column: 1 / -1;
    display: flex;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: rgba(16, 16, 15, .94);
    color: var(--white);
    border: 1px solid var(--dark-line);
    border-radius: 999px;
    padding: 8px;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    border: 0;
    background: transparent;
    color: var(--white);
    font-size: .72rem;
    font-weight: 900;
    text-align: center;
    padding: 9px 4px;
  }

  .catalog-hero {
    padding-top: 52px;
  }

  .catalog-hero h1 {
    font-size: clamp(2.45rem, 13vw, 4.1rem);
  }

  .catalog-main {
    padding-top: 24px;
  }

  .catalog-intro {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .nav-item {
    width: 100%;
  }

  .nav-catalog-trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0;
  }

  .mega-menu {
    position: static;
    transform: none;
    display: none;
    margin-top: 12px;
    padding: 12px;
    border-radius: 18px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(255, 255, 255, .06);
    overflow: visible;
    width: 100%;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .nav-mega.open .mega-menu {
    display: grid;
    transform: none;
  }

  .nav-mega:hover .mega-menu,
  .nav-mega:focus-within .mega-menu {
    transform: none;
  }

  .mega-column {
    padding: 10px;
  }

  .mega-column-featured {
    display: none;
  }

  .mega-column h3 {
    color: var(--accent);
  }

  .mega-column a {
    padding: 8px 0;
    border-radius: 0;
  }

  .mega-column-sale a {
    width: 100%;
    margin-left: 0;
    padding-left: 14px;
  }

  .catalog-current-card {
    padding: 18px;
  }

  .mega-column:not(.mega-column-featured) a {
    margin-left: 12px;
    padding-left: 18px;
  }

  .catalog-intro-minimal .catalog-current-card {
    grid-template-columns: 1fr;
  }

  .catalog-intro-minimal .catalog-current-card a {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    max-width: 100%;
  }

  .home-page .navbar {
    position: sticky;
    background: rgba(16, 16, 15, .94);
  }

  .hero-clean {
    min-height: calc(100vh - 68px);
  }

  .hero-clean .hero-inner {
    padding-top: 38px;
    padding-bottom: 90px;
  }

  .hero-clean .hero-showcase {
    display: block;
  }

  .hero-clean h1 {
    font-size: clamp(2.35rem, 11vw, 3.75rem);
  }

  .hero-clean .hero-desc {
    font-size: .98rem;
  }

  .hero-clean .btn {
    width: 100%;
  }

  .hero-clean .hero-proof span {
    width: 100%;
  }

  .hero-scroll {
    bottom: 74px;
  }

  .hero-clean .hero-content {
    max-width: 100%;
    margin-left: 0;
    transform: none;
  }
}

@media (max-width: 430px) {
  .container {
    padding: 0 16px;
  }

  .hero-ctas .btn,
  .contact-actions,
  .contact-actions .btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .hero-clean::before {
    background: linear-gradient(90deg, rgba(9, 12, 17, .92), rgba(9, 12, 17, .66)),
      linear-gradient(180deg, rgba(9, 12, 17, .26), rgba(9, 12, 17, .66));
  }

  .hero-clean .hero-img {
    object-position: center;
  }
}

/* =========================================================
   LUHU - Catalogo jerarquico categoria > modelo > color
========================================================= */

.categories-grid {
  grid-template-columns: repeat(4, 1fr);
}

.products-grid.catalog-grid-categories {
  grid-template-columns: repeat(4, 1fr);
}

.products-grid.catalog-grid-models,
.products-grid.catalog-grid-colors {
  grid-template-columns: repeat(4, 1fr);
}

.catalog-option-card {
  position: relative;
  min-height: 350px;
  border: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--black);
  color: var(--white);
  text-align: left;
  transition: transform .25s, box-shadow .25s;
}

.catalog-option-card:hover,
.color-product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.catalog-option-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}

.catalog-option-card:hover img {
  transform: scale(1.04);
}

.catalog-option-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .08));
  z-index: 1;
}

.catalog-option-card>span {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  background: rgba(255, 255, 255, .94);
  color: var(--black);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.catalog-option-card>div {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}

.catalog-option-card h3 {
  font-family: Syne, sans-serif;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.catalog-option-card p {
  color: rgba(255, 255, 255, .78);
  margin-bottom: 10px;
}

.catalog-option-card small {
  display: inline-flex;
  color: var(--black);
  background: var(--accent);
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: .72rem;
}

.color-product-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}

.color-product-image {
  width: 100%;
  aspect-ratio: 3/4;
  border: 0;
  background: var(--stone);
  position: relative;
  overflow: hidden;
  text-align: left;
  font: inherit;
}

.color-product-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .20), transparent 48%);
}

.color-dot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  background: var(--color-texture, var(--color-dot, #ccc));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
}

.color-selector {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.size-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}

.size-chip {
  position: relative;
  min-width: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--black);
  border-radius: 999px;
  padding: 5px 8px;
  font-size: .72rem;
  font-weight: 900;
}

.size-chip.out-of-stock {
  color: #b42318;
  border-color: #f1b8b3;
  background: #fff1f0;
  opacity: .82;
}

.size-chip.out-of-stock em {
  position: absolute;
  right: -4px;
  top: -8px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #b42318;
  color: white;
  font-style: normal;
  font-size: .72rem;
  line-height: 1;
}

.selector-btn.out-of-stock,
.selector-btn:disabled {
  color: #b42318;
  border-color: #f1b8b3;
  background: #fff1f0;
  cursor: not-allowed;
  opacity: .78;
}

.cart-extra-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--soft);
  color: var(--gray);
  font-size: .88rem;
  font-weight: 800;
}

.cart-extra-line strong {
  color: var(--black);
}

@media (max-width: 1100px) {

  .products-grid.catalog-grid-categories,
  .products-grid.catalog-grid-models,
  .products-grid.catalog-grid-colors,
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {

  .products-grid.catalog-grid-categories,
  .products-grid.catalog-grid-models,
  .products-grid.catalog-grid-colors,
  .categories-grid {
    grid-template-columns: 1fr;
  }

  .catalog-option-card {
    min-height: 300px;
  }
}

/* Ajuste específico para el título principal de la Regla LUHU */
.rule-card .rule-main-title {
  font-size: clamp(3.6rem, 7vw, 7rem);
  line-height: .88;
  max-width: 520px;
}

@media (max-width: 760px) {
  .rule-card .rule-main-title {
    font-size: clamp(2.7rem, 13vw, 4.3rem);
  }
}

/* =========================================================
   LUHU - Tarjetas de color con compra rápida
========================================================= */

.quick-product-card .color-product-image {
  cursor: zoom-in;
}

.quick-product-card.is-sold-out .product-img {
  filter: grayscale(.18) brightness(.9);
}

.availability-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .70rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.availability-badge.available {
  background: rgba(237, 247, 233, .96);
  color: #2b6b2b;
}

.availability-badge.sold-out {
  background: rgba(255, 241, 240, .96);
  color: #b42318;
}

.color-card-heading {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.color-swatch-large {
  width: 74px;
  height: 48px;
  display: block;
  border-radius: 14px;
  background: var(--color-texture, var(--color-dot, #ccc));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0, 0, 0, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.color-card-title {
  font-family: Syne, sans-serif;
  font-size: clamp(1.45rem, 2vw, 1.9rem);
  line-height: .95;
  letter-spacing: -.045em;
  margin-bottom: 5px;
}

.color-card-model {
  color: var(--gray);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.quick-size-preview {
  margin: 14px 0 16px;
}

.quick-size-chip {
  border: 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.quick-size-chip:not(:disabled):hover,
.quick-size-chip.active {
  background: var(--black);
  color: var(--white);
  transform: translateY(-1px);
}

.quick-size-chip.out-of-stock,
.quick-size-chip:disabled {
  cursor: not-allowed;
  transform: none;
}

.quick-card-footer {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.quick-price-box {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
}

.quick-price-box span {
  color: var(--gray);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.quick-price-box strong {
  font-family: Syne, sans-serif;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -.04em;
}

.quick-qty-control {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--soft);
}

.quick-qty-control button {
  height: 40px;
  border: 0;
  background: transparent;
  font-weight: 900;
}

.quick-qty-control span {
  text-align: center;
  font-weight: 900;
}

.quick-add-btn:disabled,
.quantity-control button:disabled,
.add-btn:disabled,
.quick-qty-control button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.quick-add-btn:disabled {
  background: #d8d2c8;
  color: #77736d;
}

@media (max-width: 760px) {
  .color-card-heading {
    grid-template-columns: 66px 1fr;
  }

  .color-swatch-large {
    width: 66px;
    height: 44px;
  }
}

/* =========================================================
   LUHU - Modal enfocado en color seleccionado
========================================================= */

.modal-color-group .selector-options {
  display: block;
}

.modal-color-summary {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  padding: 14px;
}

.modal-color-swatch {
  width: 96px;
  height: 60px;
  display: block;
  border-radius: 16px;
  background: var(--color-texture, var(--color-dot, #ccc));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(0, 0, 0, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}

.modal-color-summary strong {
  display: block;
  font-family: Syne, sans-serif;
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  line-height: .95;
  letter-spacing: -.045em;
}

.modal-color-summary small {
  display: block;
  margin-top: 6px;
  color: var(--gray);
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.modal-info #modalCategory {
  color: var(--gray);
  font-size: .82rem;
  letter-spacing: .12em;
}

.modal-info #modalName {
  color: var(--black);
}

.modal-availability-line {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .modal-color-summary {
    grid-template-columns: 76px 1fr;
  }

  .modal-color-swatch {
    width: 76px;
    height: 52px;
  }
}

/* =========================================================
   LUHU - Carrito por zonas y orden de pedido
========================================================= */

.cart-panel {
  width: min(500px, 100%);
  padding: 20px;
}

.cart-header-modern {
  align-items: start;
}

.cart-toast {
  min-height: 0;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  overflow: hidden;
  border-radius: var(--radius);
  padding: 0 12px;
  font-size: .88rem;
  font-weight: 900;
  transition: opacity .2s ease, transform .2s ease, max-height .2s ease, padding .2s ease;
}

.cart-toast.show {
  max-height: 48px;
  opacity: 1;
  transform: translateY(0);
  padding: 11px 12px;
  margin-top: 12px;
}

.cart-toast.success {
  color: #2b6b2b;
  background: #edf7e9;
  border: 1px solid #cfe7c8;
}

.cart-toast.danger {
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #f1b8b3;
}

.cart-pulse {
  animation: cartPulse .55s ease;
}

@keyframes cartPulse {
  0% {
    transform: scale(1);
  }

  38% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

.cart-zone-card {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-top: 12px;
  background: var(--soft);
}

.cart-zone-card span {
  font-size: .70rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
  opacity: .78;
}

.cart-zone-card strong {
  font-family: Syne, sans-serif;
  font-size: 1.32rem;
  line-height: 1;
}

.cart-zone-card p {
  font-weight: 900;
}

.cart-zone-card small {
  color: inherit;
  opacity: .74;
  font-weight: 800;
}

.cart-zone-card.zone-empty {
  background: #f7efe1;
  color: #694b18;
  border-color: #ead8b5;
}

.cart-zone-card.zone-basica {
  background: linear-gradient(135deg, #fff8ec, #f3ead9);
  color: #715025;
  border-color: #ead8b5;
}

.cart-zone-card.zone-luhu {
  background: linear-gradient(135deg, #edf7e9, #fff8ec);
  color: #2f6732;
  border-color: rgba(201, 166, 107, .45);
}

.cart-zone-card.zone-emprendedor {
  background: linear-gradient(135deg, #10100f, #3a2b17);
  color: var(--white);
  border-color: rgba(201, 166, 107, .55);
  box-shadow: 0 18px 48px rgba(16, 16, 15, .18);
}

.cart-items {
  padding: 14px 0;
}

.cart-item-modern {
  grid-template-columns: 72px 1fr;
  align-items: start;
  position: relative;
}

.cart-item-modern .cart-item-info {
  padding-right: 52px;
}

.modern-qty-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-qty-control {
  display: inline-grid;
  grid-template-columns: 34px 42px 34px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
}

.cart-qty-control button {
  height: 34px;
  border: 0;
  background: transparent;
  font-weight: 900;
}

.cart-qty-control span {
  text-align: center;
  font-weight: 900;
}

.cart-qty-control button:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.trash-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #f1b8b3 !important;
  background: #fff1f0 !important;
  color: #b42318;
  border-radius: 999px !important;
  padding: 0 !important;
}

.trash-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shipping-details {
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.shipping-details summary {
  display: grid;
  gap: 2px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  padding: 12px;
  list-style: none;
}

.shipping-details summary::-webkit-details-marker {
  display: none;
}

.shipping-details summary span {
  color: var(--black);
  font-weight: 900;
}

.shipping-details summary small {
  color: var(--gray);
  font-size: .78rem;
  font-weight: 700;
}

.shipping-details .customer-form {
  border-top: 0;
  padding: 12px 0 0;
}

.cart-summary {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
  padding: 12px;
}

.cart-summary span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.cart-summary small {
  color: var(--gray);
  font-weight: 900;
}

.cart-summary strong {
  color: var(--black);
  font-weight: 900;
}

.cart-summary .discount-line strong {
  color: #2b6b2b;
}

.cart-summary .cart-total-final {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 8px;
}

.cart-summary .cart-total-final small,
.cart-summary .cart-total-final strong {
  color: var(--black);
  font-size: 1rem;
}

.create-order-btn {
  min-height: 52px;
}

.order-success-modal {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

.order-success-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.order-success-card {
  position: relative;
  width: min(520px, 100%);
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 46px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .28);
  text-align: center;
  display: grid;
  gap: 14px;
}

.order-success-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: #edf7e9;
  color: #2b6b2b;
  font-weight: 900;
  font-size: 2rem;
}

.order-success-card h2 {
  font-family: Syne, sans-serif;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.order-success-card p:not(.eyebrow) {
  color: var(--gray);
}

.order-success-card p strong {
  color: var(--black);
}

.order-success-actions {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.order-success-actions .btn-soft {
  font-size: .9rem;
  min-height: 44px;
}

@media (max-width: 760px) {
  .cart-panel {
    padding: 18px;
  }

  .cart-item-modern {
    grid-template-columns: 64px 1fr;
  }

  .cart-item-modern .cart-item-info {
    padding-right: 46px;
  }
}


/* =========================================================
   LUHU - Compactacion final del carrito
========================================================= */

.btn-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.cart-btn.icon-btn {
  padding: 8px 12px;
}

.quick-add-btn.icon-btn,
#addConfiguredProduct.icon-btn,
.create-order-btn {
  min-height: 42px;
}

.cart-panel {
  width: min(440px, 100%);
  padding: 14px;
  overflow: hidden;
}

.cart-header {
  padding-bottom: 9px;
}

.cart-header .eyebrow {
  font-size: .62rem;
  margin-bottom: 1px;
  letter-spacing: .12em;
}

.cart-header h2 {
  font-size: 1.45rem;
}

.cart-header-meta {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 7px;
  max-width: 340px;
}

.cart-zone-card {
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 1px;
  margin-top: 0;
  padding: 6px 8px;
  border-radius: 13px;
  min-width: 156px;
  max-width: 190px;
  min-height: 42px;
  box-shadow: none !important;
}

.cart-zone-card span {
  font-size: .56rem;
  line-height: 1;
  letter-spacing: .07em;
}

.cart-zone-card strong {
  font-family: Syne, sans-serif;
  font-size: .95rem;
  line-height: .95;
  white-space: nowrap;
}

.cart-zone-card p {
  display: none;
}

.cart-zone-card small {
  font-size: .62rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .8;
}

.cart-toast {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 76px;
  z-index: 6;
  min-height: initial;
  max-height: none;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  overflow: visible;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: .78rem;
  text-align: center;
  box-shadow: 0 14px 38px rgba(16, 16, 15, .12);
  transition: opacity .18s ease, transform .18s ease;
}

.cart-toast.show {
  max-height: none;
  opacity: 1;
  transform: translateY(0);
  padding: 9px 12px;
  margin-top: 0;
}

.cart-items {
  padding: 10px 0;
  gap: 8px;
}

.empty-cart {
  padding: 13px;
}

.empty-cart h3 {
  font-size: 1rem;
}

.empty-cart p {
  font-size: .82rem;
}

.cart-item {
  padding: 8px;
  gap: 8px;
  border-radius: 14px;
}

.cart-item-modern {
  grid-template-columns: 58px 1fr;
}

.cart-item img {
  width: 58px;
  height: 72px;
  border-radius: 10px;
}

.cart-item-modern .cart-item-info {
  padding-right: 38px;
}

.cart-item-info strong {
  font-size: .86rem;
  line-height: 1.15;
}

.cart-item-info span,
.cart-item-info small {
  font-size: .72rem;
  line-height: 1.25;
}

.modern-qty-actions {
  margin-top: -2px;
}

.cart-qty-control {
  grid-template-columns: 28px 34px 28px;
}

.cart-qty-control button {
  height: 28px;
  font-size: .84rem;
}

.cart-qty-control span {
  font-size: .8rem;
}

.trash-btn {
  right: 8px;
  top: 8px;
  width: 31px;
  height: 31px;
}

.trash-btn svg {
  width: 15px;
  height: 15px;
}

.shipping-details {
  padding: 7px 0;
}

.shipping-details summary {
  position: relative;
  padding: 9px 34px 9px 10px;
  border-radius: 14px;
}

.shipping-details summary::after {
  content: "⌄";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray);
  font-weight: 900;
  transition: transform .18s ease;
}

.shipping-details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}

.shipping-details summary span {
  font-size: .84rem;
}

.shipping-details summary small {
  font-size: .68rem;
  line-height: 1.2;
}

.shipping-details .customer-form {
  gap: 7px;
  padding: 8px 0 0;
}

.customer-form label {
  gap: 3px;
  font-size: .72rem;
}

.customer-form input,
.customer-form select,
.customer-form input[type="url"] {
  border-radius: 10px;
  padding: 8px 10px;
  font-size: .82rem;
}

.conditional-fields {
  gap: 7px;
  padding: 8px;
  border-radius: 12px;
}

.form-hint {
  font-size: .68rem;
}

.cart-footer {
  padding-top: 9px;
  gap: 8px;
}

.cart-summary {
  padding: 9px 10px;
  border-radius: 14px;
  gap: 4px;
  font-size: .8rem;
}

.cart-summary small {
  font-size: .72rem;
}

.cart-summary strong {
  font-size: .82rem;
}

.cart-summary .cart-total-final {
  margin-top: 2px;
  padding-top: 6px;
}

.cart-summary .cart-total-final small,
.cart-summary .cart-total-final strong {
  font-size: .9rem;
}

.create-order-btn {
  min-height: 44px;
  font-size: .88rem;
}

#continueShopping {
  min-height: 40px;
  padding: 10px 18px;
  font-size: .84rem;
}

.order-success-actions {
  justify-items: center;
}

.whatsapp-share-btn {
  width: 100%;
}

.copy-order-btn {
  width: auto !important;
  min-width: 190px;
  padding: 10px 16px;
  min-height: 40px;
  font-size: .84rem !important;
  justify-self: center;
}

.whatsapp-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  color: #25D366;
  stroke-width: 2.2;
}

.whatsapp-share-btn {
  gap: 10px;
}

.mobile-bottom-nav .icon-btn {
  gap: 4px;
}

@media (min-width: 761px) {
  .cart-panel {
    height: min(100vh, 760px);
    top: 0;
  }
}

@media (max-width: 760px) {
  .cart-panel {
    padding: 12px;
    width: 100%;
    right: -100%;
  }

  .cart-header-meta {
    max-width: calc(100vw - 82px);
  }

  .cart-zone-card {
    min-width: 138px;
    max-width: 150px;
  }

  .cart-zone-card strong {
    font-size: .82rem;
  }

  .cart-zone-card small {
    font-size: .56rem;
  }

  .cart-toast {
    top: 70px;
    left: 12px;
    right: 12px;
  }

  .cart-item-modern {
    grid-template-columns: 54px 1fr;
  }

  .cart-item img {
    width: 54px;
    height: 68px;
  }

  .mobile-bottom-nav .btn-icon {
    width: 14px;
    height: 14px;
  }

  .mobile-cart-label {
    display: none;
  }
}

/* =========================================================
   LUHU - Ajustes finales navegación móvil y carrito responsive
========================================================= */

.cart-btn.icon-btn {
  min-height: 42px;
  min-width: 118px;
  padding: 9px 16px;
  gap: 8px;
  white-space: nowrap;
}

.cart-btn .cart-btn-text {
  display: inline-block;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.cart-btn.icon-btn #cartCount {
  margin-left: 0;
}

.cart-panel {
  top: 0;
  right: -34vw;
  width: 33.333vw;
  min-width: 420px;
  max-width: 560px;
  height: 100vh;
  max-height: none;
}

.cart-panel.open {
  right: 0;
}

.cart-header-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 360px;
}

.cart-zone-card {
  display: grid;
  grid-template-columns: minmax(60px, .72fr) minmax(104px, 1.28fr);
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  max-width: none;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: var(--black);
}

.cart-zone-box {
  display: grid;
  align-content: center;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 6px 8px;
  background: var(--soft);
  min-width: 0;
}

.cart-zone-card span {
  font-size: .52rem;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 900;
  opacity: .72;
}

.cart-zone-card strong {
  font-size: .88rem;
  line-height: .95;
  font-family: Syne, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-zone-total strong {
  font-size: 1.02rem;
}

.cart-zone-card small {
  grid-column: 1 / -1;
  margin-top: 1px;
  padding-left: 2px;
  font-size: .60rem;
  line-height: 1.1;
  font-weight: 800;
  opacity: .78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-zone-card.zone-empty .cart-zone-box,
.cart-zone-card.zone-basica .cart-zone-box {
  background: #fff8ec;
  color: #715025;
  border-color: #ead8b5;
}

.cart-zone-card.zone-luhu .cart-zone-box {
  background: #edf7e9;
  color: #2f6732;
  border-color: rgba(201, 166, 107, .45);
}

.cart-zone-card.zone-emprendedor .cart-zone-box {
  background: linear-gradient(135deg, #10100f, #3a2b17);
  color: var(--white);
  border-color: rgba(201, 166, 107, .55);
}

.mobile-bottom-nav {
  border-radius: 26px;
  padding: 7px 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}

.mobile-bottom-nav .mobile-nav-item,
.mobile-bottom-nav a,
.mobile-bottom-nav button {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-rows: 18px auto;
  justify-items: center;
  align-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--white);
  text-align: center;
  padding: 6px 2px;
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}

.mobile-nav-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-nav-label {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-bottom-nav #mobileCartCount {
  position: absolute;
  top: 5px;
  right: 50%;
  transform: translateX(23px);
  min-width: 18px;
  height: 18px;
  margin-left: 0;
  font-size: .62rem;
}

.mobile-cart-item {
  position: relative;
}

@media (min-width: 761px) {
  .cart-panel {
    height: 100vh;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .cart-panel {
    top: 0;
    right: -100%;
    width: 100vw;
    min-width: 0;
    max-width: none;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    padding: 14px 14px 92px;
  }

  .cart-panel.open {
    right: 0;
  }

  .cart-header-meta {
    grid-template-columns: auto minmax(0, 1fr);
    max-width: calc(100vw - 76px);
  }

  .cart-zone-card {
    grid-template-columns: minmax(52px, .65fr) minmax(92px, 1.35fr);
  }

  .cart-zone-box {
    padding: 6px 7px;
  }

  .cart-zone-card strong {
    font-size: .76rem;
  }

  .cart-zone-total strong {
    font-size: .96rem;
  }

  .cart-zone-card small {
    font-size: .55rem;
  }

  .mobile-bottom-nav {
    min-height: 66px;
  }
}

/* =========================================================
   LUHU - Estado del carrito más claro
========================================================= */
.cart-header-meta {
  grid-template-columns: 96px minmax(0, 1fr);
  max-width: 100%;
}

.cart-zone-card {
  grid-template-columns: minmax(86px, .9fr) minmax(92px, 1fr);
}

.cart-zone-box {
  border-radius: 13px;
  padding: 7px 8px;
}

.cart-zone-card strong {
  font-size: .86rem;
}

.cart-zone-total strong {
  font-size: .92rem;
}

.cart-zone-card small {
  grid-column: 1 / -1;
  padding-left: 2px;
  font-size: .58rem;
}

@media (max-width: 760px) {
  .cart-header-meta {
    grid-template-columns: 82px minmax(0, 1fr);
    max-width: calc(100vw - 76px);
  }

  .cart-zone-card {
    grid-template-columns: minmax(74px, .9fr) minmax(82px, 1fr);
  }

  .cart-zone-card strong,
  .cart-zone-total strong {
    font-size: .72rem;
  }

  .cart-zone-card small {
    font-size: .52rem;
  }
}

/* =========================================================
   LUHU - Estado del carrito en 3 rectángulos finales
========================================================= */
.cart-header-meta {
  display: grid;
  grid-template-columns: minmax(86px, .95fr) minmax(0, 2.25fr);
  align-items: stretch;
  gap: 7px;
  width: 100%;
  max-width: 100%;
}

.cart-zone-box {
  min-height: 50px;
  border-radius: 13px !important;
  border: 1px solid var(--line);
  background: var(--soft);
  padding: 8px 10px;
  display: grid !important;
  align-content: center;
  justify-items: start;
  gap: 3px;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1;
  overflow: hidden;
}

.cart-zone-card {
  display: grid;
  grid-template-columns: minmax(92px, .92fr) 18px minmax(128px, 1.28fr);
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  color: var(--black);
}

.cart-zone-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  justify-self: center;
  color: var(--accent);
  font-family: Inter, system-ui, sans-serif;
  font-size: .95rem;
  line-height: 1;
  font-weight: 900;
  opacity: .82;
  transform: translateY(1px);
}

.cart-zone-card span {
  font-family: Inter, system-ui, sans-serif;
  font-size: .55rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 900;
  opacity: .72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-zone-card strong {
  font-family: Inter, system-ui, sans-serif;
  font-size: .88rem;
  line-height: 1.05;
  color: inherit;
  font-weight: 900;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-zone-card small {
  display: none !important;
}

.cart-zone-total strong {
  font-size: .9rem;
}

.cart-zone-card.zone-empty .cart-zone-box,
.cart-zone-card.zone-basica .cart-zone-box {
  background: #fff8ec;
  color: #715025;
  border-color: #ead8b5;
}

.cart-zone-card.zone-luhu .cart-zone-box {
  background: #edf7e9;
  color: #2f6732;
  border-color: rgba(201, 166, 107, .45);
}

.cart-zone-card.zone-emprendedor .cart-zone-box {
  background: linear-gradient(135deg, #10100f, #3a2b17);
  color: var(--white);
  border-color: rgba(201, 166, 107, .55);
}

@media (max-width: 760px) {
  .cart-header-meta {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 6px;
    max-width: calc(100vw - 76px);
  }

  .cart-zone-box {
    min-height: 48px;
    padding: 7px 7px;
  }

  .cart-zone-card span {
    font-size: .48rem;
    letter-spacing: .06em;
  }

  .cart-zone-card {
    grid-template-columns: minmax(72px, .88fr) 14px minmax(96px, 1.12fr);
    gap: 5px;
  }

  .cart-zone-card strong,
  .cart-zone-total strong {
    font-size: .68rem;
  }


  .cart-zone-arrow {
    font-size: .78rem;
  }
}

/* =========================================================
   LUHU - Toast flotante del carrito sin mover productos
========================================================= */
.cart-panel {
  position: fixed;
}

.cart-toast {
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  top: 132px !important;
  z-index: 12;
  min-height: 0 !important;
  max-height: none !important;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  overflow: visible !important;
  border-radius: 999px;
  padding: 9px 12px !important;
  margin: 0 !important;
  font-size: .78rem;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 14px 38px rgba(16, 16, 15, .14) !important;
  transition: opacity .16s ease, transform .16s ease;
}

.cart-toast.show {
  opacity: 1;
  transform: translateY(0);
  max-height: none !important;
  padding: 9px 12px !important;
  margin: 0 !important;
}

@media (max-width: 760px) {
  .cart-toast {
    top: 126px !important;
    left: 14px !important;
    right: 14px !important;
  }
}

/* =========================================================
   LUHU - Tarjetas de colores compactas
   Solo afecta la vista de colores dentro de un modelo.
========================================================= */
.products-grid.catalog-grid-colors {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.catalog-grid-colors .color-product-card {
  border-radius: 18px;
}

.catalog-grid-colors .color-product-image {
  aspect-ratio: 1 / 1.12;
}

.catalog-grid-colors .product-body {
  padding: 12px;
}

.catalog-grid-colors .color-card-heading {
  grid-template-columns: 48px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.catalog-grid-colors .color-swatch-large {
  width: 48px;
  height: 34px;
  border-radius: 10px;
}

.catalog-grid-colors .color-card-title {
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 3px;
}

.catalog-grid-colors .color-card-model {
  font-size: .62rem;
  line-height: 1.1;
}

.catalog-grid-colors .quick-size-preview {
  margin: 10px 0 12px;
  gap: 5px;
}

.catalog-grid-colors .size-chip {
  min-width: 30px;
  padding: 4px 7px;
  font-size: .66rem;
}

.catalog-grid-colors .quick-card-footer {
  gap: 9px;
  padding-top: 10px;
}

.catalog-grid-colors .quick-price-box strong {
  font-size: 1.18rem;
}

.catalog-grid-colors .quick-price-box span {
  font-size: .62rem;
}

.catalog-grid-colors .quick-qty-control {
  grid-template-columns: 34px 1fr 34px;
}

.catalog-grid-colors .quick-qty-control button {
  height: 34px;
}

.catalog-grid-colors .quick-add-btn {
  padding: 10px 12px;
  font-size: .76rem;
}

.catalog-grid-colors .availability-badge {
  top: 10px;
  left: 10px;
  padding: 5px 9px;
  font-size: .62rem;
}

@media (max-width: 900px) {
  .products-grid.catalog-grid-colors {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .products-grid.catalog-grid-colors {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .catalog-grid-colors .product-body {
    padding: 10px;
  }

  .catalog-grid-colors .color-card-heading {
    grid-template-columns: 40px 1fr;
    gap: 8px;
  }

  .catalog-grid-colors .color-swatch-large {
    width: 40px;
    height: 30px;
  }

  .catalog-grid-colors .color-card-title {
    font-size: .92rem;
  }

  .catalog-grid-colors .color-card-model {
    font-size: .56rem;
  }

  .catalog-grid-colors .size-chip {
    min-width: 27px;
    padding: 4px 6px;
    font-size: .62rem;
  }

  .catalog-grid-colors .quick-add-btn {
    font-size: .68rem;
  }
}

/* =========================================================
   LUHU - Stock visible y compra rapida en una linea
========================================================= */
.card-stock-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(237, 247, 233, .96);
  color: #2b6b2b;
  border: 1px solid #cfe7c8;
  font-size: .64rem;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 0 12px 30px rgba(16, 16, 15, .12);
}

.card-stock-badge.is-zero {
  background: rgba(255, 241, 240, .96);
  color: #b42318;
  border-color: #f1b8b3;
}

.quick-buy-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(92px, .78fr);
  align-items: stretch;
  gap: 8px;
}

.catalog-grid-colors .quick-buy-row .quick-qty-control {
  grid-template-columns: 38px 1fr 38px;
  min-height: 38px;
}

.catalog-grid-colors .quick-buy-row .quick-add-btn {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  font-size: .72rem;
  white-space: nowrap;
}

.catalog-grid-colors .quick-buy-row .quick-add-btn .btn-icon {
  width: 14px;
  height: 14px;
}

.modal-stock-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin: -4px 0 12px;
  border-radius: 999px;
  padding: 8px 12px;
  background: #edf7e9;
  color: #2b6b2b;
  border: 1px solid #cfe7c8;
  font-size: .78rem;
  line-height: 1;
  font-weight: 900;
}

.modal-stock-badge.is-zero {
  background: #fff1f0;
  color: #b42318;
  border-color: #f1b8b3;
}

.modal-purchase-area {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin: 18px 0 20px;
}

.modal-purchase-area .price-preview {
  text-align: left;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

/* Distribucion estable del selector de cantidad y el boton Agregar. */
.modal-action-row {
  display: grid;
  grid-template-columns: 168px minmax(150px, 1fr);
  gap: 10px;
  align-items: end;
}

.modal-qty-block {
  min-width: 0;
}

.modal-qty-block h3 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 8px;
}

.modal-action-row .quantity-control {
  width: 168px;
  height: 44px;
  min-height: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.modal-action-row .quantity-control button,
.modal-action-row .quantity-control span {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
}

.modal-action-row #addConfiguredProduct {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 16px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .card-stock-badge {
    top: 8px;
    left: 8px;
    padding: 5px 8px;
    font-size: .56rem;
  }

  .quick-buy-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(78px, .75fr);
    gap: 6px;
  }

  .catalog-grid-colors .quick-buy-row .quick-qty-control {
    grid-template-columns: 30px 1fr 30px;
    min-height: 34px;
  }

  .catalog-grid-colors .quick-buy-row .quick-add-btn {
    min-height: 34px;
    padding: 7px 8px;
    font-size: .62rem;
    gap: 4px;
  }

  .catalog-grid-colors .quick-buy-row .quick-add-btn .btn-icon {
    width: 12px;
    height: 12px;
  }

  .modal-stock-badge {
    font-size: .72rem;
    padding: 7px 10px;
  }

  .modal-action-row {
    grid-template-columns: 156px minmax(110px, 1fr);
    gap: 8px;
  }

  .modal-action-row .quantity-control {
    width: 156px;
    height: 42px;
    min-height: 42px;
  }
}

@media (max-width: 390px) {
  .modal-action-row {
    grid-template-columns: 144px minmax(96px, 1fr);
    gap: 7px;
  }

  .modal-action-row .quantity-control {
    width: 144px;
  }

  .modal-action-row #addConfiguredProduct {
    padding: 8px 10px;
    font-size: .74rem;
  }
}


/* =========================================================
   LUHU - Tallas mas comodas y slash fino para agotadas
   Aplica a tarjetas de color y modal.
========================================================= */
.catalog-grid-colors .quick-size-preview {
  margin: 12px 0 14px;
  gap: 7px;
}

.catalog-grid-colors .size-chip {
  min-width: 34px;
  min-height: 28px;
  padding: 5px 9px;
  font-size: .72rem;
}

.size-chip.out-of-stock {
  position: relative;
  overflow: hidden;
  color: #b42318;
  border-color: #f1b8b3;
  background: #fff1f0;
  opacity: .88;
}

.size-chip.out-of-stock em {
  display: none !important;
}

.size-chip.out-of-stock::after {
  content: "";
  position: absolute;
  width: 72%;
  height: 1.4px;
  top: 50%;
  left: 14%;
  background: #b42318;
  border-radius: 999px;
  transform: rotate(-22deg);
  pointer-events: none;
}

.selector-btn.out-of-stock,
.selector-btn:disabled {
  position: relative;
  overflow: hidden;
}

.selector-btn.out-of-stock::after,
.selector-btn:disabled::after {
  content: "";
  position: absolute;
  width: 68%;
  height: 1.4px;
  top: 50%;
  left: 16%;
  background: #b42318;
  border-radius: 999px;
  transform: rotate(-22deg);
  pointer-events: none;
}

@media (max-width: 760px) {
  .catalog-grid-colors .quick-size-preview {
    gap: 6px;
  }

  .catalog-grid-colors .size-chip {
    min-width: 31px;
    min-height: 27px;
    padding: 5px 7px;
    font-size: .66rem;
  }

  .catalog-grid-colors .size-chip.out-of-stock::after,
  .selector-btn.out-of-stock::after,
  .selector-btn:disabled::after {
    height: 1.25px;
  }
}

/* =========================================================
   LUHU - Carrito compacto con acciones laterales
========================================================= */
.cart-items {
  align-content: start;
  grid-auto-rows: auto;
}

.cart-item.cart-item-modern {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 10px;
  border-radius: 16px;
}

.cart-item.cart-item-modern img {
  width: 62px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
}

.cart-item-modern .cart-item-info {
  min-width: 0;
  padding-right: 0 !important;
  display: grid;
  gap: 3px;
}

.cart-item-line {
  display: block;
  color: var(--gray);
  font-size: .76rem;
  line-height: 1.18;
  font-weight: 800;
}

.cart-item-model {
  color: var(--black);
  font-weight: 900;
}

.cart-item-variant strong {
  color: var(--black);
  font-weight: 900;
}

.cart-item-price-line {
  color: #6f6960;
}

.cart-item-subtotal {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  color: var(--gray);
  font-size: .76rem;
  line-height: 1.1;
  font-weight: 900;
}

.cart-item-subtotal strong {
  color: var(--black);
  font-weight: 950;
}

.modern-qty-actions {
  grid-column: auto !important;
  display: grid !important;
  align-self: stretch;
  align-content: space-between;
  justify-items: end;
  gap: 8px;
  margin-top: 0 !important;
}

.cart-item-modern .trash-btn {
  position: static;
  width: 32px;
  height: 32px;
}

.cart-item-modern .cart-qty-control {
  grid-template-columns: 30px 34px 30px;
}

.cart-item-modern .cart-qty-control button {
  height: 30px;
  padding: 0;
}

.cart-item-modern .cart-qty-control span {
  font-size: .82rem;
}

@media (max-width: 760px) {
  .cart-item.cart-item-modern {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    min-height: 88px;
    padding: 9px;
    gap: 8px;
  }

  .cart-item.cart-item-modern img {
    width: 54px;
    height: 68px;
    border-radius: 11px;
  }

  .cart-item-line,
  .cart-item-subtotal {
    font-size: .70rem;
  }

  .cart-item-subtotal {
    margin-top: 4px;
    padding-top: 5px;
  }

  .modern-qty-actions {
    gap: 6px;
  }

  .cart-item-modern .trash-btn {
    width: 30px;
    height: 30px;
  }

  .cart-item-modern .cart-qty-control {
    grid-template-columns: 28px 30px 28px;
  }

  .cart-item-modern .cart-qty-control button {
    height: 28px;
  }
}

/* =========================================================
   LUHU - Imagen del producto ocupa la altura de la tarjeta
   Ajuste seguro: usa un contenedor propio para no afectar
   imagenes del catalogo, modal ni tarjetas principales.
========================================================= */
.cart-item.cart-item-modern {
  grid-template-columns: 82px minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  min-height: 112px;
  padding: 8px;
}

.cart-item-image-wrap {
  width: 82px;
  min-height: 96px;
  align-self: stretch;
  overflow: hidden;
  border-radius: 14px;
  background: var(--stone);
}

.cart-item.cart-item-modern .cart-item-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  min-height: 96px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
}

.cart-item-modern .cart-item-info {
  align-self: center;
}

.cart-item-modern .modern-qty-actions {
  align-self: stretch;
}

@media (max-width: 760px) {
  .cart-item.cart-item-modern {
    grid-template-columns: 72px minmax(0, 1fr) auto !important;
    min-height: 104px;
    padding: 8px;
    gap: 8px;
  }

  .cart-item-image-wrap {
    width: 72px;
    min-height: 88px;
    border-radius: 13px;
  }

  .cart-item.cart-item-modern .cart-item-image-wrap img {
    min-height: 88px;
  }
}

/* =========================================================
   LUHU - Panel interno admin
========================================================= */
.admin-page {
  background: #f4efe6;
  min-height: 100vh;
}

.admin-page .admin-shell {
  min-height: 100vh;
}

.admin-login,
.admin-loading {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top left, rgba(201, 166, 107, .25), transparent 34%), var(--black);
}

.admin-loading-card {
  width: min(420px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  color: var(--white);
  padding: clamp(26px, 5vw, 42px);
  border: 1px solid rgba(201, 166, 107, .26);
  border-radius: 28px;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .25);
  backdrop-filter: blur(14px);
}

.admin-loading-card img {
  width: 108px;
  height: auto;
  margin-bottom: 4px;
}

.admin-loading-card strong {
  font-family: Syne, sans-serif;
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.admin-loading-card p {
  color: rgba(255, 255, 255, .68);
  font-size: .92rem;
  font-weight: 700;
}

.admin-loading-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .18);
  border-top-color: var(--accent);
  animation: adminLoadingSpin .85s linear infinite;
}

@keyframes adminLoadingSpin {
  to {
    transform: rotate(360deg);
  }
}

.admin-login-card {
  width: min(460px, 100%);
  background: var(--white);
  border-radius: 28px;
  padding: clamp(26px, 5vw, 44px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .25);
}

.admin-kicker {
  display: inline-flex;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 900;
  margin-bottom: 10px;
}

.admin-login-card h1,
.admin-header h1,
.admin-card h2 {
  font-family: Syne, sans-serif;
  letter-spacing: -.055em;
  line-height: .96;
}

.admin-login-card h1 {
  font-size: clamp(2.3rem, 7vw, 3.6rem);
  margin-bottom: 12px;
}

.admin-login-card p,
.admin-header p,
.admin-helper,
.admin-empty {
  color: var(--gray);
}

.admin-form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.admin-form label,
.admin-toolbar label,
.admin-product-picker label,
.admin-message-box {
  display: grid;
  gap: 6px;
  color: var(--gray);
  font-size: .78rem;
  font-weight: 900;
}

.admin-form input,
.admin-form select,
.admin-form textarea,
.admin-toolbar input,
.admin-toolbar select,
.admin-product-picker input,
.admin-product-picker select,
.admin-message-box textarea,
.inventory-size-cell input,
.history-status-select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  border-radius: 13px;
  padding: 11px 12px;
  outline: none;
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus,
.admin-toolbar input:focus,
.admin-toolbar select:focus,
.admin-product-picker input:focus,
.admin-product-picker select:focus,
.inventory-size-cell input:focus,
.history-status-select:focus {
  border-color: var(--black);
  background: var(--white);
}

.admin-form-message {
  min-height: 18px;
  color: #b42318 !important;
  font-size: .82rem;
  font-weight: 800;
}

.admin-form-message.success {
  color: #2b6b2b !important;
}

.admin-form-message.danger {
  color: #b42318 !important;
}


.admin-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 270px 1fr;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--black);
  color: var(--white);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin-brand {
  display: grid;
  gap: 10px;
  color: var(--white);
}

.admin-brand img {
  width: 130px;
  height: auto;
}

.admin-brand span {
  color: rgba(255, 255, 255, .62);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

.admin-nav {
  display: grid;
  gap: 8px;
}

.admin-nav-btn,
.admin-user-box button,
.admin-link-btn,
.history-actions button,
.draft-remove {
  border: 0;
  border-radius: 999px;
  font-weight: 900;
}

.admin-nav-btn {
  text-align: left;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .72);
}

.admin-nav-btn.active,
.admin-nav-btn:hover {
  background: var(--accent);
  color: var(--black);
}

.admin-user-box {
  margin-top: auto;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: 14px;
}

.admin-user-box span {
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.admin-user-box button {
  padding: 9px 12px;
  background: rgba(255, 255, 255, .10);
  color: var(--white);
}

.admin-content {
  padding: clamp(18px, 3vw, 34px);
  min-width: 0;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  margin-bottom: 20px;
}

.admin-header h1 {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  margin-bottom: 8px;
}

.admin-status {
  border-radius: 999px;
  padding: 11px 14px;
  margin-bottom: 18px;
  font-weight: 900;
  font-size: .86rem;
}

.admin-status.success {
  background: #edf7e9;
  color: #2b6b2b;
  border: 1px solid #cfe7c8;
}

.admin-status.danger {
  background: #fff1f0;
  color: #b42318;
  border: 1px solid #f1b8b3;
}

.admin-tab {
  display: none;
}

.admin-tab.active {
  display: grid;
  gap: 18px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
}

.admin-metric-card,
.admin-card,
.inventory-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(16, 16, 15, .06);
}

.admin-metric-card {
  padding: 18px;
  display: grid;
  gap: 8px;
}

.admin-metric-card span {
  color: var(--gray);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

.admin-metric-card strong {
  font-family: Syne, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1;
}

.admin-two-columns,
.admin-order-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.admin-card,
.inventory-card {
  padding: 18px;
}

.admin-card-head,
.admin-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-card h2 {
  font-size: 1.65rem;
}

.admin-link-btn,
.history-actions button,
.draft-remove {
  background: var(--soft);
  color: var(--gray);
  padding: 8px 11px;
  font-size: .76rem;
}

.admin-list {
  display: grid;
  gap: 8px;
}

.admin-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--soft);
}

.admin-list-item strong,
.admin-list-item span {
  display: block;
}

.admin-list-item span {
  color: var(--gray);
  font-size: .82rem;
}

.status-pill,
.stock-pill,
.history-status-select {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 10px;
  font-style: normal;
  font-size: .72rem;
  font-weight: 900;
  white-space: nowrap;
}

.status-pendiente {
  background: #fff8ec;
  color: #715025;
  border: 1px solid #ead8b5;
}

.status-pagado {
  background: #edf7e9;
  color: #2b6b2b;
  border: 1px solid #cfe7c8;
}

.status-enviado {
  background: #eef4ff;
  color: #294c8f;
  border: 1px solid #cfdcf7;
}

.status-cancelado {
  background: #fff1f0;
  color: #b42318;
  border: 1px solid #f1b8b3;
}

.stock-low {
  background: #fff8ec;
  color: #715025;
  border: 1px solid #ead8b5;
}

.admin-toolbar,
.admin-product-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
}

.admin-product-picker {
  grid-template-columns: 1.2fr .9fr .7fr .55fr auto;
  align-items: end;
  margin-top: 12px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.inventory-card-head {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.inventory-card-head .color-swatch-large {
  width: 54px;
  height: 38px;
}

.inventory-card-head h3 {
  font-family: Syne, sans-serif;
  line-height: 1;
  font-size: 1.25rem;
}

.inventory-card-head p {
  color: var(--gray);
  font-size: .82rem;
  font-weight: 800;
}

.inventory-size-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.inventory-size-cell {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  display: grid;
  gap: 5px;
  background: var(--soft);
}

.inventory-size-cell span {
  font-weight: 900;
  font-size: .76rem;
}

.inventory-size-cell input {
  text-align: center;
  padding: 8px 6px;
  font-weight: 900;
}

.inventory-size-cell.status-agotado {
  background: #fff1f0;
  border-color: #f1b8b3;
}

.inventory-size-cell.status-bajo {
  background: #fff8ec;
  border-color: #ead8b5;
}

.inventory-size-cell.status-disponible {
  background: #edf7e9;
  border-color: #cfe7c8;
}

.order-builder-card {
  display: grid;
  gap: 14px;
}

.order-items-list {
  display: grid;
  gap: 9px;
}

.order-draft-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px;
  background: var(--soft);
}

.order-draft-item strong,
.order-draft-item span {
  display: block;
}

.order-draft-item span {
  color: var(--gray);
  font-size: .82rem;
}

.draft-qty-control {
  display: grid;
  grid-template-columns: 32px 38px 32px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
}

.draft-qty-control button {
  border: 0;
  height: 32px;
  background: transparent;
  font-weight: 900;
}

.draft-qty-control span {
  text-align: center;
  font-weight: 900;
}

.admin-summary-box {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
  padding: 13px;
}

.admin-summary-box span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.admin-summary-box small {
  color: var(--gray);
  font-weight: 900;
}

.admin-summary-box .summary-total {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 4px;
}

.admin-message-box textarea {
  resize: vertical;
  min-height: 220px;
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.45;
}

.orders-table-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: auto;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.orders-table th,
.orders-table td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.orders-table th {
  color: var(--gray);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  background: var(--soft);
}

.orders-table td small {
  display: block;
  color: var(--gray);
  font-size: .72rem;
  margin-top: 2px;
}

.history-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

@media (max-width: 1180px) {
  .admin-app {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
  }

  .admin-nav {
    grid-template-columns: repeat(4, 1fr);
  }

  .admin-user-box {
    margin-top: 0;
  }

  .admin-metrics {
    grid-template-columns: repeat(3, 1fr);
  }

  .admin-product-picker {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .admin-content {
    padding: 16px;
  }

  .admin-header,
  .admin-card-head,
  .admin-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-nav {
    grid-template-columns: 1fr 1fr;
  }

  .admin-metrics,
  .admin-two-columns,
  .admin-order-layout,
  .admin-toolbar,
  .admin-product-picker {
    grid-template-columns: 1fr;
  }

  .inventory-grid {
    grid-template-columns: 1fr;
  }

  .order-draft-item {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LUHU - Ajustes finales solicitados
========================================================= */
.input-soft-error {
  border-color: #e2a29c !important;
  background: #fff7f6 !important;
}

.order-success-helper {
  color: var(--gray);
  font-size: .78rem;
  line-height: 1.35;
  max-width: 420px;
  margin: 0 auto;
}

.catalog-current-actions {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: center;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 430px;
}

.catalog-intro-minimal .catalog-current-card .catalog-current-actions a,
.catalog-suggest-links a {
  width: auto;
  max-width: 220px;
  margin-top: 0;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}

.catalog-suggest-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.catalog-suggest-links[hidden] {
  display: none !important;
}

.card-stock-badge {
  top: auto !important;
  left: 14px !important;
  bottom: 14px !important;
  padding: 8px 12px !important;
  font-size: .72rem !important;
  letter-spacing: .035em !important;
  text-transform: none !important;
}

.footer-bottom {
  display: grid;
  gap: 4px;
}

.footer-bottom small,
.admin-developer-credit {
  color: rgba(255, 255, 255, .34);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
}

.admin-developer-credit {
  position: fixed;
  left: 22px;
  bottom: 14px;
  z-index: 5;
  color: rgba(255, 255, 255, .42);
}

@media (max-width: 760px) {
  .catalog-current-actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    justify-content: flex-start;
    max-width: 100%;
  }

  .catalog-suggest-links {
    justify-content: flex-start;
  }

  .card-stock-badge {
    left: 10px !important;
    bottom: 10px !important;
    padding: 7px 10px !important;
    font-size: .64rem !important;
  }

  .admin-developer-credit {
    position: static;
    display: block;
    padding: 10px 18px 18px;
    text-align: center;
    color: rgba(255, 255, 255, .36);
  }
}

.catalog-intro-minimal .catalog-current-card .catalog-current-actions a {
  grid-column: auto;
  grid-row: auto;
  align-self: center;
  justify-self: auto;
}

/* =========================================================
   LUHU - Panel pedidos por tarjetas
========================================================= */
.admin-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-orders-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(16, 16, 15, .06);
}

.admin-orders-toolbar h2 {
  font-family: Syne, sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: .95;
  letter-spacing: -.05em;
  margin-bottom: 8px;
}

.admin-orders-toolbar p {
  color: var(--gray);
  max-width: 680px;
}

.admin-filter-row {
  display: grid;
  grid-template-columns: 150px 140px minmax(220px, 1fr);
  gap: 10px;
  align-items: end;
}

.admin-filter-row label {
  display: grid;
  gap: 6px;
  color: var(--gray);
  font-size: .76rem;
  font-weight: 900;
}

.admin-filter-row input,
.admin-filter-row select {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  border-radius: 13px;
  padding: 11px 12px;
  outline: none;
}

.admin-orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

.admin-empty-wide {
  grid-column: 1 / -1;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: 20px;
  padding: 20px;
}

.admin-order-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 16px;
  display: grid;
  gap: 12px;
  box-shadow: 0 20px 70px rgba(16, 16, 15, .08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.admin-order-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 80px rgba(16, 16, 15, .12);
}

.admin-order-pendiente {
  background: linear-gradient(135deg, #fff8ec, #fffdf8);
  border-color: #ead8b5;
}

.admin-order-pagado {
  background: linear-gradient(135deg, #edf7e9, #fbfff8);
  border-color: #cfe7c8;
}

.admin-order-enviado {
  background: linear-gradient(135deg, #f1f2f2, #ffffff);
  border-color: #d9dcdf;
}

.admin-order-cancelado {
  background: linear-gradient(135deg, #fff1f0, #fffafa);
  border-color: #f1b8b3;
  opacity: .86;
}

.admin-order-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.admin-order-card-top h3 {
  font-family: Syne, sans-serif;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -.045em;
  margin: 4px 0;
}

.admin-order-card-top small,
.admin-order-origin {
  display: block;
  color: var(--gray);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.admin-order-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: .72rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.admin-order-customer {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, .62);
}

.admin-order-customer strong,
.admin-order-customer span,
.admin-order-customer small {
  display: block;
}

.admin-order-customer span,
.admin-order-customer small {
  color: var(--gray);
  font-size: .82rem;
  font-weight: 800;
}

.admin-order-items {
  display: grid;
  gap: 8px;
}

.admin-order-item-row {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 15px;
  padding: 10px;
  background: rgba(255, 255, 255, .72);
}

.admin-order-item-row>span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: .72rem;
  font-weight: 900;
}

.admin-order-item-row strong,
.admin-order-item-row small {
  display: block;
}

.admin-order-item-row small {
  color: var(--gray);
  font-size: .78rem;
  font-weight: 800;
}

.admin-order-item-row em {
  color: var(--black);
  font-style: normal;
  font-size: .8rem;
  font-weight: 900;
}

.admin-order-summary-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.admin-order-summary-card span {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, .72);
}

.admin-order-summary-card small {
  color: var(--gray);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}

.admin-order-summary-card strong {
  font-family: Syne, sans-serif;
  font-size: 1.12rem;
  line-height: 1;
}

.admin-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-order-actions .btn {
  padding: 9px 13px;
  font-size: .78rem;
  min-height: 38px;
}

.danger-soft {
  background: #fff1f0 !important;
  color: #b42318 !important;
  border: 1px solid #f1b8b3;
}

.admin-helper-mini {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .70);
  color: var(--gray);
  font-size: .74rem;
  font-weight: 900;
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 16, 15, .58);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.admin-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.admin-modal-card {
  width: min(1180px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
  background: var(--white);
  border-radius: 28px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .30);
  position: relative;
}

.admin-modal-head {
  padding-right: 48px;
  margin-bottom: 16px;
}

.admin-modal-head h2 {
  font-family: Syne, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.admin-modal-head p {
  color: var(--gray);
  margin-top: 8px;
}

.admin-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  width: auto;
  max-width: calc(100% - 32px);
}

body.admin-modal-open {
  overflow: hidden;
}

@media (max-width: 1180px) {
  .admin-orders-toolbar {
    grid-template-columns: 1fr;
  }

  .admin-filter-row {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 760px) {

  .admin-header-actions,
  .admin-filter-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .admin-orders-grid {
    grid-template-columns: 1fr;
  }

  .admin-order-summary-card {
    grid-template-columns: 1fr;
  }

  .admin-order-item-row {
    grid-template-columns: 28px 1fr;
  }

  .admin-order-item-row em {
    grid-column: 2;
  }

  .admin-modal {
    padding: 10px;
  }
}

/* Estado Enviado solicitado en plomo claro */
.status-enviado {
  background: #f1f2f2 !important;
  color: #555f66 !important;
  border: 1px solid #d9dcdf !important;
}

/* LUHU - carrito sin número temporal */
.cart-header-meta {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 220px !important;
}

/* =========================================================
   LUHU - Modelos en produccion y vaciar carrito
========================================================= */
.catalog-option-production img {
  filter: grayscale(.2) brightness(.78);
}

.catalog-option-production::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .28));
}

.catalog-option-production small {
  background: #fff1f0;
  color: #b42318;
}

.production-notice-card {
  grid-column: 1 / -1;
  width: min(680px, 100%);
  margin: 10px auto 28px;
  border: 1px dashed rgba(201, 166, 107, .75);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--white), #fff8ec);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  box-shadow: var(--shadow);
}

.production-notice-card span {
  display: inline-flex;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #fff1f0;
  color: #b42318;
  padding: 7px 12px;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.production-notice-card h3 {
  font-family: Syne, sans-serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.055em;
  margin-bottom: 12px;
}

.production-notice-card p {
  color: var(--gray);
  max-width: 460px;
  margin: 0 auto 22px;
  font-weight: 700;
}

.cart-clear-btn {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  border: 1px solid #f1b8b3;
  border-radius: 999px;
  background: #fff1f0;
  color: #b42318;
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 900;
  align-self: flex-start;
}

.cart-clear-btn:hover {
  background: #ffe4e1;
  transform: translateY(-1px);
}

.cart-clear-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =========================================================
   LUHU - Datos del cliente siempre visibles en carrito
========================================================= */
.cart-customer-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--white), var(--soft));
  padding: 9px 10px 10px;
  margin: 0 0 8px;
  display: grid;
  gap: 8px;
  flex-shrink: 0;
}

.cart-customer-head {
  display: grid;
  gap: 2px;
}

.cart-customer-head strong {
  color: var(--black);
  font-size: .84rem;
  font-weight: 900;
  line-height: 1.1;
}

.cart-customer-head small {
  color: var(--gray);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.25;
}

.cart-customer-notes {
  margin: 2px 0 0;
  padding-left: 16px;
  color: var(--gray);
  font-size: .68rem;
  font-weight: 750;
  line-height: 1.22;
}

.cart-customer-notes li {
  margin: 1px 0;
  padding-left: 1px;
}

.cart-customer-notes li::marker {
  color: var(--accent);
  font-size: .82em;
}

.compact-customer-form {
  display: grid;
  gap: 7px;
  border-top: 0;
  padding: 0;
}

.compact-customer-form label {
  gap: 3px;
  font-size: .72rem;
}

.compact-customer-form input {
  border-radius: 10px;
  padding: 8px 10px;
  font-size: .82rem;
  min-height: 36px;
}

@media (max-width: 760px) {
  .cart-customer-box {
    margin-bottom: 7px;
  }
}

/* =========================================================
   LUHU - Ajuste final tarjeta Regla LUHU en carrito
   Evita recortes y mantiene el panel compacto.
========================================================= */
.cart-header-meta {
  max-width: min(100%, 360px) !important;
}

.cart-zone-card {
  grid-template-columns: minmax(86px, .78fr) 16px minmax(150px, 1.42fr) !important;
  gap: 6px !important;
  width: 100% !important;
}

.cart-zone-box {
  min-height: 50px !important;
  overflow: visible !important;
}

.cart-zone-card strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
  line-height: 1.08 !important;
}

.cart-zone-name strong {
  font-size: .78rem !important;
  letter-spacing: -.01em !important;
  max-width: 100% !important;
}

.cart-zone-total strong {
  font-size: .86rem !important;
}

@media (max-width: 760px) {
  .cart-header-meta {
    max-width: calc(100vw - 76px) !important;
  }

  .cart-zone-card {
    grid-template-columns: minmax(72px, .7fr) 13px minmax(128px, 1.3fr) !important;
    gap: 5px !important;
  }

  .cart-zone-box {
    min-height: 48px !important;
    padding: 7px 7px !important;
  }

  .cart-zone-name strong {
    font-size: .66rem !important;
  }

  .cart-zone-total strong {
    font-size: .68rem !important;
  }
}

@media (max-width: 380px) {
  .cart-zone-card {
    grid-template-columns: minmax(66px, .66fr) 12px minmax(112px, 1.34fr) !important;
  }

  .cart-zone-card span {
    font-size: .44rem !important;
  }

  .cart-zone-name strong,
  .cart-zone-total strong {
    font-size: .62rem !important;
  }
}

/* =========================================================
   LUHU - Ajuste definitivo tarjetas Regla LUHU en carrito
   Corrige ancho de TOTAL PRENDAS sin romper el panel.
========================================================= */
.cart-header-meta {
  max-width: min(100%, 382px) !important;
}

.cart-zone-card {
  grid-template-columns: minmax(112px, 112px) 14px minmax(156px, 1fr) !important;
  gap: 7px !important;
  width: 100% !important;
  align-items: stretch !important;
}

.cart-zone-box {
  min-height: 50px !important;
  padding: 7px 10px !important;
  overflow: visible !important;
}

.cart-zone-card span {
  font-size: .52rem !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: initial !important;
}

.cart-zone-total strong {
  font-size: .88rem !important;
  white-space: nowrap !important;
}

.cart-zone-name strong {
  font-size: .78rem !important;
  line-height: 1.08 !important;
  white-space: normal !important;
}

@media (max-width: 760px) {
  .cart-header-meta {
    max-width: calc(100vw - 76px) !important;
  }

  .cart-zone-card {
    grid-template-columns: minmax(104px, 104px) 12px minmax(124px, 1fr) !important;
    gap: 5px !important;
  }

  .cart-zone-box {
    min-height: 48px !important;
    padding: 7px 8px !important;
  }

  .cart-zone-card span {
    font-size: .47rem !important;
    letter-spacing: .045em !important;
  }

  .cart-zone-total strong {
    font-size: .74rem !important;
  }

  .cart-zone-name strong {
    font-size: .66rem !important;
  }
}

@media (max-width: 380px) {
  .cart-zone-card {
    grid-template-columns: minmax(98px, 98px) 10px minmax(112px, 1fr) !important;
    gap: 5px !important;
  }

  .cart-zone-box {
    padding: 7px 7px !important;
  }

  .cart-zone-card span {
    font-size: .43rem !important;
  }

  .cart-zone-total strong,
  .cart-zone-name strong {
    font-size: .62rem !important;
  }
}


/* =========================================================
   LUHU - Pantalla de carga para clientes
========================================================= */

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 166, 107, .16), transparent 34%),
    var(--black);
  color: var(--white);
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease, visibility .32s ease;
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader-card {
  width: min(320px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.site-loader-card img {
  width: 118px;
  height: auto;
  display: block;
}

.site-loader-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .20);
  border-top-color: var(--accent);
  animation: siteLoaderSpin .82s linear infinite;
}

.site-loader-card strong {
  font-family: Syne, sans-serif;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.site-loader-card p {
  color: rgba(255, 255, 255, .68);
  font-size: .88rem;
  font-weight: 800;
}

@keyframes siteLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   LUHU - Estados honestos de stock real
========================================================= */
.card-stock-badge.is-loading,
.modal-stock-badge.is-loading {
  background: #f7efe1 !important;
  color: #694b18 !important;
  border-color: #ead8b5 !important;
}

.quick-product-card.is-stock-loading .product-img,
.quick-product-card.is-stock-unavailable .product-img {
  filter: grayscale(.08) brightness(.96);
}

.quick-product-card.is-stock-loading .quick-add-btn,
.quick-product-card.is-stock-unavailable .quick-add-btn {
  background: #d8d2c8;
  color: #77736d;
}

/* =========================================================
   LUHU - Ajustes de pedidos internos
========================================================= */
.admin-order-card[data-open-order-modal] {
  cursor: pointer;
}

.admin-order-card .admin-order-actions,
.admin-order-card .admin-order-actions * {
  cursor: auto;
}

.admin-order-customer {
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 16px;
  padding: 12px;
}

.admin-order-customer strong {
  color: var(--black);
  font-size: .98rem;
}

.admin-order-customer span,
.admin-order-customer small {
  color: var(--gray);
  font-size: .78rem;
  font-weight: 900;
}

.admin-inline-message {
  border-radius: 14px;
  padding: 10px 12px;
  font-size: .82rem;
  font-weight: 900;
}

.admin-inline-message.danger {
  color: #b42318;
  background: #fff1f0;
  border: 1px solid #f1b8b3;
}

.admin-inline-message.success {
  color: #2b6b2b;
  background: #edf7e9;
  border: 1px solid #cfe7c8;
}

.admin-client-card,
.admin-shipping-card,
.admin-products-card {
  align-self: start;
}

.admin-order-form+.admin-inline-message,
.admin-order-form .admin-inline-message {
  margin-top: 2px;
}

.admin-products-card[hidden],
#orderClearBtn[hidden] {
  display: none !important;
}

/* =========================================================
   LUHU - Carrito compacto v2: header 3 cajas, productos estables
========================================================= */
body.modal-lock {
  overflow: hidden;
}

.cart-panel {
  width: min(440px, 100%) !important;
  padding: 10px !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.cart-header-compact {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px !important;
  gap: 8px !important;
  align-items: stretch !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--line) !important;
}

.cart-header-compact>div:not(.cart-header-stats),
.cart-header-compact .eyebrow,
.cart-header-compact h2,
.cart-header-meta {
  display: none !important;
}

.cart-header-stats {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: .82fr 1fr 1.28fr !important;
  gap: 6px !important;
  min-width: 0 !important;
}

.cart-top-box {
  min-width: 0;
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 7px 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--soft);
  overflow: hidden;
}

.cart-top-box span {
  display: block;
  color: var(--gray);
  font-size: clamp(.50rem, 1.7vw, .62rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: normal;
}

.cart-top-box strong {
  display: block;
  color: var(--black);
  font-size: clamp(.72rem, 2.6vw, .88rem);
  line-height: 1.05;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.cart-top-brand {
  background: var(--black);
  border-color: var(--black);
}

.cart-top-brand span,
.cart-top-brand strong {
  color: var(--white);
}

.cart-top-zone.zone-empty,
.cart-top-zone.zone-basica {
  background: #fff8ec;
  border-color: #ead8b5;
}

.cart-top-zone.zone-luhu {
  background: #edf7e9;
  border-color: #cfe7c8;
}

.cart-top-zone.zone-emprendedor {
  background: linear-gradient(135deg, #10100f, #3a2b17);
  border-color: rgba(201, 166, 107, .55);
}

.cart-top-zone.zone-emprendedor span,
.cart-top-zone.zone-emprendedor strong {
  color: var(--white);
}

.cart-header-compact #closeCart {
  position: static !important;
  width: 34px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  background: transparent !important;
  font-size: 1.7rem !important;
  line-height: 1 !important;
}

.cart-items {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 6px 0 !important;
}

.cart-item-modern {
  position: relative !important;
  min-height: clamp(104px, 17vh, 130px) !important;
  max-height: clamp(104px, 17vh, 130px) !important;
  display: grid !important;
  grid-template-columns: clamp(76px, 19vw, 96px) minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: stretch !important;
  padding: 9px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #fffdf9 !important;
}

.cart-item-image-wrap {
  width: clamp(76px, 19vw, 96px) !important;
  height: clamp(76px, 19vw, 96px) !important;
  align-self: center !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--stone) !important;
  flex: 0 0 auto !important;
}

.cart-item-image-wrap img,
.cart-item-modern img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

.cart-item-info {
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto auto auto 1fr !important;
  align-content: start !important;
  gap: 2px !important;
  padding: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

.cart-item-topline {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px !important;
  align-items: start !important;
  gap: 6px !important;
}

.cart-item-line {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.cart-item-model {
  color: var(--gray) !important;
  font-size: clamp(.70rem, 2.4vw, .82rem) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

.cart-item-variant {
  color: var(--black) !important;
  font-size: clamp(.80rem, 2.9vw, .96rem) !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
}

.cart-item-price-line {
  color: var(--gray) !important;
  font-size: clamp(.70rem, 2.4vw, .82rem) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.cart-item-detail-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.cart-item-subtotal-row {
  align-self: end !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 4px !important;
  padding-top: 6px !important;
  border-top: 1px dashed var(--line) !important;
  color: var(--gray) !important;
  font-size: clamp(.68rem, 2.3vw, .78rem) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.cart-item-subtotal-row strong {
  color: var(--black) !important;
  font-size: clamp(.90rem, 3.3vw, 1.05rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.cart-qty-control {
  grid-template-columns: 28px 32px 28px !important;
  height: 30px !important;
  flex: 0 0 auto !important;
}

.cart-qty-control button {
  width: 28px !important;
  height: 30px !important;
  font-size: .85rem !important;
}

.cart-qty-control span {
  min-width: 32px !important;
  font-size: .78rem !important;
}

.trash-btn {
  position: static !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
}

.trash-btn svg {
  width: 14px !important;
  height: 14px !important;
}

.modern-qty-actions {
  display: contents !important;
}

.cart-clear-btn {
  justify-self: end !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 0 2px auto !important;
  padding: 5px 9px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  font-size: .66rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.cart-clear-btn svg {
  width: 12px !important;
  height: 12px !important;
}

.cart-customer-box {
  padding: 10px !important;
  border-radius: 18px !important;
}

.cart-customer-head {
  margin-bottom: 6px !important;
}

.cart-customer-head strong {
  font-size: .88rem !important;
  line-height: 1 !important;
}

.cart-customer-notes {
  display: none !important;
}

.compact-customer-form,
.customer-form.compact-customer-form {
  border-top: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
}

.compact-customer-form label {
  font-size: .75rem !important;
  gap: 5px !important;
}

.compact-customer-form input {
  min-height: 40px !important;
  padding: 9px 11px !important;
  border-radius: 12px !important;
  font-size: .88rem !important;
}

.cart-footer {
  padding-top: 8px !important;
  gap: 8px !important;
}

.cart-summary {
  padding: 10px !important;
  gap: 5px !important;
}

.create-order-btn {
  min-height: 48px !important;
}

#continueShopping {
  display: none !important;
}

.cart-toast {
  display: none !important;
}

.cart-feedback-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 16, 15, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, visibility .12s ease, background .12s ease;
}

.cart-feedback-overlay.show {
  opacity: 1;
  visibility: visible;
  background: rgba(16, 16, 15, .14);
}

.cart-feedback-card {
  max-width: min(310px, 86vw);
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  color: var(--black);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .14);
  font-size: .86rem;
  font-weight: 900;
  text-align: center;
  transform: translateY(6px) scale(.98);
  transition: transform .12s ease;
}

.cart-feedback-overlay.show .cart-feedback-card {
  transform: translateY(0) scale(1);
}

.cart-feedback-overlay.danger .cart-feedback-card {
  color: #b42318;
}

.customer-required-modal {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 16, 15, .62);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.customer-required-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.customer-required-card {
  width: min(390px, 100%);
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 6vw, 38px);
  box-shadow: 0 42px 120px rgba(0, 0, 0, .32);
}

.customer-required-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff1f0;
  color: #b42318;
  font-weight: 900;
  font-size: 1.8rem;
}

.customer-required-card h2 {
  font-family: Syne, sans-serif;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  line-height: .95;
  letter-spacing: -.05em;
}

.customer-required-card p {
  color: var(--gray);
  font-weight: 700;
}

.admin-order-customer span:has(+ small) {
  display: none !important;
}

@media (min-width: 761px) {
  .cart-panel {
    right: -440px !important;
  }

  .cart-panel.open {
    right: 0 !important;
  }
}

@media (max-width: 760px) {
  .cart-panel {
    width: 100% !important;
    right: -100% !important;
    padding: 10px !important;
  }

  .cart-panel.open {
    right: 0 !important;
  }

  .cart-header-stats {
    grid-template-columns: .78fr .98fr 1.24fr !important;
    gap: 5px !important;
  }

  .cart-top-box {
    min-height: 46px;
    padding: 6px 7px;
    border-radius: 13px;
  }

  .cart-item-modern {
    grid-template-columns: 80px minmax(0, 1fr) !important;
    min-height: 112px !important;
    max-height: 112px !important;
    padding: 8px !important;
    gap: 8px !important;
  }

  .cart-item-image-wrap {
    width: 80px !important;
    height: 80px !important;
  }
}

@media (max-width: 380px) {
  .cart-panel {
    padding: 8px !important;
  }

  .cart-header-stats {
    gap: 4px !important;
  }

  .cart-top-box {
    padding: 5px 6px;
  }

  .cart-top-box span {
    font-size: .48rem;
  }

  .cart-top-box strong {
    font-size: .70rem;
  }

  .cart-item-modern {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    min-height: 106px !important;
    max-height: 106px !important;
  }

  .cart-item-image-wrap {
    width: 72px !important;
    height: 72px !important;
  }

  .cart-qty-control {
    grid-template-columns: 25px 28px 25px !important;
  }
}

/* =========================================================
   LUHU - Ajuste carrito legible + admin minimal responsive
========================================================= */

/* Carrito: tarjeta estable en 2 columnas reales */
.cart-item.cart-item-modern {
  grid-template-columns: clamp(82px, 20vw, 98px) minmax(0, 1fr) !important;
  min-height: clamp(124px, 18vh, 144px) !important;
  max-height: none !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding: 10px !important;
}

.cart-item-image-wrap {
  width: clamp(82px, 20vw, 98px) !important;
  height: clamp(82px, 20vw, 98px) !important;
  align-self: center !important;
}

.cart-item-modern .cart-item-info {
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 4px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.cart-item-topline {
  grid-template-columns: minmax(0, 1fr) 28px !important;
  gap: 6px !important;
}

.cart-item-model {
  font-size: clamp(.68rem, 2.2vw, .78rem) !important;
  line-height: 1.08 !important;
}

.cart-item-variant {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
  color: var(--black) !important;
  font-size: clamp(.78rem, 2.65vw, .92rem) !important;
  line-height: 1.12 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cart-item-variant .cart-item-color,
.cart-item-variant .cart-item-separator,
.cart-item-variant .cart-item-size {
  display: inline !important;
  min-width: 0 !important;
}

.cart-item-variant .cart-item-color {
  color: var(--black) !important;
  font-weight: 900 !important;
  flex: 0 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cart-item-variant .cart-item-separator,
.cart-item-variant .cart-item-size {
  color: var(--gray) !important;
  font-weight: 900 !important;
  flex: 0 0 auto !important;
}

.cart-item-detail-row {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
}

.cart-item-subtotal-row {
  align-self: end !important;
  margin-top: 3px !important;
  padding-top: 7px !important;
  min-height: 24px !important;
}

.cart-item-subtotal-row strong {
  font-size: clamp(.94rem, 3vw, 1.08rem) !important;
}

@media (max-width: 760px) {
  .cart-item.cart-item-modern {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    min-height: 128px !important;
    padding: 9px !important;
    gap: 9px !important;
  }

  .cart-item-image-wrap {
    width: 86px !important;
    height: 86px !important;
  }

  .cart-item-model {
    font-size: .70rem !important;
  }

  .cart-item-variant {
    font-size: .84rem !important;
  }

  .cart-qty-control {
    grid-template-columns: 28px 30px 28px !important;
  }
}

@media (max-width: 380px) {
  .cart-item.cart-item-modern {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    min-height: 122px !important;
    gap: 8px !important;
  }

  .cart-item-image-wrap {
    width: 76px !important;
    height: 76px !important;
  }

  .cart-item-variant {
    font-size: .78rem !important;
  }
}

/* Admin minimal */
.admin-page {
  --admin-compact-font: .76rem;
  background: #f7f4ee;
}

.admin-mobile-menu-btn,
.admin-sidebar-close,
.admin-mobile-backdrop {
  display: none;
}

#adminRefreshBtn,
#openManualOrderBtn {
  display: none !important;
}

.admin-tab-orders #openManualOrderBtn {
  display: inline-flex !important;
}

.admin-header {
  align-items: center !important;
  margin-bottom: 12px !important;
  gap: 10px !important;
}

.admin-header h1 {
  font-size: clamp(1.15rem, 2.2vw, 1.65rem) !important;
  letter-spacing: -.035em !important;
  margin-bottom: 0 !important;
}

.admin-header p,
.admin-orders-toolbar p,
.admin-modal-head p,
.admin-helper {
  display: none !important;
}

.admin-kicker {
  font-size: .58rem !important;
  letter-spacing: .10em !important;
  margin-bottom: 2px !important;
}

.admin-content {
  padding: clamp(12px, 2vw, 22px) !important;
}

.admin-tab.active {
  gap: 12px !important;
}

.admin-orders-toolbar,
.admin-toolbar {
  padding: 10px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  gap: 10px !important;
}

.admin-orders-toolbar {
  grid-template-columns: auto 1fr auto !important;
  align-items: end !important;
}

.admin-orders-toolbar>div:first-child {
  min-width: 110px;
}

.admin-orders-toolbar h2,
.admin-card h2,
.inventory-card-head h3,
.admin-modal-head h2 {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .92rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.admin-filter-row,
.admin-toolbar {
  grid-template-columns: repeat(3, minmax(95px, 1fr)) !important;
  gap: 7px !important;
}

.admin-filter-row label,
.admin-toolbar label,
.admin-form label,
.admin-product-picker label {
  font-size: .62rem !important;
  gap: 3px !important;
}

.admin-filter-row input,
.admin-filter-row select,
.admin-toolbar input,
.admin-toolbar select,
.admin-form input,
.admin-form select,
.admin-form textarea,
.admin-product-picker input,
.admin-product-picker select,
.admin-message-box textarea,
.inventory-size-cell input,
.history-status-select {
  border-radius: 10px !important;
  padding: 7px 8px !important;
  font-size: .72rem !important;
  min-height: 34px !important;
}

.admin-orders-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 10px !important;
}

.admin-order-card {
  border-radius: 18px !important;
  padding: 10px !important;
  gap: 7px !important;
  box-shadow: none !important;
}

.admin-order-card:hover {
  transform: none !important;
  box-shadow: 0 12px 36px rgba(16, 16, 15, .08) !important;
}

.admin-order-card-top h3 {
  font-size: .98rem !important;
  margin: 2px 0 0 !important;
}

.admin-order-origin,
.admin-order-status,
.admin-order-card-top small {
  font-size: .56rem !important;
  letter-spacing: .06em !important;
}

.admin-order-status {
  padding: 5px 7px !important;
}

.admin-order-customer {
  padding: 7px !important;
  border-radius: 12px !important;
  gap: 1px !important;
}

.admin-order-customer strong {
  font-size: .76rem !important;
  line-height: 1.15 !important;
}

.admin-order-customer small {
  font-size: .64rem !important;
}

.admin-order-items {
  gap: 5px !important;
  max-height: 108px !important;
  overflow: hidden !important;
}

.admin-order-item-row {
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  gap: 5px !important;
  padding: 6px !important;
  border-radius: 11px !important;
}

.admin-order-item-row>span {
  width: 18px !important;
  height: 18px !important;
  font-size: .54rem !important;
}

.admin-order-item-row strong {
  font-size: .66rem !important;
  line-height: 1.1 !important;
}

.admin-order-item-row small {
  font-size: .58rem !important;
  line-height: 1.15 !important;
}

.admin-order-item-row em {
  font-size: .62rem !important;
}

.admin-order-summary-card {
  gap: 5px !important;
}

.admin-order-summary-card span {
  padding: 6px !important;
  border-radius: 11px !important;
}

.admin-order-summary-card small {
  font-size: .52rem !important;
}

.admin-order-summary-card strong {
  font-size: .78rem !important;
}

.admin-order-actions {
  gap: 5px !important;
}

.admin-order-actions .btn,
#openManualOrderBtn,
.admin-link-btn,
.history-actions button,
.draft-remove {
  min-height: 30px !important;
  padding: 6px 8px !important;
  font-size: .62rem !important;
}

.admin-card,
.inventory-card,
.admin-metric-card {
  border-radius: 16px !important;
  padding: 10px !important;
  box-shadow: none !important;
}

.admin-metrics {
  grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
  gap: 8px !important;
}

.admin-metric-card span,
.admin-list-item span,
.inventory-card-head p,
.order-draft-item span,
.orders-table td small {
  font-size: .64rem !important;
}

.admin-metric-card strong {
  font-size: 1.1rem !important;
}

.admin-two-columns,
.admin-order-layout {
  gap: 10px !important;
}

.inventory-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 10px !important;
}

.inventory-card-head {
  grid-template-columns: 42px 1fr !important;
  gap: 8px !important;
  margin-bottom: 9px !important;
}

.inventory-card-head .color-swatch-large {
  width: 42px !important;
  height: 30px !important;
  border-radius: 10px !important;
}

.inventory-size-grid {
  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)) !important;
  gap: 5px !important;
}

.inventory-size-cell {
  padding: 5px !important;
  border-radius: 10px !important;
}

.inventory-size-cell span {
  font-size: .62rem !important;
}

.orders-table {
  min-width: 720px !important;
  font-size: .72rem !important;
}

.orders-table th,
.orders-table td {
  padding: 8px 9px !important;
}

.admin-modal {
  padding: 10px !important;
}

.admin-modal-card {
  width: min(1040px, 100%) !important;
  border-radius: 18px !important;
  padding: 14px !important;
}

.admin-modal-head {
  margin-bottom: 10px !important;
  padding-right: 42px !important;
}

.admin-product-picker {
  grid-template-columns: 1.1fr .8fr .65fr .55fr auto !important;
  gap: 7px !important;
  padding: 8px !important;
  border-radius: 14px !important;
}

.order-draft-item {
  grid-template-columns: 1fr auto auto !important;
  gap: 6px !important;
  padding: 8px !important;
  border-radius: 12px !important;
}

.admin-message-box textarea {
  min-height: 150px !important;
  font-size: .72rem !important;
}

@media (min-width: 1280px) {
  .admin-orders-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  }
}

@media (max-width: 1180px) {
  .admin-app {
    grid-template-columns: 1fr !important;
  }

  .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: min(280px, 82vw) !important;
    height: 100vh !important;
    z-index: 210 !important;
    transform: translateX(-105%) !important;
    transition: transform .22s ease !important;
    padding: 18px !important;
  }

  .admin-sidebar-open .admin-sidebar {
    transform: translateX(0) !important;
  }

  .admin-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 205;
    display: block;
    background: rgba(16, 16, 15, .52);
    backdrop-filter: blur(2px);
  }

  .admin-mobile-backdrop[hidden] {
    display: none !important;
  }

  .admin-mobile-menu-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    color: var(--black);
    flex: 0 0 auto;
  }

  .admin-mobile-menu-btn span {
    width: 16px;
    height: 2px;
    display: block;
    border-radius: 999px;
    background: currentColor;
  }

  .admin-sidebar-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .10);
    color: var(--white);
    font-size: 1.4rem;
  }

  .admin-nav {
    grid-template-columns: 1fr !important;
  }

  .admin-user-box {
    margin-top: auto !important;
  }
}

@media (max-width: 760px) {
  .admin-content {
    padding: 9px !important;
  }

  .admin-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .admin-header-actions {
    display: contents !important;
  }

  .admin-tab-orders #openManualOrderBtn {
    display: inline-flex !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  .admin-header h1 {
    font-size: 1rem !important;
  }

  .admin-kicker,
  #adminPageDescription {
    display: none !important;
  }

  .admin-orders-toolbar {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
  }

  .admin-orders-toolbar>div:first-child {
    display: none !important;
  }

  .admin-filter-row,
  .admin-toolbar {
    grid-template-columns: .8fr .8fr 1.2fr !important;
    gap: 5px !important;
  }

  .admin-filter-row label,
  .admin-toolbar label {
    font-size: .54rem !important;
  }

  .admin-filter-row input,
  .admin-filter-row select,
  .admin-toolbar input,
  .admin-toolbar select {
    font-size: .66rem !important;
    padding: 6px 7px !important;
    min-height: 31px !important;
  }

  .admin-orders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .admin-order-card {
    border-radius: 14px !important;
    padding: 7px !important;
    gap: 5px !important;
  }

  .admin-order-card-top {
    gap: 5px !important;
  }

  .admin-order-card-top h3 {
    font-size: .78rem !important;
  }

  .admin-order-status {
    padding: 4px 5px !important;
    font-size: .48rem !important;
  }

  .admin-order-origin {
    font-size: .47rem !important;
  }

  .admin-order-customer {
    padding: 5px !important;
  }

  .admin-order-customer strong {
    font-size: .62rem !important;
  }

  .admin-order-customer small {
    font-size: .52rem !important;
  }

  .admin-order-items {
    max-height: 70px !important;
  }

  .admin-order-item-row {
    grid-template-columns: 15px minmax(0, 1fr) !important;
    padding: 4px !important;
    gap: 4px !important;
  }

  .admin-order-item-row>span {
    width: 14px !important;
    height: 14px !important;
    font-size: .46rem !important;
  }

  .admin-order-item-row strong {
    font-size: .54rem !important;
  }

  .admin-order-item-row small {
    font-size: .49rem !important;
  }

  .admin-order-item-row em {
    grid-column: 2 !important;
    font-size: .52rem !important;
  }

  .admin-order-summary-card {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .admin-order-summary-card span {
    padding: 4px !important;
  }

  .admin-order-summary-card small {
    font-size: .44rem !important;
  }

  .admin-order-summary-card strong {
    font-size: .62rem !important;
  }

  .admin-order-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }

  .admin-order-actions .btn {
    min-height: 25px !important;
    padding: 4px 5px !important;
    font-size: .50rem !important;
  }

  .inventory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .inventory-card {
    padding: 7px !important;
  }

  .inventory-card-head {
    grid-template-columns: 34px 1fr !important;
    gap: 6px !important;
  }

  .inventory-card-head .color-swatch-large {
    width: 34px !important;
    height: 25px !important;
  }

  .inventory-card-head h3 {
    font-size: .64rem !important;
  }

  .inventory-card-head p {
    font-size: .50rem !important;
  }

  .inventory-size-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .inventory-size-cell {
    padding: 4px !important;
  }

  .inventory-size-cell span,
  .inventory-size-cell input {
    font-size: .54rem !important;
  }

  .save-inventory-color {
    min-height: 28px !important;
    font-size: .54rem !important;
    padding: 5px 6px !important;
  }

  .admin-modal-card {
    max-height: 94vh !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  .admin-modal-head h2 {
    font-size: .92rem !important;
  }

  .admin-order-layout,
  .admin-product-picker,
  .admin-action-row,
  .order-draft-item {
    grid-template-columns: 1fr !important;
  }

  .admin-card,
  .order-builder-card {
    padding: 8px !important;
  }

  .orders-table {
    min-width: 640px !important;
    font-size: .62rem !important;
  }
}


/* =========================================================
   LUHU - Ajuste seguro carrito compacto + admin móvil
========================================================= */
.cart-item-compact {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  gap: 9px !important;
  align-items: stretch !important;
  padding: 9px !important;
  min-height: 106px;
}

.cart-item-compact .cart-item-image-wrap {
  width: 82px;
  height: 82px;
  align-self: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--stone);
}

.cart-item-compact img {
  width: 82px !important;
  height: 82px !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px !important;
}

.cart-item-compact .cart-item-content {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 3px;
  padding-right: 0 !important;
}

.cart-item-compact .cart-item-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: start;
}

.cart-item-compact .cart-product-name {
  min-width: 0;
  color: var(--gray);
  font-size: .78rem;
  line-height: 1.05;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-compact .cart-item-middle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.cart-item-compact .cart-item-text-stack {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.cart-item-compact .cart-product-variant {
  min-width: 0;
  display: flex !important;
  align-items: baseline;
  gap: 4px;
  color: var(--black);
  font-size: .86rem !important;
  line-height: 1.08 !important;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-item-compact .cart-product-variant .cart-item-size,
.cart-item-compact .cart-product-variant .cart-item-separator {
  color: var(--gray);
  font-weight: 900;
  flex: 0 0 auto;
}

.cart-item-compact .cart-product-price {
  color: var(--gray);
  font-size: .72rem !important;
  line-height: 1.05 !important;
  font-weight: 900;
}

.cart-item-compact .cart-qty-control {
  grid-template-columns: 28px 32px 28px !important;
  height: 28px;
  align-self: center;
}

.cart-item-compact .cart-qty-control button {
  height: 28px !important;
  font-size: .82rem;
}

.cart-item-compact .cart-qty-control span {
  font-size: .78rem;
  line-height: 1;
}

.cart-item-compact .cart-subtotal-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 8px;
  border-top: 1px dashed var(--line);
  padding-top: 5px;
  margin-top: 1px;
}

.cart-item-compact .cart-subtotal-row span {
  color: var(--gray);
  font-size: .70rem !important;
  line-height: 1 !important;
  font-weight: 900;
}

.cart-item-compact .cart-subtotal-row strong {
  color: var(--white);
  font-family: Syne, sans-serif;
  font-size: 1.05rem;
  line-height: 1;
  font-weight: 900;
}

.cart-item-compact .trash-btn {
  position: static !important;
  width: 30px !important;
  height: 30px !important;
  justify-self: end;
}

.cart-item-compact .trash-btn svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 480px) {
  .cart-item-compact {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    min-height: 100px;
  }

  .cart-item-compact .cart-item-image-wrap,
  .cart-item-compact img {
    width: 78px !important;
    height: 78px !important;
  }

  .cart-item-compact .cart-product-name {
    font-size: .74rem;
  }

  .cart-item-compact .cart-product-variant {
    font-size: .82rem !important;
  }

  .cart-item-compact .cart-subtotal-row strong {
    font-size: 1rem;
  }
}

.admin-order-summary-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.admin-order-card,
.admin-order-card * {
  min-width: 0;
}

.admin-order-card h3,
.admin-order-customer strong,
.admin-order-item-row strong,
.admin-order-item-row small {
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  body.admin-page.admin-sidebar-open {
    overflow: hidden;
  }

  .admin-mobile-menu-btn {
    display: inline-flex !important;
    cursor: pointer;
    position: relative;
    z-index: 20;
  }

  .admin-sidebar-close {
    display: grid !important;
    cursor: pointer;
  }

  .admin-sidebar {
    background: var(--black) !important;
    color: var(--white) !important;
    box-shadow: 28px 0 80px rgba(0, 0, 0, .28) !important;
  }

  .admin-mobile-backdrop:not([hidden]) {
    display: block !important;
  }
}

@media (min-width: 1181px) {

  .admin-mobile-menu-btn,
  .admin-sidebar-close,
  .admin-mobile-backdrop {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .admin-orders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .admin-order-card {
    padding: 9px !important;
    border-radius: 16px !important;
    gap: 7px !important;
    overflow: hidden;
  }

  .admin-order-card-top {
    gap: 5px !important;
  }

  .admin-order-card h3 {
    font-size: .95rem !important;
    line-height: 1 !important;
  }

  .admin-order-origin,
  .admin-order-status,
  .admin-order-customer small,
  .admin-order-item-row small,
  .admin-helper-mini {
    font-size: .58rem !important;
    line-height: 1.12 !important;
  }

  .admin-order-customer strong,
  .admin-order-item-row strong {
    font-size: .68rem !important;
    line-height: 1.1 !important;
  }

  .admin-order-items {
    gap: 4px !important;
    max-height: 116px;
    overflow: auto;
  }

  .admin-order-item-row {
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .admin-order-item-row em {
    display: none !important;
  }

  .admin-order-summary-compact {
    gap: 5px !important;
  }

  .admin-order-actions {
    gap: 5px !important;
  }

  .admin-order-actions .btn {
    min-height: 28px !important;
    padding: 6px 7px !important;
    font-size: .58rem !important;
    line-height: 1.05 !important;
  }
}

/* =========================================================
   LUHU - Ajuste definitivo de densidad del carrito
   Motivo: los bloques auto del grid se estaban estirando para ocupar
   la altura de la imagen, generando espacios verticales innecesarios.
========================================================= */
.cart-item-compact,
.cart-item-compact * {
  font-family: Inter, system-ui, sans-serif !important;
}

.cart-item-compact {
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 7px 8px !important;
  min-height: 0 !important;
  line-height: 1.08 !important;
}

.cart-item-compact .cart-item-image-wrap,
.cart-item-compact img {
  width: 76px !important;
  height: 76px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 11px !important;
}

.cart-item-compact .cart-item-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-content: start !important;
  align-items: stretch !important;
  gap: 2px !important;
  min-height: 76px !important;
  padding-right: 0 !important;
}

.cart-item-compact .cart-item-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  gap: 6px !important;
  align-items: start !important;
  min-height: 0 !important;
}

.cart-item-compact .cart-product-name {
  font-size: .72rem !important;
  line-height: 1.02 !important;
  font-weight: 900 !important;
  color: var(--gray) !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

.cart-item-compact .cart-item-middle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 6px !important;
  align-items: center !important;
  margin: 0 !important;
  min-height: 0 !important;
}

.cart-item-compact .cart-item-text-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.cart-item-compact .cart-product-variant {
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  font-size: .80rem !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  color: var(--black) !important;
  margin: 0 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cart-item-compact .cart-product-variant .cart-item-color {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cart-item-compact .cart-product-variant .cart-item-size,
.cart-item-compact .cart-product-variant .cart-item-separator {
  font-size: .66rem !important;
  line-height: 1 !important;
  color: var(--gray) !important;
  flex: 0 0 auto !important;
}

.cart-item-compact .cart-product-price {
  font-size: .68rem !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  color: var(--gray) !important;
  margin: 0 !important;
}

.cart-item-compact .cart-qty-control {
  grid-template-columns: 26px 30px 26px !important;
  height: 26px !important;
  min-width: 82px !important;
}

.cart-item-compact .cart-qty-control button {
  height: 26px !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}

.cart-item-compact .cart-qty-control span {
  font-size: .72rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.cart-item-compact .cart-subtotal-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px dashed var(--line) !important;
  padding-top: 3px !important;
  margin-top: 2px !important;
  min-height: 0 !important;
}

.cart-item-compact .cart-subtotal-row span {
  font-size: .66rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: var(--gray) !important;
}

.cart-item-compact .cart-subtotal-row strong {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .96rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  color: var(--black) !important;
}

.cart-item-compact .trash-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  justify-self: end !important;
}

.cart-item-compact .trash-btn svg {
  width: 13px !important;
  height: 13px !important;
}

@media (max-width: 480px) {
  .cart-item-compact {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  .cart-item-compact .cart-item-image-wrap,
  .cart-item-compact img {
    width: 72px !important;
    height: 72px !important;
  }

  .cart-item-compact .cart-item-content {
    min-height: 72px !important;
    gap: 2px !important;
  }

  .cart-item-compact .cart-product-name {
    font-size: .70rem !important;
  }

  .cart-item-compact .cart-product-variant {
    font-size: .78rem !important;
  }

  .cart-item-compact .cart-product-price,
  .cart-item-compact .cart-subtotal-row span {
    font-size: .64rem !important;
  }

  .cart-item-compact .cart-subtotal-row strong {
    font-size: .92rem !important;
  }

  .cart-item-compact .cart-qty-control {
    grid-template-columns: 24px 28px 24px !important;
    height: 24px !important;
    min-width: 76px !important;
  }

  .cart-item-compact .cart-qty-control button {
    height: 24px !important;
  }
}


/* =========================================================
   LUHU - Carrito vertical qty compact fix
========================================================= */
.cart-item-compact,
.cart-item-compact * {
  font-family: Inter, sans-serif !important;
}

.cart-item.cart-item-modern.cart-item-compact {
  display: grid !important;
  grid-template-columns: 72px 34px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  min-height: unset !important;
  height: auto !important;
}

.cart-item-compact .cart-item-image-wrap {
  width: 72px !important;
  height: 72px !important;
  align-self: start !important;
  justify-self: start !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: var(--stone);
}

.cart-item-compact .cart-item-image-wrap img,
.cart-item-compact img {
  width: 72px !important;
  height: 72px !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px !important;
}

.cart-item-compact .cart-qty-control-vertical {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(3, 1fr) !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 72px !important;
  align-self: start !important;
  justify-self: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  overflow: hidden;
  background: #fff;
}

.cart-item-compact .cart-qty-control-vertical button,
.cart-item-compact .cart-qty-control-vertical span {
  width: 100% !important;
  min-width: 0 !important;
  height: 24px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.cart-item-compact .cart-qty-control-vertical button {
  border: 0 !important;
  background: transparent !important;
  color: var(--black);
  font-size: .95rem !important;
  font-weight: 800 !important;
  line-height: 1;
}

.cart-item-compact .cart-qty-control-vertical button:disabled {
  color: #c8c1b6 !important;
  background: #f7f3ee !important;
}

.cart-item-compact .cart-qty-control-vertical span {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--gray);
  font-size: .8rem !important;
  font-weight: 800 !important;
  line-height: 1;
  background: #fff;
}

.cart-item-compact .cart-item-content {
  min-width: 0;
  display: grid !important;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 3px !important;
  padding-right: 0 !important;
}

.cart-item-compact .cart-item-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  align-items: start !important;
  gap: 6px !important;
  margin: 0 !important;
}

.cart-item-compact .cart-product-name {
  min-width: 0;
  color: var(--gray);
  font-size: .78rem !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cart-item-compact .cart-item-text-stack {
  min-width: 0;
  display: grid;
  gap: 2px !important;
  margin: 0 !important;
}

.cart-item-compact .cart-product-variant {
  min-width: 0;
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  color: var(--black);
  font-size: .8rem !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  margin: 0 !important;
}

.cart-item-compact .cart-product-variant .cart-item-color {
  color: var(--black);
  font-weight: 800 !important;
}

.cart-item-compact .cart-product-variant .cart-item-separator,
.cart-item-compact .cart-product-variant .cart-item-size {
  color: var(--gray);
  font-weight: 700 !important;
}

.cart-item-compact .cart-product-price {
  color: var(--gray);
  font-size: .78rem !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.cart-item-compact .cart-subtotal-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: end !important;
  gap: 8px !important;
  border-top: 1px dashed var(--line);
  padding-top: 4px !important;
  margin-top: 2px !important;
}

.cart-item-compact .cart-subtotal-row span {
  color: var(--gray);
  font-size: .76rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.cart-item-compact .cart-subtotal-row strong {
  color: var(--black);
  font-size: .94rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}

.cart-item-compact .trash-btn {
  position: static !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  justify-self: end !important;
  align-self: start !important;
  margin: 0 !important;
}

.cart-item-compact .trash-btn svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 480px) {
  .cart-item.cart-item-modern.cart-item-compact {
    grid-template-columns: 68px 32px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 8px !important;
  }

  .cart-item-compact .cart-item-image-wrap,
  .cart-item-compact .cart-item-image-wrap img,
  .cart-item-compact img {
    width: 68px !important;
    height: 68px !important;
  }

  .cart-item-compact .cart-qty-control-vertical {
    width: 32px !important;
    min-width: 32px !important;
    height: 68px !important;
  }

  .cart-item-compact .cart-qty-control-vertical button,
  .cart-item-compact .cart-qty-control-vertical span {
    height: 22.66px !important;
  }

  .cart-item-compact .cart-product-name {
    font-size: .74rem !important;
  }

  .cart-item-compact .cart-product-variant,
  .cart-item-compact .cart-product-price,
  .cart-item-compact .cart-subtotal-row span,
  .cart-item-compact .cart-subtotal-row strong {
    font-size: .75rem !important;
  }

  .cart-item-compact .cart-subtotal-row strong {
    font-size: .92rem !important;
  }
}

/* =========================================================
   LUHU - Fix seguro: control vertical ocupa toda la tarjeta
   Objetivo: no tocar la logica JS; solo normalizar layout del carrito.
========================================================= */
.cart-item.cart-item-modern.cart-item-compact {
  display: grid !important;
  grid-template-columns: 68px 32px minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 7px !important;
  padding: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.cart-item-compact .cart-item-image-wrap {
  width: 68px !important;
  height: 68px !important;
  align-self: start !important;
  justify-self: start !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--stone) !important;
}

.cart-item-compact .cart-item-image-wrap img,
.cart-item-compact img {
  width: 68px !important;
  height: 68px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block !important;
}

.cart-item-compact .cart-qty-control.cart-qty-control-vertical {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: minmax(24px, 1fr) auto minmax(24px, 1fr) !important;
  width: 32px !important;
  min-width: 32px !important;
  height: auto !important;
  min-height: 100% !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.cart-item-compact .cart-qty-control.cart-qty-control-vertical button,
.cart-item-compact .cart-qty-control.cart-qty-control-vertical span {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 0 !important;
  font-family: Inter, system-ui, sans-serif !important;
  line-height: 1 !important;
}

.cart-item-compact .cart-qty-control.cart-qty-control-vertical button {
  border: 0 !important;
  background: transparent !important;
  color: var(--black) !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
}

.cart-item-compact .cart-qty-control.cart-qty-control-vertical button:disabled {
  color: #c8c1b6 !important;
  background: #f7f3ee !important;
  opacity: 1 !important;
}

.cart-item-compact .cart-qty-control.cart-qty-control-vertical span {
  min-height: 24px !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--gray) !important;
  background: #fff !important;
  font-size: .76rem !important;
  font-weight: 900 !important;
}

.cart-item-compact .cart-item-content {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  gap: 3px !important;
  padding-right: 0 !important;
  align-self: stretch !important;
}

.cart-item-compact .cart-item-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  min-height: 28px !important;
}

.cart-item-compact .cart-product-name {
  font-family: Inter, system-ui, sans-serif !important;
  color: var(--gray) !important;
  font-size: .74rem !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  margin: 0 !important;
  min-width: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.cart-item-compact .cart-item-text-stack {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
  margin: 0 !important;
}

.cart-item-compact .cart-product-variant {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 3px !important;
  color: var(--black) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .8rem !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.cart-item-compact .cart-product-variant .cart-item-separator,
.cart-item-compact .cart-product-variant .cart-item-size {
  color: var(--gray) !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
}

.cart-item-compact .cart-product-price {
  color: var(--gray) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .7rem !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.cart-item-compact .cart-subtotal-row {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  border-top: 1px dashed var(--line) !important;
  padding-top: 4px !important;
  margin-top: 2px !important;
}

.cart-item-compact .cart-subtotal-row span,
.cart-item-compact .cart-subtotal-row strong {
  font-family: Inter, system-ui, sans-serif !important;
}

.cart-item-compact .cart-subtotal-row span {
  color: var(--gray) !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
}

.cart-item-compact .cart-subtotal-row strong {
  color: var(--black) !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.cart-item-compact .trash-btn {
  position: static !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 0 !important;
}

@media (min-width: 481px) {
  .cart-item.cart-item-modern.cart-item-compact {
    grid-template-columns: 72px 34px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .cart-item-compact .cart-item-image-wrap,
  .cart-item-compact .cart-item-image-wrap img,
  .cart-item-compact img {
    width: 72px !important;
    height: 72px !important;
  }

  .cart-item-compact .cart-qty-control.cart-qty-control-vertical {
    width: 34px !important;
    min-width: 34px !important;
  }
}


/* =========================================================
   LUHU - Carrito 4 columnas: imagen | cantidad | texto | tacho
   La tercera columna usa minmax(0, 1fr) para ocupar el maximo espacio disponible.
========================================================= */
.cart-item.cart-item-modern.cart-item-compact {
  display: grid !important;
  grid-template-columns: 68px 32px minmax(0, 1fr) 36px !important;
  align-items: stretch !important;
  column-gap: 7px !important;
  row-gap: 0 !important;
  padding: 8px !important;
  min-height: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.cart-item-compact .cart-item-image-wrap {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.cart-item-compact .cart-qty-control.cart-qty-control-vertical {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  height: auto !important;
  min-height: 100% !important;
}

.cart-item-compact .cart-item-content {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-right: 0 !important;
  align-self: stretch !important;
  align-content: center !important;
}

.cart-item-compact .cart-item-top {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
  align-items: center !important;
}

.cart-item-compact .cart-product-name,
.cart-item-compact .cart-item-text-stack,
.cart-item-compact .cart-product-variant,
.cart-item-compact .cart-product-price,
.cart-item-compact .cart-subtotal-row {
  min-width: 0 !important;
  max-width: 100% !important;
}

.cart-item-compact .cart-remove-zone {
  grid-column: 4 !important;
  grid-row: 1 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  border-left: 1px dashed var(--line) !important;
  padding-left: 5px !important;
}

.cart-item-compact .cart-remove-zone .trash-btn {
  position: static !important;
  inset: auto !important;
  width: 27px !important;
  height: 27px !important;
  min-width: 27px !important;
  min-height: 27px !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.cart-item-compact .cart-remove-zone .trash-btn svg {
  width: 13px !important;
  height: 13px !important;
}

@media (min-width: 481px) {
  .cart-item.cart-item-modern.cart-item-compact {
    grid-template-columns: 72px 34px minmax(0, 1fr) 38px !important;
    column-gap: 8px !important;
    padding: 8px 10px !important;
  }

  .cart-item-compact .cart-remove-zone {
    padding-left: 6px !important;
  }

  .cart-item-compact .cart-remove-zone .trash-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

@media (max-width: 360px) {
  .cart-item.cart-item-modern.cart-item-compact {
    grid-template-columns: 62px 30px minmax(0, 1fr) 34px !important;
    column-gap: 6px !important;
    padding: 7px !important;
  }

  .cart-item-compact .cart-item-image-wrap,
  .cart-item-compact .cart-item-image-wrap img,
  .cart-item-compact img {
    width: 62px !important;
    height: 62px !important;
  }

  .cart-item-compact .cart-qty-control.cart-qty-control-vertical {
    width: 30px !important;
    min-width: 30px !important;
  }

  .cart-item-compact .cart-remove-zone {
    padding-left: 4px !important;
  }

  .cart-item-compact .cart-remove-zone .trash-btn {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }
}

/* =========================================================
   LUHU - Fix columna de texto carrito 4 columnas
   Motivo: la columna 3 era flexible, pero el contenido interno
   no se estiraba visualmente hasta la linea del tacho.
========================================================= */
.cart-items .cart-item.cart-item-modern.cart-item-compact {
  grid-template-columns: 68px 32px minmax(0, 1fr) 36px !important;
  align-items: stretch !important;
  column-gap: 7px !important;
}

.cart-items .cart-item-compact .cart-item-content,
.cart-items .cart-item-compact .cart-item-info,
.cart-items .cart-item-compact .cart-item-text-stack,
.cart-items .cart-item-compact .cart-item-top,
.cart-items .cart-item-compact .cart-subtotal-row {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  box-sizing: border-box !important;
}

.cart-items .cart-item-compact .cart-item-content,
.cart-items .cart-item-compact .cart-item-info {
  grid-column: 3 !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  gap: 3px !important;
  padding-right: 0 !important;
}

.cart-items .cart-item-compact .cart-item-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
}

.cart-items .cart-item-compact .cart-product-name,
.cart-items .cart-item-compact .cart-product-variant,
.cart-items .cart-item-compact .cart-product-price {
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
}

.cart-items .cart-item-compact .cart-subtotal-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  justify-content: stretch !important;
  justify-items: stretch !important;
  align-items: center !important;
  column-gap: 10px !important;
}

.cart-items .cart-item-compact .cart-subtotal-row span {
  justify-self: start !important;
}

.cart-items .cart-item-compact .cart-subtotal-row strong {
  justify-self: end !important;
  text-align: right !important;
}

.cart-items .cart-item-compact .cart-remove-zone {
  grid-column: 4 !important;
  border-left: 1px dashed var(--line) !important;
  padding-left: 5px !important;
}

@media (min-width: 481px) {
  .cart-items .cart-item.cart-item-modern.cart-item-compact {
    grid-template-columns: 72px 34px minmax(0, 1fr) 38px !important;
    column-gap: 8px !important;
  }
}

@media (max-width: 360px) {
  .cart-items .cart-item.cart-item-modern.cart-item-compact {
    grid-template-columns: 62px 30px minmax(0, 1fr) 34px !important;
    column-gap: 6px !important;
  }
}

/* =========================================================
   LUHU - Centrado de cajas superiores del carrito
========================================================= */
.cart-header-stats .cart-top-box {
  text-align: center !important;
  justify-items: center !important;
  align-content: center !important;
}

.cart-header-stats .cart-top-box span,
.cart-header-stats .cart-top-box strong {
  width: 100% !important;
  text-align: center !important;
  justify-self: center !important;
}


/* =========================================================
   LUHU - Destaque de unidades disponibles en tarjetas
========================================================= */
.card-stock-badge {
  gap: 4px !important;
  align-items: baseline !important;
  white-space: nowrap !important;
}

.card-stock-badge .stock-badge-label {
  font-weight: 800;
}

.card-stock-badge .stock-badge-qty {
  color: inherit;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.12em;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 760px) {
  .card-stock-badge .stock-badge-qty {
    font-size: 1.10em;
  }
}

/* =========================================================
   LUHU - Cambio controlado de pedidos enviados/pagados
========================================================= */
.admin-change-btn {
  border: 1px solid rgba(201, 166, 107, .55) !important;
  background: #fff8ec !important;
  color: #715025 !important;
}

.admin-change-summary {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed rgba(201, 166, 107, .72);
  border-radius: 14px;
  background: #fffaf2;
}

.admin-change-summary>strong {
  color: var(--black);
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.admin-change-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-change-money span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.admin-change-money small,
.admin-change-stock-grid small {
  color: var(--gray);
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.admin-change-money b {
  color: var(--black);
  font-size: .82rem;
  line-height: 1.15;
}

.admin-change-money .is-charge b {
  color: #9a5b00;
}

.admin-change-money .is-credit b {
  color: #2b6b2b;
}

.admin-change-stock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-change-stock-grid>div {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
}

.admin-change-stock-grid p {
  color: var(--gray);
  font-size: .75rem;
  line-height: 1.25;
  font-weight: 800;
}

@media (max-width: 760px) {

  .admin-change-money,
  .admin-change-stock-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   LUHU Admin - Modal de pedidos con pestañas
========================================================= */
.admin-order-modal-card {
  width: min(1180px, calc(100vw - 40px));
  height: min(92vh, 920px);
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: var(--soft);
}

.admin-order-modal-header {
  position: relative;
  padding: 24px 74px 18px 26px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.admin-order-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.admin-order-title-row h2 {
  margin: 0 0 6px;
}

.admin-order-title-row p {
  margin: 0;
}

.admin-order-modal-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #f7efe1;
  color: #694b18;
}

.admin-order-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 26px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.admin-order-tab {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
  color: var(--gray);
  font-weight: 900;
}

.admin-order-tab.active {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

.admin-order-tab span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(201, 166, 107, .24);
  color: inherit;
}

.admin-order-modal-scroll {
  min-height: 0;
  overflow: auto;
  padding: 22px 26px 28px;
}

.admin-order-tab-panel {
  display: none;
}

.admin-order-tab-panel.active {
  display: block;
}

.admin-customer-layout {
  display: grid;
  gap: 18px;
  max-width: 940px;
  margin: 0 auto;
}

.admin-section-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.admin-section-heading>div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-section-heading>div>span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-weight: 900;
  font-size: .75rem;
}

.admin-section-heading h2 {
  margin: 0;
}

.admin-section-heading p {
  margin: 0;
  color: var(--gray);
}

.admin-section-heading-row {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.admin-section-heading-row p {
  text-align: right;
}

.admin-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-form-wide {
  grid-column: 1/-1;
}

.admin-internal-notes textarea,
#orderInternalNotes {
  width: 100%;
  resize: vertical;
  min-height: 120px;
}

.admin-order-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr);
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}

.admin-order-side-column {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 0;
}

.admin-order-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 26px;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px rgba(16, 16, 15, .07);
}

.admin-order-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-save-state {
  color: var(--gray);
  font-size: .82rem;
  font-weight: 900;
}

.admin-save-state.is-dirty {
  color: #9a6700;
}

.admin-save-state.is-saved {
  color: #2b6b2b;
}

.admin-order-modal-card .admin-modal-close {
  top: 18px;
  right: 22px;
}

.admin-order-modal-card .admin-card {
  margin: 0;
}

.admin-order-modal-card .order-builder-card {
  min-height: 100%;
}

.admin-order-modal-card .order-draft-item {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

@media (max-width: 900px) {
  .admin-order-detail-layout {
    grid-template-columns: 1fr;
  }

  .admin-order-side-column {
    position: static;
  }
}

@media (max-width: 760px) {
  .admin-modal {
    padding: 0;
  }

  .admin-order-modal-card {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .admin-order-modal-header {
    padding: 18px 58px 14px 16px;
  }

  .admin-order-title-row {
    display: block;
  }

  .admin-order-modal-status {
    display: inline-flex;
    margin-top: 10px;
  }

  .admin-order-tabs {
    padding: 8px 12px;
    gap: 6px;
  }

  .admin-order-tab {
    min-height: 44px;
    padding: 8px;
    font-size: .78rem;
  }

  .admin-order-modal-scroll {
    padding: 14px 12px 20px;
  }

  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-form-wide {
    grid-column: auto;
  }

  .admin-section-heading-row {
    grid-template-columns: 1fr;
  }

  .admin-section-heading-row p {
    text-align: left;
  }

  .admin-product-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-product-picker .btn {
    grid-column: 1/-1;
    width: 100%;
  }

  .admin-order-modal-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    align-items: stretch;
  }

  .admin-save-state {
    display: none;
  }

  .admin-order-footer-actions {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .admin-order-footer-actions #startOrderChangeBtn {
    grid-column: 1/-1;
  }

  .admin-order-footer-actions #savePendingOrderBtn {
    min-height: 48px;
  }

  .admin-order-modal-card .admin-modal-close {
    top: 12px;
    right: 12px;
  }
}


/* =========================================================
   LUHU - Mejoras UX julio 2026
========================================================= */
.mega-column h3 .mega-category-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--accent);
  font-family: Syne, sans-serif;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mega-column h3 .mega-category-link::before {
  content: none !important;
}

.mega-column h3 .mega-category-link span {
  transition: transform .18s ease;
}

.mega-column h3 .mega-category-link:hover {
  background: rgba(201, 166, 107, .14);
  color: var(--white);
  transform: none;
}

.mega-column h3 .mega-category-link:hover span {
  transform: translateX(3px);
}

.buy-intro-card {
  min-height: 100%;
  display: grid;
  align-content: center;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 5vw, 58px);
  border: 1px solid rgba(201, 166, 107, .22);
}

.buy-grid .buy-intro-card>p:last-child {
  color: rgba(255, 255, 255, .72);
  margin-top: 18px;
}

.quick-product-card.cart-add-success {
  animation: luhuProductAdded 800ms ease;
}

@keyframes luhuProductAdded {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }

  24% {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .82), 0 0 26px rgba(34, 197, 94, .42);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@media (max-width: 760px) {
  .mega-column h3 .mega-category-link {
    width: 100%;
    min-height: 42px;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(201, 166, 107, .10);
  }

  .rule-card .rule-main-title {
    font-size: clamp(2.1rem, 9.5vw, 3.05rem);
    line-height: .94;
  }

  .rule-dark {
    padding: 26px 24px;
  }

  .rule-dark p:last-child {
    margin-top: 14px;
    font-size: .92rem;
  }

  .buy-intro-card {
    padding: 28px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quick-product-card.cart-add-success {
    animation: none;
    outline: 3px solid rgba(34, 197, 94, .72);
    outline-offset: 2px;
  }

  .cart-pulse {
    animation: none;
  }
}

/* =========================================================
   LUHU - Corrección de títulos de categoría del megamenú PC
   Mantiene intactos móvil, enlaces de modelos y funcionalidad.
========================================================= */
@media (min-width: 761px) {
  .mega-menu .mega-column h3 {
    margin: 0 0 4px;
    line-height: 1;
  }

  .mega-menu .mega-column h3>.mega-category-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 3px 0;
    color: var(--accent);
    background: transparent;
    border-radius: 0;
    font-family: Inter, system-ui, sans-serif;
    font-size: .82rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .mega-menu .mega-column h3>.mega-category-link::before {
    content: none;
    display: none;
  }

  .mega-menu .mega-column h3>.mega-category-link span {
    flex: 0 0 auto;
    font-size: .78rem;
    line-height: 1;
    transition: transform .18s ease;
  }

  .mega-menu .mega-column h3>.mega-category-link:hover {
    color: var(--white);
    background: transparent;
    transform: none;
  }

  .mega-menu .mega-column h3>.mega-category-link:hover span {
    transform: translateX(2px);
  }
}

/* =========================================================
   LUHU - Fuente Inter para categorías del megamenú móvil
   Afecta solo Pantalones, Poleras y Casacas en móvil.
========================================================= */
@media (max-width: 760px) {
  .mega-menu .mega-column h3>.mega-category-link {
    font-family: Inter, system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: .06em;
  }
}

/* =========================================================
   LUHU - Carrito con cuerpo desplazable y pie fijo
========================================================= */
html,
body {
  overscroll-behavior-y: auto;
  touch-action: pan-y;
}

.cart-panel {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cart-header {
  flex: 0 0 auto;
}

.cart-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 0 2px 12px;
}

.cart-scroll-area .cart-items {
  flex: none;
  overflow: visible;
}

.cart-fixed-footer {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  margin: 0 -14px -14px;
  padding: 10px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px rgba(16, 16, 15, .08);
}

.cart-fixed-total {
  padding: 8px 10px;
}

.cart-fixed-total .cart-total-final {
  margin: 0;
  padding: 0;
  border-top: 0;
}

.cart-fixed-total .cart-total-final small {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cart-fixed-total .cart-total-final strong {
  font-family: Syne, sans-serif;
  font-size: 1.08rem;
}

.cart-footer-actions {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.cart-back-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--black);
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.cart-back-btn:hover {
  background: var(--stone);
  border-color: var(--sand);
  transform: translateX(-2px);
}

.cart-back-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-footer-actions .create-order-btn {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  white-space: normal;
  line-height: 1.15;
}

@media (max-width: 760px) {
  .cart-panel {
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
  }

  .cart-scroll-area {
    padding-bottom: 14px;
  }

  .cart-fixed-footer {
    margin: 0 -12px -12px;
    padding: 9px 12px calc(10px + env(safe-area-inset-bottom));
  }

  .cart-fixed-total {
    margin-bottom: 7px;
  }

  .cart-footer-actions {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .cart-back-btn {
    width: 46px;
    min-width: 46px;
    height: 46px;
  }

  .cart-footer-actions .create-order-btn {
    min-height: 46px;
    font-size: .82rem;
  }
}

/* =========================================================
   LUHU - Footer final del carrito: cliente, resumen y acciones
========================================================= */

/* Todos los importes monetarios usan Inter para mayor legibilidad. */
.product-price,
.product-price strong,
.quick-price-box strong,
.price-preview strong,
.cart-summary strong,
.cart-total-final strong,
.stock-badge strong,
.modal-stock-badge strong,
.admin-summary-box strong {
  font-family: Inter, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

.cart-fixed-footer {
  display: grid;
  gap: 8px;
}

.cart-fixed-customer {
  margin: 0;
  padding: 8px 10px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 13px;
}

.cart-fixed-customer .cart-customer-head {
  margin-bottom: 4px;
}

.cart-fixed-customer .cart-customer-head strong {
  display: block;
  color: var(--black);
  font-size: .72rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.cart-fixed-customer .customer-form {
  border-top: 0;
  padding: 0;
  gap: 0;
}

.cart-fixed-customer .customer-form label {
  gap: 0;
  font-size: 0;
}

.cart-fixed-customer .customer-form input {
  min-height: 36px;
  padding: 7px 10px;
  background: var(--white);
  border-radius: 9px;
  font-size: .82rem;
}

.cart-fixed-total {
  margin: 0;
  padding: 7px 10px;
  gap: 3px;
  background: var(--soft);
}

.cart-fixed-total span {
  min-height: 20px;
}

.cart-fixed-total small,
.cart-fixed-total strong {
  font-family: Inter, system-ui, sans-serif;
}

.cart-fixed-total small {
  font-size: .71rem;
}

.cart-fixed-total strong {
  font-size: .82rem;
}

.cart-fixed-total .cart-basic-extra strong {
  color: #8a5d17;
}

.cart-fixed-total .cart-total-final {
  margin-top: 3px;
  padding-top: 6px;
}

.cart-fixed-total .cart-total-final small,
.cart-fixed-total .cart-total-final strong {
  font-size: .94rem;
}

.cart-footer-actions {
  grid-template-columns: minmax(0, 1fr) 46px;
}

.cart-footer-actions .create-order-btn {
  min-height: 46px;
  border-radius: 12px;
  font-size: .88rem;
  white-space: nowrap;
}

.cart-back-btn {
  grid-column: 2;
  width: 46px;
  min-width: 46px;
  height: 46px;
}

@media (max-width: 760px) {
  .cart-fixed-footer {
    gap: 7px;
  }

  .cart-fixed-customer {
    padding: 7px 9px;
  }

  .cart-fixed-customer .customer-form input {
    min-height: 35px;
  }

  .cart-footer-actions {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .cart-footer-actions .create-order-btn {
    min-height: 44px;
    font-size: .82rem;
  }

  .cart-back-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
}

/* =========================================================
   LUHU - Corrección definitiva del botón Seguir comprando
   Neutraliza una regla antigua que lo ocultaba con display:none.
========================================================= */
.cart-footer-actions #continueShopping.cart-back-btn {
  display: inline-grid !important;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  color: var(--black);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  visibility: visible !important;
  opacity: 1 !important;
}

.cart-footer-actions #continueShopping.cart-back-btn span {
  display: block;
  transform: translateY(-1px);
  line-height: 1;
}

.cart-footer-actions #continueShopping.cart-back-btn:hover {
  background: var(--stone);
  border-color: var(--sand);
  transform: translateX(-2px);
}

.cart-footer-actions #continueShopping.cart-back-btn:focus-visible {
  outline: 3px solid rgba(201, 166, 107, .42);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .cart-footer-actions #continueShopping.cart-back-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

/* =========================================================
   LUHU - Confirmacion de pedido eliminado a pantalla completa
========================================================= */
.admin-delete-feedback {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 16, 15, .76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.admin-delete-feedback.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.admin-delete-feedback-card {
  width: min(390px, 100%);
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 30px 26px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: var(--white);
  color: var(--black);
  text-align: center;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .30);
  transform: scale(.96);
  transition: transform .18s ease;
}

.admin-delete-feedback.show .admin-delete-feedback-card {
  transform: scale(1);
}

.admin-delete-feedback-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf7e9;
  color: #2b6b2b;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.admin-delete-feedback-card strong {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
}

.admin-delete-feedback-card p {
  color: var(--gray);
  font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {

  .admin-delete-feedback,
  .admin-delete-feedback-card {
    transition: none;
  }
}


/* LUHU ADMIN V2 */
.admin-page,
.admin-page button,
.admin-page input,
.admin-page select,
.admin-page textarea,
.admin-page strong,
.admin-page b,
.admin-page em {
  font-family: Inter, system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums
}

.admin-order-modal-v2 {
  width: min(1120px, calc(100% - 24px));
  height: min(94vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.admin-order-modal-header {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #fff
}

.admin-order-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff
}

.admin-order-modal-scroll {
  flex: 1;
  overflow: auto
}

.admin-modal-head-actions {
  display: flex;
  align-items: center;
  gap: 10px
}

.admin-order-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px
}

.admin-order-modal-footer .btn {
  min-width: 180px
}

.admin-order-modal-footer .btn:disabled {
  opacity: .38;
  cursor: not-allowed;
  transform: none
}

.admin-customer-layout-v2 {
  grid-template-columns: 1fr;
  max-width: 900px;
  margin: auto
}

.admin-customer-layout-v2 .admin-section-heading p {
  display: none
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.admin-form-wide {
  grid-column: 1/-1
}

.admin-courier-message {
  display: grid;
  gap: 10px
}

.admin-summary-layout-v2 {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 18px
}

.admin-final-adjustment {
  display: grid;
  gap: 8px;
  margin-top: 18px
}

.admin-final-adjustment>div {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden
}

.admin-final-adjustment span {
  padding: 10px 12px;
  background: var(--soft)
}

.admin-final-adjustment input {
  border: 0;
  flex: 1;
  padding: 10px
}

.order-items-cart {
  display: grid;
  gap: 12px
}

.order-cart-item {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: #fff
}

.order-cart-item img {
  width: 86px;
  height: 102px;
  object-fit: cover;
  border-radius: 12px
}

.order-cart-info {
  display: grid;
  gap: 7px
}

.order-cart-info span {
  color: var(--gray);
  font-size: .84rem
}

.order-cart-side {
  display: grid;
  justify-items: end;
  gap: 12px
}

.draft-remove {
  border: 0;
  background: #fff1f0;
  color: #b42318;
  width: 36px;
  height: 36px;
  border-radius: 50%
}

.admin-add-product-launch {
  width: 100%;
  margin-top: 16px;
  border: 2px dashed #c9a66b;
  background: #fffaf2;
  border-radius: 18px;
  padding: 18px;
  font-weight: 900
}

.admin-add-product-launch span {
  font-size: 1.5rem;
  margin-right: 6px
}

.admin-empty-order {
  display: grid;
  place-items: center;
  min-height: 180px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  color: var(--gray)
}

.admin-product-selector-modal {
  z-index: 12000
}

.admin-product-selector-card {
  width: min(560px, calc(100% - 24px));
  background: #fff;
  border-radius: 24px;
  overflow: hidden
}

.admin-product-selector-card header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid var(--line)
}

.admin-product-selector-body {
  padding: 20px;
  display: grid;
  gap: 14px
}

.admin-product-selector-body label {
  display: grid;
  gap: 6px
}

.admin-product-selector-body select {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 12px
}

.admin-product-stock {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 12px;
  background: var(--soft)
}

.admin-product-stock strong {
  font-size: 1rem
}

.admin-product-stock small {
  font-size: .72rem;
  color: var(--gray)
}

.admin-selector-qty {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.admin-global-feedback,
.admin-global-confirm {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  background: rgba(16, 16, 15, .38);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: .16s
}

.admin-global-feedback.show,
.admin-global-confirm.show {
  opacity: 1
}

.admin-global-feedback-card,
.admin-global-confirm-card {
  background: #fff;
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
  text-align: center
}

.admin-global-feedback-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 260px
}

.admin-global-feedback-card span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf7e9;
  color: #2b6b2b;
  font-size: 1.5rem;
  font-weight: 900
}

.admin-global-feedback.danger .admin-global-feedback-card span {
  background: #fff1f0;
  color: #b42318
}

.admin-global-confirm-card {
  width: min(430px, calc(100% - 28px));
  display: grid;
  gap: 14px
}

.admin-global-confirm-card>div {
  display: flex;
  justify-content: flex-end;
  gap: 10px
}

.admin-order-actions-v2 {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch
}

.admin-order-primary {
  width: 100%
}

.admin-order-more-wrap {
  position: relative
}

.admin-order-more {
  width: 46px;
  height: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  font-size: 1.5rem
}

.admin-order-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .16)
}

.admin-order-menu button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px;
  border-radius: 10px
}

.admin-order-menu button:hover {
  background: var(--soft)
}

.admin-order-menu .danger {
  color: #b42318
}

@media(max-width:760px) {
  .admin-header {
    position: sticky !important;
    top: 0;
    z-index: 50;
    background: #fff;
    padding: 12px 14px !important
  }

  .admin-header>div>span,
  .admin-header>div>p,
  .admin-header-actions #adminRefreshBtn {
    display: none !important
  }

  .admin-header h1 {
    font-size: 1.35rem !important
  }

  .admin-content {
    padding-top: 0 !important
  }

  .admin-order-modal-v2 {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0
  }

  .admin-order-title-row {
    align-items: center
  }

  .admin-order-modal-header {
    padding: 12px !important
  }

  .admin-order-modal-header p {
    display: none
  }

  .admin-modal-head-actions .admin-order-modal-status {
    display: none
  }

  .admin-change-btn {
    font-size: .72rem;
    padding: 8px 10px
  }

  .admin-order-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(3, minmax(130px, 1fr)) !important
  }

  .admin-order-modal-footer {
    padding: 10px 12px !important
  }

  .admin-order-modal-footer .btn {
    min-width: 150px
  }

  .admin-save-state {
    font-size: .7rem
  }

  .admin-form-grid,
  .admin-summary-layout-v2 {
    grid-template-columns: 1fr
  }

  .order-cart-item {
    grid-template-columns: 68px 1fr auto;
    padding: 9px;
    gap: 9px
  }

  .order-cart-item img {
    width: 68px;
    height: 84px
  }

  .order-cart-side strong {
    font-size: .8rem
  }

  .admin-global-confirm-card>div {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .admin-order-menu {
    position: fixed;
    right: 14px;
    bottom: 90px
  }

  .admin-product-selector-card {
    width: 100%;
    height: 100dvh;
    border-radius: 0
  }

  .admin-product-selector-body {
    overflow: auto
  }
}

/* =========================================================
   LUHU ADMIN - Correccion de campos de stock en PC
   Evita que valores de 2 o 3 cifras queden cortados.
========================================================= */
@media (min-width: 761px) {
  .admin-page .inventory-size-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(58px, 1fr));
    gap: 8px;
  }

  .admin-page .inventory-size-cell {
    width: 100%;
    min-width: 0;
    padding: 6px;
    overflow: hidden;
  }

  .admin-page .inventory-size-cell input[type="number"] {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 36px;
    padding: 6px 4px;
    border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    font-family: Inter, system-ui, sans-serif;
    font-size: .9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    appearance: textfield;
    -moz-appearance: textfield;
  }

  .admin-page .inventory-size-cell input[type="number"]::-webkit-inner-spin-button,
  .admin-page .inventory-size-cell input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .admin-page .inventory-size-grid {
    grid-template-columns: repeat(3, minmax(62px, 1fr));
  }
}

/* =========================================================
   LUHU ADMIN - Footer compacto de tarjetas de pedidos
   Ajuste final: reduce la altura de la acción principal y
   evita que el botón de tres puntos se estire.
========================================================= */

.admin-page .admin-order-actions-v2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 40px !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 2px !important;
}

.admin-page .admin-order-primary {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.admin-page .admin-order-more-wrap {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
}

.admin-page .admin-order-more {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .82) !important;
  color: var(--black) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.12rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.admin-page .admin-order-primary:hover,
.admin-page .admin-order-more:hover {
  transform: none !important;
}

@media (max-width: 760px) {
  .admin-page .admin-order-actions-v2 {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 5px !important;
  }

  .admin-page .admin-order-primary {
    min-height: 36px !important;
    height: 36px !important;
    padding: 5px 8px !important;
    font-size: .64rem !important;
  }

  .admin-page .admin-order-more-wrap,
  .admin-page .admin-order-more {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .admin-page .admin-order-more {
    border-radius: 11px !important;
    font-size: 1rem !important;
  }
}


/* =========================================================
   LUHU - Ajuste final responsive de tarjetas de color
   Mantiene 2 tarjetas por fila en movil y protege tallas,
   precio, cantidad y boton Agregar en anchos estrechos.
========================================================= */

/* Cada tarjeta responde a su ancho real. */
.catalog-grid-colors .color-product-card {
  container-type: inline-size;
  container-name: product-card;
}

/* Estructura vertical estable. */
.catalog-grid-colors .product-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.catalog-grid-colors .color-card-heading {
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  min-height: 46px;
  margin-bottom: 10px;
}

.catalog-grid-colors .color-card-heading>div {
  min-width: 0;
}

.catalog-grid-colors .color-card-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-grid-colors .color-card-model {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.12;
  min-height: 2.24em;
}

/* Tallas: 4 columnas fijas en todos los moviles. */
.catalog-grid-colors .quick-size-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  margin: 12px 0 14px;
  align-content: start;
}

.catalog-grid-colors .quick-size-chip,
.catalog-grid-colors .size-chip {
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 0 3px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  font-size: .62rem;
  line-height: 1;
  white-space: nowrap;
}

.catalog-grid-colors .quick-size-chip.out-of-stock,
.catalog-grid-colors .quick-size-chip:disabled,
.catalog-grid-colors .size-chip.out-of-stock,
.catalog-grid-colors .size-chip:disabled {
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
}

/* Footer estable y alineado. */
.catalog-grid-colors .quick-card-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: grid;
  gap: 8px;
}

.catalog-grid-colors .quick-price-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
}

.catalog-grid-colors .quick-price-box strong {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.catalog-grid-colors .quick-buy-row {
  display: grid;
  grid-template-columns: minmax(82px, 1fr) minmax(76px, auto);
  gap: 7px;
  align-items: stretch;
}

.catalog-grid-colors .quick-buy-row .quick-qty-control {
  display: grid;
  grid-template-columns: 30px minmax(22px, 1fr) 30px;
  min-width: 82px;
  min-height: 36px;
  overflow: hidden;
}

.catalog-grid-colors .quick-buy-row .quick-qty-control button,
.catalog-grid-colors .quick-buy-row .quick-qty-control span {
  min-width: 0;
}

.catalog-grid-colors .quick-buy-row .quick-add-btn {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  white-space: nowrap;
}

.card-stock-badge {
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* PC: mas columnas de tallas y conserva icono + texto. */
@media (min-width: 761px) {
  .catalog-grid-colors .quick-size-preview {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* Movil: dos tarjetas por fila, 4 columnas de tallas y solo texto Agregar. */
@media (max-width: 760px) {
  .products-grid.catalog-grid-colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .catalog-grid-colors .quick-add-btn .cart-icon,
  .catalog-grid-colors .quick-add-btn .btn-icon {
    display: none;
  }

  .catalog-grid-colors .quick-buy-row .quick-add-btn {
    gap: 0;
    min-width: 0;
    min-height: 36px;
    padding: 7px 6px;
    font-size: .64rem;
    white-space: nowrap;
  }
}

/* Tarjetas estrechas: protege el - 1 + y conserva Agregar. */
@container product-card (max-width: 175px) {
  .catalog-grid-colors .color-card-heading {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px;
  }

  .catalog-grid-colors .color-swatch-large {
    width: 38px;
    height: 29px;
    border-radius: 10px;
  }

  .catalog-grid-colors .color-card-title {
    font-size: .9rem;
  }

  .catalog-grid-colors .quick-price-box strong {
    font-size: 1.05rem;
  }

  .catalog-grid-colors .quick-price-box span {
    font-size: .58rem;
  }

  .catalog-grid-colors .quick-buy-row {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 5px;
  }

  .catalog-grid-colors .quick-buy-row .quick-qty-control {
    width: 78px;
    min-width: 78px;
    grid-template-columns: repeat(3, 26px);
  }

  .catalog-grid-colors .quick-buy-row .quick-qty-control button,
  .catalog-grid-colors .quick-buy-row .quick-qty-control span {
    width: 26px;
    min-width: 26px;
  }

  .catalog-grid-colors .quick-buy-row .quick-add-btn {
    padding-inline: 4px;
    font-size: .61rem;
  }

  .catalog-grid-colors .quick-card-footer {
    padding-top: 9px;
    gap: 7px;
  }
}

/* Tarjetas muy estrechas: conserva siempre 4 columnas de tallas. */
@container product-card (max-width: 165px) {
  .catalog-grid-colors .quick-size-preview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .catalog-grid-colors .quick-size-chip,
  .catalog-grid-colors .size-chip {
    height: 27px;
    min-height: 27px;
    padding-inline: 2px;
    font-size: .58rem;
  }

  .catalog-grid-colors .quick-size-chip.out-of-stock,
  .catalog-grid-colors .quick-size-chip:disabled,
  .catalog-grid-colors .size-chip.out-of-stock,
  .catalog-grid-colors .size-chip:disabled {
    height: 27px;
    min-height: 27px;
  }
}

/* =========================================================
   LUHU - Refinamiento visual movil de tarjetas de color
   Mantiene la muestra de color, compacta el encabezado y
   vuelve mas geometricos los controles de compra rapida.
========================================================= */
@media (max-width: 760px) {
  .catalog-grid-colors .color-card-heading {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    min-height: 34px;
    margin-bottom: 5px;
  }

  .catalog-grid-colors .color-swatch-large {
    width: 38px;
    height: 29px;
  }

  .catalog-grid-colors .color-card-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .88rem;
    line-height: 1;
    margin-bottom: 1px;
  }

  .catalog-grid-colors .color-card-model {
    min-height: 0;
    line-height: 1.05;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .catalog-grid-colors .quick-size-preview {
    margin: 6px 0 12px;
  }

  .catalog-grid-colors .quick-price-box span {
    line-height: 1.1;
  }

  .catalog-grid-colors .quick-qty-control,
  .catalog-grid-colors .quick-add-btn {
    min-height: 36px;
    border-radius: 11px;
  }

  .catalog-grid-colors .quick-qty-control span {
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
  }

  .catalog-grid-colors .quick-add-btn {
    min-width: 0;
    padding-inline: 5px;
    font-size: .58rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .catalog-grid-colors .quick-add-btn .cart-icon {
    display: none;
  }

  .catalog-grid-colors .quick-qty-control button:disabled {
    opacity: .38;
  }
}

@container product-card (max-width: 175px) {
  .catalog-grid-colors .quick-buy-row {
    grid-template-columns: 75px minmax(0, 1fr);
    gap: 6px;
  }

  .catalog-grid-colors .quick-qty-control {
    width: 75px;
    min-width: 75px;
    grid-template-columns: repeat(3, 25px);
  }

  .catalog-grid-colors .quick-qty-control button,
  .catalog-grid-colors .quick-qty-control span {
    width: 25px;
    min-width: 25px;
  }
}

@container product-card (max-width: 165px) {
  .catalog-grid-colors .quick-size-preview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  .catalog-grid-colors .quick-size-chip {
    height: 27px;
    min-height: 27px;
    padding-inline: 2px;
    font-size: .58rem;
  }

  .catalog-grid-colors .quick-add-btn {
    font-size: .56rem;
    padding-inline: 3px;
  }
}


/* =========================================================
   LUHU - Modal de producto visual + visor con zoom
========================================================= */
body:has(.product-image-viewer.open) {
  overflow: hidden;
}

.product-modal {
  padding: 22px;
}

.product-modal-card {
  width: min(980px, calc(100vw - 44px));
  max-height: min(92vh, 880px);
  grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr);
  align-items: start;
}

.product-modal-card>.modal-close-layer {
  position: sticky;
  top: 0;
  z-index: 14;
  grid-column: 1 / -1;
  grid-row: 1;
  height: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.product-modal .product-modal-close {
  position: relative;
  top: auto;
  right: auto;
  width: 40px;
  height: 40px;
  margin: 12px 12px 0 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 16, 15, .10);
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  color: var(--black);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
  pointer-events: auto;
  transition: transform .18s ease, background .18s ease;
}

.product-modal .product-modal-close:hover {
  background: rgba(255, 255, 255, .98);
  transform: scale(1.04);
}

.product-modal .product-modal-close svg,
.image-viewer-close svg,
.modal-image-zoom-hint svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-modal .product-modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-image-wrap {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 0;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: var(--stone);
  text-align: left;
  font: inherit;
}

#modalImage {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.modal-image-open {
  cursor: zoom-in;
}

.modal-image-zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid rgba(16, 16, 15, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .86);
  color: var(--black);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
  font-size: .76rem;
  font-weight: 900;
}

.modal-image-zoom-hint svg {
  width: 16px;
  height: 16px;
}

.modal-image-size-guide {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.modal-image-size-guide:hover,
.modal-image-size-guide:focus-visible {
  background: rgba(255, 255, 255, .98);
  border-color: rgba(184, 132, 44, .45);
  transform: translateY(-1px);
  outline: none;
}

.modal-info {
  grid-column: 2;
  grid-row: 1;
  padding: clamp(24px, 4vw, 42px);
}

.modal-info #modalName {
  margin-bottom: 12px;
}

.modal-main-color-swatch {
  width: 100%;
  height: 72px;
  display: block;
  margin-bottom: 14px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 14px;
  background: var(--color-texture, var(--color-dot, #ccc));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}

.product-modal .detail-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 16px;
}

.product-modal .selector-group {
  margin: 14px 0;
}

.product-modal .quantity-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
  border-radius: 11px;
  background: var(--soft);
}

.product-modal .quantity-control button,
.product-modal .quantity-control span {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
}

.product-modal .quantity-control button {
  background: transparent;
  font-size: 1.18rem;
}

.product-modal .quantity-control span {
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.product-modal .quantity-control button:disabled {
  opacity: .38;
}

#addConfiguredProduct {
  min-height: 44px;
  border-radius: 11px;
}

.product-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(9, 9, 9, .96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

.product-image-viewer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.image-viewer-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  color: rgba(255, 255, 255, .82);
  pointer-events: none;
}

.image-viewer-hint {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}

.image-viewer-close {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: rgba(16, 16, 15, .68);
  color: var(--white);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  pointer-events: auto;
}

.image-viewer-close svg {
  width: 19px;
  height: 19px;
}

.image-viewer-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 76px 16px 86px;
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.image-viewer-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: center;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

.image-viewer-image.is-dragging {
  cursor: grabbing;
}

.image-viewer-image.is-animated {
  transition: transform .18s ease;
}

.image-viewer-controls {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 3;
  display: grid;
  grid-template-columns: 46px 76px 46px;
  overflow: hidden;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: rgba(16, 16, 15, .68);
  color: var(--white);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}

.image-viewer-controls button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 900;
}

.image-viewer-controls button+button {
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.image-viewer-controls button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .product-modal {
    padding: 10px;
  }

  .product-modal-card {
    width: min(100%, calc(100vw - 20px));
    max-height: 94vh;
    grid-template-columns: 1fr;
  }

  .modal-image-wrap {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 3 / 4;
    min-height: 0;
  }

  .modal-info {
    grid-column: 1;
    grid-row: 2;
    padding: 22px 18px 24px;
  }

  .product-modal-card>.modal-close-layer {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .product-modal .product-modal-close {
    width: 38px;
    height: 38px;
    margin: 10px 10px 0 0;
  }

  .modal-main-color-swatch {
    height: 58px;
    border-radius: 12px;
  }

  .product-modal .detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-modal .quantity-control {
    height: 42px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-modal .quantity-control button {
    font-size: 1.15rem;
  }

  #addConfiguredProduct {
    min-height: 42px;
  }

  .image-viewer-hint {
    max-width: calc(100vw - 86px);
    font-size: .7rem;
  }

  .image-viewer-stage {
    padding: 68px 10px 80px;
  }
}

@media (max-width: 360px) {
  .product-modal .detail-list {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   LUHU - Navegacion contextual final del catalogo
========================================================= */
.catalog-intro-minimal {
  position: relative;
}

.catalog-intro-minimal .catalog-current-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 7px;
  overflow: visible;
}

.catalog-intro-minimal.has-back .catalog-current-card {
  padding-left: 62px;
}

.catalog-floating-back {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(201, 166, 107, .42);
  border-radius: 12px;
  background: var(--black);
  color: var(--accent);
  box-shadow: 0 8px 22px rgba(16, 16, 15, .15);
}

.catalog-floating-back[hidden] {
  display: none !important;
}

.catalog-floating-back svg,
.catalog-model-sticky-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-production-badge {
  width: max-content;
  margin-top: 2px;
  padding: 6px 10px;
  border: 1px solid rgba(201, 166, 107, .34);
  border-radius: 999px;
  background: rgba(201, 166, 107, .12);
  color: var(--accent) !important;
  font-size: .66rem !important;
  letter-spacing: .08em !important;
}

.catalog-current-models-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(201, 166, 107, .48);
  border-radius: 999px;
  background: rgba(201, 166, 107, .12);
  color: var(--accent);
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.catalog-current-models-toggle[hidden] {
  display: none !important;
}

.catalog-current-models-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.catalog-current-models-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.catalog-current-models-toggle:hover,
.catalog-current-models-toggle[aria-expanded="true"] {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
}

.catalog-current-models-menu {
  position: absolute;
  top: 60px;
  right: 16px;
  z-index: 6;
  min-width: 190px;
  max-width: min(280px, calc(100vw - 48px));
  padding: 7px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(201, 166, 107, .36);
  border-radius: 12px;
  background: rgba(16, 16, 15, .99);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.catalog-current-models-menu[hidden] {
  display: none !important;
}

.catalog-current-models-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.catalog-current-models-menu button {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .76);
  font-size: .69rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .015em;
  text-align: left;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.catalog-current-models-menu button:hover {
  background: rgba(201, 166, 107, .14);
  color: var(--white);
  transform: translateX(2px);
}

.catalog-current-models-toggle:focus-visible,
.catalog-current-models-menu button:focus-visible {
  outline: 3px solid rgba(201, 166, 107, .48);
  outline-offset: 2px;
}

/* Barra contextual: ancho completo en escritorio, tarjeta flotante en movil. */
.catalog-model-sticky {
  position: fixed;
  top: var(--catalog-navbar-height, 68px);
  left: 0;
  right: 0;
  z-index: 49;
  width: 100%;
  max-width: none;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  border-top: 1px solid rgba(201, 166, 107, .34);
  border-bottom: 1px solid rgba(201, 166, 107, .42);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: rgba(16, 16, 15, .97);
  color: var(--white);
  box-shadow: 0 12px 34px rgba(16, 16, 15, .24);
  backdrop-filter: blur(14px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.catalog-model-sticky.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.catalog-model-sticky[hidden] {
  display: none !important;
}

.catalog-model-sticky-inner {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
}

.catalog-model-sticky-back {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(201, 166, 107, .52);
  border-radius: 10px;
  background: rgba(201, 166, 107, .12);
  color: var(--accent);
}

.catalog-model-sticky-category {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
}

.catalog-model-sticky-title {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font-family: Syne, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-model-sticky-title:hover {
  color: #f4ead9;
}

.catalog-model-sticky-back:hover {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
}

.catalog-model-sticky-models-toggle {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(201, 166, 107, .52);
  border-radius: 10px;
  background: rgba(201, 166, 107, .12);
  color: var(--accent);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.catalog-model-sticky-models-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}

.catalog-model-sticky-models-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.catalog-model-sticky-models-toggle:hover,
.catalog-model-sticky-models-toggle[aria-expanded="true"] {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
}

.catalog-model-sticky-models-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 10px;
  z-index: 2;
  min-width: 190px;
  max-width: min(280px, calc(100vw - 32px));
  padding: 7px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(201, 166, 107, .36);
  border-radius: 12px;
  background: rgba(16, 16, 15, .99);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}

.catalog-model-sticky-models-menu[hidden] {
  display: none !important;
}

.catalog-model-sticky-models-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.catalog-model-sticky-models-menu button {
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .76);
  font-size: .69rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .015em;
  text-align: left;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.catalog-model-sticky-models-menu button:hover {
  background: rgba(201, 166, 107, .14);
  color: var(--white);
  transform: translateX(2px);
}

.catalog-model-sticky-title:focus-visible,
.catalog-model-sticky-back:focus-visible,
.catalog-model-sticky-models-toggle:focus-visible,
.catalog-model-sticky-models-menu button:focus-visible,
.catalog-floating-back:focus-visible {
  outline: 3px solid rgba(201, 166, 107, .48);
  outline-offset: 2px;
}

body:has(.product-modal.open) .catalog-model-sticky,
body:has(.cart-panel.open) .catalog-model-sticky,
body:has(.product-image-viewer.open) .catalog-model-sticky {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 760px) {
  .catalog-intro-minimal.has-back .catalog-current-card {
    padding-left: 60px;
  }

  .catalog-floating-back {
    top: 9px;
    left: 9px;
  }

  .catalog-current-models-toggle {
    top: 10px;
    right: 10px;
    width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 10px;
  }

  .catalog-current-models-toggle span {
    display: none;
  }

  .catalog-current-models-menu {
    top: 56px;
    right: 10px;
    min-width: 176px;
  }

  .catalog-intro-minimal.has-back .catalog-current-card {
    padding-right: 58px;
  }

  .catalog-model-sticky {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    border: 1px solid rgba(201, 166, 107, .42);
    border-radius: 10px;
    transform: translateY(-8px);
  }

  .catalog-model-sticky.show {
    transform: translateY(0);
  }

  .catalog-model-sticky-inner {
    min-height: 52px;
    gap: 9px;
    padding: 6px 8px;
  }

  .catalog-model-sticky-category {
    display: none;
  }

  .catalog-model-sticky-title {
    font-size: 1rem;
  }

  .catalog-model-sticky-models-menu {
    right: 0;
    top: calc(100% + 7px);
  }
}

@media (max-width: 390px) {
  .catalog-model-sticky-models-toggle {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .catalog-model-sticky-models-menu {
    right: 8px;
    min-width: 176px;
  }
}

/* =========================================================
   LUHU - Retroalimentacion visual de carrito y scrollbars
========================================================= */
.cart-items .cart-item.is-newly-added {
  animation: luhuCartItemAdded 1.2s ease;
}

@keyframes luhuCartItemAdded {

  0%,
  100% {
    border-color: var(--line);
    box-shadow: none;
  }

  22% {
    border-color: #2f8f46;
    box-shadow: 0 0 0 3px rgba(47, 143, 70, .20), 0 8px 24px rgba(47, 143, 70, .12);
  }

  52% {
    border-color: #58ad68;
    box-shadow: 0 0 0 5px rgba(47, 143, 70, .10), 0 8px 24px rgba(47, 143, 70, .08);
  }

  76% {
    border-color: #2f8f46;
    box-shadow: 0 0 0 3px rgba(47, 143, 70, .16);
  }
}

/* Firefox */
html,
body,
.product-modal-card,
.cart-scroll-area,
.cart-items,
.admin-order-modal-scroll,
.admin-content {
  scrollbar-width: thin;
  scrollbar-color: #77716a #eee8df;
}

/* Chrome, Edge y Safari */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #eee8df;
}

*::-webkit-scrollbar-thumb {
  background: #77716a;
  border: 2px solid #eee8df;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #5f5a54;
}

@media (max-width: 760px) {
  *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-items .cart-item.is-newly-added {
    animation: none;
    border-color: #2f8f46;
    box-shadow: 0 0 0 3px rgba(47, 143, 70, .18);
  }
}


/* =========================================================
   LUHU - Carrito: jerarquia visual y controles definitivos
   Bloque final consolidado para evitar conflictos de cascada.
========================================================= */

/* La retroalimentacion del producto agregado dura lo suficiente
   para seguir siendo visible durante la apertura y el scroll. */
.cart-items .cart-item.is-newly-added {
  animation: luhuCartItemAddedLong 1.85s ease both;
}

@keyframes luhuCartItemAddedLong {

  0%,
  100% {
    border-color: var(--line);
    box-shadow: none;
  }

  16% {
    border-color: #27843d;
    box-shadow: 0 0 0 3px rgba(39, 132, 61, .22), 0 9px 26px rgba(39, 132, 61, .13);
  }

  42% {
    border-color: #5caf6b;
    box-shadow: 0 0 0 5px rgba(39, 132, 61, .11), 0 9px 24px rgba(39, 132, 61, .09);
  }

  68% {
    border-color: #27843d;
    box-shadow: 0 0 0 3px rgba(39, 132, 61, .18), 0 7px 20px rgba(39, 132, 61, .08);
  }
}

/* Cabecera: la unica superficie de cierre es el boton rojo visible. */
.cart-header-compact {
  grid-template-columns: minmax(0, 1fr) 44px !important;
  gap: 9px !important;
}

.cart-header-compact #closeCart {
  position: static !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #efb3ae !important;
  border-radius: 13px !important;
  background: #fff0ef !important;
  color: #a9231a !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

.cart-header-compact #closeCart:hover {
  background: #ffe2df !important;
  border-color: #d96961 !important;
  color: #8f1912 !important;
  transform: translateY(-1px);
}

.cart-header-compact #closeCart:focus-visible {
  outline: 3px solid rgba(180, 35, 24, .20) !important;
  outline-offset: 2px !important;
}

/* Footer: campos del cliente y resumen con jerarquias distintas. */
.cart-fixed-customer {
  background: linear-gradient(135deg, #fbf5eb, #f4eadb) !important;
  border: 1px solid rgba(201, 166, 107, .58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

.cart-fixed-customer .cart-customer-head strong {
  color: #654b25 !important;
}

.cart-fixed-customer .customer-form input {
  background: rgba(255, 255, 255, .94) !important;
  border-color: rgba(201, 166, 107, .42) !important;
  color: var(--black) !important;
}

.cart-fixed-customer .customer-form input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(201, 166, 107, .16) !important;
}

.cart-fixed-total {
  background: linear-gradient(135deg, #171714, #242019) !important;
  border: 1px solid #39342c !important;
  color: rgba(255, 255, 255, .76) !important;
  box-shadow: 0 10px 25px rgba(16, 16, 15, .13) !important;
}

.cart-fixed-total span {
  border-color: rgba(255, 255, 255, .10) !important;
}

.cart-fixed-total small {
  color: rgba(255, 255, 255, .68) !important;
}

.cart-fixed-total strong,
.cart-fixed-total .cart-basic-extra strong {
  color: var(--white) !important;
}

.cart-fixed-total .discount-line strong {
  color: #9ed5a5 !important;
}

.cart-fixed-total .cart-total-final {
  border-top: 1px solid rgba(201, 166, 107, .38) !important;
}

.cart-fixed-total .cart-total-final small {
  color: rgba(255, 255, 255, .86) !important;
}

.cart-fixed-total .cart-total-final strong {
  color: var(--accent) !important;
  font-size: 1.02rem !important;
}

/* Ambos botones de cierre comparten el mismo lenguaje rojo. */
.cart-footer-actions #continueShopping.cart-back-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border: 1px solid #efb3ae !important;
  border-radius: 12px !important;
  background: #fff0ef !important;
  color: #a9231a !important;
  font-size: 1.55rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transform: none !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}

.cart-footer-actions #continueShopping.cart-back-btn span {
  display: block !important;
  transform: translateY(-1px) !important;
}

.cart-footer-actions #continueShopping.cart-back-btn:hover {
  background: #ffe2df !important;
  border-color: #d96961 !important;
  color: #8f1912 !important;
  transform: translateY(-1px) !important;
}

.cart-footer-actions #continueShopping.cart-back-btn:focus-visible {
  outline: 3px solid rgba(180, 35, 24, .20) !important;
  outline-offset: 2px !important;
}

/* Vaciar carrito permanece visible dentro de la zona de productos,
   sin salirse del panel ni cubrir permanentemente la ultima tarjeta. */
.cart-scroll-area {
  position: relative !important;
}

.cart-scroll-area .cart-items {
  padding-bottom: 64px !important;
}

.cart-scroll-area .cart-clear-btn {
  position: sticky !important;
  right: 8px !important;
  bottom: 8px !important;
  z-index: 12 !important;
  width: max-content !important;
  max-width: calc(100% - 16px) !important;
  min-height: 38px !important;
  margin: -50px 8px 8px auto !important;
  padding: 8px 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid #efb3ae !important;
  border-radius: 999px !important;
  background: rgba(255, 240, 239, .97) !important;
  color: #a9231a !important;
  box-shadow: 0 9px 24px rgba(180, 35, 24, .17) !important;
  backdrop-filter: blur(8px);
}

.cart-scroll-area .cart-clear-btn:hover {
  background: #ffe2df !important;
  border-color: #d96961 !important;
  color: #8f1912 !important;
  transform: translateY(-1px) !important;
}

.cart-scroll-area .cart-clear-btn[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .cart-header-compact {
    grid-template-columns: minmax(0, 1fr) 42px !important;
    gap: 7px !important;
  }

  .cart-header-compact #closeCart {
    width: 42px !important;
    min-width: 42px !important;
    height: 48px !important;
  }

  .cart-fixed-total .cart-total-final strong {
    font-size: .98rem !important;
  }

  .cart-scroll-area .cart-clear-btn {
    right: 6px !important;
    bottom: 6px !important;
    margin-right: 6px !important;
    font-size: .76rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-items .cart-item.is-newly-added {
    animation: none !important;
    border-color: #27843d !important;
    box-shadow: 0 0 0 3px rgba(39, 132, 61, .18) !important;
  }
}

/* =========================================================
   LUHU - Posicion final del boton Vaciar carrito
   El listado conserva su propio scroll y el boton permanece
   compacto, fijo abajo a la derecha, justo sobre el footer.
========================================================= */
.cart-scroll-area {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 2px 6px !important;
}

.cart-scroll-area .cart-items {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 10px !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.cart-scroll-area .cart-clear-btn {
  position: static !important;
  flex: 0 0 auto !important;
  align-self: flex-end !important;
  width: auto !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 6px 6px 0 auto !important;
  padding: 5px 9px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  font-size: .66rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

.cart-scroll-area .cart-clear-btn svg {
  width: 12px !important;
  height: 12px !important;
}

.cart-scroll-area .cart-clear-btn:hover {
  transform: translateY(-1px) !important;
}

@media (max-width: 760px) {
  .cart-scroll-area .cart-clear-btn {
    margin: 6px 4px 0 auto !important;
    padding: 5px 9px !important;
    font-size: .66rem !important;
  }
}

/* =========================================================
   LUHU - Confirmacion guiada de datos del cliente
========================================================= */
.customer-name-field {
  display: grid;
  gap: 3px;
}

.customer-name-field>label {
  color: var(--gray);
  font-size: .72rem;
  font-weight: 800;
}

.customer-name-control {
  position: relative;
}

.customer-name-control input {
  width: 100%;
  padding-right: 46px !important;
}

.customer-data-ready-btn {
  position: absolute;
  top: 50%;
  right: 5px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 166, 107, .55);
  border-radius: 50%;
  padding: 0;
  background: var(--white);
  color: var(--black);
  transform: translateY(-50%);
  transform-origin: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
  z-index: 2;
}

.customer-data-ready-btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.customer-data-ready-btn:not(:disabled):hover {
  background: #f2e4cc;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(201, 166, 107, .22);
}

.customer-data-ready-btn:focus-visible {
  outline: 3px solid rgba(201, 166, 107, .28);
  outline-offset: 2px;
}

.customer-data-ready-btn:disabled {
  cursor: not-allowed;
  background: rgba(201, 166, 107, .08);
  border-color: rgba(201, 166, 107, .24);
  color: rgba(123, 90, 35, .38);
  box-shadow: none;
  opacity: .68;
}

.cart-fixed-customer.has-valid-data {
  border-color: rgba(201, 166, 107, .75);
  box-shadow: 0 0 0 2px rgba(201, 166, 107, .08);
}

.cart-fixed-customer.has-valid-data .customer-data-ready-btn:not(:disabled) {
  background: rgba(201, 166, 107, .07);
  border: 2px solid rgba(201, 166, 107, .92);
  color: #9a6f2f;
  box-shadow: 0 0 0 3px rgba(201, 166, 107, .10);
  opacity: 1;
  animation: customerCheckAttention 1.5s ease-in-out infinite;
}

@keyframes customerCheckAttention {

  0%,
  58%,
  100% {
    transform: translateY(-50%) rotate(0deg) scale(1);
    box-shadow: 0 0 0 3px rgba(201, 166, 107, .10);
  }

  8% {
    transform: translateY(-50%) rotate(-13deg) scale(1.10);
  }

  16% {
    transform: translateY(-50%) rotate(13deg) scale(1.14);
    box-shadow: 0 0 0 6px rgba(201, 166, 107, .16);
  }

  24% {
    transform: translateY(-50%) rotate(-10deg) scale(1.11);
  }

  32% {
    transform: translateY(-50%) rotate(10deg) scale(1.08);
  }

  42% {
    transform: translateY(-50%) rotate(0deg) scale(1);
    box-shadow: 0 0 0 3px rgba(201, 166, 107, .10);
  }
}

.cart-fixed-customer.is-confirmed {
  background: linear-gradient(135deg, #f4fbf2, #edf7e9) !important;
  border-color: #a9d4a4 !important;
  box-shadow: 0 10px 26px rgba(47, 103, 50, .08);
}

.cart-fixed-customer.is-confirmed .customer-data-ready-btn {
  background: #2f6732;
  border-color: #2f6732;
  color: var(--white);
  animation: none;
}

.cart-footer-actions .create-order-btn:not(.customer-ready):disabled {
  background: #4c4a46;
  color: rgba(255, 255, 255, .68);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .82;
}

.cart-footer-actions .create-order-btn.customer-ready {
  background: var(--accent);
  color: var(--black);
  box-shadow: 0 12px 30px rgba(201, 166, 107, .28);
}

.cart-footer-actions .create-order-btn.customer-ready:hover {
  background: #d8b878;
}

.customer-ready-pulse {
  animation: customerReadyPulse .85s ease;
}

@keyframes customerReadyPulse {

  0%,
  100% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.025);
    box-shadow: 0 0 0 5px rgba(201, 166, 107, .18), 0 12px 30px rgba(201, 166, 107, .30);
  }
}

@media (prefers-reduced-motion: reduce) {

  .cart-fixed-customer.has-valid-data .customer-data-ready-btn:not(:disabled),
  .customer-ready-pulse {
    animation: none;
  }
}

@media (max-width: 760px) {
  .customer-name-control input {
    padding-right: 43px !important;
  }

  .customer-data-ready-btn {
    width: 30px;
    height: 30px;
    right: 5px;
  }

  .customer-data-ready-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* =========================================================
   LUHU - Lineas divisorias del panel del carrito
   Delimitan encabezado, productos y cierre sin alterar
   fondos, tamanos, espaciados ni comportamiento responsive.
========================================================= */
.cart-panel .cart-header {
  border-bottom: 3px solid rgba(201, 166, 107, .68) !important;
}

.cart-panel .cart-footer {
  border-top: 3px solid rgba(201, 166, 107, .68) !important;
}


/* =========================================================
   LUHU - Enfasis del boton final cuando la orden esta lista
   Pulso dorado sutil cada 1.5 s; solo mientras puede generarse.
========================================================= */
.cart-footer-actions .create-order-btn.customer-ready:not(:disabled) {
  animation: orderReadyPulse 1.5s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, box-shadow;
}

@keyframes orderReadyPulse {

  0%,
  58%,
  100% {
    transform: scale(1);
    box-shadow: 0 12px 30px rgba(201, 166, 107, .28);
  }

  18% {
    transform: scale(1.028);
    box-shadow:
      0 0 0 6px rgba(201, 166, 107, .14),
      0 15px 36px rgba(201, 166, 107, .34);
  }

  34% {
    transform: scale(1.012);
    box-shadow:
      0 0 0 3px rgba(201, 166, 107, .08),
      0 13px 32px rgba(201, 166, 107, .30);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-footer-actions .create-order-btn.customer-ready:not(:disabled) {
    animation: none;
  }
}

/* =========================================================
   LUHU - Controles tactiles seguros en movil
   El area visible coincide con el area presionable y se
   reemplaza el resaltado azul nativo por feedback propio.
========================================================= */
.nav-actions,
.cart-header-compact {
  position: relative;
  isolation: isolate;
}

.nav-toggle,
.cart-header-compact #closeCart {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}

.nav-toggle::before,
.nav-toggle::after,
.cart-header-compact #closeCart::before,
.cart-header-compact #closeCart::after {
  pointer-events: none;
}

.cart-header-compact #closeCart {
  z-index: 3;
  overflow: hidden;
}

.cart-header-compact #closeCart:active {
  background: #ffd9d6 !important;
  border-color: #d96961 !important;
  color: #8f1912 !important;
  transform: scale(.95) !important;
}

/* Mientras el carrito esta abierto, el navbar que queda detras
   no recibe toques accidentales. */
body:has(.cart-panel.open) .navbar {
  pointer-events: none;
}

body:has(.cart-panel.open) .cart-panel {
  pointer-events: auto;
}

@media (max-width: 760px) {
  .nav-toggle {
    position: relative;
    z-index: 3;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    overflow: hidden;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
  }

  .nav-toggle span {
    width: 22px;
    height: 2px;
    flex: 0 0 2px;
    margin: 0;
    pointer-events: none;
  }

  .nav-toggle:active {
    background: rgba(201, 166, 107, .18);
    border-color: rgba(201, 166, 107, .60);
    transform: scale(.95);
  }

  .nav-toggle:focus-visible {
    outline: 3px solid rgba(201, 166, 107, .28);
    outline-offset: 2px;
  }

  .cart-header-compact #closeCart {
    flex: 0 0 42px !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .nav-toggle,
  .cart-header-compact #closeCart {
    transition: none !important;
  }
}

/* =========================================================
   LUHU - Flip 3D centrado del icono para cerrar el carrito
   La caja permanece inmovil; solo el SVG gira sobre su centro.
========================================================= */
.cart-header-compact #closeCart {
  perspective: 520px;
  transform: none !important;
  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

.cart-close-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 22px;
  height: 22px;
  display: block;
  line-height: 0;
  transform: translate(-50%, -50%) rotateX(0deg);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform;
  transition: transform .30s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

.cart-close-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
}

.cart-panel.open .cart-header-compact #closeCart {
  animation: cartCloseIntro .34s cubic-bezier(.2, .8, .25, 1);
}

@keyframes cartCloseIntro {
  0% {
    opacity: 0;
    box-shadow: 0 0 0 rgba(180, 35, 24, 0);
  }

  58% {
    opacity: 1;
    box-shadow: 0 9px 22px rgba(180, 35, 24, .15);
  }

  100% {
    opacity: 1;
    box-shadow: 0 5px 14px rgba(180, 35, 24, .10);
  }
}

@media (hover: hover) and (pointer: fine) {
  .cart-header-compact #closeCart:hover {
    background: #ffe2df !important;
    border-color: #df8179 !important;
    color: #9c2018 !important;
    box-shadow: 0 8px 20px rgba(180, 35, 24, .16);
  }

  .cart-header-compact #closeCart:hover .cart-close-icon {
    transform: translate(-50%, -50%) rotateX(180deg);
  }
}

.cart-header-compact #closeCart.is-flipping .cart-close-icon {
  transform: translate(-50%, -50%) rotateX(180deg);
}

.cart-header-compact #closeCart:active {
  transform: none !important;
  background: #ffd4d0 !important;
  border-color: #d96961 !important;
  color: #8f1912 !important;
  box-shadow: 0 3px 10px rgba(180, 35, 24, .14) !important;
}

.cart-header-compact #closeCart:focus-visible {
  outline: 3px solid rgba(180, 35, 24, .20);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(180, 35, 24, .08);
}

@media (prefers-reduced-motion: reduce) {
  .cart-panel.open .cart-header-compact #closeCart {
    animation: none;
  }

  .cart-header-compact #closeCart,
  .cart-close-icon {
    transition: none !important;
  }
}


/* =========================================================
   LUHU - Guia de tallas dinamica
========================================================= */
.catalog-option-card>.model-card-size-guide {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  width: fit-content;
  max-width: calc(100% - 32px);
  min-width: 0;
  justify-self: auto;
  align-self: auto;
  z-index: 4;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(201, 166, 107, .58);
  border-radius: 999px;
  background: rgba(16, 16, 15, .84);
  color: var(--white);
  font-size: .66rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.catalog-option-card>.model-card-size-guide svg,
.catalog-size-guide-tab svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.catalog-option-card>.model-card-size-guide:hover,
.catalog-option-card>.model-card-size-guide:focus-visible {
  background: var(--accent);
  color: var(--black);
  transform: translateY(-1px);
}

.catalog-size-guide-tab {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 6;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid rgba(201, 166, 107, .58);
  border-radius: 999px;
  background: var(--black);
  color: var(--accent);
  font-size: .64rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(16, 16, 15, .18);
  transform: translate(-50%, 50%);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.catalog-size-guide-tab:hover,
.catalog-size-guide-tab:focus-visible {
  background: var(--accent);
  color: var(--black);
  border-color: var(--accent);
}

.catalog-size-guide-tab[hidden] {
  display: none !important;
}

.catalog-sticky-size-guide {
  bottom: -1px;
  z-index: 4;
}

.size-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.size-guide-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.size-guide-modal-card {
  position: relative;
  width: min(980px, 100%);
  max-height: min(88vh, 880px);
  overflow: auto;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .28);
}

.size-guide-modal-card>.modal-close-layer {
  position: sticky;
  top: 0;
  z-index: 20;
  grid-column: 1 / -1;
  grid-row: 1;
  height: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.size-guide-modal .size-guide-modal-close {
  position: relative;
  top: auto;
  right: auto;
  width: 42px;
  height: 42px;
  margin: 12px 12px 0 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(16, 16, 15, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--black);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.size-guide-modal .size-guide-modal-close:hover,
.size-guide-modal .size-guide-modal-close:focus-visible {
  background: var(--white);
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}

.size-guide-modal .size-guide-modal-close svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.size-guide-image-wrap {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: var(--stone);
}

.size-guide-image-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.size-guide-info {
  padding: clamp(24px, 4vw, 42px);
}

.size-guide-info h2 {
  max-width: 520px;
  font-family: Syne, sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.size-guide-selector-group {
  margin-top: 24px;
}

.size-guide-table {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--soft);
}

.size-guide-table-head,
.size-guide-measurement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.size-guide-table-head {
  padding: 11px 14px;
  background: var(--black);
  color: var(--white);
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.size-guide-table-head strong {
  color: var(--accent);
}

.size-guide-measurement-row {
  min-height: 45px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.size-guide-measurement-row:first-child {
  border-top: 0;
}

.size-guide-measurement-row span {
  color: var(--gray);
  font-weight: 800;
}

.size-guide-measurement-row strong {
  color: var(--black);
  font-family: Syne, sans-serif;
  font-size: 1rem;
}

.size-guide-note {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(201, 166, 107, .42);
  border-radius: var(--radius);
  background: #fbf6ed;
}

.size-guide-note strong {
  display: block;
  margin-bottom: 5px;
}

.size-guide-note p {
  color: #5d554b;
  font-size: .84rem;
  line-height: 1.5;
}

.size-guide-note small {
  display: block;
  margin-top: 7px;
  color: var(--gray);
  font-size: .72rem;
  line-height: 1.4;
}

.size-guide-note-list {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 7px;
  color: var(--gray);
}

.size-guide-note-list li {
  padding-left: 2px;
  font-size: .74rem;
  line-height: 1.45;
}

.size-guide-note-list li::marker {
  color: var(--accent);
  font-size: .8em;
}

.size-guide-note-list strong {
  display: inline;
  margin: 0;
  color: #5d554b;
  font-weight: 800;
}

body:has(.size-guide-modal.open) .catalog-model-sticky {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 760px) {
  .catalog-option-card>.model-card-size-guide {
    top: 14px;
    right: 14px;
    min-height: 28px;
    font-size: .62rem;
  }

  .catalog-size-guide-tab {
    min-height: 24px;
    padding: 4px 8px;
    font-size: .59rem;
  }

  .catalog-size-guide-tab svg {
    width: 12px;
    height: 12px;
  }

  .size-guide-modal {
    padding: 10px;
  }

  .size-guide-modal-card {
    grid-template-columns: 1fr;
    max-height: 92vh;
  }

  .size-guide-image-wrap {
    min-height: 300px;
    max-height: 42vh;
  }

  .size-guide-info {
    padding: 22px 18px 26px;
  }

  .size-guide-info h2 {
    font-size: clamp(1.75rem, 8vw, 2.45rem);
  }
}

@media (max-width: 390px) {
  .catalog-size-guide-tab span {
    font-size: .56rem;
  }

  .catalog-option-card>.model-card-size-guide {
    padding: 6px 8px;
  }
}

/* Correccion definitiva: la guia de tallas de la tarjeta no se estira.
   El selector generico .catalog-option-card > span define left:18px;
   aqui se neutraliza expresamente para conservar una capsula compacta. */
.catalog-option-card>.model-card-size-guide {
  left: auto !important;
  right: 16px !important;
  width: fit-content !important;
  max-width: calc(100% - 32px);
  min-width: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .catalog-option-card>.model-card-size-guide {
    right: 14px !important;
    max-width: calc(100% - 28px);
  }
}


/* =========================================================
   LUHU - Correccion precisa de areas presionables
   Mantiene intactos el tamano y la forma visual de los iconos.
========================================================= */

/* Solo el boton real recibe la interaccion. Las capas de apoyo
   no capturan toques fuera del control visible. */
.product-modal-card>.modal-close-layer,
.size-guide-modal-card>.modal-close-layer {
  pointer-events: none !important;
}

.product-modal-card>.modal-close-layer>.product-modal-close,
.size-guide-modal-card>.modal-close-layer>.size-guide-modal-close {
  pointer-events: auto !important;
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
}

/* El SVG y sus trazos nunca se convierten en un objetivo separado:
   toda la caja visible del boton ejecuta la misma accion. */
#closeProductModal svg,
#closeSizeGuideModal svg,
#closeCart .cart-close-icon,
#closeCart .cart-close-icon svg,
#menuToggle span {
  pointer-events: none !important;
}

/* La caja interactiva coincide con la caja visual existente.
   No se cambian las medidas ni la forma de los iconos. */
#closeProductModal,
#closeSizeGuideModal,
#closeCart,
#menuToggle {
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Evita que pseudo-elementos o capas decorativas intercepten el toque. */
#closeProductModal::before,
#closeProductModal::after,
#closeSizeGuideModal::before,
#closeSizeGuideModal::after,
#closeCart::before,
#closeCart::after,
#menuToggle::before,
#menuToggle::after {
  pointer-events: none !important;
}

/* El foco tactil no deja una caja azul persistente. Se conserva una
   indicacion accesible cuando el usuario navega con teclado. */
#closeProductModal:focus:not(:focus-visible),
#closeSizeGuideModal:focus:not(:focus-visible),
#closeCart:focus:not(:focus-visible),
#menuToggle:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none;
}

#closeProductModal:focus-visible,
#closeSizeGuideModal:focus-visible,
#closeCart:focus-visible,
#menuToggle:focus-visible {
  outline: 2px solid rgba(201, 166, 107, .72);
  outline-offset: 2px;
}

/* En movil, las zonas contiguas no se superponen con los controles. */
@media (max-width: 760px) {
  .nav-actions {
    align-items: center;
  }

  #menuToggle {
    flex-shrink: 0;
  }

  .cart-header-compact {
    align-items: flex-start;
  }

  .cart-header-compact #closeCart {
    position: relative;
    flex-shrink: 0;
  }

  .product-modal-card>.modal-close-layer,
  .size-guide-modal-card>.modal-close-layer {
    z-index: 50 !important;
  }

  #closeProductModal,
  #closeSizeGuideModal {
    z-index: 51 !important;
  }
}

/* =========================================================
   LUHU - Zona tactil ampliada del cierre del carrito
   La ampliacion se calcula en JavaScript y no altera la caja visual.
========================================================= */
.cart-header-compact #closeCart {
  /* Se conservan las dimensiones visuales definidas por el diseño. */
  transform: none !important;
}


/* =========================================================
   LUHU - Validacion automatica del nombre del cliente
========================================================= */
.customer-name-control input {
  padding-right: 46px !important;
}

.customer-data-valid-icon {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2f6732;
  color: #fff;
  transform: translateY(-50%) scale(.82);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.customer-data-valid-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-fixed-customer.is-confirmed .customer-data-valid-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.cart-fixed-customer.is-confirmed .customer-name-control input {
  border-color: #79b874 !important;
  background: #f7fcf6 !important;
}


/* =========================================================
   LUHU - Aviso automatico de datos simples del cliente
========================================================= */
.customer-name-field>label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.customer-name-missing {
  color: #b42318;
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
}

.cart-fixed-customer.is-confirmed .customer-name-missing {
  display: none;
}


/* =========================================================
   LUHU - Acciones de compra dentro de la zona desplazable
========================================================= */
.cart-scroll-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px 0;
}

.cart-scroll-actions .cart-continue-btn,
.cart-scroll-actions .cart-empty-shop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #b9dfc1;
  border-radius: 999px;
  background: #edf7e9;
  color: #2b6b2b;
  font-size: .66rem;
  line-height: 1;
  font-weight: 900;
  padding: 6px 10px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.cart-scroll-actions .cart-continue-btn:hover,
.cart-scroll-actions .cart-empty-shop-btn:hover {
  transform: translateY(-1px);
  background: #e1f2dc;
  border-color: #9fcea9;
}

.cart-scroll-actions .cart-continue-btn svg,
.cart-scroll-actions .cart-empty-shop-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cart-scroll-actions .cart-empty-shop-btn {
  margin: 2px auto 0;
  min-width: 132px;
  font-size: .74rem;
  padding: 8px 14px;
}

.cart-scroll-actions .cart-clear-btn {
  margin: 0 !important;
}

.cart-scroll-actions:has(.cart-empty-shop-btn:not([hidden])) {
  justify-content: center;
}

@media (max-width: 760px) {
  .cart-scroll-actions {
    padding: 6px 4px 0;
  }

  .cart-scroll-actions .cart-continue-btn,
  .cart-scroll-actions .cart-clear-btn {
    font-size: .64rem !important;
  }
}

/* =========================================================
   LUHU - Ajuste visual del modal de Guia de Tallas
   Imagen completa en proporcion 3:4 y talla activa destacada.
========================================================= */
.size-guide-image-wrap {
  min-height: 0;
  aspect-ratio: 3 / 4;
  align-self: start;
  display: grid;
  place-items: center;
}

.size-guide-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

#sizeGuideSizeOptions {
  align-items: center;
}

#sizeGuideSizeOptions .selector-btn {
  position: relative;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  transform-origin: center;
}

#sizeGuideSizeOptions .selector-btn.active {
  z-index: 1;
  transform: scale(1.1);
}

@media (max-width: 760px) {
  .size-guide-image-wrap {
    min-height: 0;
    max-height: none;
    aspect-ratio: 3 / 4;
  }
}

/* =========================================================
   LUHU - Footer compacto en movil
========================================================= */
.footer-bottom small a {
  display: inline;
  margin-top: 0;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.footer-bottom small a:hover {
  color: var(--white);
}

@media (max-width: 760px) {
  .footer {
    padding: 30px 0 88px;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(110px, .85fr) !important;
    align-items: start;
    gap: 22px;
  }

  .footer-buy-block,
  .footer-categories-block {
    display: none;
  }

  .footer-brand-block,
  .footer-social-block {
    min-width: 0;
  }

  .footer-logo-img {
    width: 112px;
    height: auto;
  }

  .footer-social-block h3 {
    margin-bottom: 7px;
    font-size: .82rem;
  }

  .footer-social-block a {
    margin-top: 4px;
    font-size: .84rem;
  }

  .footer-bottom {
    margin-top: 22px;
    padding-top: 14px;
    gap: 5px;
    font-size: .74rem;
    line-height: 1.35;
  }

  .footer-bottom small {
    font-size: .64rem;
    line-height: 1.4;
  }
}


/* =========================================================
   LUHU - Menu para explorar modelos y otras categorias
========================================================= */
.catalog-current-models-menu,
.catalog-model-sticky-models-menu {
  min-width: 230px;
  padding: 10px;
  gap: 6px;
}

.catalog-explore-menu-label {
  display: block;
  padding: 3px 8px 5px;
  color: rgba(255, 255, 255, .52);
  font-size: .57rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .10em;
}

.catalog-explore-menu-label-special {
  color: var(--accent);
}

.catalog-explore-models,
.catalog-explore-categories {
  display: grid;
  gap: 3px;
}

.catalog-explore-menu-divider {
  display: block;
  height: 1px;
  margin: 5px 4px 3px;
  background: rgba(201, 166, 107, .25);
}

.catalog-current-models-menu .catalog-explore-category-btn,
.catalog-model-sticky-models-menu .catalog-explore-category-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid rgba(201, 166, 107, .38);
  background: rgba(201, 166, 107, .12);
  color: var(--accent);
}

.catalog-current-models-menu .catalog-explore-category-btn strong,
.catalog-model-sticky-models-menu .catalog-explore-category-btn strong {
  font: inherit;
  font-weight: 900;
}

.catalog-current-models-menu .catalog-explore-category-btn span,
.catalog-model-sticky-models-menu .catalog-explore-category-btn span {
  font-size: .9rem;
  transition: transform .16s ease;
}

.catalog-current-models-menu .catalog-explore-category-btn:hover,
.catalog-model-sticky-models-menu .catalog-explore-category-btn:hover {
  background: var(--accent);
  color: var(--black);
  transform: none;
}

.catalog-current-models-menu .catalog-explore-category-btn:hover span,
.catalog-model-sticky-models-menu .catalog-explore-category-btn:hover span {
  transform: translateX(2px);
}

@media (max-width: 760px) {

  .catalog-current-models-menu,
  .catalog-model-sticky-models-menu {
    width: min(270px, calc(100vw - 36px));
    min-width: 0;
  }

  .catalog-current-models-menu button,
  .catalog-model-sticky-models-menu button {
    min-height: 40px;
    font-size: .72rem;
  }
}

/* =========================================================
   LUHU - Filtros sutiles de familias y cuadrícula continua
========================================================= */
.products-grid.catalog-grid-colors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.color-filter-bar {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(232, 225, 215, .88);
  border-radius: 16px;
  background: rgba(250, 248, 244, .72);
}

.color-filter-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.color-filter-heading>span {
  color: var(--gray);
  font-size: .67rem;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.color-filter-heading>small {
  color: var(--muted);
  font-size: .64rem;
  line-height: 1;
  font-weight: 800;
}

.color-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.color-filter-pill {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(222, 212, 197, .82);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: #625e58;
  padding: 5px 9px;
  font-size: .68rem;
  line-height: 1;
  font-weight: 800;
  box-shadow: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.color-filter-pill small {
  min-width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(119, 115, 109, .08);
  color: var(--gray);
  font-size: .58rem;
  line-height: 1;
  font-weight: 900;
}

.color-filter-pill:hover {
  border-color: rgba(201, 166, 107, .58);
  background: #fff;
  color: var(--black);
}

.color-filter-pill.active {
  border-color: rgba(201, 166, 107, .65);
  background: rgba(201, 166, 107, .12);
  color: #5d4727;
}

.color-filter-pill.active small {
  background: rgba(201, 166, 107, .18);
  color: #70552b;
}

.color-cards-continuous-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 1100px) {
  .color-cards-continuous-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .products-grid.catalog-grid-colors {
    gap: 12px;
  }

  .color-filter-bar {
    gap: 8px;
    padding: 10px 11px;
    border-radius: 14px;
  }

  .color-filter-pills {
    flex-wrap: wrap;
    gap: 5px;
    overflow: visible;
    padding-bottom: 0;
  }

  .color-filter-pill {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 4px 8px;
    font-size: .63rem;
  }

  .color-filter-pill small {
    min-width: 15px;
    height: 15px;
    font-size: .55rem;
  }

  .color-cards-continuous-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 380px) {
  .color-filter-pill {
    min-height: 24px;
    padding: 4px 7px;
    font-size: .60rem;
  }

  .color-filter-pill small {
    min-width: 14px;
    height: 14px;
    font-size: .52rem;
  }
}

/* =========================================================
   LUHU - Boton volver integrado a toda la altura en movil
========================================================= */
@media (max-width: 760px) {
  .catalog-intro-minimal.has-back .catalog-current-card {
    padding-left: 72px;
  }

  .catalog-intro-minimal.has-back .catalog-floating-back {
    top: 0;
    bottom: 0;
    left: 0;
    width: 54px;
    height: auto;
    min-height: 100%;
    border-width: 0 1px 0 0;
    border-color: rgba(201, 166, 107, .30);
    border-radius: var(--radius) 0 0 var(--radius);
    background: linear-gradient(180deg, rgba(201, 166, 107, .08), rgba(255, 255, 255, .015)), var(--black);
    box-shadow: none;
  }

  .catalog-intro-minimal.has-back .catalog-floating-back svg {
    width: 20px;
    height: 20px;
  }

  .catalog-intro-minimal.has-back .catalog-floating-back:active {
    background: rgba(201, 166, 107, .16);
  }
}

/* =========================================================
   LUHU - Correccion estructural del boton lateral en movil
   El boton y la tarjeta forman una sola pieza, sin solaparse.
========================================================= */
@media (max-width: 760px) {
  .catalog-intro-minimal.has-back {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
  }

  .catalog-intro-minimal.has-back .catalog-floating-back {
    position: relative;
    inset: auto;
    z-index: 4;
    width: 54px;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
    border: 1px solid rgba(201, 166, 107, .30);
    border-right-width: 1px;
    border-radius: var(--radius) 0 0 var(--radius);
    background: linear-gradient(180deg, rgba(201, 166, 107, .08), rgba(255, 255, 255, .015)), var(--black);
    box-shadow: none;
  }

  .catalog-intro-minimal.has-back .catalog-current-card {
    width: 100%;
    min-width: 0;
    padding-left: 20px;
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
  }
}

/* =========================================================
   LUHU - Tarjeta contextual movil en tres columnas reales
   20% volver / 60% informacion / 20% explorar
========================================================= */
.catalog-current-content {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 7px;
}

@media (min-width: 761px) {
  .catalog-intro-minimal .catalog-current-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .catalog-current-content {
    grid-column: 1;
  }
}

@media (max-width: 760px) {
  .catalog-intro-minimal.has-back {
    grid-template-columns: 20% minmax(0, 80%);
    overflow: visible;
    border-radius: var(--radius);
  }

  .catalog-intro-minimal.has-back .catalog-floating-back {
    width: 100%;
    min-width: 0;
    border-radius: var(--radius) 0 0 var(--radius);
  }

  .catalog-intro-minimal.has-back .catalog-current-card {
    display: grid;
    grid-template-columns: 75% 25%;
    grid-template-rows: minmax(102px, auto);
    align-items: stretch;
    padding: 0;
    column-gap: 0;
    row-gap: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    overflow: visible;
  }

  .catalog-intro-minimal.has-back .catalog-current-content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding: 17px 12px 19px 16px;
  }

  .catalog-intro-minimal.has-back .catalog-current-models-toggle {
    position: relative;
    inset: auto;
    z-index: 5;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    height: 100%;
    min-height: 100%;
    align-self: stretch;
    padding: 0;
    border-width: 0 0 0 1px;
    border-color: rgba(201, 166, 107, .30);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(180deg, rgba(201, 166, 107, .08), rgba(255, 255, 255, .015)), var(--black);
    box-shadow: none;
  }

  .catalog-intro-minimal.has-back .catalog-current-models-toggle svg {
    width: 20px;
    height: 20px;
  }

  .catalog-intro-minimal.has-back .catalog-current-models-toggle:hover,
  .catalog-intro-minimal.has-back .catalog-current-models-toggle[aria-expanded="true"] {
    background: rgba(201, 166, 107, .16);
    color: var(--accent);
    border-color: rgba(201, 166, 107, .42);
  }

  .catalog-intro-minimal.has-back .catalog-current-models-menu {
    top: calc(100% + 8px);
    right: 0;
  }

  .catalog-intro-minimal.has-back .catalog-current-size-guide {
    justify-self: start;
  }
}

/* =========================================================
   LUHU - Encabezado flotante movil en tres columnas reales
   10% volver / 80% informacion y guia / 10% explorar
========================================================= */
.catalog-model-sticky-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 760px) {
  .catalog-model-sticky {
    overflow: visible;
    border-radius: var(--radius);
  }

  .catalog-model-sticky-inner {
    display: grid;
    grid-template-columns: 10% minmax(0, 80%) 10%;
    align-items: stretch;
    gap: 0;
    min-height: 72px;
    padding: 0;
    border-radius: inherit;
    overflow: visible;
  }

  .catalog-model-sticky-back,
  .catalog-model-sticky-models-toggle {
    width: 100%;
    height: 100%;
    min-height: 72px;
    align-self: stretch;
    margin: 0;
    padding: 0;
    border-top: 0;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(201, 166, 107, .08), rgba(255, 255, 255, .015)), var(--black);
    box-shadow: none;
  }

  .catalog-model-sticky-back {
    grid-column: 1;
    border-left: 0;
    border-right: 1px solid rgba(201, 166, 107, .30);
    border-radius: var(--radius) 0 0 var(--radius);
  }

  .catalog-model-sticky-content {
    grid-column: 2;
    min-width: 0;
    display: grid;
    align-content: center;
    align-items: start;
    gap: 3px;
    padding: 10px 10px 11px;
    background: var(--black);
  }

  .catalog-model-sticky-category {
    display: block;
    width: 100%;
    font-size: .58rem;
    line-height: 1.1;
    letter-spacing: .11em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .catalog-model-sticky-title {
    width: 100%;
    min-height: 0;
    font-size: .92rem;
    line-height: 1.02;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .catalog-sticky-size-guide {
    justify-self: start;
    min-height: 22px;
    padding: 3px 8px;
    margin-top: 2px;
    font-size: .57rem;
    line-height: 1;
  }

  .catalog-sticky-size-guide svg {
    width: 11px;
    height: 11px;
  }

  .catalog-model-sticky-models-toggle {
    grid-column: 3;
    flex-basis: auto;
    border-right: 0;
    border-left: 1px solid rgba(201, 166, 107, .30);
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  .catalog-model-sticky-back:hover,
  .catalog-model-sticky-models-toggle:hover,
  .catalog-model-sticky-models-toggle[aria-expanded="true"] {
    background: rgba(201, 166, 107, .16);
    color: var(--accent);
    border-color: rgba(201, 166, 107, .42);
  }

  .catalog-model-sticky-models-menu {
    top: calc(100% + 8px);
    right: 0;
  }
}

@media (max-width: 390px) {
  .catalog-model-sticky-models-toggle {
    width: 100%;
    height: 100%;
    min-height: 72px;
    flex-basis: auto;
  }
}

/* =========================================================
   LUHU ADMIN - Entrega visible y menú anclado a tres puntos
========================================================= */
.admin-page .admin-order-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.admin-page .admin-order-delivery {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-page .admin-order-delivery-agencia {
  color: #5d461f;
  background: #f7ead4;
  border: 1px solid #ead3ab;
}

.admin-page .admin-order-delivery-motorizado {
  color: #244f67;
  background: #eaf5fa;
  border: 1px solid #c9e3ee;
}

/* El menú usa position:fixed y coordenadas calculadas desde el botón.
   Así permanece junto a los tres puntos aunque la tarjeta tenga overflow,
   scroll o esté cerca de los bordes de la pantalla. */
.admin-page .admin-order-menu {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 10050 !important;
  min-width: 196px;
  max-width: calc(100vw - 20px);
  transform-origin: top right;
}

.admin-page .admin-order-menu.is-open {
  animation: adminOrderMenuIn .14s ease-out;
}

.admin-page .admin-order-menu.opens-up {
  transform-origin: bottom right;
}

@keyframes adminOrderMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .admin-page .admin-order-card-top {
    gap: 8px;
  }

  .admin-page .admin-order-card-badges {
    max-width: 48%;
  }

  .admin-page .admin-order-delivery {
    min-height: 22px;
    padding: 4px 7px;
    font-size: .56rem;
  }
}

/* =========================================================
   LUHU ADMIN - Inventario bloqueado e ingreso de mercaderia
========================================================= */
.inventory-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  margin-bottom: 18px
}

.inventory-filters {
  flex: 1;
  margin: 0
}

.inventory-main-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.inventory-edit-btn {
  background: #fff1d7;
  color: #735019;
  border: 1px solid #e6c98e
}

.inventory-entry-btn {
  background: #176b56;
  color: #fff;
  border: 1px solid #176b56
}

.inventory-edit-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid #e6c98e;
  border-radius: 16px;
  background: #fff8e9;
  color: #735019;
  font-weight: 800
}

.inventory-edit-bar>div {
  display: flex;
  gap: 8px
}

.inventory-card {
  position: relative
}

.inventory-lock-badge {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f0ede7;
  color: #77736d;
  font-size: .65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em
}

.inventory-card.is-editing .inventory-lock-badge {
  background: #fff1d7;
  color: #735019
}

.inventory-locked .inventory-size-cell input {
  pointer-events: none;
  background: #f1efeb !important;
  color: #77736d !important;
  border-color: #e3ddd4 !important
}

.inventory-card.is-editing {
  border-color: #d9b76f;
  box-shadow: 0 10px 30px rgba(201, 166, 107, .12)
}

.stock-entry-modal {
  z-index: 120
}

.stock-entry-modal-card {
  width: min(1420px, 96vw);
  height: min(92vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.stock-entry-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 16px;
  border-bottom: 1px solid var(--line)
}

.stock-entry-header h2 {
  font-family: Syne, sans-serif;
  font-size: 2rem;
  line-height: 1
}

.stock-entry-header p {
  color: var(--gray);
  margin-top: 6px
}

.stock-entry-header .modal-close {
  position: static;
  flex: 0 0 42px
}

.stock-entry-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: end;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--soft)
}

.stock-entry-meta label {
  display: grid;
  gap: 5px;
  font-weight: 800;
  font-size: .8rem
}

.stock-entry-meta input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff
}

.stock-entry-user {
  display: grid;
  text-align: right
}

.stock-entry-user span {
  font-size: .7rem;
  color: var(--gray);
  text-transform: uppercase;
  font-weight: 900
}

.stock-entry-body {
  flex: 1;
  overflow: auto;
  padding: 20px 26px
}

.stock-entry-add-model {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 18px
}

.stock-entry-add-model label {
  display: grid;
  gap: 5px;
  font-size: .8rem;
  font-weight: 900
}

.stock-entry-add-model select {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff
}

.stock-entry-desktop {
  display: grid;
  gap: 18px
}

.stock-entry-mobile {
  display: none
}

.stock-entry-empty {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 18px;
  text-align: center;
  color: var(--gray)
}

.stock-matrix-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #fff
}

.stock-matrix-card>header,
.stock-mobile-model>header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #faf8f4;
  border-bottom: 1px solid var(--line)
}

.stock-matrix-card h3,
.stock-mobile-model h3 {
  font-family: Syne, sans-serif;
  line-height: 1
}

.stock-matrix-card header button,
.stock-mobile-model header button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fff1f0;
  color: #b42318;
  font-size: 1.3rem
}

.stock-matrix-scroll {
  overflow: auto
}

.stock-matrix-card table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px
}

.stock-matrix-card th,
.stock-matrix-card td {
  padding: 8px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center
}

.stock-matrix-card thead th {
  position: sticky;
  top: 0;
  background: #10100f;
  color: #fff;
  z-index: 2
}

.stock-matrix-card tbody th {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
  text-align: left;
  white-space: nowrap
}

.stock-matrix-card tbody th .color-dot {
  margin-right: 8px;
  vertical-align: middle
}

.stock-matrix-card input {
  width: 58px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: center;
  font-weight: 800
}

.stock-matrix-card input:focus {
  outline: 2px solid rgba(201, 166, 107, .45);
  border-color: var(--accent)
}

.stock-entry-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 26px;
  border-top: 1px solid var(--line);
  background: #fff
}

.stock-entry-footer>div:last-child {
  display: flex;
  gap: 10px
}

.stock-entry-summary {
  font-weight: 900
}

.inventory-entry-history {
  margin-top: 24px
}

.inventory-entry-history-list {
  display: grid;
  gap: 8px;
  margin-top: 14px
}

.inventory-entry-history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft)
}

.inventory-entry-history-item>div {
  display: grid
}

.inventory-entry-history-item>div:last-child {
  text-align: right
}

.inventory-entry-history-item span {
  color: var(--gray);
  font-size: .78rem
}

@media(max-width:760px) {
  .inventory-topbar {
    align-items: stretch;
    flex-direction: column
  }

  .inventory-main-actions {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .inventory-main-actions .btn {
    padding: 11px 8px;
    font-size: .8rem
  }

  .inventory-edit-bar {
    align-items: stretch;
    flex-direction: column
  }

  .inventory-edit-bar>div {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .stock-entry-modal {
    padding: 0
  }

  .stock-entry-modal-card {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0
  }

  .stock-entry-header {
    padding: 16px
  }

  .stock-entry-header h2 {
    font-size: 1.55rem
  }

  .stock-entry-meta {
    grid-template-columns: 1fr;
    padding: 12px 16px
  }

  .stock-entry-user {
    text-align: left
  }

  .stock-entry-body {
    padding: 14px 16px
  }

  .stock-entry-add-model {
    grid-template-columns: 1fr
  }

  .stock-entry-desktop {
    display: none
  }

  .stock-entry-mobile {
    display: grid;
    gap: 14px
  }

  .stock-mobile-model {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff
  }

  .stock-mobile-color {
    border-bottom: 1px solid var(--line)
  }

  .stock-mobile-color:last-child {
    border-bottom: 0
  }

  .stock-mobile-color summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    padding: 12px;
    cursor: pointer
  }

  .stock-mobile-color summary em {
    font-style: normal;
    color: #176b56;
    font-weight: 900;
    font-size: .76rem
  }

  .stock-mobile-size-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 0 12px 12px
  }

  .stock-mobile-size-grid label {
    display: grid;
    grid-template-columns: 1fr 64px;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--soft);
    font-size: .78rem;
    font-weight: 800
  }

  .stock-mobile-size-grid input {
    width: 64px;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: 9px;
    text-align: center;
    font-weight: 900
  }

  .stock-entry-footer {
    padding: 12px 16px;
    align-items: stretch;
    flex-direction: column
  }

  .stock-entry-footer>div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .inventory-entry-history-item {
    grid-template-columns: 1fr
  }

  .inventory-entry-history-item>div:last-child {
    text-align: left
  }
}

/* LUHU - Edición y anulación trazable de ingresos */
.inventory-entry-history-item.is-voided {
  opacity: .72;
  background: #f7f4ef;
  border-style: dashed
}

.inventory-entry-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.inventory-entry-status {
  display: inline-flex;
  width: max-content;
  padding: 4px 8px;
  border-radius: 999px;
  font-style: normal;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em
}

.inventory-entry-status.active {
  background: #e9f7ef;
  color: #176b56
}

.inventory-entry-status.voided {
  background: #fff1f0;
  color: #b42318
}

.inventory-entry-main small {
  margin-top: 5px;
  color: var(--gray);
  font-size: .72rem
}

.inventory-entry-meta-actions {
  display: grid;
  gap: 8px;
  justify-items: end
}

.inventory-entry-meta-actions>div:first-child {
  display: grid;
  text-align: right
}

.inventory-entry-actions {
  display: flex;
  gap: 8px
}

.admin-link-btn.danger {
  color: #b42318
}

.stock-entry-meta:has(#stockEntryReasonWrap:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto
}

@media(max-width:760px) {
  .inventory-entry-meta-actions {
    justify-items: start
  }

  .inventory-entry-meta-actions>div:first-child {
    text-align: left
  }

  .inventory-entry-actions {
    width: 100%
  }

  .inventory-entry-actions button {
    flex: 1
  }

  .stock-entry-meta:has(#stockEntryReasonWrap:not([hidden])) {
    grid-template-columns: 1fr
  }
}


/* =========================================================
   LUHU Admin - Comentarios internos en tarjetas y filtro talla
========================================================= */
.admin-order-note-wrap {
  position: relative;
  display: inline-flex;
}

.admin-order-note-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 166, 107, .55);
  border-radius: 50%;
  background: #f6ead7;
  color: #171717;
  padding: 0;
  flex: 0 0 36px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.admin-order-note-btn:hover,
.admin-order-note-btn[aria-expanded="true"] {
  background: #10100f;
  color: #c9a66b;
  transform: translateY(-1px);
}

.admin-order-note-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.admin-order-note-dot {
  position: absolute;
  right: -1px;
  top: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c43d35;
  border: 2px solid #fff;
}

.admin-order-note-btn.is-urgent {
  background: #fff1f0;
  color: #b42318;
  border-color: #f1b8b3;
}

.admin-order-note-btn.is-urgent .admin-order-note-dot {
  background: #b42318;
}

.admin-order-note-popover {
  position: absolute;
  z-index: 10020;
  right: 0;
  top: calc(100% + 8px);
  width: min(330px, calc(100vw - 36px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 16, 15, .18);
  color: var(--ink);
}

.admin-order-note-popover.is-open {
  animation: adminNoteIn .16s ease;
}

.admin-order-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.admin-order-note-head strong {
  font-family: Syne, sans-serif;
  font-size: .95rem;
}

.admin-order-note-head button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  font-size: 1.1rem;
}

.admin-order-note-popover p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 150px;
  overflow: auto;
  color: var(--gray);
  font-size: .88rem;
  line-height: 1.45;
  margin-bottom: 12px;
}

.admin-order-note-open {
  width: 100%;
  min-height: 38px;
  padding: 9px 14px;
  font-size: .82rem;
}

@keyframes adminNoteIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .admin-order-note-popover {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 12px;
    width: auto;
    border-radius: 20px;
    z-index: 10050;
    padding: 18px;
  }

  .admin-order-note-popover p {
    max-height: 34vh;
  }

  .inventory-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .inventory-filters {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   LUHU Admin - Atajo para copiar mensaje desde la tarjeta
========================================================= */
.admin-page .admin-order-actions-v2 {
  grid-template-columns: minmax(0, 1fr) auto 40px !important;
}

.admin-page .admin-order-copy-message {
  min-height: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 40px;
  padding: 0;
  border: 1px solid rgba(201, 166, 107, .62);
  border-radius: 999px;
  background: #f6ead7;
  color: #171717;
  font-family: Inter, system-ui, sans-serif;
  font-size: .70rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.admin-page .admin-order-copy-message:hover {
  transform: none;
  background: #c9a66b;
  border-color: #c9a66b;
}

.admin-page .admin-order-copy-message span {
  display: none;
}

.admin-page .admin-order-copy-message svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 760px) {
  .admin-page .admin-order-actions-v2 {
    grid-template-columns: minmax(0, 1fr) auto 36px !important;
  }

  .admin-page .admin-order-copy-message {
    min-height: 36px;
    height: 36px;
    width: 36px;
    padding: 0;
    font-size: .64rem;
  }

  .admin-page .admin-order-copy-message span {
    display: none;
  }

  .admin-page .admin-order-copy-message svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }
}


/* =========================================================
   LUHU - Inventario unificado en header fijo y aviso de edición
========================================================= */
.mobile-inventory-header-actions,
.mobile-inventory-edit-footer {
  display: none;
}

.admin-tab-inventory .admin-header {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(16, 16, 15, .06);
}

.admin-tab-inventory .admin-header>div:nth-of-type(1) {
  min-width: 0;
}

.mobile-inventory-header-actions:not([hidden]) {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

.mobile-inventory-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  border: 1px solid #e4d6bd;
  background: #fff8ea;
  color: #6d4c18;
  padding: 9px 14px;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.mobile-inventory-action svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-inventory-entry-action,
.mobile-inventory-save-action {
  background: #176b56;
  border-color: #176b56;
  color: #fff;
}

.mobile-inventory-cancel-action {
  background: #fff1f0;
  border-color: #f1b8b3;
  color: #b42318;
}

.admin-tab-inventory .inventory-main-actions,
.admin-tab-inventory .inventory-edit-bar {
  display: none !important;
}

.mobile-inventory-edit-footer:not([hidden]) {
  position: fixed;
  left: max(18px, calc(250px + 18px));
  right: 18px;
  bottom: 14px;
  z-index: 78;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 16px;
  border: 1px solid #e6c98e;
  border-radius: 17px;
  background: rgba(255, 248, 233, .97);
  color: #735019;
  box-shadow: 0 18px 46px rgba(16, 16, 15, .18);
  backdrop-filter: blur(14px);
}

.mobile-inventory-edit-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9a66b;
  box-shadow: 0 0 0 5px rgba(201, 166, 107, .18);
}

.mobile-inventory-edit-footer div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.mobile-inventory-edit-footer strong {
  font-size: .82rem;
  line-height: 1.2;
}

.mobile-inventory-edit-footer small {
  font-size: .68rem;
  line-height: 1.25;
  color: #8a6a36;
}

body.mobile-inventory-editing #tabInventory {
  padding-bottom: 82px;
}

@media (max-width: 980px) {
  .mobile-inventory-edit-footer:not([hidden]) {
    left: 18px;
  }
}

@media (max-width: 760px) {
  .admin-tab-inventory .admin-header {
    min-height: 58px;
    margin-bottom: 10px !important;
  }

  .admin-tab-inventory .admin-header h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-inventory-header-actions:not([hidden]) {
    gap: 6px;
  }

  .mobile-inventory-action {
    min-height: 36px;
    padding: 8px 10px;
    gap: 5px;
    border-radius: 11px;
    font-size: .70rem;
  }

  .mobile-inventory-action svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  .mobile-inventory-edit-footer:not([hidden]) {
    left: 9px;
    right: 9px;
    bottom: 9px;
    padding: 10px 14px;
  }

  body.mobile-inventory-editing #tabInventory {
    padding-bottom: 76px;
  }
}

@media (max-width: 430px) {
  .admin-tab-inventory .admin-header {
    gap: 7px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .admin-tab-inventory .admin-header h1 {
    font-size: 1.16rem !important;
  }

  .mobile-inventory-action {
    padding: 7px 8px;
    font-size: .66rem;
  }
}


/* LUHU - Acciones semánticas de pedidos */
.admin-order-action-pay,
.admin-order-action-send {
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.admin-order-action-pay {
  background: #eaf6ec;
  color: #2f6f3a;
  border-color: #b9ddc0;
}

.admin-order-action-pay:hover {
  background: #d9eedf;
  border-color: #91c79d;
  color: #245b2e;
  box-shadow: 0 8px 20px rgba(47, 111, 58, .12);
}

.admin-order-action-send {
  background: #eaf1fb;
  color: #315f91;
  border-color: #bdd0e8;
}

.admin-order-action-send:hover {
  background: #dce8f7;
  border-color: #98b7db;
  color: #274e79;
  box-shadow: 0 8px 20px rgba(49, 95, 145, .12);
}

.admin-order-action-pay:focus-visible,
.admin-order-action-send:focus-visible {
  outline: 3px solid rgba(201, 166, 107, .34);
  outline-offset: 2px;
}

.admin-order-action-pay:disabled,
.admin-order-action-send:disabled {
  opacity: .58;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

@media (max-width: 760px) {

  .admin-order-action-pay,
  .admin-order-action-send {
    min-height: 42px;
  }
}


/* LUHU - Correccion final: botones principales segun siguiente estado */
.admin-page .admin-order-card .admin-order-primary.admin-order-action-pay {
  background: #e7f5ea !important;
  color: #256238 !important;
  border: 1px solid #acd5b7 !important;
  box-shadow: 0 8px 20px rgba(37, 98, 56, .10) !important;
}

.admin-page .admin-order-card .admin-order-primary.admin-order-action-pay:hover {
  background: #d4ebda !important;
  color: #1d4f2d !important;
  border-color: #82be91 !important;
}

.admin-page .admin-order-card .admin-order-primary.admin-order-action-send {
  background: #e8f0fb !important;
  color: #2c5d91 !important;
  border: 1px solid #b4cce7 !important;
  box-shadow: 0 8px 20px rgba(44, 93, 145, .10) !important;
}

.admin-page .admin-order-card .admin-order-primary.admin-order-action-send:hover {
  background: #d6e4f5 !important;
  color: #234b76 !important;
  border-color: #8eafd4 !important;
}

/* LUHU - Boton Agregar pedido manual alineado con Ingresar inventario */
.admin-page #openManualOrderBtn {
  background: #176b56 !important;
  color: #ffffff !important;
  border: 1px solid #176b56 !important;
  box-shadow: 0 8px 20px rgba(23, 107, 86, .14) !important;
}

.admin-page #openManualOrderBtn:hover {
  background: #125844 !important;
  border-color: #125844 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(23, 107, 86, .20) !important;
}

.admin-page #openManualOrderBtn:focus-visible {
  outline: 3px solid rgba(23, 107, 86, .24);
  outline-offset: 2px;
}

/* =========================================================
   LUHU - Pestañas del modal siempre en una sola fila
   Distribución proporcional al contenido en PC y móvil.
========================================================= */
.admin-page .admin-order-tabs {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.30fr) minmax(0, .75fr) !important;
  width: 100%;
  max-width: 100%;
  gap: 8px;
  overflow: hidden !important;
  padding: 10px 26px;
}

.admin-page .admin-order-tabs .admin-order-tab {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  min-height: 46px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
}

.admin-page .admin-order-tabs .admin-order-tab span {
  flex: 0 0 auto;
  margin-left: 0;
}

@media (max-width: 760px) {
  .admin-page .admin-order-tabs {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.30fr) minmax(0, .75fr) !important;
    gap: 5px;
    padding: 8px 10px;
    overflow-x: hidden !important;
  }

  .admin-page .admin-order-tabs .admin-order-tab {
    min-width: 0 !important;
    min-height: 44px;
    padding: 7px 5px;
    font-size: clamp(.66rem, 2.8vw, .78rem);
    line-height: 1.08;
  }

  .admin-page .admin-order-tabs .admin-order-tab span {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: .68rem;
  }
}

@media (max-width: 380px) {
  .admin-page .admin-order-tabs {
    gap: 4px;
    padding-inline: 8px;
  }

  .admin-page .admin-order-tabs .admin-order-tab {
    padding-inline: 3px;
    font-size: .64rem;
  }
}

/* LUHU - Ajustes operativos finales en tarjetas de pedidos */
.admin-page .admin-change-btn {
  background: #2563eb !important;
  color: #ffffff !important;
  border: 1px solid #2563eb !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, .18) !important;
}

.admin-page .admin-change-btn:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .24) !important;
}

.admin-order-card-delivery-detail {
  display: none;
}

@media (max-width: 760px) {

  .admin-page .admin-order-card .admin-order-primary.admin-order-action-pay,
  .admin-page .admin-order-card .admin-order-primary.admin-order-action-send {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: .68rem !important;
    line-height: 1.12 !important;
    letter-spacing: -.01em;
    white-space: nowrap;
  }

  .admin-order-card-delivery-detail {
    display: block;
    max-width: 100%;
    margin-top: 2px;
    color: #85817a;
    font-size: .58rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 380px) {

  .admin-page .admin-order-card .admin-order-primary.admin-order-action-pay,
  .admin-page .admin-order-card .admin-order-primary.admin-order-action-send {
    font-size: .63rem !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* LUHU - Ingreso de mercadería con submodal por modelo */
.stock-entry-header p {
  display: none
}

.stock-entry-meta-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 9px 18px;
  gap: 12px
}

.stock-entry-meta-compact label {
  font-size: .68rem;
  gap: 3px
}

.stock-entry-meta-compact input {
  min-height: 34px;
  padding: 7px 10px;
  font-size: .74rem;
  border-radius: 10px
}

.stock-entry-meta-compact .stock-entry-user span {
  font-size: .58rem
}

.stock-entry-meta-compact .stock-entry-user strong {
  font-size: .7rem;
  line-height: 1.15;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.stock-entry-body-redesigned {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.stock-entry-open-model {
  margin-top: auto;
  width: 100%;
  min-height: 52px
}

.stock-entry-summary-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden
}

.stock-entry-summary-card>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: #faf8f4;
  border-bottom: 1px solid var(--line)
}

.stock-entry-summary-card h3 {
  font-family: Syne, sans-serif;
  line-height: 1;
  font-size: 1.05rem
}

.stock-entry-summary-card header small {
  color: var(--gray);
  font-size: .7rem;
  font-weight: 800
}

.stock-entry-card-actions {
  display: flex;
  gap: 7px
}

.stock-entry-card-actions button {
  border: 0;
  border-radius: 999px;
  padding: 7px 11px;
  background: #eaf1fb;
  color: #315f91;
  font-size: .7rem;
  font-weight: 900
}

.stock-entry-card-actions button.danger {
  background: #fff1f0;
  color: #b42318
}

.stock-entry-summary-card ul {
  list-style: none;
  display: grid
}

.stock-entry-summary-card li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line)
}

.stock-entry-summary-card li:last-child {
  border-bottom: 0
}

.stock-entry-summary-card li div {
  min-width: 0;
  display: grid
}

.stock-entry-summary-card li strong {
  font-size: .8rem
}

.stock-entry-summary-card li small {
  font-size: .68rem;
  color: var(--gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.stock-entry-summary-card li em {
  font-style: normal;
  font-size: .74rem;
  font-weight: 900;
  color: #176b56
}

.stock-entry-model-modal {
  z-index: 140;
  background: rgba(16, 16, 15, .42)
}

.stock-entry-model-card {
  width: min(760px, 94vw);
  max-height: min(90vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden
}

.stock-entry-model-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line)
}

.stock-entry-model-header h2 {
  font-family: Syne, sans-serif;
  font-size: 1.55rem;
  line-height: 1
}

.stock-entry-model-header .modal-close {
  position: static;
  flex: 0 0 42px
}

.stock-entry-model-body {
  flex: 1;
  overflow: auto;
  padding: 16px 20px;
  display: grid;
  gap: 14px
}

.stock-entry-model-select {
  display: grid;
  gap: 5px;
  font-size: .76rem;
  font-weight: 900
}

.stock-entry-model-select select {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff
}

.stock-entry-model-editor {
  display: grid;
  gap: 8px
}

.stock-entry-editor-color {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff
}

.stock-entry-model-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: #fff
}

@media(max-width:760px) {
  .stock-entry-header {
    padding: 14px 16px
  }

  .stock-entry-header h2 {
    font-size: 1.45rem
  }

  .stock-entry-meta-compact {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 7px 12px;
    gap: 8px;
    align-items: center
  }

  .stock-entry-meta-compact label {
    font-size: .61rem
  }

  .stock-entry-meta-compact input {
    min-height: 31px;
    padding: 6px 8px;
    font-size: .68rem
  }

  .stock-entry-meta-compact .stock-entry-user {
    text-align: right;
    max-width: 120px
  }

  .stock-entry-meta-compact .stock-entry-user strong {
    font-size: .61rem;
    max-width: 120px
  }

  .stock-entry-body-redesigned {
    padding: 12px;
    gap: 10px
  }

  .stock-entry-open-model {
    min-height: 48px;
    font-size: .86rem
  }

  .stock-entry-summary-card>header {
    padding: 11px 12px
  }

  .stock-entry-summary-card h3 {
    font-size: .94rem
  }

  .stock-entry-card-actions button {
    padding: 6px 9px;
    font-size: .64rem
  }

  .stock-entry-summary-card li {
    padding: 8px 11px
  }

  .stock-entry-summary-card li strong {
    font-size: .74rem
  }

  .stock-entry-summary-card li small {
    font-size: .61rem
  }

  .stock-entry-summary-card li em {
    font-size: .68rem
  }

  .stock-entry-model-modal {
    padding: 0
  }

  .stock-entry-model-card {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0
  }

  .stock-entry-model-header {
    padding: 14px 16px
  }

  .stock-entry-model-header h2 {
    font-size: 1.35rem
  }

  .stock-entry-model-body {
    padding: 12px;
    gap: 10px
  }

  .stock-entry-model-footer {
    padding: 10px 12px
  }

  .stock-entry-model-footer .btn {
    padding: 11px 8px;
    font-size: .78rem
  }

  .stock-entry-editor-color summary {
    padding: 10px
  }

  .stock-entry-editor-color .stock-mobile-size-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 10px 10px
  }
}

/* =========================================================
   LUHU - Estados y filtro de comentarios internos
========================================================= */
.admin-internal-note-editor {
  display: grid;
  gap: 10px;
}

.admin-internal-note-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-internal-note-pill {
  border: 1px solid #d9d4cc;
  background: #fff;
  color: #6f6a63;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: .7rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .06em;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.admin-internal-note-pill:hover {
  transform: translateY(-1px);
}

.admin-internal-note-pill.is-urgent[aria-pressed="true"] {
  color: #9f1d16;
  border-color: #efaaa4;
  background: #fff0ef;
}

.admin-internal-note-pill.is-consider[aria-pressed="true"] {
  color: #7a5213;
  border-color: #e5c77f;
  background: #fff7df;
}

.admin-order-note-state {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: 8px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: .62rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .06em;
}

.admin-order-note-state.is-urgent {
  color: #9f1d16;
  background: #fff0ef;
  border: 1px solid #efaaa4;
}

.admin-order-note-state.is-consider {
  color: #7a5213;
  background: #fff7df;
  border: 1px solid #e5c77f;
}

.admin-order-note-btn.is-consider {
  color: #9a6a18;
  background: #fff7df;
  border-color: #e5c77f;
}

@media (max-width: 760px) {
  .admin-internal-note-pills {
    gap: 6px;
  }

  .admin-internal-note-pill {
    padding: 6px 9px;
    font-size: .62rem;
  }
}


/* =========================================================
   LUHU - Botones de retorno del carrito
   Cambio exclusivamente visual: conserva IDs y funcionalidad.
========================================================= */
.cart-header-compact #closeCart,
.cart-footer-actions #continueShopping.cart-back-btn {
  border: 1px solid #b9dfc1 !important;
  background: #edf7e9 !important;
  color: #2b6b2b !important;
  box-shadow: none !important;
}

.cart-header-compact #closeCart:hover,
.cart-footer-actions #continueShopping.cart-back-btn:hover {
  border-color: #9fcea9 !important;
  background: #e1f2dc !important;
  color: #2b6b2b !important;
  box-shadow: 0 7px 18px rgba(43, 107, 43, .12) !important;
}

.cart-header-compact #closeCart:active,
.cart-footer-actions #continueShopping.cart-back-btn:active {
  border-color: #8fc19a !important;
  background: #d8ecd3 !important;
  color: #245c27 !important;
}

.cart-header-compact #closeCart:focus-visible,
.cart-footer-actions #continueShopping.cart-back-btn:focus-visible {
  outline: 3px solid rgba(43, 107, 43, .18) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px rgba(43, 107, 43, .07) !important;
}

.cart-close-icon svg,
.cart-footer-actions #continueShopping.cart-back-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.cart-footer-actions #continueShopping.cart-back-btn span {
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}


/* =========================================================
   LUHU - Carrusel de fotografías por color
   Compatible con rutas simples y arreglos en colorImages.
========================================================= */
.product-card-gallery,
.modal-image-wrap,
.image-viewer-stage {
  position: relative;
}

.product-card-gallery {
  cursor: zoom-in;
}

.product-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 50%;
  background: rgba(16, 16, 15, .68);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}

.product-gallery-arrow:hover {
  background: rgba(16, 16, 15, .92);
  transform: translateY(-50%) scale(1.05);
}

.product-gallery-arrow svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-gallery-prev {
  left: 12px;
}

.product-gallery-next {
  right: 12px;
}

.product-gallery-dots {
  position: absolute;
  left: 50%;
  bottom: 13px;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(16, 16, 15, .48);
  backdrop-filter: blur(7px);
  transform: translateX(-50%);
}

.product-gallery-dot {
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: rgba(255, 255, 255, .55);
  transition: width .18s ease, background .18s ease;
}

.product-gallery-dot.active {
  width: 20px;
  border-radius: 999px;
  background: #fff;
}

.modal-gallery-controls,
.image-viewer-gallery-controls {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.modal-gallery-controls .product-gallery-arrow,
.modal-gallery-controls .product-gallery-dot,
.image-viewer-gallery-controls .product-gallery-arrow,
.image-viewer-gallery-controls .product-gallery-dot {
  pointer-events: auto;
}

.modal-gallery-controls[hidden],
.image-viewer-gallery-controls[hidden] {
  display: none !important;
}

.image-viewer-gallery-controls .product-gallery-prev {
  left: 18px;
}

.image-viewer-gallery-controls .product-gallery-next {
  right: 18px;
}

.image-viewer-gallery-controls .product-gallery-dots {
  bottom: 18px;
}

@media (hover: hover) {
  .product-card-gallery .product-gallery-arrow {
    opacity: 0;
  }

  .product-card-gallery:hover .product-gallery-arrow,
  .product-card-gallery:focus-within .product-gallery-arrow {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .product-gallery-arrow {
    width: 38px;
    height: 38px;
  }

  .product-gallery-prev {
    left: 9px;
  }

  .product-gallery-next {
    right: 9px;
  }

  .product-gallery-dots {
    bottom: 10px;
  }

  .image-viewer-gallery-controls .product-gallery-prev {
    left: 10px;
  }

  .image-viewer-gallery-controls .product-gallery-next {
    right: 10px;
  }
}

/* =========================================================
   LUHU - Carrito compacto solo en navegacion movil
========================================================= */
@media (max-width: 760px) {
  .nav-inner {
    column-gap: 12px;
  }

  .nav-logo {
    flex-shrink: 0;
  }

  .nav-actions {
    margin-left: auto;
    gap: 9px;
  }

  .cart-btn.icon-btn {
    min-width: 0;
    min-height: 40px;
    padding: 7px 10px;
    gap: 5px;
  }

  .cart-btn .cart-btn-text {
    font-size: .74rem;
    letter-spacing: .015em;
  }

  .cart-btn .btn-icon {
    width: 15px;
    height: 15px;
  }

  .cart-btn.icon-btn #cartCount {
    min-width: 20px;
    height: 20px;
    margin-left: 1px;
    font-size: .68rem;
  }
}

/* =========================================================
   LUHU - Contexto flotante en todos los niveles del catálogo
   y retorno visual a la tarjeta del modelo
========================================================= */
.catalog-option-card.catalog-return-highlight {
  animation: catalogReturnHighlight 1.35s ease;
}

@keyframes catalogReturnHighlight {

  0%,
  100% {
    box-shadow: none;
  }

  28%,
  72% {
    box-shadow: 0 0 0 3px rgba(72, 145, 103, .34), 0 18px 42px rgba(40, 96, 65, .14);
  }
}

@media (max-width: 760px) {
  .catalog-model-sticky.is-general .catalog-model-sticky-inner {
    grid-template-columns: 1fr;
  }

  .catalog-model-sticky.is-category .catalog-model-sticky-inner {
    grid-template-columns: 12% minmax(0, 88%);
  }

  .catalog-model-sticky.is-general .catalog-model-sticky-content,
  .catalog-model-sticky.is-category .catalog-model-sticky-content {
    grid-column: auto;
    border-radius: var(--radius);
    padding-left: 16px;
    padding-right: 16px;
  }

  .catalog-model-sticky.is-category .catalog-model-sticky-content {
    border-radius: 0 var(--radius) var(--radius) 0;
  }

  .catalog-model-sticky.is-general .catalog-model-sticky-back,
  .catalog-model-sticky.is-general .catalog-model-sticky-models-toggle,
  .catalog-model-sticky.is-category .catalog-model-sticky-models-toggle {
    display: none !important;
  }

  .catalog-model-sticky.is-category .catalog-model-sticky-back {
    display: grid !important;
    grid-column: 1;
  }

  .catalog-model-sticky.is-general .catalog-model-sticky-title,
  .catalog-model-sticky.is-category .catalog-model-sticky-title {
    font-size: 1rem;
    -webkit-line-clamp: 1;
  }
}

/* =========================================================
   LUHU - Guia de tallas como modal secundario compacto
   Refuerza la jerarquia visual sobre el modal de color.
========================================================= */
.size-guide-modal {
  padding: 28px;
  background: rgba(8, 8, 8, .56);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.size-guide-modal-card {
  width: min(720px, calc(100vw - 56px));
  max-height: min(82vh, 760px);
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
  border: 1px solid rgba(201, 166, 107, .26);
  border-radius: 20px;
  background: #fffdf8;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .38);
  transform: translateY(10px) scale(.965);
  opacity: 0;
  transition: transform .22s ease, opacity .2s ease;
}

.size-guide-modal.open .size-guide-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.size-guide-image-wrap {
  aspect-ratio: auto;
  min-height: 100%;
  max-height: none;
  background: #f4efe5;
}

.size-guide-image-wrap img {
  object-fit: contain;
  padding: 18px;
}

.size-guide-info {
  padding: 30px 28px 28px;
}

.size-guide-info h2 {
  max-width: 420px;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.02;
}

.size-guide-selector-group {
  margin-top: 18px;
}

.size-guide-table {
  margin-top: 16px;
}

.size-guide-measurement-row {
  min-height: 40px;
  padding: 8px 12px;
}

.size-guide-note {
  margin-top: 14px;
  padding: 12px;
}

.size-guide-modal .size-guide-modal-close {
  width: 38px;
  height: 38px;
  margin: 10px 10px 0 0;
}

@media (max-width: 760px) {
  .size-guide-modal {
    padding: 18px 14px;
  }

  .size-guide-modal-card {
    width: min(92vw, 560px);
    max-height: 82vh;
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .size-guide-image-wrap {
    min-height: 0;
    height: clamp(150px, 24vh, 210px);
    aspect-ratio: auto;
  }

  .size-guide-image-wrap img {
    padding: 12px 18px;
  }

  .size-guide-info {
    padding: 20px 17px 22px;
  }

  .size-guide-info h2 {
    font-size: clamp(1.45rem, 6.5vw, 2rem);
  }

  .size-guide-selector-group {
    margin-top: 15px;
  }

  .size-guide-note p {
    font-size: .79rem;
  }
}

@media (max-width: 390px) {
  .size-guide-modal {
    padding: 14px 10px;
  }

  .size-guide-modal-card {
    width: 94vw;
    max-height: 80vh;
  }

  .size-guide-image-wrap {
    height: 138px;
  }

  .size-guide-info {
    padding: 18px 14px 20px;
  }
}

/* =========================================================
   LUHU - Ajuste final de imagen en la Guia de Tallas
   La fotografia funciona como referencia compacta y no compite
   con la seleccion de talla ni con la tabla de medidas.
========================================================= */
.size-guide-image-wrap {
  min-height: 0;
  height: 230px;
  max-height: 230px;
  align-self: stretch;
  background: #f3f0ea;
  overflow: hidden;
}

.size-guide-image-wrap img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 760px) {
  .size-guide-image-wrap {
    height: 190px;
    max-height: 190px;
  }
}

@media (max-width: 390px) {
  .size-guide-image-wrap {
    height: 175px;
    max-height: 175px;
  }
}


/* =========================================================
   LUHU - Imagen vertical completa en la Guia de Tallas
   Respeta la proporcion 3:4 de la fotografia. Si el contenido
   supera la pantalla, el desplazamiento ocurre dentro del modal.
========================================================= */
.size-guide-modal-card {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.size-guide-image-wrap {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 3 / 4;
  align-self: start;
  flex-shrink: 0;
  background: #f3f0ea;
  overflow: hidden;
}

.size-guide-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 760px) {
  .size-guide-modal-card {
    max-height: 88vh;
  }

  .size-guide-image-wrap {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 390px) {
  .size-guide-modal-card {
    max-height: 86vh;
  }

  .size-guide-image-wrap {
    height: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
  }
}

/* =========================================================
   LUHU - Jerarquia clara en selector de modelos/categorias
========================================================= */
.catalog-explore-hierarchy-list {
  gap: 2px;
  padding-left: 7px;
  border-left: 1px solid rgba(201, 166, 107, .26);
  margin-left: 5px;
}

.catalog-current-models-menu .catalog-explore-model-btn,
.catalog-model-sticky-models-menu .catalog-explore-model-btn {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 7px 9px 7px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  transform: none;
}

.catalog-current-models-menu .catalog-explore-model-btn:hover,
.catalog-model-sticky-models-menu .catalog-explore-model-btn:hover {
  border-color: rgba(201, 166, 107, .18);
  background: rgba(201, 166, 107, .10);
  color: var(--white);
  transform: none;
}

.catalog-current-models-menu .catalog-explore-model-btn.is-current,
.catalog-model-sticky-models-menu .catalog-explore-model-btn.is-current {
  border-color: rgba(201, 166, 107, .34);
  background: rgba(201, 166, 107, .14);
  color: var(--accent);
}

.catalog-explore-check {
  width: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
}

.catalog-explore-item-text {
  min-width: 0;
  text-align: left;
}

@media (max-width: 760px) {
  .catalog-model-sticky.is-category .catalog-model-sticky-inner {
    grid-template-columns: 10% minmax(0, 80%) 10%;
  }

  .catalog-model-sticky.is-category .catalog-model-sticky-content {
    grid-column: 2;
    border-radius: 0;
  }

  .catalog-model-sticky.is-category .catalog-model-sticky-models-toggle {
    display: grid !important;
    grid-column: 3;
  }

  .catalog-current-models-menu .catalog-explore-model-btn,
  .catalog-model-sticky-models-menu .catalog-explore-model-btn {
    min-height: 38px;
    font-size: .72rem;
  }
}

/* =========================================================
   LUHU - Selector de categorias compacto y consistente
   La tarjeta principal y el encabezado flotante comparten
   exactamente el mismo ancho, espaciado y altura de opciones.
========================================================= */
.catalog-current-models-menu,
.catalog-model-sticky-models-menu {
  width: min(252px, calc(100vw - 32px));
  min-width: 0;
  max-width: none;
  max-height: min(420px, calc(100vh - 112px));
  padding: 10px;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.catalog-current-models-menu.is-category-menu,
.catalog-model-sticky-models-menu.is-category-menu {
  gap: 5px;
}

.catalog-current-models-menu.is-category-menu .catalog-explore-hierarchy-list,
.catalog-model-sticky-models-menu.is-category-menu .catalog-explore-hierarchy-list {
  margin-bottom: 1px;
}

.catalog-current-models-menu.is-category-menu .catalog-explore-menu-divider,
.catalog-model-sticky-models-menu.is-category-menu .catalog-explore-menu-divider {
  margin-top: 6px;
  margin-bottom: 5px;
}

.catalog-current-models-menu.is-category-menu .catalog-explore-category-btn,
.catalog-model-sticky-models-menu.is-category-menu .catalog-explore-category-btn {
  min-height: 38px;
  padding: 8px 10px;
}

@media (max-width: 760px) {

  .catalog-current-models-menu,
  .catalog-model-sticky-models-menu {
    width: min(252px, calc(100vw - 28px));
    padding: 9px;
  }

  .catalog-current-models-menu button,
  .catalog-model-sticky-models-menu button {
    min-height: 38px;
  }
}

/* =========================================================
   LUHU - Ancho movil unificado para tarjeta contextual
   La tarjeta principal usa los mismos 8 px laterales que el
   encabezado flotante, sin alterar el contenedor global.
========================================================= */
@media (max-width: 760px) {
  .catalog-intro-minimal {
    width: calc(100vw - 16px);
    max-width: none;
    margin-left: 50%;
    margin-right: 0;
    transform: translateX(-50%);
    box-sizing: border-box;
  }
}

/* =========================================================
   LUHU - Prioridad de capas del catalogo
   El navbar siempre queda por encima de tarjetas y menus contextuales.
========================================================= */
.navbar {
  z-index: 500;
}

/* La tarjeta completa se eleva solo mientras el selector esta abierto,
   pero nunca supera al navbar fijo. */
.catalog-intro-minimal {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.catalog-intro-minimal.menu-open {
  z-index: 120;
}

.catalog-intro-minimal.menu-open .catalog-current-card,
.catalog-intro-minimal.menu-open .catalog-current-models-menu {
  overflow: visible;
}

.catalog-intro-minimal.menu-open .catalog-current-models-menu {
  z-index: 122;
}

.catalog-model-sticky.menu-open {
  z-index: 130;
}

.catalog-model-sticky.menu-open .catalog-model-sticky-models-menu {
  z-index: 132;
}

.catalog-main,
.catalog-main>.container {
  overflow: visible;
}

@media (max-width: 760px) {
  .catalog-intro-minimal.menu-open {
    z-index: 120;
  }

  .catalog-current-models-menu {
    max-height: min(430px, calc(100vh - 120px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* =========================================================
   LUHU - Selector contextual unificado (tarjeta + sticky)
   Ambos menus comparten exactamente la misma caja, tipografia,
   sangria, espaciado y estados visuales. Solo cambia el anclaje.
========================================================= */
.catalog-current-models-menu,
.catalog-model-sticky-models-menu {
  width: min(252px, calc(100vw - 28px));
  min-width: 0;
  max-width: none;
  max-height: min(420px, calc(100vh - 112px));
  box-sizing: border-box;
  padding: 9px;
  gap: 4px;
  border: 1px solid rgba(201, 166, 107, .36);
  border-radius: 12px;
  background: rgba(16, 16, 15, .99);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: Inter, sans-serif;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
}

.catalog-current-models-menu .catalog-explore-menu-label,
.catalog-model-sticky-models-menu .catalog-explore-menu-label {
  margin: 0;
  padding: 3px 8px 5px;
  color: rgba(255, 255, 255, .52);
  font-family: Inter, sans-serif;
  font-size: .57rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .10em;
}

.catalog-current-models-menu .catalog-explore-models,
.catalog-current-models-menu .catalog-explore-categories,
.catalog-model-sticky-models-menu .catalog-explore-models,
.catalog-model-sticky-models-menu .catalog-explore-categories {
  display: grid;
  gap: 3px;
}

.catalog-current-models-menu .catalog-explore-hierarchy-list,
.catalog-model-sticky-models-menu .catalog-explore-hierarchy-list {
  margin: 0 0 1px 5px;
  padding-left: 7px;
  border-left: 1px solid rgba(201, 166, 107, .26);
}

.catalog-current-models-menu .catalog-explore-model-btn,
.catalog-model-sticky-models-menu .catalog-explore-model-btn {
  width: 100%;
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 7px 9px 7px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font-family: Inter, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .015em;
  text-align: left;
  text-transform: none;
  transform: none;
}

.catalog-current-models-menu .catalog-explore-model-btn.is-current,
.catalog-model-sticky-models-menu .catalog-explore-model-btn.is-current {
  border-color: rgba(201, 166, 107, .34);
  background: rgba(201, 166, 107, .14);
  color: var(--accent);
}

.catalog-current-models-menu .catalog-explore-model-btn:hover,
.catalog-model-sticky-models-menu .catalog-explore-model-btn:hover {
  border-color: rgba(201, 166, 107, .18);
  background: rgba(201, 166, 107, .10);
  color: var(--white);
  transform: none;
}

.catalog-current-models-menu .catalog-explore-check,
.catalog-model-sticky-models-menu .catalog-explore-check {
  width: 18px;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
}

.catalog-current-models-menu .catalog-explore-item-text,
.catalog-model-sticky-models-menu .catalog-explore-item-text {
  min-width: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: left;
  text-transform: none;
  letter-spacing: inherit;
}

.catalog-current-models-menu .catalog-explore-menu-divider,
.catalog-model-sticky-models-menu .catalog-explore-menu-divider {
  display: block;
  height: 1px;
  margin: 6px 4px 5px;
  background: rgba(201, 166, 107, .25);
}

.catalog-current-models-menu .catalog-explore-category-btn,
.catalog-model-sticky-models-menu .catalog-explore-category-btn {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(201, 166, 107, .38);
  border-radius: 8px;
  background: rgba(201, 166, 107, .12);
  color: var(--accent);
  font-family: Inter, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .015em;
  text-align: left;
  text-transform: none;
  transform: none;
}

.catalog-current-models-menu .catalog-explore-category-btn strong,
.catalog-model-sticky-models-menu .catalog-explore-category-btn strong {
  color: inherit;
  font: inherit;
  font-weight: 900;
  text-transform: none;
  letter-spacing: inherit;
}

.catalog-current-models-menu .catalog-explore-category-btn:hover,
.catalog-model-sticky-models-menu .catalog-explore-category-btn:hover {
  background: var(--accent);
  color: var(--black);
  transform: none;
}

/* Mismo desplazamiento desde el borde derecho de cada disparador. */
.catalog-intro-minimal.has-back .catalog-current-models-menu,
.catalog-model-sticky-models-menu {
  top: calc(100% + 8px);
  right: 0;
}

@media (max-width: 390px) {

  .catalog-current-models-menu,
  .catalog-model-sticky-models-menu {
    width: min(252px, calc(100vw - 20px));
  }
}

/* =========================================================
   LUHU - Opciones del selector en una sola linea
   Evita que categorias y modelos se partan dentro del menu
   abierto desde la tarjeta principal o el encabezado flotante.
========================================================= */
.catalog-current-models-menu .catalog-explore-item-text,
.catalog-model-sticky-models-menu .catalog-explore-item-text {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog-current-models-menu .catalog-explore-model-btn,
.catalog-model-sticky-models-menu .catalog-explore-model-btn {
  min-width: 0;
}

@media (max-width: 390px) {

  .catalog-current-models-menu .catalog-explore-model-btn,
  .catalog-model-sticky-models-menu .catalog-explore-model-btn {
    font-size: .69rem;
    letter-spacing: 0;
  }
}

/* =========================================================
   LUHU - Correccion del ancho interno de opciones del selector
   Evita que la regla general de la tarjeta principal fuerce los
   spans del menu a la primera columna y recorte sus nombres.
========================================================= */
.catalog-intro-minimal .catalog-current-models-menu .catalog-explore-check,
.catalog-intro-minimal .catalog-current-models-menu .catalog-explore-item-text {
  grid-column: auto !important;
  grid-row: auto !important;
}

.catalog-current-models-menu .catalog-explore-model-btn,
.catalog-model-sticky-models-menu .catalog-explore-model-btn {
  grid-template-columns: 18px minmax(0, 1fr);
  width: 100%;
}

.catalog-current-models-menu .catalog-explore-item-text,
.catalog-model-sticky-models-menu .catalog-explore-item-text {
  width: auto;
  max-width: none;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* =========================================================
   LUHU - Menor separacion entre navbar y tarjeta contextual
   Solo movil: optimiza el espacio superior del catalogo.
========================================================= */
@media (max-width: 760px) {
  .catalog-main {
    padding-top: 12px;
  }

  .catalog-intro-minimal {
    margin-top: 0;
  }
}

/* =========================================================
   LUHU - Texto informativo mas compacto en tarjetas principales
========================================================= */
.catalog-intro-minimal .catalog-current-card p {
  font-size: .82rem;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .catalog-intro-minimal .catalog-current-card p {
    font-size: .80rem;
    line-height: 1.42;
  }
}

/* =========================================================
   LUHU - Menu movil directo por jerarquia de catalogo
========================================================= */
.mobile-catalog-tree {
  display: none;
}

@media (max-width: 760px) {
  .nav-links {
    display: flex !important;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    max-height: calc(100dvh - 68px);
    padding: 14px 16px 22px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(13, 13, 12, .985);
    border-bottom: 1px solid rgba(201, 166, 107, .24);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .28);
    font-family: "Inter", sans-serif;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity 160ms ease,
      transform 160ms ease,
      visibility 0s linear 160ms;
  }

  .navbar.open .nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 160ms ease,
      transform 160ms ease,
      visibility 0s;
  }

  .nav-links>.desktop-nav-item {
    display: none !important;
  }

  .mobile-catalog-tree {
    display: grid;
    width: 100%;
    gap: 14px;
    font-family: "Inter", sans-serif;
  }

  .mobile-catalog-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(201, 166, 107, .52);
    border-radius: 11px;
    color: var(--accent) !important;
    background: rgba(201, 166, 107, .08);
    font: 700 .78rem/1.2 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .055em;
  }

  .mobile-catalog-group {
    display: grid;
    gap: 6px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
  }

  .mobile-catalog-group:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .mobile-catalog-category {
    display: block;
    padding: 2px 4px 4px;
    color: var(--accent) !important;
    font: 700 .76rem/1.25 "Inter", sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .mobile-catalog-models {
    display: grid;
    gap: 1px;
    padding-left: 14px;
    border-left: 1px solid rgba(201, 166, 107, .34);
  }

  .mobile-catalog-models a {
    display: block;
    min-height: 34px;
    padding: 8px 10px;
    border-radius: 8px;
    color: rgba(255, 255, 255, .86) !important;
    font: 500 .82rem/1.25 "Inter", sans-serif;
    letter-spacing: 0;
    text-transform: none;
  }

  .mobile-catalog-all:active,
  .mobile-catalog-category:active,
  .mobile-catalog-models a:active {
    background: rgba(201, 166, 107, .14);
  }

  #menuToggle {
    width: 48px;
    min-width: 48px;
    gap: 4px;
    color: rgba(255, 255, 255, .92);
    transition:
      color 160ms ease,
      background-color 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }

  #menuToggle .nav-toggle-lines {
    display: grid;
    width: 21px;
    height: auto;
    gap: 4px;
    margin: 0;
    flex: 0 0 21px;
    background: transparent;
  }

  #menuToggle .nav-toggle-lines>span {
    display: block;
    width: 21px;
    height: 2px;
    margin: 0;
    flex: 0 0 2px;
    border-radius: 999px;
    background: currentColor;
  }

  #menuToggle .nav-toggle-state {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    flex: 0 0 auto;
    color: currentColor;
    background: transparent;
    font: 800 .58rem/1 "Inter", sans-serif;
    transform: rotate(0deg);
    transform-origin: center;
    transition: transform 160ms ease;
  }

  #menuToggle[aria-expanded="true"] {
    color: #17140e;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(201, 166, 107, .14);
  }

  #menuToggle[aria-expanded="true"] .nav-toggle-state {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  .nav-links,
  #menuToggle,
  #menuToggle .nav-toggle-state {
    transition: none !important;
  }
}

/* =========================================================
   LUHU - Ajuste final del menu movil y jerarquia de modales
   1) Icono hamburguesa mas pequeno y compacto.
   2) Menu movil claramente delimitado en su borde inferior.
   3) Todos los modales se muestran por encima del navbar fijo.
========================================================= */
@media (max-width: 760px) {
  #menuToggle.nav-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex: 0 0 42px;
    padding: 7px 8px 6px;
    gap: 2px;
    border-radius: 11px;
  }

  #menuToggle .nav-toggle-lines {
    gap: 2px;
  }

  #menuToggle .nav-toggle-lines>span {
    width: 17px;
    height: 2px;
  }

  #menuToggle .nav-toggle-state {
    margin-top: 0;
    font-size: .43rem;
    line-height: .8;
  }

  .nav-links {
    background: rgba(13, 13, 12, .99);
    border: 1px solid rgba(201, 166, 107, .34);
    border-top: 0;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .30);
  }

  .nav-links::after {
    content: "";
    display: block;
    width: calc(100% - 24px);
    height: 1px;
    flex: 0 0 1px;
    margin: 16px auto 0;
    background: rgba(201, 166, 107, .42);
  }
}

/* El navbar domina el contenido normal, pero nunca un modal abierto. */
.navbar {
  z-index: 500 !important;
}

/* La capa de fondo tambien cubre el navbar mientras haya una ventana modal. */
.overlay {
  z-index: 5000 !important;
}

/* Modal de color y confirmacion de pedido. */
.product-modal,
.order-success-modal {
  z-index: 5100 !important;
}

/* La guia de tallas puede abrirse encima del modal de color. */
.size-guide-modal {
  z-index: 5200 !important;
}

/* El visor ampliado siempre queda en la capa superior. */
.product-image-viewer {
  z-index: 5300 !important;
}

/* Mantiene el desplazamiento dentro del modal y evita mover la pagina de fondo. */
.product-modal-card,
.size-guide-modal-card,
.order-success-card {
  overscroll-behavior: contain;
}

/* =========================================================
   LUHU - Area tactil ampliada y centrado del menu movil
   El boton conserva su apariencia compacta, pero acepta el toque
   en todo su contorno y en un margen invisible adicional.
========================================================= */
@media (max-width: 760px) {
  #menuToggle.nav-toggle {
    position: relative;
    overflow: visible;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Margen tactil adicional sin aumentar el espacio del navbar. */
  #menuToggle.nav-toggle::before {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: 1;
    border-radius: 15px;
    background: transparent;
    pointer-events: auto;
  }

  /* Las barras quedan centradas respecto de toda la superficie visible. */
  #menuToggle .nav-toggle-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: auto;
    gap: 2px;
    margin: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  #menuToggle .nav-toggle-lines>span {
    width: 18px;
    height: 2px;
    flex: 0 0 2px;
    margin: 0;
    pointer-events: none;
  }

  /* La flecha no desplaza las barras; solo indica el estado. */
  #menuToggle .nav-toggle-state {
    position: absolute;
    left: 50%;
    bottom: 3px;
    z-index: 2;
    margin: 0;
    transform: translateX(-50%) rotate(0deg);
    transform-origin: center;
    pointer-events: none;
  }

  #menuToggle[aria-expanded="true"] .nav-toggle-state {
    transform: translateX(-50%) rotate(180deg);
  }
}

/* =========================================================
   LUHU - Jerarquia de capas corregida para carrito y modales
   El overlay oscurece el fondo, pero nunca bloquea el carrito.
========================================================= */
.navbar {
  z-index: 500 !important;
}

.overlay {
  z-index: 1000 !important;
}

.cart-panel {
  z-index: 1100 !important;
}

.product-modal,
.order-success-modal {
  z-index: 5100 !important;
}

.size-guide-modal {
  z-index: 5200 !important;
}

.product-image-viewer {
  z-index: 5300 !important;
}


/* =========================================================
   LUHU - Guia de tallas sin imagen y tabla tipografica limpia
========================================================= */
.size-guide-modal-card {
  width: min(540px, calc(100vw - 32px));
  grid-template-columns: minmax(0, 1fr);
}

.size-guide-info {
  width: 100%;
  padding: 28px 26px 26px;
}

.size-guide-table-head {
  padding: 10px 12px;
  font-family: Inter, system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .065em;
}

.size-guide-measurement-row {
  min-height: 38px;
  padding: 8px 12px;
  gap: 14px;
}

.size-guide-measurement-row span {
  font-family: Inter, system-ui, sans-serif;
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 700;
}

.size-guide-measurement-row strong {
  flex: 0 0 auto;
  font-family: Inter, system-ui, sans-serif;
  font-size: .84rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .size-guide-modal-card {
    width: min(94vw, 520px);
  }

  .size-guide-info {
    padding: 22px 16px 20px;
  }

  .size-guide-measurement-row span {
    font-size: .78rem;
  }

  .size-guide-measurement-row strong {
    font-size: .80rem;
  }
}

/* =========================================================
   LUHU - Animacion suave de la talla activa
   Ayuda a comunicar que las pastillas de talla son interactivas.
========================================================= */
#sizeGuideSizeOptions .selector-btn.active {
  z-index: 2;
  animation: luhuSizeGuidePulse 1.8s ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}

@keyframes luhuSizeGuidePulse {

  0%,
  100% {
    transform: scale(1.06);
  }

  50% {
    transform: scale(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  #sizeGuideSizeOptions .selector-btn.active {
    animation: none;
    transform: scale(1.08);
  }
}


/* =========================================================
   LUHU - Navbar movil simplificado
   Se oculta el carrito del encabezado movil y el menu se presenta
   como un boton rectangular identificado como "Categorias".
========================================================= */
@media (max-width: 760px) {
  .nav-actions .cart-btn {
    display: none !important;
  }

  #menuToggle.nav-toggle {
    position: relative;
    width: auto;
    min-width: 126px;
    height: 42px;
    flex: 0 0 auto;
    display: inline-grid;
    grid-template-columns: 20px auto 12px;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    padding: 0 11px;
    overflow: visible;
    color: rgba(255, 255, 255, .94);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 8px;
  }

  #menuToggle.nav-toggle::before {
    inset: -3px;
    border-radius: 10px;
  }

  #menuToggle .nav-toggle-lines {
    position: static;
    width: 20px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    margin: 0;
    transform: none;
    pointer-events: none;
  }

  #menuToggle .nav-toggle-lines>span {
    width: 19px;
    height: 2px;
    flex: 0 0 2px;
    margin: 0;
    border-radius: 2px;
  }

  #menuToggle .nav-toggle-label {
    display: block;
    width: auto;
    height: auto;
    color: currentColor;
    background: transparent;
    font: 800 .72rem/1 "Inter", sans-serif;
    letter-spacing: .035em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
  }

  #menuToggle .nav-toggle-state {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    color: currentColor;
    background: transparent;
    font: 800 .62rem/1 "Inter", sans-serif;
    transform: rotate(0deg);
    transform-origin: center;
    pointer-events: none;
  }

  #menuToggle[aria-expanded="true"] .nav-toggle-state {
    transform: rotate(180deg);
  }

  /* Esquinas mas rectas dentro del menu desplegable movil. */
  .mobile-catalog-all,
  .mobile-catalog-category,
  .mobile-catalog-models a {
    border-radius: 6px;
  }
}


/* =========================================================
   LUHU - Categoria movil: modelos en dos columnas
   y contador sutil de modelos en la cabecera.
========================================================= */
.catalog-model-count {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid rgba(201, 166, 107, .36);
  border-radius: 7px;
  background: rgba(201, 166, 107, .08);
  color: rgba(255, 255, 255, .72) !important;
  font-family: Inter, system-ui, sans-serif;
  font-size: .58rem !important;
  font-weight: 800 !important;
  line-height: 1;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}

.catalog-model-count[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .products-grid.catalog-grid-models {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .catalog-grid-models .catalog-option-card {
    min-height: 265px;
    border-radius: 18px;
  }

  .catalog-grid-models .catalog-option-card>span:not(.model-card-size-guide) {
    top: 10px;
    left: 10px;
    padding: 5px 8px;
    font-size: .54rem;
    letter-spacing: .05em;
  }

  .catalog-grid-models .catalog-option-card>.model-card-size-guide {
    top: 10px;
    right: 10px !important;
    min-height: 25px;
    max-width: calc(100% - 20px);
    gap: 4px;
    padding: 5px 7px;
    border-radius: 8px;
    font-size: .52rem;
    letter-spacing: 0;
  }

  .catalog-grid-models .catalog-option-card>.model-card-size-guide svg {
    width: 11px;
    height: 11px;
  }

  .catalog-grid-models .catalog-option-card>div {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .catalog-grid-models .catalog-option-card h3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.1em;
    margin-bottom: 7px;
    font-size: .98rem;
    line-height: 1.05;
  }

  .catalog-grid-models .catalog-option-card small {
    max-width: 100%;
    padding: 5px 7px;
    border-radius: 7px;
    font-size: .52rem;
    line-height: 1.15;
    white-space: normal;
  }

  #catalogCurrentCard[data-catalog-level="category"] .catalog-current-content {
    display: grid;
    align-content: center;
    gap: 4px;
  }

  #catalogCurrentCard[data-catalog-level="category"] .catalog-model-count {
    margin-top: 1px;
  }
}

@media (max-width: 360px) {
  .products-grid.catalog-grid-models {
    grid-template-columns: 1fr;
  }

  .catalog-grid-models .catalog-option-card {
    min-height: 290px;
  }
}

\n\n

/* =========================================================
   LUHU - Tarjetas de modelo: nombres por palabra y proporcion 3:4
========================================================= */
.products-grid.catalog-grid-models .catalog-option-card {
  width: 100%;
  min-height: 0;
  aspect-ratio: 3 / 4;
}

.catalog-grid-models .model-card-name {
  display: grid;
  gap: 0;
}

.catalog-grid-models .model-card-name>span {
  display: block;
}

@media (max-width: 760px) {
  .catalog-grid-models .catalog-option-card {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .catalog-grid-models .catalog-option-card h3.model-card-name {
    display: grid;
    min-height: 0;
    overflow: visible;
    -webkit-line-clamp: unset;
    margin-bottom: 7px;
    line-height: 1.02;
  }

  .catalog-grid-models .catalog-option-card small {
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .catalog-grid-models .catalog-option-card {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }
}

/* =========================================================
   LUHU - Refinamiento visual del catalogo
   Menos redondeo, controles secundarios discretos y tarjetas limpias.
========================================================= */

/* Forma mas rectangular en todos los niveles del catalogo. */
.catalog-intro-minimal .catalog-current-card,
.catalog-model-sticky-inner,
.catalog-option-card,
.color-product-card,
.color-product-image,
.catalog-current-models-menu,
.catalog-model-sticky-models-menu,
.catalog-explore-model-btn,
.catalog-explore-category-btn {
  border-radius: 10px !important;
}

/* El boton Medidas queda como accion secundaria sobre la fotografia. */
.catalog-option-card>.model-card-size-guide {
  min-height: 25px;
  padding: 5px 8px;
  gap: 4px;
  border-radius: 6px !important;
  background: rgba(16, 16, 15, .66) !important;
  border-color: rgba(255, 255, 255, .20) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12) !important;
  backdrop-filter: blur(5px);
  font-family: Inter, system-ui, sans-serif;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.catalog-option-card>.model-card-size-guide svg {
  width: 10px;
  height: 10px;
}

/* Nombre a la izquierda y cantidad de colores a la derecha. */
.catalog-grid-models .catalog-option-card>div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.catalog-grid-models .catalog-option-card h3.model-card-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.catalog-grid-models .catalog-option-card small {
  flex: 0 0 auto;
  margin: 0 0 1px;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 5px !important;
  background: rgba(245, 243, 239, .80) !important;
  color: #242321 !important;
  box-shadow: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: .48rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .catalog-option-card>.model-card-size-guide {
    top: 8px;
    right: 8px !important;
    min-height: 23px;
    padding: 4px 7px;
    font-size: .49rem;
  }

  .catalog-grid-models .catalog-option-card>div {
    left: 10px;
    right: 10px;
    bottom: 10px;
    gap: 6px;
  }

  .catalog-grid-models .catalog-option-card h3.model-card-name {
    font-size: .94rem;
    line-height: .98;
  }

  .catalog-grid-models .catalog-option-card small {
    padding: 4px 5px;
    font-size: .44rem;
  }

  /* Cabecera principal y flotante mas rectangulares en movil. */
  .catalog-intro-minimal .catalog-current-card,
  .catalog-model-sticky-inner {
    border-radius: 9px !important;
  }
}

/* =========================================================
   LUHU - Unificacion visual de la tarjeta contextual movil
   El boton volver, la informacion y el selector forman una sola pieza.
========================================================= */
@media (max-width: 760px) {
  .catalog-intro-minimal.has-back {
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(201, 166, 107, .30) !important;
    border-radius: 9px !important;
    background: var(--black) !important;
  }

  .catalog-intro-minimal.has-back .catalog-floating-back,
  .catalog-intro-minimal.has-back .catalog-current-card,
  .catalog-intro-minimal.has-back .catalog-current-models-toggle {
    margin: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
  }

  .catalog-intro-minimal.has-back .catalog-floating-back {
    border: 0 !important;
    border-right: 1px solid rgba(201, 166, 107, .30) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(201, 166, 107, .08), rgba(255, 255, 255, .015)) !important;
  }

  .catalog-intro-minimal.has-back .catalog-current-card {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  .catalog-intro-minimal.has-back .catalog-current-models-toggle {
    border: 0 !important;
    border-left: 1px solid rgba(201, 166, 107, .30) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(201, 166, 107, .08), rgba(255, 255, 255, .015)) !important;
  }

  .catalog-intro-minimal.has-back .catalog-floating-back:hover,
  .catalog-intro-minimal.has-back .catalog-floating-back:active,
  .catalog-intro-minimal.has-back .catalog-current-models-toggle:hover,
  .catalog-intro-minimal.has-back .catalog-current-models-toggle[aria-expanded="true"] {
    background: rgba(201, 166, 107, .14) !important;
  }
}

/* =========================================================
   LUHU - Tarjeta contextual movil simple y unificada
   Una sola caja visual con tres zonas separadas por lineas doradas,
   sin fondo adicional detras de los controles.
========================================================= */
@media (max-width: 760px) {

  /* El contenedor solo distribuye: no dibuja una cuarta caja detras. */
  .catalog-intro-minimal.has-back {
    display: grid !important;
    grid-template-columns: 20% minmax(0, 80%) !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Zona izquierda: comparte fondo y borde con la zona principal. */
  .catalog-intro-minimal.has-back .catalog-floating-back {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 112px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    border: 1px solid rgba(201, 166, 107, .34) !important;
    border-right: 0 !important;
    border-radius: 9px 0 0 9px !important;
    background: var(--black) !important;
    box-shadow: none !important;
  }

  /* Zona central + derecha: segunda mitad de la misma caja visual. */
  .catalog-intro-minimal.has-back .catalog-current-card {
    display: grid !important;
    grid-template-columns: 75% 25% !important;
    grid-template-rows: minmax(112px, auto) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    border: 1px solid rgba(201, 166, 107, .34) !important;
    border-left: 1px solid rgba(201, 166, 107, .34) !important;
    border-radius: 0 9px 9px 0 !important;
    background: var(--black) !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Contenido central sin caja propia. */
  .catalog-intro-minimal.has-back .catalog-current-content {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    padding: 15px 12px 15px 16px !important;
    background: transparent !important;
    border: 0 !important;
  }

  /* Zona derecha separada solo por una linea dorada. */
  .catalog-intro-minimal.has-back .catalog-current-models-toggle {
    position: relative !important;
    inset: auto !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: stretch !important;
    border: 0 !important;
    border-left: 1px solid rgba(201, 166, 107, .34) !important;
    border-radius: 0 8px 8px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .catalog-intro-minimal.has-back .catalog-floating-back:hover,
  .catalog-intro-minimal.has-back .catalog-floating-back:active,
  .catalog-intro-minimal.has-back .catalog-current-models-toggle:hover,
  .catalog-intro-minimal.has-back .catalog-current-models-toggle[aria-expanded="true"] {
    background: rgba(201, 166, 107, .10) !important;
  }

  /* Evita que Medidas altere la altura o sobresalga de la caja. */
  .catalog-intro-minimal.has-back .catalog-current-size-guide {
    position: static !important;
    justify-self: start !important;
    margin-top: 2px !important;
  }
}

/* =========================================================
   LUHU - Igualar forma rectangular de cabeceras del catalogo movil
   La tarjeta principal y los encabezados flotantes usan el mismo radio.
========================================================= */
@media (max-width: 760px) {

  .catalog-intro-minimal .catalog-current-card,
  .catalog-model-sticky,
  .catalog-model-sticky-inner {
    border-radius: 9px !important;
  }

  /* Vista general: una sola pieza con el mismo radio de la tarjeta principal. */
  .catalog-model-sticky.is-general .catalog-model-sticky-content {
    border-radius: 9px !important;
  }

  /* Vistas de categoria y modelo: extremos rectangulares y centro sin redondeo. */
  .catalog-model-sticky-back {
    border-radius: 9px 0 0 9px !important;
  }

  .catalog-model-sticky-content,
  .catalog-model-sticky.is-category .catalog-model-sticky-content {
    border-radius: 0 !important;
  }

  .catalog-model-sticky-models-toggle {
    border-radius: 0 9px 9px 0 !important;
  }
}

/* =========================================================
   LUHU - Catálogo general: tarjetas de categoría horizontales
   Proporción 4:3, etiquetas rectangulares y jerarquía secundaria.
========================================================= */
.products-grid.catalog-grid-categories .catalog-category-card {
  width: 100%;
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.products-grid.catalog-grid-categories .catalog-category-card>.catalog-category-badge {
  border-radius: 5px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, .88);
  color: #282725;
  font-size: .62rem;
  letter-spacing: .06em;
}

.products-grid.catalog-grid-categories .catalog-category-card>div {
  left: 18px;
  right: 18px;
  bottom: 18px;
}

.products-grid.catalog-grid-categories .catalog-category-card h3 {
  margin-bottom: 6px;
}

.products-grid.catalog-grid-categories .catalog-category-description {
  max-width: 34rem;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .68);
  font-size: .78rem;
  line-height: 1.35;
}

.products-grid.catalog-grid-categories .catalog-category-model-count {
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 5px;
  background: rgba(28, 28, 27, .58);
  color: rgba(255, 255, 255, .76);
  box-shadow: none;
  backdrop-filter: blur(5px);
  font-family: Inter, system-ui, sans-serif;
  font-size: .56rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .035em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .products-grid.catalog-grid-categories .catalog-category-card {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .products-grid.catalog-grid-categories .catalog-category-card>.catalog-category-badge {
    top: 12px;
    left: 12px;
    padding: 4px 7px;
    border-radius: 4px;
    font-size: .54rem;
  }

  .products-grid.catalog-grid-categories .catalog-category-card>div {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .products-grid.catalog-grid-categories .catalog-category-card h3 {
    font-size: 1.32rem;
  }

  .products-grid.catalog-grid-categories .catalog-category-description {
    margin-bottom: 7px;
    font-size: .68rem;
    line-height: 1.3;
  }

  .products-grid.catalog-grid-categories .catalog-category-model-count {
    padding: 4px 6px;
    border-radius: 4px;
    font-size: .50rem;
  }
}


/* =========================================================
   LUHU - Zona de modelos a ancho completo en dos columnas
   El grid usa exactamente el mismo ancho del contenedor de la
   tarjeta principal y reparte ese espacio en dos mitades iguales.
========================================================= */
.products-grid.catalog-grid-models {
  display: grid;
  width: 100%;
  max-width: none;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(12px, 1.8vw, 18px);
  justify-items: stretch;
  align-items: stretch;
}

.products-grid.catalog-grid-models .catalog-option-card {
  width: 100%;
  min-width: 0;
  max-width: none;
  justify-self: stretch;
}

@media (max-width: 760px) {
  .products-grid.catalog-grid-models {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
}

@media (max-width: 360px) {
  .products-grid.catalog-grid-models {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
}

/* =========================================================
   LUHU - Modelos a todo el ancho disponible en movil
   Iguala el ancho del grid con la tarjeta contextual principal.
   No modifica la distribucion de escritorio.
========================================================= */
@media (max-width: 760px) {
  .catalog-main .products-grid.catalog-grid-models {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%);
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    box-sizing: border-box;
  }

  .catalog-main .products-grid.catalog-grid-models .catalog-option-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 360px) {
  .catalog-main .products-grid.catalog-grid-models {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* =========================================================
   LUHU - Nivel modelo a todo el ancho disponible en movil
   La zona de colores usa el mismo ancho visual que la tarjeta
   contextual principal y conserva dos columnas. Escritorio intacto.
========================================================= */
@media (max-width: 760px) {
  .catalog-main .products-grid.catalog-grid-colors {
    width: calc(100vw - 16px) !important;
    max-width: none !important;
    margin-left: 50% !important;
    margin-right: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%);
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    box-sizing: border-box;
  }

  .catalog-main .products-grid.catalog-grid-colors .color-filter-bar,
  .catalog-main .products-grid.catalog-grid-colors .color-cards-continuous-grid {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .catalog-main .products-grid.catalog-grid-colors .color-cards-continuous-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  .catalog-main .products-grid.catalog-grid-colors .color-product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 360px) {
  .catalog-main .products-grid.catalog-grid-colors .color-cards-continuous-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

/* =========================================================
   LUHU - Paleta profesional y limpia para el carrito
   Base neutra; rojo reservado para acciones destructivas.
========================================================= */
.cart-panel {
  --cart-bg: #f6f6f3;
  --cart-surface: #ffffff;
  --cart-surface-soft: #f1f1ee;
  --cart-ink: #171715;
  --cart-muted: #77756f;
  --cart-line: #dddcd6;
  --cart-line-strong: #c9c7bf;
  --cart-accent-soft: #eee9df;
  --cart-danger: #b42318;
  --cart-danger-soft: #fff3f2;
  --cart-danger-line: #efb7b2;
  background: var(--cart-bg) !important;
  color: var(--cart-ink) !important;
}

.cart-panel .cart-header,
.cart-panel .cart-footer {
  border-color: var(--cart-line-strong) !important;
}

/* Cabecera informativa */
.cart-header-stats {
  gap: 5px !important;
}

.cart-header-stats .cart-top-box {
  background: var(--cart-surface) !important;
  border: 1px solid var(--cart-line) !important;
  color: var(--cart-ink) !important;
  box-shadow: none !important;
}

.cart-header-stats .cart-top-brand {
  background: var(--cart-ink) !important;
  border-color: var(--cart-ink) !important;
  color: #fff !important;
}

.cart-header-stats .cart-top-box span {
  color: var(--cart-muted) !important;
}

.cart-header-stats .cart-top-brand span,
.cart-header-stats .cart-top-brand strong {
  color: #fff !important;
}

.cart-header-stats .cart-top-box strong {
  color: var(--cart-ink) !important;
}

.cart-header-stats .cart-top-zone,
.cart-header-stats .cart-top-zone.zone-empty,
.cart-header-stats .cart-top-zone.zone-basica,
.cart-header-stats .cart-top-zone.zone-luhu,
.cart-header-stats .cart-top-zone.zone-emprendedor {
  background: var(--cart-surface-soft) !important;
  border-color: var(--cart-line) !important;
  color: var(--cart-ink) !important;
}

/* Cerrar y regresar son navegacion: permanecen neutros. */
.cart-header-compact #closeCart,
.cart-footer-actions #continueShopping.cart-back-btn {
  border: 1px solid var(--cart-line-strong) !important;
  background: var(--cart-surface) !important;
  color: var(--cart-ink) !important;
  box-shadow: none !important;
}

.cart-header-compact #closeCart:hover,
.cart-footer-actions #continueShopping.cart-back-btn:hover {
  border-color: #aaa79f !important;
  background: var(--cart-surface-soft) !important;
  color: #000 !important;
  box-shadow: none !important;
}

.cart-header-compact #closeCart:active,
.cart-footer-actions #continueShopping.cart-back-btn:active {
  border-color: #8e8b84 !important;
  background: #e7e6e1 !important;
  color: #000 !important;
}

.cart-header-compact #closeCart:focus-visible,
.cart-footer-actions #continueShopping.cart-back-btn:focus-visible {
  outline: 3px solid rgba(23, 23, 21, .14) !important;
  box-shadow: none !important;
}

/* Productos */
.cart-scroll-area {
  background: transparent !important;
}

.cart-items .cart-item.cart-item-modern.cart-item-compact {
  background: var(--cart-surface) !important;
  border-color: var(--cart-line) !important;
  box-shadow: none !important;
}

.cart-items .cart-item-compact .cart-item-image-wrap {
  background: var(--cart-surface-soft) !important;
  border-color: var(--cart-line) !important;
}

.cart-items .cart-item-compact .cart-product-name,
.cart-items .cart-item-compact .cart-product-price,
.cart-items .cart-item-compact .cart-subtotal-row strong {
  color: var(--cart-ink) !important;
}

.cart-items .cart-item-compact .cart-product-variant,
.cart-items .cart-item-compact .cart-subtotal-row span {
  color: var(--cart-muted) !important;
}

.cart-items .cart-item-compact .cart-item-color {
  color: #4e4c47 !important;
}

.cart-items .cart-item-compact .cart-remove-zone {
  border-left-color: var(--cart-line) !important;
}

.cart-qty-control,
.cart-qty-control.cart-qty-control-vertical {
  background: var(--cart-surface-soft) !important;
  border-color: var(--cart-line) !important;
}

.cart-qty-control button,
.cart-qty-control span {
  color: var(--cart-ink) !important;
  background: transparent !important;
}

.cart-qty-control button:not(:disabled):hover {
  background: #e4e3de !important;
}

/* Rojo unicamente para eliminar. */
.cart-item-compact .cart-remove-zone .trash-btn,
.cart-items .cart-item-compact .cart-remove-zone .trash-btn,
.cart-scroll-actions .cart-clear-btn,
.cart-scroll-area .cart-clear-btn {
  background: var(--cart-danger-soft) !important;
  border-color: var(--cart-danger-line) !important;
  color: var(--cart-danger) !important;
  box-shadow: none !important;
}

.cart-item-compact .cart-remove-zone .trash-btn:hover,
.cart-items .cart-item-compact .cart-remove-zone .trash-btn:hover,
.cart-scroll-actions .cart-clear-btn:hover,
.cart-scroll-area .cart-clear-btn:hover {
  background: #ffe8e5 !important;
  border-color: #df8f88 !important;
  color: #941b13 !important;
}

/* Acciones secundarias sin verde. */
.cart-scroll-actions .cart-continue-btn,
.cart-scroll-actions .cart-empty-shop-btn {
  border-color: var(--cart-line-strong) !important;
  background: var(--cart-surface) !important;
  color: var(--cart-ink) !important;
  box-shadow: none !important;
}

.cart-scroll-actions .cart-continue-btn:hover,
.cart-scroll-actions .cart-empty-shop-btn:hover {
  background: var(--cart-surface-soft) !important;
  border-color: #aaa79f !important;
  color: #000 !important;
}

/* Datos del cliente */
.cart-fixed-customer,
.cart-fixed-customer.has-valid-data,
.cart-fixed-customer.is-confirmed {
  background: var(--cart-surface) !important;
  border-color: var(--cart-line-strong) !important;
  box-shadow: none !important;
}

.cart-fixed-customer .cart-customer-head strong {
  color: var(--cart-ink) !important;
}

.cart-fixed-customer .customer-form label,
.customer-name-field>label {
  color: var(--cart-muted) !important;
}

.cart-fixed-customer .customer-form input,
.cart-fixed-customer.is-confirmed .customer-name-control input {
  background: #fff !important;
  border-color: var(--cart-line) !important;
  color: var(--cart-ink) !important;
  box-shadow: none !important;
}

.cart-fixed-customer .customer-form input:focus,
.cart-fixed-customer.is-confirmed .customer-name-control input:focus {
  border-color: #77756f !important;
  box-shadow: 0 0 0 3px rgba(23, 23, 21, .08) !important;
}

.customer-data-valid-icon,
.cart-fixed-customer.is-confirmed .customer-data-valid-icon,
.cart-fixed-customer.is-confirmed .customer-data-ready-btn,
.cart-fixed-customer.has-valid-data .customer-data-ready-btn:not(:disabled) {
  background: var(--cart-ink) !important;
  border-color: var(--cart-ink) !important;
  color: #fff !important;
  box-shadow: none !important;
  animation: none !important;
}

.customer-data-ready-btn:disabled {
  background: var(--cart-surface-soft) !important;
  border-color: var(--cart-line) !important;
  color: #aaa8a1 !important;
}

/* Resumen: superficie oscura unica, sin multiples colores de estado. */
.cart-fixed-total {
  background: var(--cart-ink) !important;
  border-color: var(--cart-ink) !important;
  color: rgba(255, 255, 255, .72) !important;
  box-shadow: none !important;
}

.cart-fixed-total span,
.cart-fixed-total .cart-total-final {
  border-color: rgba(255, 255, 255, .14) !important;
}

.cart-fixed-total small {
  color: rgba(255, 255, 255, .66) !important;
}

.cart-fixed-total strong,
.cart-fixed-total .cart-basic-extra strong,
.cart-fixed-total .discount-line strong {
  color: #fff !important;
}

.cart-fixed-total .cart-total-final small {
  color: rgba(255, 255, 255, .88) !important;
}

.cart-fixed-total .cart-total-final strong {
  color: #d8c49a !important;
}

/* CTA principal: negro cuando esta listo; gris cuando esta deshabilitado. */
.cart-footer-actions .create-order-btn,
.cart-footer-actions .create-order-btn.customer-ready,
.cart-footer-actions .create-order-btn.customer-ready:not(:disabled) {
  background: var(--cart-ink) !important;
  color: #fff !important;
  border: 1px solid var(--cart-ink) !important;
  box-shadow: none !important;
  animation: none !important;
}

.cart-footer-actions .create-order-btn:not(.customer-ready):disabled,
.cart-footer-actions .create-order-btn:disabled {
  background: #d8d7d2 !important;
  border-color: #d8d7d2 !important;
  color: #77756f !important;
  opacity: 1 !important;
}

.cart-footer-actions .create-order-btn.customer-ready:not(:disabled):hover {
  background: #000 !important;
  border-color: #000 !important;
}

/* Mensajes y confirmaciones: neutro para exito, rojo para error. */
.cart-toast.success {
  color: var(--cart-ink) !important;
  background: var(--cart-surface) !important;
  border-color: var(--cart-line-strong) !important;
}

.cart-toast.danger {
  color: var(--cart-danger) !important;
  background: var(--cart-danger-soft) !important;
  border-color: var(--cart-danger-line) !important;
}

.cart-items .cart-item.is-newly-added {
  animation: luhuCartItemAddedNeutral 1.3s ease both !important;
}

@keyframes luhuCartItemAddedNeutral {

  0%,
  100% {
    border-color: var(--cart-line);
    box-shadow: none;
  }

  35% {
    border-color: #9f9c94;
    box-shadow: 0 0 0 3px rgba(23, 23, 21, .08);
  }
}

.empty-cart {
  background: var(--cart-surface) !important;
  border-color: var(--cart-line-strong) !important;
  color: var(--cart-ink) !important;
}

.empty-cart p {
  color: var(--cart-muted) !important;
}

@media (prefers-reduced-motion: reduce) {
  .cart-items .cart-item.is-newly-added {
    animation: none !important;
    border-color: #9f9c94 !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   LUHU - Marca visible en la cabecera del carrito
========================================================= */
.cart-header-stats .cart-top-brand {
  align-content: center !important;
  gap: 3px !important;
}

.cart-header-stats .cart-top-brand span {
  font-size: .52rem !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

.cart-header-stats .cart-top-brand strong {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #ffffff !important;
  //*font-family: Syne, Inter, system-ui, sans-serif !important;*//
  font-family: "Bank Gothic Medium", "Bank Gothic", Syne, sans-serif !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
}

@media (max-width: 380px) {
  .cart-header-stats .cart-top-brand strong {
    font-size: .76rem !important;
  }
}

/* =========================================================
   LUHU - Tarjetas de colores con geometria mas rectangular
   Aplica en PC y movil sin alterar otros niveles del catalogo.
========================================================= */
.catalog-grid-colors .color-product-card {
  border-radius: 8px !important;
}

.catalog-grid-colors .color-product-image {
  border-radius: 6px !important;
}

.catalog-grid-colors .quick-size-chip,
.catalog-grid-colors .size-chip {
  border-radius: 6px !important;
}

.catalog-grid-colors .quick-buy-row .quick-qty-control,
.catalog-grid-colors .quick-qty-control {
  border-radius: 7px !important;
}

.catalog-grid-colors .quick-buy-row .quick-add-btn,
.catalog-grid-colors .quick-add-btn {
  border-radius: 7px !important;
}


/* =========================================================
   LUHU - Indicador sutil de más colores en el catálogo
========================================================= */
.catalog-scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 46;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(16, 16, 15, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .62);
  color: rgba(16, 16, 15, .58);
  box-shadow: 0 10px 28px rgba(16, 16, 15, .09);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .48s ease, transform .48s cubic-bezier(.22, 1, .36, 1), background .2s ease;
}

.catalog-scroll-hint.is-visible {
  opacity: .58;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.catalog-scroll-hint:hover,
.catalog-scroll-hint:focus-visible {
  opacity: .86;
  background: rgba(255, 255, 255, .82);
  outline: none;
}

.catalog-scroll-hint svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: catalogScrollHintFloat 2.15s ease-in-out infinite;
}

@keyframes catalogScrollHintFloat {

  0%,
  100% {
    transform: translateY(-1px);
  }

  50% {
    transform: translateY(3px);
  }
}

body:has(.cart-panel.open) .catalog-scroll-hint,
body:has(.product-modal.open) .catalog-scroll-hint,
body:has(.size-guide-modal.open) .catalog-scroll-hint {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .catalog-scroll-hint {
    width: 38px;
    height: 38px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    border-radius: 10px;
  }

  .catalog-scroll-hint svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .catalog-scroll-hint,
  .catalog-scroll-hint svg {
    animation: none;
    transition-duration: .01ms;
  }
}

/* =========================================================
   LUHU - Geometria rectangular para toda la interfaz del carrito
   Reduce el redondeo de cajas y botones en PC y movil.
========================================================= */
.cart-header-stats .cart-top-box {
  border-radius: 8px !important;
}

.cart-header-compact #closeCart,
.cart-footer-actions #continueShopping.cart-back-btn {
  border-radius: 8px !important;
}

.cart-close-icon,
.cart-footer-actions #continueShopping.cart-back-btn span {
  border-radius: 5px !important;
}

.cart-items .cart-item.cart-item-modern.cart-item-compact {
  border-radius: 10px !important;
}

.cart-items .cart-item-compact .cart-item-image-wrap,
.cart-items .cart-item-compact .cart-item-image-wrap img,
.cart-items .cart-item-compact img {
  border-radius: 7px !important;
}

.cart-qty-control,
.cart-qty-control.cart-qty-control-vertical {
  border-radius: 6px !important;
}

.cart-qty-control button {
  border-radius: 0 !important;
}

.cart-item-compact .cart-remove-zone .trash-btn,
.cart-items .cart-item-compact .cart-remove-zone .trash-btn {
  border-radius: 6px !important;
}

.cart-scroll-actions .cart-continue-btn,
.cart-scroll-actions .cart-empty-shop-btn,
.cart-scroll-actions .cart-clear-btn,
.cart-scroll-area .cart-clear-btn {
  border-radius: 7px !important;
}

.cart-fixed-customer,
.cart-fixed-customer.has-valid-data,
.cart-fixed-customer.is-confirmed {
  border-radius: 10px !important;
}

.cart-fixed-customer .customer-form input,
.cart-fixed-customer.is-confirmed .customer-name-control input {
  border-radius: 7px !important;
}

.customer-data-valid-icon,
.customer-data-ready-btn {
  border-radius: 6px !important;
}

.cart-fixed-total {
  border-radius: 10px !important;
}

.cart-footer-actions .create-order-btn,
.cart-footer-actions .create-order-btn.customer-ready,
.cart-footer-actions .create-order-btn.customer-ready:not(:disabled) {
  border-radius: 8px !important;
}

.cart-toast,
.cart-toast.show,
.empty-cart {
  border-radius: 8px !important;
}

.cart-panel .shipping-details summary,
.cart-panel .conditional-fields,
.cart-panel .customer-form select,
.cart-panel .customer-form input[type="url"] {
  border-radius: 7px !important;
}

@media (max-width: 760px) {
  .cart-header-stats .cart-top-box {
    border-radius: 7px !important;
  }

  .cart-items .cart-item.cart-item-modern.cart-item-compact,
  .cart-fixed-customer,
  .cart-fixed-total {
    border-radius: 9px !important;
  }

  .cart-scroll-actions .cart-continue-btn,
  .cart-scroll-actions .cart-empty-shop-btn,
  .cart-scroll-actions .cart-clear-btn,
  .cart-scroll-area .cart-clear-btn,
  .cart-footer-actions .create-order-btn,
  .cart-header-compact #closeCart,
  .cart-footer-actions #continueShopping.cart-back-btn {
    border-radius: 7px !important;
  }
}


/* =========================================================
   LUHU - Navegacion movil de 3 accesos con estado activo
========================================================= */
@media (max-width: 760px) {
  .mobile-bottom-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px;
  }

  .mobile-bottom-nav .mobile-nav-item {
    position: relative;
    border-radius: 9px;
    color: rgba(255, 255, 255, .68);
    transition: background-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
  }

  .mobile-bottom-nav .mobile-nav-item.is-active {
    background: #f4f0e9;
    color: var(--black);
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .38), 0 5px 14px rgba(0, 0, 0, .18);
  }

  .mobile-bottom-nav .mobile-nav-item.is-active .mobile-nav-icon {
    stroke-width: 2.25;
  }

  .mobile-bottom-nav .mobile-nav-item.is-active .mobile-nav-label {
    font-weight: 900;
  }

  .mobile-bottom-nav .mobile-nav-item:active {
    transform: scale(.97);
  }

  .mobile-bottom-nav #mobileCartCount {
    right: calc(50% - 18px);
    transform: translateX(50%);
  }

  .mobile-bottom-nav .mobile-cart-item.is-active #mobileCartCount {
    background: var(--accent);
    color: var(--black);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav .mobile-nav-item {
    transition: none;
  }
}

/* =========================================================
   LUHU - Inicio con geometria rectangular consistente
   Iguala la linea visual del home con el catalogo en PC y movil.
========================================================= */
.home-page .hero-clean .btn,
.home-page .cart-btn,
.home-page .contact-actions .btn {
  border-radius: 7px !important;
}

.home-page .hero-proof span {
  border-radius: 6px !important;
}

.home-page .category-card,
.home-page .featured-card,
.home-page .trust-grid article,
.home-page .rule-card,
.home-page .rule-options article,
.home-page .buy-intro-card,
.home-page .buy-steps article,
.home-page .cuts-banner,
.home-page .fit-info,
.home-page .contact-card {
  border-radius: 10px !important;
}

.home-page .category-label,
.home-page .featured-card span,
.home-page .mini-label,
.home-page .meta-pill {
  border-radius: 5px !important;
}

.home-page .buy-steps strong {
  border-radius: 6px !important;
}

.home-page .cut-pill {
  border-radius: 6px !important;
}

/* Mantiene una silueta limpia en los elementos internos de las tarjetas. */
.home-page .category-card img,
.home-page .featured-card img {
  border-radius: inherit;
}

@media (max-width: 760px) {

  .home-page .hero-clean .btn,
  .home-page .cart-btn,
  .home-page .contact-actions .btn {
    border-radius: 7px !important;
  }

  .home-page .category-card,
  .home-page .featured-card,
  .home-page .trust-grid article,
  .home-page .rule-card,
  .home-page .rule-options article,
  .home-page .buy-intro-card,
  .home-page .buy-steps article,
  .home-page .cuts-banner,
  .home-page .fit-info,
  .home-page .contact-card {
    border-radius: 9px !important;
  }

  .home-page .category-label,
  .home-page .featured-card span,
  .home-page .hero-proof span,
  .home-page .cut-pill,
  .home-page .buy-steps strong {
    border-radius: 5px !important;
  }
}

/* =========================================================
   LUHU - Dialogos propios de confirmacion y captura
   Reemplazan confirm() y prompt() nativos en tienda y panel.
========================================================= */
body.luhu-dialog-open {
  overflow: hidden !important;
}

.luhu-dialog[hidden] {
  display: none !important;
}

.luhu-dialog {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.luhu-dialog.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.luhu-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 15, .56);
  backdrop-filter: blur(7px);
}

.luhu-dialog-card {
  position: relative;
  width: min(460px, 100%);
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(16, 16, 15, .12);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
  transform: translateY(12px) scale(.985);
  transition: transform .18s ease;
}

.luhu-dialog.is-visible .luhu-dialog-card {
  transform: translateY(0) scale(1);
}

.luhu-dialog-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
}

.luhu-dialog-symbol {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #f1eee8;
  color: #171717;
  font-family: Syne, Inter, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
}

.luhu-dialog.is-danger .luhu-dialog-symbol {
  background: #fff0ef;
  color: #b42318;
  border: 1px solid #f1b8b3;
}

.luhu-dialog.is-warning .luhu-dialog-symbol {
  background: #f7f1e6;
  color: #72511e;
  border: 1px solid #e2d1b0;
}

.luhu-dialog-kicker {
  display: block;
  margin-bottom: 3px;
  color: #8a847c;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.luhu-dialog-card h2 {
  margin: 0;
  color: #171717;
  font-family: Syne, Inter, system-ui, sans-serif;
  font-size: clamp(1.4rem, 4vw, 1.85rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.luhu-dialog-message {
  margin: 0;
  color: #68635d;
  font-size: .92rem;
  line-height: 1.55;
  white-space: pre-line;
}

.luhu-dialog-field {
  display: grid;
  gap: 7px;
  color: #55504a;
  font-size: .76rem;
  font-weight: 900;
}

.luhu-dialog-field textarea {
  width: 100%;
  min-height: 94px;
  resize: vertical;
  border: 1px solid #d9d3ca;
  border-radius: 7px;
  padding: 11px 12px;
  outline: none;
  background: #faf9f6;
  color: #171717;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.luhu-dialog-field textarea:focus {
  border-color: #171717;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(16, 16, 15, .08);
}

.luhu-dialog-field textarea.has-error {
  border-color: #b42318;
  background: #fff7f6;
}

.luhu-dialog-field small {
  color: #b42318;
  font-size: .72rem;
  font-weight: 800;
}

.luhu-dialog-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.luhu-dialog-button {
  min-height: 46px;
  border-radius: 7px;
  padding: 11px 14px;
  font-weight: 900;
  line-height: 1.1;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.luhu-dialog-button:active {
  transform: scale(.985);
}

.luhu-dialog-cancel {
  border: 1px solid #d9d3ca;
  background: #f7f5f1;
  color: #171717;
}

.luhu-dialog-cancel:hover,
.luhu-dialog-cancel:focus-visible {
  background: #efebe5;
  border-color: #bfb7ac;
}

.luhu-dialog-confirm {
  border: 1px solid #171717;
  background: #171717;
  color: #fff;
}

.luhu-dialog-confirm:hover,
.luhu-dialog-confirm:focus-visible {
  background: #2b2a27;
}

.luhu-dialog.is-danger .luhu-dialog-confirm {
  border-color: #b42318;
  background: #b42318;
}

.luhu-dialog.is-danger .luhu-dialog-confirm:hover,
.luhu-dialog.is-danger .luhu-dialog-confirm:focus-visible {
  border-color: #8f1c13;
  background: #8f1c13;
}

.luhu-dialog-button:focus-visible {
  outline: 3px solid rgba(201, 166, 107, .35);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .luhu-dialog {
    align-items: end;
    padding: 12px;
  }

  .luhu-dialog-card {
    width: 100%;
    padding: 20px 17px 17px;
    gap: 16px;
    border-radius: 9px;
    transform: translateY(22px);
  }

  .luhu-dialog-heading {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
  }

  .luhu-dialog-symbol {
    width: 38px;
    height: 38px;
    border-radius: 6px;
  }

  .luhu-dialog-actions {
    grid-template-columns: 1fr;
  }

  .luhu-dialog-confirm {
    grid-row: 1;
  }

  .luhu-dialog-cancel {
    grid-row: 2;
  }
}

@media (prefers-reduced-motion: reduce) {

  .luhu-dialog,
  .luhu-dialog-card,
  .luhu-dialog-button {
    transition: none !important;
  }
}

/* =========================================================
   LUHU - Apilado estable de productos en el carrito
   Cada producto conserva su altura completa y el listado
   genera scroll vertical sin superposiciones.
========================================================= */
.cart-scroll-area {
  min-height: 0 !important;
}

.cart-scroll-area .cart-items {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  align-content: normal !important;
  gap: 8px !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 0 10px !important;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.cart-scroll-area .cart-items>.cart-item,
.cart-scroll-area .cart-items>.cart-item.cart-item-modern,
.cart-scroll-area .cart-items>.cart-item.cart-item-modern.cart-item-compact {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 84px !important;
  max-height: none !important;
  margin: 0 !important;
  inset: auto !important;
  transform: none;
  box-sizing: border-box !important;
}

.cart-scroll-area .cart-items>.empty-cart {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
}

@media (min-width: 481px) {

  .cart-scroll-area .cart-items>.cart-item,
  .cart-scroll-area .cart-items>.cart-item.cart-item-modern,
  .cart-scroll-area .cart-items>.cart-item.cart-item-modern.cart-item-compact {
    min-height: 90px !important;
  }
}

@media (max-width: 760px) {
  .cart-scroll-area .cart-items {
    gap: 8px !important;
    padding-right: 1px !important;
  }
}


/* =========================================================
   LUHU - Confirmacion visual al agregar una prenda
   El borde respira durante 1.5 segundos: nace tenue, alcanza
   un verde intenso y desaparece de manera progresiva.
========================================================= */
.cart-items .cart-item.is-newly-added {
  animation: luhuCartItemGreenBreath 1.5s cubic-bezier(.22, .61, .36, 1) both !important;
  will-change: border-color, box-shadow;
}

@keyframes luhuCartItemGreenBreath {
  0% {
    border-color: var(--cart-line, var(--line));
    box-shadow:
      inset 0 0 0 0 rgba(22, 163, 74, 0),
      0 0 0 0 rgba(22, 163, 74, 0);
  }

  18% {
    border-color: rgba(22, 163, 74, .42);
    box-shadow:
      inset 0 0 0 1px rgba(22, 163, 74, .14),
      0 0 0 1px rgba(22, 163, 74, .10);
  }

  52% {
    border-color: #16a34a;
    box-shadow:
      inset 0 0 0 2px rgba(22, 163, 74, .46),
      0 0 0 4px rgba(22, 163, 74, .28),
      0 8px 24px rgba(22, 163, 74, .20);
  }

  68% {
    border-color: #15803d;
    box-shadow:
      inset 0 0 0 2px rgba(21, 128, 61, .34),
      0 0 0 3px rgba(22, 163, 74, .20),
      0 6px 18px rgba(22, 163, 74, .14);
  }

  100% {
    border-color: var(--cart-line, var(--line));
    box-shadow:
      inset 0 0 0 0 rgba(22, 163, 74, 0),
      0 0 0 0 rgba(22, 163, 74, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-items .cart-item.is-newly-added {
    animation: none !important;
    border-color: #16a34a !important;
    box-shadow:
      inset 0 0 0 2px rgba(22, 163, 74, .35),
      0 0 0 3px rgba(22, 163, 74, .18) !important;
  }
}

/* =========================================================
   LUHU - Resaltado visible y robusto de prenda recien agregada
   Se usa una capa independiente porque border-color y box-shadow
   de la tarjeta base estan protegidos con !important.
========================================================= */
.cart-items .cart-item.is-newly-added {
  animation: none !important;
  isolation: isolate;
}

.cart-items .cart-item.is-newly-added::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border: 2px solid #16a34a;
  border-radius: inherit;
  opacity: 0;
  box-shadow:
    inset 0 0 0 1px rgba(22, 163, 74, 0),
    inset 0 0 14px rgba(22, 163, 74, 0),
    0 0 0 0 rgba(22, 163, 74, 0);
  animation: luhuCartAddedOverlayBreath 1.5s cubic-bezier(.22, .61, .36, 1) both;
  will-change: opacity, box-shadow, filter;
}

@keyframes luhuCartAddedOverlayBreath {
  0% {
    opacity: 0;
    box-shadow:
      inset 0 0 0 1px rgba(22, 163, 74, 0),
      inset 0 0 14px rgba(22, 163, 74, 0),
      0 0 0 0 rgba(22, 163, 74, 0);
    filter: saturate(.85);
  }

  20% {
    opacity: .34;
    box-shadow:
      inset 0 0 0 1px rgba(22, 163, 74, .18),
      inset 0 0 14px rgba(22, 163, 74, .06),
      0 0 0 1px rgba(22, 163, 74, .08);
  }

  52% {
    opacity: 1;
    border-color: #16a34a;
    box-shadow:
      inset 0 0 0 2px rgba(22, 163, 74, .58),
      inset 0 0 18px rgba(22, 163, 74, .13),
      0 0 0 4px rgba(22, 163, 74, .23),
      0 7px 20px rgba(22, 163, 74, .18);
    filter: saturate(1.2);
  }

  68% {
    opacity: .9;
    border-color: #15803d;
    box-shadow:
      inset 0 0 0 2px rgba(21, 128, 61, .44),
      inset 0 0 14px rgba(22, 163, 74, .10),
      0 0 0 3px rgba(22, 163, 74, .17),
      0 5px 15px rgba(22, 163, 74, .12);
  }

  100% {
    opacity: 0;
    border-color: rgba(22, 163, 74, 0);
    box-shadow:
      inset 0 0 0 1px rgba(22, 163, 74, 0),
      inset 0 0 10px rgba(22, 163, 74, 0),
      0 0 0 0 rgba(22, 163, 74, 0);
    filter: saturate(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cart-items .cart-item.is-newly-added::after {
    animation: none;
    opacity: 1;
    border-color: #16a34a;
    box-shadow:
      inset 0 0 0 2px rgba(22, 163, 74, .45),
      0 0 0 3px rgba(22, 163, 74, .16);
  }
}


/* =========================================================
   LUHU - Carrito sobre modal y cierre sin saltos
   Cuando el carrito se abre desde un producto, permanece por encima
   y el modal se conserva intacto detrás de una capa oscurecida.
========================================================= */
body.cart-over-product .overlay {
  z-index: 5350 !important;
}

body.cart-over-product .cart-panel {
  z-index: 5400 !important;
}

/* El área táctil pertenece exclusivamente al botón; no se utilizan
   detectores globales que puedan disparar el cierre dos veces. */
.cart-header-compact #closeCart {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   LUHU - Tamano equilibrado de tarjetas de modelo en PC
   Las tarjetas dejan de estirarse a media pantalla. Mantienen
   una medida compacta, se centran y se adaptan al ancho disponible.
========================================================= */
@media (min-width: 761px) {
  .catalog-main .products-grid.catalog-grid-models {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    grid-template-columns: repeat(auto-fit, minmax(235px, 270px)) !important;
    justify-content: center !important;
    justify-items: stretch !important;
    align-items: start !important;
    gap: 20px !important;
  }

  .catalog-main .products-grid.catalog-grid-models .catalog-option-card {
    width: 100% !important;
    max-width: 270px !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    justify-self: center !important;
  }

  .catalog-main .catalog-grid-models .catalog-option-card>div {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .catalog-main .catalog-grid-models .catalog-option-card h3.model-card-name {
    font-size: clamp(1.08rem, 1.35vw, 1.34rem);
    line-height: 1;
  }
}


/* =========================================================
   LUHU - Cabecera del carrito solo con tres cajas informativas
   El boton superior de cierre fue retirado de la interfaz.
========================================================= */
.cart-header-compact {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.cart-header-compact .cart-header-stats {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* =========================================================
   LUHU - Respiracion sutil en acciones de compra del carrito
   Solo movil: Seguir comprando y A comprar.
========================================================= */
@media (max-width: 760px) {

  .cart-scroll-actions .cart-continue-btn:not([hidden]),
  .cart-scroll-actions .cart-empty-shop-btn:not([hidden]) {
    transform-origin: center center;
    animation: luhuCartShoppingBreath 2.2s ease-in-out infinite !important;
    will-change: transform;
  }

  .cart-scroll-actions .cart-continue-btn:not([hidden]):active,
  .cart-scroll-actions .cart-empty-shop-btn:not([hidden]):active {
    animation-play-state: paused !important;
    transform: scale(.98) !important;
  }
}

@keyframes luhuCartShoppingBreath {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce) {

  .cart-scroll-actions .cart-continue-btn,
  .cart-scroll-actions .cart-empty-shop-btn {
    animation: none !important;
  }
}


/* =========================================================
   LUHU Admin - Cambio rapido de talla y resumen de edicion
========================================================= */
.order-size-change {
  position: relative;
  width: max-content;
  max-width: 100%;
}

.order-size-change summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: max-content;
  max-width: 100%;
  list-style: none;
  border: 1px solid rgba(201, 166, 107, .58);
  border-radius: 999px;
  background: #fff8ec;
  color: #715025;
  padding: 7px 11px;
  font-size: .74rem;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

.order-size-change summary::-webkit-details-marker {
  display: none;
}

.order-size-change summary span {
  color: inherit;
  font-size: .8rem;
  transition: transform .18s ease;
}

.order-size-change[open] summary span {
  transform: rotate(180deg);
}

.order-size-change-menu {
  position: absolute;
  z-index: 35;
  left: 0;
  top: calc(100% + 7px);
  width: min(270px, calc(100vw - 70px));
  max-height: 250px;
  overflow: auto;
  display: grid;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 18px 48px rgba(16, 16, 15, .18);
}

.order-size-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--soft);
  color: var(--black);
  padding: 9px 10px;
  text-align: left;
}

.order-size-option span {
  color: var(--black);
  font-size: .78rem;
  font-weight: 900;
}

.order-size-option small {
  color: var(--gray);
  font-size: .68rem;
  font-weight: 800;
  white-space: nowrap;
}

.order-size-option:not(:disabled):hover {
  border-color: rgba(201, 166, 107, .72);
  background: #fff8ec;
}

.order-size-option.is-current {
  border-color: #cfe7c8;
  background: #edf7e9;
}

.order-size-option:disabled:not(.is-current) {
  color: #9b9690;
  background: #f4f1ed;
  opacity: .62;
  cursor: not-allowed;
}

.admin-order-changes-summary {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(201, 166, 107, .55);
  border-radius: 18px;
  background: linear-gradient(135deg, #fffaf2, #ffffff);
}

.admin-order-changes-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.admin-order-changes-head>div {
  display: grid;
  gap: 2px;
}

.admin-order-changes-head .admin-kicker {
  font-size: .62rem;
}

.admin-order-changes-head strong {
  font-family: Syne, sans-serif;
  font-size: 1.1rem;
  line-height: 1;
}

.admin-order-changes-state {
  border-radius: 999px;
  background: #f7efe1;
  color: #715025;
  padding: 6px 9px;
  font-size: .66rem;
  font-weight: 900;
  white-space: nowrap;
}

.admin-order-change-list {
  display: grid;
  gap: 7px;
}

.admin-order-change-row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.admin-order-change-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f7efe1;
  color: #715025;
  font-weight: 900;
}

.admin-order-change-row.is-add .admin-order-change-icon,
.admin-order-change-row.is-increase .admin-order-change-icon {
  background: #edf7e9;
  color: #2b6b2b;
}

.admin-order-change-row.is-remove .admin-order-change-icon,
.admin-order-change-row.is-decrease .admin-order-change-icon {
  background: #fff1f0;
  color: #b42318;
}

.admin-order-change-row strong {
  display: block;
  font-size: .76rem;
}

.admin-order-change-row p,
.admin-order-no-product-changes {
  color: var(--gray);
  font-size: .74rem;
  line-height: 1.35;
  font-weight: 700;
}

.admin-order-no-product-changes {
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--white);
}

.admin-order-change-money {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-order-change-money>span {
  display: grid;
  gap: 2px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.admin-order-change-money small {
  color: var(--gray);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.admin-order-change-money strong {
  color: var(--black);
  font-size: .76rem;
  line-height: 1.25;
}

.admin-order-change-money .is-charge strong {
  color: #9a5b00;
}

.admin-order-change-money .is-refund strong {
  color: #2b6b2b;
}

@media (max-width: 760px) {
  .order-cart-item {
    align-items: start;
  }

  .order-size-change-menu {
    position: fixed;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 82px;
    width: auto;
    max-height: min(48vh, 330px);
    z-index: 120;
  }

  .admin-order-changes-head {
    align-items: flex-start;
  }

  .admin-order-change-money {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   LUHU ADMIN - Comprobacion de stock de pedidos pendientes
   Solo consulta inventario; no reserva ni modifica cantidades.
========================================================= */
.admin-page .admin-order-menu .admin-order-stock-check-option {
  color: #2f6732;
  font-weight: 900;
}

.admin-page .admin-order-menu .admin-order-stock-check-option:hover {
  background: #edf7e9;
}

.admin-order-stock-check-modal[hidden] {
  display: none !important;
}

.admin-order-stock-check-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.admin-order-stock-check-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.admin-order-stock-check-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 15, .42);
  backdrop-filter: blur(3px);
}

.admin-order-stock-check-card {
  position: relative;
  z-index: 1;
  width: min(480px, calc(100vw - 28px));
  max-height: min(78vh, 680px);
  overflow: auto;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(16, 16, 15, .24);
  transform: translateY(8px) scale(.985);
  transition: transform .18s ease;
}

.admin-order-stock-check-modal.is-open .admin-order-stock-check-card {
  transform: translateY(0) scale(1);
}

.admin-order-stock-check-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  color: var(--black);
  font-size: 1.35rem;
  line-height: 1;
}

.admin-order-stock-check-close:hover,
.admin-order-stock-check-close:focus-visible {
  background: #ede7dc;
  outline: none;
}

.admin-order-stock-check-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.35rem;
  font-weight: 900;
}

.admin-order-stock-check-modal.is-loading .admin-order-stock-check-icon {
  background: #f7efe1;
  color: #715025;
}

.admin-order-stock-check-modal.is-success .admin-order-stock-check-icon {
  background: #edf7e9;
  color: #2f6732;
}

.admin-order-stock-check-modal.is-missing .admin-order-stock-check-icon,
.admin-order-stock-check-modal.is-error .admin-order-stock-check-icon {
  background: #fff1f0;
  color: #b42318;
}

.admin-order-stock-check-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: adminStockCheckSpin .7s linear infinite;
}

@keyframes adminStockCheckSpin {
  to {
    transform: rotate(360deg);
  }
}

.admin-order-stock-check-heading {
  min-width: 0;
  padding-right: 28px;
}

.admin-order-stock-check-heading>span {
  color: var(--gray);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.admin-order-stock-check-heading h2 {
  margin: 2px 0 5px;
  font-family: Syne, sans-serif;
  font-size: 1.35rem;
  line-height: 1.05;
}

.admin-order-stock-check-heading p {
  color: var(--gray);
  font-size: .82rem;
  line-height: 1.45;
}

.admin-order-stock-check-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
}

.admin-order-stock-check-ok {
  padding: 11px 12px;
  border: 1px solid #cfe7c8;
  border-radius: 13px;
  background: #edf7e9;
  color: #2f6732;
  font-size: .82rem;
  font-weight: 900;
  text-align: center;
}

.admin-order-stock-shortage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #f1b8b3;
  border-radius: 14px;
  background: #fff8f7;
}

.admin-order-stock-shortage>div:first-child {
  min-width: 0;
}

.admin-order-stock-shortage strong,
.admin-order-stock-shortage span,
.admin-order-stock-shortage small {
  display: block;
}

.admin-order-stock-shortage>div:first-child strong {
  font-size: .86rem;
  line-height: 1.2;
}

.admin-order-stock-shortage span,
.admin-order-stock-shortage small {
  color: var(--gray);
  font-size: .72rem;
}

.admin-order-stock-shortage-numbers {
  text-align: right;
  white-space: nowrap;
}

.admin-order-stock-shortage-numbers strong {
  margin-top: 2px;
  color: #b42318;
  font-size: .8rem;
}

@media (max-width: 520px) {
  .admin-order-stock-check-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding: 18px 14px 14px;
    border-radius: 18px;
  }

  .admin-order-stock-check-icon {
    width: 42px;
    height: 42px;
  }

  .admin-order-stock-shortage {
    grid-template-columns: 1fr;
  }

  .admin-order-stock-shortage-numbers {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {

  .admin-order-stock-check-modal,
  .admin-order-stock-check-card,
  .admin-order-stock-check-spinner {
    animation: none;
    transition: none;
  }
}


/* =========================================================
   LUHU - Encabezado refinado del modal de color
   Modelo arriba, color abajo, y solo la muestra de color bajo la imagen.
========================================================= */
.product-modal-headline {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 0;
}

.product-modal-kicker {
  margin: 0;
  color: #8b7555;
  font-family: Inter, system-ui, sans-serif;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.15;
  text-transform: uppercase;
}

.product-modal-title {
  margin: 0;
  color: #111;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(2rem, 3.2vw, 2.7rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: .98;
  text-wrap: balance;
}

.product-modal .detail-list[hidden] {
  display: none !important;
}

@media (min-width: 761px) {
  .product-modal-card>.modal-close-layer {
    position: sticky;
    top: 0;
    z-index: 14;
    grid-column: 1 / -1;
    grid-row: 1;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .88) 70%, rgba(255, 255, 255, 0) 100%);
    backdrop-filter: blur(10px);
    pointer-events: auto;
  }

  .product-modal-card {
    overflow: hidden;
  }

  .modal-image-wrap {
    grid-row: 1 / span 2;
    margin-top: 84px;
  }

  .modal-info {
    grid-row: 2;
    padding-top: 10px;
  }

  .product-modal .product-modal-close {
    margin: 0;
    flex: 0 0 40px;
  }

  .modal-main-color-swatch {
    margin-top: 2px;
  }
}

@media (max-width: 760px) {
  .product-modal {
    padding: 0 !important;
  }

  .product-modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    background: #fff;
  }

  .product-modal-card>.modal-close-layer {
    position: sticky;
    top: 0;
    z-index: 18;
    grid-column: 1;
    grid-row: 1;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
    background: rgba(255, 255, 255, .98);
    border-bottom: 1px solid rgba(17, 17, 17, .08);
    box-shadow: 0 8px 24px rgba(16, 16, 15, .06);
    backdrop-filter: blur(14px);
    pointer-events: auto;
  }

  .product-modal-headline {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 8px;
  }

  .product-modal-kicker {
    font-size: .62rem;
    letter-spacing: .18em;
  }

  .product-modal-title {
    font-size: clamp(1.45rem, 7.7vw, 2.35rem);
    line-height: .96;
  }

  .product-modal .product-modal-close {
    width: 38px;
    height: 38px;
    margin: 0;
    flex: 0 0 38px;
  }

  .modal-image-wrap {
    grid-column: 1;
    grid-row: 2;
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    max-height: min(48vh, 420px);
  }

  .modal-info {
    grid-column: 1;
    grid-row: 3;
    padding: 14px 16px calc(104px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }

  .modal-main-color-swatch {
    height: 64px;
    margin: 0 0 14px;
    border-radius: 12px;
  }
}


/* =========================================================
   LUHU - Footer fijo restaurado en modal movil
   Cantidad + Agregar + carrito, vuelo de talla de 1.5 s
   e imagen vertical en proporcion 3:4.
========================================================= */
.size-to-cart-flyer {
  position: fixed;
  z-index: 9000;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 0 7px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  box-shadow: 0 10px 28px rgba(16, 16, 15, .28), 0 0 0 4px rgba(201, 166, 107, .14);
  font-family: Inter, system-ui, sans-serif;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  will-change: left, top, width, height, transform, opacity;
}

#mobileCartCount,
#modalCartCount {
  background: #d92d20 !important;
  color: #fff !important;
}

.cart-count-increase {
  animation: luhuCartCountIncrease 680ms cubic-bezier(.2, .8, .2, 1);
}

.cart-receive-pulse {
  animation: luhuCartReceivePulse 680ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes luhuCartCountIncrease {
  0% {
    scale: 1;
    rotate: 0deg;
  }

  28% {
    scale: 1.55;
    rotate: -7deg;
  }

  58% {
    scale: .88;
    rotate: 4deg;
  }

  100% {
    scale: 1;
    rotate: 0deg;
  }
}

@keyframes luhuCartReceivePulse {
  0% {
    filter: none;
  }

  36% {
    filter: drop-shadow(0 0 9px rgba(217, 45, 32, .72));
  }

  100% {
    filter: none;
  }
}

.modal-cart-shortcut {
  display: none;
}

@media (max-width: 760px) {
  body:has(.product-modal.open) {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .product-modal {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    padding: 0 !important;
    place-items: stretch;
    background: var(--white);
  }

  .product-modal-card {
    position: relative;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 calc(76px + env(safe-area-inset-bottom)) !important;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 !important;
    box-shadow: none !important;
    overscroll-behavior: contain;
    background: var(--white);
  }

  .product-modal-card>.modal-close-layer {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    width: 100%;
    height: auto !important;
    min-height: calc(72px + env(safe-area-inset-top));
    padding: calc(env(safe-area-inset-top) + 11px) 14px 11px 16px;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px);
    box-shadow: 0 7px 24px rgba(16, 16, 15, .08);
    pointer-events: auto !important;
  }

  .product-modal .product-modal-close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    background: var(--black) !important;
    color: var(--white) !important;
    border-color: var(--black) !important;
    box-shadow: none !important;
  }

  /* Proporcion vertical: 3 de ancho por 4 de alto. */
  .product-modal .modal-image-wrap {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: 3 / 4 !important;
    border-radius: 0 !important;
  }

  .product-modal #modalImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-modal .modal-info {
    width: 100%;
    padding: 14px 16px 24px !important;
    overflow: visible !important;
  }

  .product-modal .modal-main-color-swatch {
    height: 60px;
    margin: 0 0 14px;
    border-radius: 12px;
  }

  .product-modal .modal-purchase-area {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 32;
    display: block;
    margin: 0 !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(18px);
    box-shadow: 0 -12px 32px rgba(16, 16, 15, .12);
  }

  .product-modal .modal-purchase-area .price-preview {
    display: none !important;
  }

  .product-modal .modal-action-row {
    width: 100%;
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(96px, .94fr) minmax(128px, 1.42fr) 58px;
    align-items: end;
    gap: 8px;
  }

  .product-modal .modal-qty-block {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 43px;
    gap: 3px;
    overflow: hidden;
  }

  .product-modal .modal-qty-block h3 {
    margin: 0;
    font-size: .58rem;
    line-height: 1;
    letter-spacing: .07em;
  }

  .product-modal .modal-action-row .quantity-control {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 43px !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 9px !important;
  }

  .product-modal .modal-action-row .quantity-control button,
  .product-modal .modal-action-row .quantity-control span {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .product-modal #addConfiguredProduct {
    min-width: 0;
    width: 100%;
    height: 43px;
    min-height: 43px !important;
    padding: 8px 10px;
    border-radius: 9px !important;
    font-size: .84rem;
    line-height: 1;
  }

  .modal-cart-shortcut {
    position: relative;
    min-width: 0;
    width: 58px;
    height: 43px;
    display: grid;
    place-items: center;
    padding: 4px;
    border: 1px solid var(--dark-line);
    border-radius: 9px;
    background: var(--black);
    color: var(--white);
    -webkit-tap-highlight-color: transparent;
  }

  .modal-cart-shortcut-icon {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  #modalCartCount {
    position: absolute;
    top: -7px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border: 2px solid var(--white);
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 900;
    line-height: 1;
    transform-origin: center;
  }

  .mobile-bottom-nav #mobileCartCount {
    transform-origin: center;
  }

  body:has(.product-modal.open):has(.cart-panel.open) .cart-panel {
    z-index: 5400 !important;
  }

  body:has(.product-modal.open):has(.cart-panel.open) .overlay.show {
    z-index: 5350 !important;
  }
}

@media (max-width: 360px) {
  .product-modal .modal-action-row {
    grid-template-columns: minmax(88px, .88fr) minmax(116px, 1.36fr) 54px;
    gap: 6px;
  }

  .modal-cart-shortcut {
    width: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .size-to-cart-flyer {
    display: none !important;
  }

  .cart-count-increase,
  .cart-receive-pulse {
    animation-duration: 1ms !important;
  }
}


/* =========================================================
   LUHU - Modal: una sola linea de modelo y footer 50/34/16
========================================================= */
.product-modal-title {
  display: none !important;
}

.product-modal-headline {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0 !important;
  justify-content: center;
}

.product-modal-kicker {
  width: 100%;
  margin: 0;
  overflow: hidden;
  color: #8b7555;
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(.68rem, 1.15vw, .86rem);
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .product-modal-card>.modal-close-layer {
    align-items: center !important;
    min-height: calc(56px + env(safe-area-inset-top));
    padding: calc(env(safe-area-inset-top) + 9px) 14px 9px !important;
  }

  .product-modal-headline {
    padding-right: 6px !important;
  }

  .product-modal-kicker {
    font-size: clamp(.62rem, 2.65vw, .78rem) !important;
    letter-spacing: .105em !important;
    line-height: 1.15 !important;
  }

  .product-modal .product-modal-close {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  .product-modal .modal-action-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(104px, 1fr) 58px !important;
    gap: 8px !important;
  }

  .product-modal #addConfiguredProduct {
    display: grid !important;
    place-items: center !important;
    gap: 0 !important;
  }

  .product-modal #addConfiguredProduct svg {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .product-modal .modal-action-row {
    grid-template-columns: minmax(0, 1.5fr) minmax(96px, 1fr) 54px !important;
    gap: 6px !important;
  }

  .product-modal-kicker {
    font-size: clamp(.58rem, 2.55vw, .7rem) !important;
    letter-spacing: .09em !important;
  }
}


/* =========================================================
   LUHU - Ajustes finales del modal: titulo, color, precio y alerta
========================================================= */
.product-modal #modalTag {
  border-radius: 5px !important;
}

.product-modal .modal-inline-price {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 4px 0 10px;
  padding: 10px 12px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--soft);
}

.product-modal .modal-inline-price span {
  color: var(--gray);
  font-family: Inter, system-ui, sans-serif;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-modal .modal-inline-price strong {
  color: var(--black);
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1;
}

.stock-limit-alert[hidden] {
  display: none !important;
}

.stock-limit-alert {
  position: fixed;
  inset: 0;
  z-index: 5500;
  display: grid;
  place-items: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.stock-limit-alert.is-open {
  opacity: 1;
  pointer-events: auto;
}

.stock-limit-alert-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 15, .52);
  backdrop-filter: blur(4px);
}

.stock-limit-alert-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  display: grid;
  gap: 10px;
  padding: 24px 20px 20px;
  border: 1px solid rgba(180, 35, 24, .18);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(16, 16, 15, .24);
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
}

.stock-limit-alert.is-open .stock-limit-alert-card {
  transform: translateY(0) scale(1);
}

.stock-limit-alert-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(16, 16, 15, .10);
  border-radius: 9px;
  background: var(--black);
  color: #fff;
}

.stock-limit-alert-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stock-limit-alert-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff1f0;
  color: #b42318;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
}

.stock-limit-alert-kicker {
  margin: 2px 0 0;
  color: #b42318;
  font-family: Inter, system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.stock-limit-alert-card h2 {
  margin: 0;
  padding-right: 42px;
  font-family: Syne, Inter, system-ui, sans-serif;
  font-size: 1.55rem;
  line-height: 1;
}

.stock-limit-alert-card>p:not(.stock-limit-alert-kicker) {
  color: var(--gray);
  font-size: .88rem;
  line-height: 1.45;
}

.stock-limit-alert-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.stock-limit-alert-details span {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.stock-limit-alert-details small {
  color: var(--gray);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.stock-limit-alert-details strong {
  overflow-wrap: anywhere;
  color: var(--black);
  font-size: .78rem;
  line-height: 1.25;
}

@media (max-width: 760px) {
  .product-modal-kicker {
    font-size: clamp(.78rem, 3.3vw, .94rem) !important;
    letter-spacing: .09em !important;
  }

  .product-modal .modal-inline-price {
    margin-top: 2px;
  }
}

@media (max-width: 360px) {
  .product-modal-kicker {
    font-size: .76rem !important;
    letter-spacing: .075em !important;
  }

  .stock-limit-alert-details {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  .stock-limit-alert,
  .stock-limit-alert-card {
    transition: none !important;
  }
}

/* =========================================================
   LUHU - Titulo Syne responsive del header fijo del modal
   Regla final aislada para no alterar el resto del diseño.
========================================================= */
.product-modal .product-modal-headline {
  min-width: 0;
  overflow: hidden;
}

.product-modal .product-modal-kicker {
  width: 100%;
  max-width: 100%;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: #111;
  ;
  font-family: Syne, sans-serif;
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Celulares y tablets pequenas */
@media (max-width: 760px) {
  .product-modal .product-modal-kicker {
    font-size: clamp(1.08rem, 4.7vw, 1.40rem) !important;
    letter-spacing: -.035em !important;
    line-height: 1.02 !important;
  }
}

/* Celulares compactos */
@media (max-width: 430px) {
  .product-modal .product-modal-kicker {
    font-size: clamp(1.03rem, 4.8vw, 1.22rem) !important;
    letter-spacing: -.03em !important;
  }
}

/* Pantallas muy estrechas */
@media (max-width: 360px) {
  .product-modal .product-modal-kicker {
    font-size: 1.03rem !important;
    letter-spacing: -.025em !important;
  }
}

/* =========================================================
   LUHU - Etiqueta sobre la muestra de color del modal
========================================================= */
.product-modal .modal-color-swatch-label {
  margin: 0 0 6px;
  color: var(--gray);
  font-family: Inter, system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.2;
}

@media (max-width: 760px) {
  .product-modal .modal-color-swatch-label {
    margin-bottom: 5px;
    font-size: .72rem;
  }
}

/* =========================================================
   LUHU - Controles mas rectangulares en el modal de color
   Ajuste aislado: no modifica botones ni pastillas fuera del modal.
========================================================= */
.product-modal .modal-main-color-swatch {
  border-radius: 8px !important;
}

.product-modal #sizeOptions .selector-btn {
  border-radius: 8px !important;
}

.product-modal .modal-inline-price,
.product-modal .modal-stock-badge {
  border-radius: 8px !important;
}

.product-modal .quantity-control,
.product-modal #addConfiguredProduct,
.product-modal .modal-cart-shortcut,
.product-modal .product-modal-close,
.product-modal .modal-image-size-guide,
.product-modal .product-gallery-arrow {
  border-radius: 8px !important;
}

@media (max-width: 430px) {

  .product-modal .modal-main-color-swatch,
  .product-modal #sizeOptions .selector-btn,
  .product-modal .modal-inline-price,
  .product-modal .modal-stock-badge,
  .product-modal .quantity-control,
  .product-modal #addConfiguredProduct,
  .product-modal .modal-cart-shortcut,
  .product-modal .product-modal-close,
  .product-modal .modal-image-size-guide,
  .product-modal .product-gallery-arrow {
    border-radius: 7px !important;
  }
}

/* =========================================================
   LUHU - Controles más rectangulares en el modal de Medidas
   Ajuste aislado: no modifica elementos fuera de este modal.
========================================================= */
.size-guide-modal .size-guide-modal-card {
  border-radius: 10px !important;
}

.size-guide-modal #sizeGuideSizeOptions .selector-btn,
.size-guide-modal .size-guide-table,
.size-guide-modal .size-guide-note,
.size-guide-modal .size-guide-modal-close {
  border-radius: 8px !important;
}

@media (max-width: 430px) {
  .size-guide-modal .size-guide-modal-card {
    border-radius: 8px !important;
  }

  .size-guide-modal #sizeGuideSizeOptions .selector-btn,
  .size-guide-modal .size-guide-table,
  .size-guide-modal .size-guide-note,
  .size-guide-modal .size-guide-modal-close {
    border-radius: 7px !important;
  }
}

/* =========================================================
   LUHU - Etiqueta térmica en tarjetas de modelo
   Franela y Stone: Abrigador. French Terry: Fresco.
========================================================= */
.catalog-grid-models .model-card-meta {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-top: 2px;
}

/* Conserva el tamaño de “X colores”, con un diferenciador cromático e icono SVG. */
.catalog-grid-models .model-material-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  margin: 0;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 5px !important;
  box-shadow: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: .48rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.catalog-grid-models .model-material-icon {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-grid-models .model-material-gamuza {
  background: rgba(243, 239, 232, .96) !important;
  border-color: rgba(174, 157, 132, .72) !important;
  color: #665746 !important;
}

.catalog-grid-models .model-material-franela {
  background: rgba(246, 238, 226, .96) !important;
  border-color: rgba(198, 166, 122, .72) !important;
  color: #755837 !important;
}

.catalog-grid-models .model-material-cotton {
  background: rgba(250, 244, 232, .96) !important;
  border-color: rgba(210, 184, 136, .72) !important;
  color: #775d31 !important;
}

.catalog-grid-models .model-material-antipeeling {
  background: rgba(238, 244, 250, .96) !important;
  border-color: rgba(156, 181, 205, .72) !important;
  color: #4f6c84 !important;
}

.catalog-grid-models .model-material-softened {
  background: rgba(246, 239, 247, .96) !important;
  border-color: rgba(199, 167, 202, .72) !important;
  color: #78577b !important;
}

.catalog-grid-models .model-material-warm {
  background: rgba(230, 246, 255, .92) !important;
  border-color: rgba(129, 190, 225, .68) !important;
  color: #3f86ad !important;
}

.catalog-grid-models .model-material-fresh {
  background: rgba(237, 248, 240, .92) !important;
  border-color: rgba(146, 199, 160, .68) !important;
  color: #5d9270 !important;
}

/* Etiqueta Lycrado: conserva la misma fuente, altura, padding y bordes de Fresco. */
.catalog-grid-models .model-material-stretch {
  background: rgba(239, 232, 255, .94) !important;
  border-color: rgba(184, 154, 231, .72) !important;
  color: #6847a5 !important;
}

.catalog-grid-models .model-stretch-icon {
  width: 10px;
  flex-basis: 10px;
}

/* Etiqueta Cargo: misma escala visual que Abrigador, con color caqui/oliva e icono de bolsillo. */
.catalog-grid-models .model-material-cargo {
  background: rgba(244, 241, 224, .95) !important;
  border-color: rgba(188, 177, 119, .72) !important;
  color: #6d6534 !important;
}

.catalog-grid-models .model-cargo-icon {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
}

/* Etiqueta Semi-Baggy: misma escala que Abrigador, con azul grisáceo e icono de pantalón amplio. */
.catalog-grid-models .model-material-fit {
  background: rgba(231, 237, 242, .95) !important;
  border-color: rgba(176, 193, 205, .74) !important;
  color: #465866 !important;
}

.catalog-grid-models .model-fit-icon {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
}

.catalog-grid-models .model-card-color-count,
.catalog-grid-models .catalog-option-production .model-card-color-count {
  display: inline-flex;
  width: fit-content;
  margin: 0;
}

@media (max-width: 760px) {
  .catalog-grid-models .model-card-meta {
    gap: 4px;
  }

  .catalog-grid-models .model-material-tag {
    gap: 2.5px;
    padding: 4px 5px;
    font-size: .44rem;
  }

  .catalog-grid-models .model-material-icon {
    width: 8px;
    height: 8px;
    flex-basis: 8px;
  }
}


/* =========================================================
   LUHU - Respiracion de la talla activa en el modal de color
   Reutiliza el mismo pulso visual del modal de Medidas.
========================================================= */
.product-modal #sizeOptions .selector-btn.active:not(:disabled) {
  z-index: 2;
  animation: luhuSizeGuidePulse 1.8s ease-in-out infinite !important;
  transform-origin: center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .product-modal #sizeOptions .selector-btn.active:not(:disabled) {
    animation: none !important;
    transform: scale(1.08);
  }
}

/* =========================================================
   LUHU - Botón Medidas sobre tarjetas y encabezados de modelo
   Visible únicamente en el nivel de modelo. Se superpone de
   forma sutil sobre el borde inferior derecho de la sección central.
========================================================= */
.catalog-current-content,
.catalog-model-sticky-content {
  position: relative;
  overflow: visible;
}

.catalog-current-size-guide,
.catalog-sticky-size-guide {
  position: absolute !important;
  top: auto !important;
  right: 12px !important;
  bottom: -10px !important;
  left: auto !important;
  z-index: 12;
  width: max-content;
  min-width: 0;
  min-height: 24px;
  margin: 0 !important;
  padding: 4px 8px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid rgba(201, 166, 107, .72) !important;
  border-radius: 6px !important;
  background: rgba(16, 16, 15, .96) !important;
  color: var(--accent) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .20) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: Inter, system-ui, sans-serif;
  font-size: .56rem !important;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: none !important;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}

.catalog-current-size-guide svg,
.catalog-sticky-size-guide svg {
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-current-size-guide:hover,
.catalog-current-size-guide:focus-visible,
.catalog-sticky-size-guide:hover,
.catalog-sticky-size-guide:focus-visible {
  background: var(--accent) !important;
  color: var(--black) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px) !important;
}

.catalog-current-size-guide:focus-visible,
.catalog-sticky-size-guide:focus-visible {
  outline: 3px solid rgba(201, 166, 107, .30);
  outline-offset: 2px;
}

.catalog-current-size-guide[hidden],
.catalog-sticky-size-guide[hidden] {
  display: none !important;
}

/* En escritorio, ambos botones quedan en la esquina inferior derecha
   de la zona intermedia, sin invadir el selector de modelos. */
@media (min-width: 761px) {
  .catalog-current-size-guide {
    top: auto !important;
    right: 14px !important;
    bottom: -10px !important;
  }

  .catalog-sticky-size-guide {
    top: auto !important;
    right: 12px !important;
    bottom: -9px !important;
  }
}

@media (max-width: 760px) {

  .catalog-current-size-guide,
  .catalog-sticky-size-guide {
    top: auto !important;
    right: 9px !important;
    bottom: -9px !important;
    min-height: 23px;
    padding: 4px 7px !important;
    border-radius: 6px !important;
    font-size: .52rem !important;
  }

  .catalog-current-size-guide svg,
  .catalog-sticky-size-guide svg {
    width: 10px !important;
    height: 10px !important;
    flex-basis: 10px;
  }
}

@media (max-width: 390px) {

  .catalog-current-size-guide,
  .catalog-sticky-size-guide {
    right: 7px !important;
    padding-inline: 6px !important;
    font-size: .49rem !important;
  }
}
/* =========================================================
   LUHU - Fix del menu Categorias en movil
   El modal de color cerrado no debe interceptar toques del header.
========================================================= */
.product-modal:not(.open) {
  visibility: hidden;
  pointer-events: none !important;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

.product-modal:not(.open) .product-modal-card,
.product-modal:not(.open) .modal-close-layer,
.product-modal:not(.open) * {
  pointer-events: none !important;
}

.product-modal.open {
  visibility: visible;
  pointer-events: auto !important;
  transition: opacity .2s ease, visibility 0s linear 0s;
}

.product-modal.open .product-modal-card,
.product-modal.open .modal-close-layer {
  pointer-events: auto !important;
}


/* =========================================================
   LUHU - Filtros rectangulares por color y talla
========================================================= */
.catalog-product-filters {
  position: relative;
  z-index: 7;
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(222, 212, 197, .88);
  border-radius: 12px;
  background: rgba(250, 248, 244, .88);
  box-shadow: 0 8px 24px rgba(16, 16, 15, .04);
}

.catalog-product-filters-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.catalog-product-filters-head > strong {
  color: var(--ink);
  font-size: .76rem;
  line-height: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.catalog-product-filter-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.catalog-filter-control {
  position: relative;
  min-width: 0;
  flex: 0 1 190px;
}

.catalog-filter-trigger {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 15px;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(222, 212, 197, .95);
  border-radius: 9px;
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  padding: 6px 9px;
  font-size: .68rem;
  line-height: 1;
  text-align: left;
  box-shadow: 0 3px 10px rgba(16, 16, 15, .035);
  transition: border-color .16s ease, background .16s ease, opacity .16s ease, box-shadow .16s ease;
}

.catalog-filter-trigger:hover,
.catalog-filter-trigger[aria-expanded="true"] {
  border-color: rgba(201, 166, 107, .72);
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 16, 15, .07);
}

.catalog-filter-trigger > span {
  color: var(--gray);
  font-weight: 800;
}

.catalog-filter-trigger > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--black);
  font: inherit;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.catalog-filter-trigger > svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}

.catalog-filter-trigger[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

.catalog-filter-trigger:disabled,
.catalog-filter-trigger.is-disabled {
  cursor: not-allowed;
  opacity: .38;
  border-style: dashed;
  box-shadow: none;
}

.catalog-filter-clear {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(201, 166, 107, .58);
  border-radius: 9px;
  background: rgba(255, 255, 255, .76);
  color: #735a31;
  padding: 5px 9px;
  font-size: .65rem;
  line-height: 1;
  font-weight: 900;
  transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}

.catalog-filter-clear svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.catalog-filter-clear.is-active:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--black);
}

.catalog-filter-clear:disabled {
  cursor: default;
  opacity: .35;
}

.catalog-filter-result {
  color: var(--muted);
  font-size: .62rem;
  line-height: 1;
  font-weight: 800;
}

.catalog-filter-menu {
  position: fixed;
  z-index: 5200;
  min-width: 150px;
  max-width: min(230px, calc(100vw - 16px));
  max-height: min(330px, calc(100vh - 16px));
  overflow: auto;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(222, 212, 197, .95);
  border-radius: 10px;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 18px 46px rgba(16, 16, 15, .18);
  opacity: 0;
  transform: translateY(3px) scale(.985);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
}

.catalog-filter-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.catalog-filter-menu-size {
  min-width: 116px;
}

.catalog-filter-option {
  width: 100%;
  min-height: 32px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  padding: 6px 8px;
  font-size: .66rem;
  line-height: 1.15;
  text-align: left;
  transition: background .14s ease, opacity .14s ease;
}

.catalog-filter-option:hover:not(:disabled),
.catalog-filter-option.is-selected:not(:disabled) {
  background: rgba(201, 166, 107, .14);
}

.catalog-filter-option.is-selected:not(:disabled) {
  font-weight: 900;
}

.catalog-filter-option-swatch {
  width: 13px;
  height: 13px;
  display: block;
  border: 1px solid rgba(0, 0, 0, .17);
  border-radius: 50%;
  background: var(--color-texture, var(--color-dot, #ccc));
  background-position: center;
  background-size: cover;
}

.catalog-filter-option-name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.catalog-filter-option small {
  color: #9d2d25;
  font-size: .52rem;
  font-weight: 900;
  white-space: nowrap;
}

.catalog-filter-option.is-unavailable,
.catalog-filter-option:disabled {
  cursor: not-allowed;
  opacity: .22;
  filter: grayscale(1);
}

.catalog-filter-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 26px 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--soft);
  text-align: center;
}

.catalog-filter-empty strong {
  font-family: Syne, sans-serif;
  font-size: 1.05rem;
}

.catalog-filter-empty p {
  color: var(--gray);
  font-size: .78rem;
}

.catalog-filter-empty button {
  border: 1px solid rgba(201, 166, 107, .62);
  border-radius: 9px;
  background: #fff;
  color: #735a31;
  padding: 7px 11px;
  font-size: .68rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .catalog-product-filters {
    gap: 7px;
    padding: 9px 10px;
    border-radius: 10px;
  }

  .catalog-product-filters-head > strong {
    font-size: .67rem;
  }

  .catalog-product-filter-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
  }

  .catalog-filter-control {
    width: 100%;
    min-width: 0;
  }

  .catalog-filter-trigger {
    min-height: 32px;
    grid-template-columns: auto minmax(0, 1fr) 13px;
    padding: 5px 7px;
    border-radius: 8px;
    font-size: .61rem;
  }

  .catalog-filter-clear {
    min-height: 29px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: .59rem;
  }

  .catalog-filter-clear span {
    white-space: nowrap;
  }

  .catalog-filter-result {
    font-size: .57rem;
  }

  .catalog-filter-menu {
    min-width: 138px;
    max-width: min(205px, calc(100vw - 16px));
    border-radius: 9px;
  }

  .catalog-filter-menu-size {
    min-width: 104px;
  }

  .catalog-filter-option {
    min-height: 34px;
    font-size: .63rem;
  }
}

@media (max-width: 380px) {
  .catalog-filter-trigger {
    font-size: .57rem;
    padding-inline: 6px;
  }

  .catalog-filter-clear {
    font-size: .55rem;
    padding-inline: 6px;
  }
}

/* =========================================================
   LUHU - Categoría especial LIQUIDACIONES
   Solo presentación: no altera la lógica del catálogo.
========================================================= */
@media (min-width: 761px) {
  .mega-menu {
    grid-template-columns: 1.15fr repeat(5, minmax(0, .9fr));
    width: min(1260px, calc(100vw - 32px));
  }
}

.mega-column-liquidations {
  background: linear-gradient(135deg, rgba(201, 166, 107, .30), rgba(255, 255, 255, .07));
  border: 1px solid rgba(201, 166, 107, .42);
}

.mega-column-liquidations h3,
.mega-column-liquidations h3 a {
  color: var(--accent) !important;
}

.category-card-liquidations,
.catalog-category-liquidations {
  background: linear-gradient(135deg, #17130d, #6f4a13);
  border: 1px solid rgba(201, 166, 107, .55);
}

.category-card-liquidations .category-label,
.catalog-category-liquidations .catalog-category-badge {
  background: var(--accent);
  color: var(--black);
}

.catalog-category-liquidations::after,
.category-card-liquidations::after {
  background: linear-gradient(to top, rgba(15, 10, 3, .88), rgba(90, 55, 8, .18));
}

.mobile-catalog-liquidations {
  border: 1px solid rgba(201, 166, 107, .35);
  border-radius: 14px;
  padding: 10px;
  background: rgba(201, 166, 107, .08);
}

.mobile-catalog-liquidations .mobile-catalog-category {
  color: var(--accent);
}

.cart-top-zone.zone-liquidacion {
  background: linear-gradient(135deg, #fff6e5, #ead4aa);
  color: #684817;
  border-color: rgba(201, 166, 107, .55);
}

/* =========================================================
   LUHU - Corrección final de navegación jerárquica móvil
   Evita hover/focus persistente en los botones Volver.
========================================================= */
@media (hover: none), (pointer: coarse) {
  .catalog-intro-minimal.has-back .catalog-floating-back,
  .catalog-intro-minimal.has-back .catalog-floating-back:hover,
  .catalog-intro-minimal.has-back .catalog-floating-back:focus,
  .catalog-intro-minimal.has-back .catalog-floating-back:focus-visible {
    background: var(--black) !important;
    color: var(--accent) !important;
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
  }

  .catalog-model-sticky-back,
  .catalog-model-sticky-back:hover,
  .catalog-model-sticky-back:focus,
  .catalog-model-sticky-back:focus-visible {
    background: rgba(201, 166, 107, .12) !important;
    color: var(--accent) !important;
    border-color: rgba(201, 166, 107, .52) !important;
    -webkit-tap-highlight-color: transparent;
    outline: none !important;
  }

  .catalog-intro-minimal.has-back .catalog-floating-back:active,
  .catalog-model-sticky-back:active {
    background: rgba(201, 166, 107, .20) !important;
    color: var(--accent) !important;
  }
}


/* =========================================================
   LUHU - Feedback visual breve al aplicar filtros de modelo
   Solo se activa por filtro de talla/color o Limpiar filtros.
========================================================= */
.color-cards-continuous-grid.catalog-filter-results-animating
  > [data-card-product][data-card-color]:not([hidden]) {
  animation: luhuCatalogFilterResultIn 0.3s ease-out both;
}

@keyframes luhuCatalogFilterResultIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .color-cards-continuous-grid.catalog-filter-results-animating
    > [data-card-product][data-card-color]:not([hidden]) {
    animation: none;
  }
}


/* =========================================================
   LUHU - Encabezados existentes fijos por módulo
   No duplica ni agrega botones. Mantiene el filtro de color.
========================================================= */
:root {
  --admin-sticky-header-height: 0px;
}

.admin-tab-orders .admin-header,
.admin-tab-inventory .admin-header {
  position: sticky;
  top: 0;
  z-index: 72;
  background: rgba(250, 248, 244, .98);
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 28px rgba(16, 16, 15, .08);
}

.admin-tab-orders .admin-orders-toolbar,
.admin-tab-inventory .inventory-topbar {
  position: sticky;
  top: var(--admin-sticky-header-height);
  z-index: 68;
  background: rgba(255, 255, 255, .98);
  backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(16, 16, 15, .12);
}

.admin-tab-orders .admin-orders-toolbar {
  margin-bottom: 18px;
}

.admin-tab-inventory .inventory-topbar {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.admin-tab-inventory .inventory-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 10px;
}

@media (max-width: 1320px) {
  .admin-tab-inventory .inventory-topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-tab-inventory .inventory-main-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 900px) {
  .admin-tab-orders .admin-header,
  .admin-tab-inventory .admin-header {
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .admin-tab-orders .admin-orders-toolbar,
  .admin-tab-inventory .inventory-topbar {
    border-radius: 0 0 18px 18px;
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .admin-tab-inventory .inventory-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-tab-orders .admin-filter-row,
  .admin-tab-inventory .inventory-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .admin-tab-orders .admin-orders-toolbar,
  .admin-tab-inventory .inventory-topbar {
    max-height: 54vh;
    overflow-y: auto;
  }

  .admin-tab-inventory .inventory-main-actions .btn {
    min-height: 40px;
    padding: 9px 12px;
    font-size: .74rem;
  }
}

/* =========================================================
   LUHU - Indicador de galeria sin cubrir el stock
   En las tarjetas del catalogo, los puntos de multiples fotos se
   ubican en la esquina superior derecha. Los puntos del modal y del
   visor ampliado conservan su posicion inferior centrada.
========================================================= */
.product-card-gallery > .product-gallery-dots {
  top: 12px;
  right: 12px;
  bottom: auto;
  left: auto;
  max-width: calc(100% - 24px);
  padding: 6px 8px;
  gap: 5px;
  transform: none;
  background: rgba(16, 16, 15, .68);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  pointer-events: auto;
}

.product-card-gallery > .product-gallery-dots .product-gallery-dot {
  width: 6px;
  height: 6px;
}

.product-card-gallery > .product-gallery-dots .product-gallery-dot.active {
  width: 16px;
}

@media (max-width: 760px) {
  .product-card-gallery > .product-gallery-dots {
    top: 9px;
    right: 9px;
    bottom: auto;
    left: auto;
    max-width: calc(100% - 18px);
    padding: 5px 7px;
    gap: 4px;
    transform: none;
  }

  .product-card-gallery > .product-gallery-dots .product-gallery-dot {
    width: 5px;
    height: 5px;
  }

  .product-card-gallery > .product-gallery-dots .product-gallery-dot.active {
    width: 14px;
  }
}


/* =========================================================
   LUHU - Alertas críticas persistentes del panel
   Los errores de stock permanecen visibles hasta que el equipo
   los cierre manualmente con la X.
========================================================= */
.admin-global-feedback-card {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  max-width: 520px;
}

.admin-global-feedback-title,
#adminGlobalFeedbackTitle {
  max-width: 430px;
  white-space: normal;
  line-height: 1.45;
}

.admin-global-feedback-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f3f0ea;
  color: #171717;
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 700;
}

.admin-global-feedback-close:hover,
.admin-global-feedback-close:focus-visible {
  background: #e8e1d7;
  outline: 2px solid rgba(16, 16, 15, .22);
  outline-offset: 2px;
}

.admin-global-feedback-close[hidden] {
  display: none !important;
}

.admin-global-feedback.is-persistent .admin-global-feedback-card {
  padding: 28px 52px 26px;
}

@media (max-width: 560px) {
  .admin-global-feedback.is-persistent .admin-global-feedback-card {
    width: calc(100vw - 24px);
    padding: 26px 46px 24px 22px;
  }
}

/* =========================================================
   LUHU - Long press movil: tarjeta convertida en vista modal temporal
========================================================= */
@media (max-width: 760px) {
  .products-grid.catalog-grid-models .catalog-option-card {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .products-grid.catalog-grid-models .catalog-option-card.is-mobile-longpress-source {
    visibility: hidden !important;
  }

  body.mobile-model-card-preview-open {
    overflow: hidden !important;
  }

  .mobile-model-card-preview-layer.products-grid.catalog-grid-models {
    position: fixed !important;
    inset: 0 !important;
    z-index: 5250 !important;
    display: block !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  .mobile-model-card-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, .62);
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition:
      opacity .13s ease,
      backdrop-filter .13s ease,
      -webkit-backdrop-filter .13s ease;
  }

  .mobile-model-card-preview-layer.is-visible .mobile-model-card-preview-backdrop {
    opacity: 1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .mobile-model-card-preview-layer.products-grid.catalog-grid-models .mobile-model-card-preview {
    position: fixed !important;
    z-index: 2 !important;
    margin: 0 !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    transform: translateZ(0) scale(1) !important;
    transform-origin: center center;
    box-shadow: 0 8px 20px rgba(16, 16, 15, .10) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    will-change: left, top, width, height, border-radius, box-shadow, transform;
    transition:
      left .19s cubic-bezier(.2, .8, .2, 1),
      top .19s cubic-bezier(.2, .8, .2, 1),
      width .19s cubic-bezier(.2, .8, .2, 1),
      height .19s cubic-bezier(.2, .8, .2, 1),
      border-radius .19s cubic-bezier(.2, .8, .2, 1),
      box-shadow .19s ease,
      transform .19s cubic-bezier(.2, .8, .2, 1) !important;
  }

  .mobile-model-card-preview-layer.products-grid.catalog-grid-models .mobile-model-card-preview.is-expanded {
    border-radius: 8px !important;
    transform: translateZ(0) scale(1.008) !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .38) !important;
  }

  .mobile-model-card-preview-layer.is-closing .mobile-model-card-preview-backdrop {
    transition-duration: .12s !important;
  }

  .mobile-model-card-preview-layer.is-closing.products-grid.catalog-grid-models .mobile-model-card-preview {
    transition-duration: .15s !important;
  }

  /* Al crecer la tarjeta, el contenido mantiene sus proporciones y gana
     legibilidad de forma natural, como una version ampliada de la misma tarjeta. */
  .mobile-model-card-preview-layer.catalog-grid-models .mobile-model-card-preview>div {
    left: clamp(16px, 4vw, 24px);
    right: clamp(16px, 4vw, 24px);
    bottom: clamp(16px, 4vw, 24px);
  }

  .mobile-model-card-preview-layer.catalog-grid-models .mobile-model-card-preview h3.model-card-name {
    gap: 1px;
    margin-bottom: 10px;
    font-size: clamp(1.35rem, 5.8vw, 2rem);
    line-height: 1;
  }

  .mobile-model-card-preview-layer.catalog-grid-models .mobile-model-card-preview .model-card-meta {
    gap: 6px;
  }

  .mobile-model-card-preview-layer.catalog-grid-models .mobile-model-card-preview .model-material-tag {
    min-height: 28px;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: clamp(.62rem, 2.6vw, .78rem);
  }

  .mobile-model-card-preview-layer.catalog-grid-models .mobile-model-card-preview .model-material-tag svg {
    width: 15px;
    height: 15px;
  }

  .mobile-model-card-preview-layer.catalog-grid-models .mobile-model-card-preview .model-card-color-count {
    padding: 6px 9px;
    border-radius: 7px;
    font-size: clamp(.62rem, 2.6vw, .76rem);
  }

  .mobile-model-card-preview-layer.catalog-grid-models .mobile-model-card-preview>.model-card-size-guide {
    top: 14px;
    right: 14px !important;
    min-height: 31px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: .65rem;
  }

  .mobile-model-card-preview-layer.catalog-grid-models .mobile-model-card-preview>.model-card-size-guide svg {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 760px) and (hover: none) {
  .products-grid.catalog-grid-models .catalog-option-card:hover {
    transform: none;
    box-shadow: none;
  }

  .products-grid.catalog-grid-models .catalog-option-card:hover img {
    transform: none;
  }
}