:root {
  --bg: #faf8f3;
  --surface: #ffffff;
  --surface-2: #f5f2ea;

  --ink: #213126;
  --muted: #7c837c;

  --green: #536b55;
  --green-dark: #344838;
  --green-soft: #e8ede5;

  --sand: #e7d7bd;
  --border: #e8e5de;

  --danger: #a74d4d;

  --shadow:
    0 18px 55px rgba(30, 42, 33, .08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  font-family:
    "DM Sans",
    sans-serif;

  color: var(--ink);

  background:
    var(--bg);
}

button,
input,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color:
    transparent;
}

button {
  cursor: pointer;
}

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

.hidden {
  display: none !important;
}

.eyebrow {
  display: inline-block;

  color: var(--green);

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 2px;
}

.topbar {
  width: min(1180px, calc(100% - 36px));

  margin: 18px auto;

  padding: 14px 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background:
    rgba(250, 248, 243, .85);

  backdrop-filter: blur(16px);

  border:
    1px solid rgba(255,255,255,.9);

  border-radius: 22px;

  position: sticky;
  top: 12px;
  z-index: 20;
}

.brand,
.login-brand,
.admin-logo {
  display: flex;
  gap: 11px;
  align-items: center;
}

.brand strong,
.login-brand strong,
.admin-logo strong {
  display: block;

  font-family:
    "Playfair Display",
    serif;

  font-size: 18px;
}

.brand span,
.login-brand span,
.admin-logo span {
  display: block;

  margin-top: 1px;

  color: var(--muted);

  font-size: 11px;
}

.brand-mark {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: white;

  background:
    var(--green);

  font-family:
    "Playfair Display",
    serif;

  font-size: 22px;
  font-weight: 700;
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 28px;

  font-size: 14px;
  font-weight: 600;
}

.cart-button {
  min-width: 48px;
  height: 42px;

  border: 0;
  border-radius: 30px;

  color: white;
  background: var(--green-dark);
}

#cartCount {
  margin-left: 3px;

  font-size: 11px;
}

.hero {
  width: min(1180px, calc(100% - 36px));

  min-height: 600px;

  margin: 34px auto 60px;

  padding: 70px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;

  overflow: hidden;

  border-radius: 38px;

  background:
    linear-gradient(
      135deg,
      #f3efe4,
      #e6eee3
    );
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero h1 {
  max-width: 650px;

  margin:
    14px 0 22px;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(52px, 6vw, 82px);

  line-height: .98;
}

.hero h1 span {
  display: block;

  color: var(--green);
}

.hero p {
  max-width: 510px;

  color: #6d756d;

  font-size: 17px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 12px;

  margin-top: 32px;
}

.primary,
.secondary {
  padding: 14px 22px;

  border-radius: 30px;

  font-weight: 700;
}

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

.secondary {
  border:
    1px solid var(--green);

  color: var(--green);
}

.hero-art {
  min-height: 400px;

  position: relative;
}

.hero-circle {
  width: 390px;
  height: 390px;

  position: absolute;

  top: 20px;
  right: 0;

  border-radius: 50%;

  background:
    rgba(255,255,255,.7);
}

.soap {
  width: 250px;
  height: 150px;

  position: absolute;

  display: grid;
  place-items: center;

  border-radius:
    55px 46px 58px 48px;

  box-shadow:
    0 30px 50px rgba(53,72,56,.16);

  transform:
    rotate(-8deg);
}

.soap span {
  padding: 7px 16px;

  border:
    1px solid rgba(255,255,255,.65);

  border-radius: 30px;

  color:
    rgba(255,255,255,.9);

  font-family:
    "Playfair Display",
    serif;
}

.soap-1 {
  top: 90px;
  right: 95px;

  background:
    linear-gradient(
      135deg,
      #879b75,
      #52694f
    );
}

.soap-2 {
  top: 235px;
  right: 8px;

  background:
    linear-gradient(
      135deg,
      #d7bb94,
      #bd9365
    );

  transform:
    rotate(11deg);
}

.leaf {
  position: absolute;

  font-size: 70px;

  filter:
    drop-shadow(
      0 10px 14px rgba(0,0,0,.08)
    );
}

.leaf-a {
  top: 25px;
  left: 20px;

  transform: rotate(-30deg);
}

.leaf-b {
  right: 0;
  bottom: 20px;

  transform: rotate(24deg);
}

.benefits {
  width: min(1100px, calc(100% - 36px));

  margin:
    -20px auto 100px;

  display: grid;
  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}

.benefits article {
  padding: 25px;

  display: flex;
  gap: 16px;
  align-items: center;

  background:
    var(--surface);

  border:
    1px solid var(--border);

  border-radius: 20px;
}

.benefits article > div {
  font-size: 27px;
}

.benefits strong,
.benefits span {
  display: block;
}

.benefits span {
  color: var(--muted);

  font-size: 13px;
}

.benefits strong {
  margin-bottom: 4px;

  color: var(--ink);

  font-size: 14px;
}

.products-section {
  width: min(1180px, calc(100% - 36px));

  margin:
    0 auto 120px;
}

.section-heading {
  margin-bottom: 34px;

  display: flex;
  justify-content: space-between;
  align-items: end;

  gap: 20px;
}

.section-heading h2,
.story-card h2 {
  margin:
    8px 0 0;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(34px, 4vw, 50px);
}

.filters {
  display: flex;
  gap: 8px;
}

.filter {
  padding: 10px 18px;

  border:
    1px solid var(--border);

  border-radius: 30px;

  color: var(--muted);
  background: white;
}

.filter.active {
  color: white;

  background: var(--green);

  border-color: var(--green);
}

.products-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 25px;
}

.product-card {
  overflow: hidden;

  background: white;

  border:
    1px solid var(--border);

  border-radius: 26px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.product-card:hover {
  transform:
    translateY(-6px);

  box-shadow: var(--shadow);
}

.product-image {
  height: 330px;

  display: grid;
  place-items: center;

  overflow: hidden;

  background: var(--surface-2);
}

.product-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.no-image {
  font-size: 55px;
}

.product-info {
  padding: 21px;
}

.product-info-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 15px;
}

.product-info h3 {
  margin: 0;

  font-family:
    "Playfair Display",
    serif;

  font-size: 23px;
}

.product-info small {
  display: block;

  margin-top: 5px;

  color: var(--muted);
}

.price {
  white-space: nowrap;

  color: var(--green-dark);

  font-size: 18px;
  font-weight: 700;
}

.product-description {
  min-height: 42px;

  margin: 15px 0;

  overflow: hidden;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.55;

  display: -webkit-box;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 18px;
}

.stock {
  color: var(--muted);

  font-size: 12px;
}

.add-cart {
  padding: 11px 16px;

  border: 0;

  border-radius: 30px;

  color: white;
  background: var(--green);

  font-weight: 700;
}

.add-cart:disabled {
  cursor: not-allowed;

  opacity: .4;
}

.loading-card,
.empty-products {
  grid-column: 1 / -1;

  min-height: 300px;

  display: grid;
  place-items: center;

  text-align: center;

  color: var(--muted);

  background: white;

  border:
    1px dashed #d6d2c8;

  border-radius: 26px;
}

.spinner {
  width: 30px;
  height: 30px;

  margin: auto;

  border:
    3px solid #ddd;

  border-top-color:
    var(--green);

  border-radius: 50%;

  animation:
    spin 1s linear infinite;
}

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

.story-section {
  width: min(1180px, calc(100% - 36px));

  margin:
    0 auto 100px;
}

.story-card {
  padding:
    70px min(8vw, 100px);

  border-radius: 35px;

  background: var(--green-dark);

  color: white;
}

.story-card .eyebrow {
  color: #dce9d7;
}

.story-card p {
  max-width: 650px;

  color: #d2dbd2;

  font-size: 17px;
  line-height: 1.8;
}

footer {
  width: min(1180px, calc(100% - 36px));

  margin: 0 auto;

  padding: 35px 0;

  display: flex;
  justify-content: space-between;

  border-top:
    1px solid var(--border);

  color: var(--muted);

  font-size: 13px;
}

footer strong,
footer span {
  display: block;
}

footer strong {
  color: var(--ink);

  font-family:
    "Playfair Display",
    serif;

  font-size: 18px;
}

.cart-drawer {
  width: min(430px, 100%);

  height: 100vh;

  padding: 25px;

  position: fixed;

  top: 0;
  right: 0;

  z-index: 100;

  display: flex;
  flex-direction: column;

  background: white;

  transform:
    translateX(110%);

  transition:
    transform .25s ease;

  box-shadow:
    -20px 0 50px rgba(0,0,0,.12);
}

.cart-drawer.open {
  transform:
    translateX(0);
}

.overlay {
  position: fixed;
  inset: 0;

  z-index: 90;

  visibility: hidden;

  opacity: 0;

  background:
    rgba(20,27,21,.35);

  transition:
    .2s;
}

.overlay.open {
  visibility: visible;

  opacity: 1;
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-bottom: 18px;

  border-bottom:
    1px solid var(--border);
}

.cart-header span {
  color: var(--muted);

  font-size: 12px;
}

.cart-header h3 {
  margin: 2px 0 0;

  font-family:
    "Playfair Display",
    serif;

  font-size: 30px;
}

.close-button {
  width: 42px;
  height: 42px;

  border: 0;
  border-radius: 50%;

  color: var(--ink);
  background: var(--surface-2);

  font-size: 25px;
}

.cart-items {
  padding: 20px 0;

  flex: 1;

  overflow: auto;
}

.cart-item {
  padding: 14px 0;

  display: grid;

  grid-template-columns:
    64px 1fr auto;

  gap: 13px;

  border-bottom:
    1px solid var(--border);
}

.cart-item-image {
  width: 64px;
  height: 64px;

  overflow: hidden;

  border-radius: 12px;

  background:
    var(--surface-2);
}

.cart-item-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.cart-item h4 {
  margin: 2px 0;

  font-size: 14px;
}

.cart-item small {
  color: var(--muted);
}

.qty-controls {
  margin-top: 8px;

  display: flex;
  gap: 9px;
  align-items: center;
}

.qty-controls button {
  width: 25px;
  height: 25px;

  border:
    1px solid var(--border);

  border-radius: 50%;

  background: white;
}

.cart-footer {
  padding-top: 20px;

  border-top:
    1px solid var(--border);
}

.cart-total {
  margin-bottom: 16px;

  display: flex;
  justify-content: space-between;

  font-size: 18px;
}

.checkout-button {
  width: 100%;

  padding: 15px;

  border: 0;
  border-radius: 15px;

  color: white;
  background: var(--green-dark);

  font-weight: 700;
}

.cart-footer small {
  display: block;

  margin-top: 10px;

  text-align: center;

  color: var(--muted);
}


/* ADMIN */

.admin-body {
  min-height: 100vh;

  background: #f6f7f4;
}

.login-view {
  min-height: 100vh;

  padding: 20px;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at top right,
      #dce7d7,
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      #eee0ca,
      transparent 36%
    ),
    #f6f4ee;
}

.login-card {
  width: min(460px, 100%);

  padding: 38px;

  background: white;

  border:
    1px solid var(--border);

  border-radius: 30px;

  box-shadow: var(--shadow);
}

.login-copy {
  margin: 45px 0 28px;
}

.login-copy h1 {
  margin: 7px 0;

  font-family:
    "Playfair Display",
    serif;

  font-size: 42px;
}

.login-copy p {
  color: var(--muted);

  line-height: 1.6;
}

label {
  display: block;

  margin-bottom: 18px;

  color: #4c564e;

  font-size: 13px;
  font-weight: 600;
}

input,
textarea {
  width: 100%;

  margin-top: 8px;

  padding: 13px 14px;

  outline: none;

  border:
    1px solid #dedfd9;

  border-radius: 12px;

  background: white;

  color: var(--ink);
}

input:focus,
textarea:focus {
  border-color: var(--green);

  box-shadow:
    0 0 0 3px rgba(83,107,85,.1);
}

textarea {
  resize: vertical;
}

.admin-primary,
.admin-secondary {
  padding: 12px 18px;

  border-radius: 12px;

  font-weight: 700;
}

.admin-primary {
  border: 0;

  color: white;
  background: var(--green-dark);
}

.admin-secondary {
  border:
    1px solid var(--border);

  color: var(--ink);
  background: white;
}

.full {
  width: 100%;
}

.form-error {
  min-height: 20px;

  margin-bottom: 10px;

  color: var(--danger);

  font-size: 12px;
}

.admin-layout {
  min-height: 100vh;

  display: grid;

  grid-template-columns:
    250px 1fr;
}

.admin-sidebar {
  padding: 28px 20px;

  display: flex;
  flex-direction: column;

  position: sticky;
  top: 0;

  height: 100vh;

  background:
    #25382a;

  color: white;
}

.admin-logo {
  padding: 0 8px 30px;

  border-bottom:
    1px solid rgba(255,255,255,.1);
}

.admin-logo .brand-mark {
  background: #e3d4b9;

  color: var(--green-dark);
}

.admin-logo span {
  color:
    rgba(255,255,255,.55);
}

.admin-nav {
  margin-top: 28px;

  display: grid;
  gap: 7px;
}

.admin-nav button {
  padding: 13px;

  display: flex;
  gap: 11px;
  align-items: center;

  border: 0;
  border-radius: 12px;

  text-align: left;

  color:
    rgba(255,255,255,.65);

  background: transparent;
}

.admin-nav button.active {
  color: white;

  background:
    rgba(255,255,255,.1);
}

.admin-nav small {
  margin-left: auto;

  opacity: .5;

  font-size: 9px;
}

.logout-button {
  margin-top: auto;

  padding: 12px;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 11px;

  color:
    rgba(255,255,255,.7);

  background: transparent;
}

.admin-main {
  padding: 42px;

  overflow: hidden;
}

.admin-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 20px;
}

.admin-top h1 {
  margin: 5px 0;

  font-family:
    "Playfair Display",
    serif;

  font-size: 42px;
}

.admin-top p {
  margin: 0;

  color: var(--muted);
}

.stats-grid {
  margin: 35px 0 25px;

  display: grid;
  grid-template-columns:
    repeat(3, 1fr);

  gap: 15px;
}

.stats-grid article {
  padding: 24px;

  background: white;

  border:
    1px solid var(--border);

  border-radius: 18px;
}

.stats-grid span {
  display: block;

  margin-bottom: 10px;

  color: var(--muted);

  font-size: 12px;
}

.stats-grid strong {
  font-size: 27px;
}

.admin-products-card {
  padding: 25px;

  background: white;

  border:
    1px solid var(--border);

  border-radius: 20px;
}

.admin-card-heading h2 {
  margin: 0;

  font-family:
    "Playfair Display",
    serif;

  font-size: 26px;
}

.admin-card-heading p {
  margin:
    5px 0 20px;

  color: var(--muted);

  font-size: 13px;
}

.admin-products {
  display: grid;
  gap: 10px;
}

.admin-product {
  padding: 12px;

  display: grid;

  grid-template-columns:
    65px 1fr 120px 95px 135px;

  gap: 15px;

  align-items: center;

  border:
    1px solid var(--border);

  border-radius: 14px;
}

.admin-product-image {
  width: 65px;
  height: 65px;

  display: grid;
  place-items: center;

  overflow: hidden;

  border-radius: 10px;

  background: var(--surface-2);
}

.admin-product-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.admin-product h3 {
  margin: 0;

  font-size: 14px;
}

.admin-product small {
  display: block;

  margin-top: 4px;

  color: var(--muted);
}

.status-pill {
  width: fit-content;

  padding: 5px 9px;

  border-radius: 20px;

  color: #486248;
  background: #e9f0e6;

  font-size: 10px;
  font-weight: 700;
}

.status-pill.off {
  color: #8f6060;
  background: #f3e8e8;
}

.product-admin-actions {
  display: flex;
  gap: 6px;
}

.product-admin-actions button {
  padding: 8px 10px;

  border:
    1px solid var(--border);

  border-radius: 9px;

  background: white;

  font-size: 11px;
}

.delete-product {
  color: var(--danger);
}

.modal {
  position: fixed;
  inset: 0;

  z-index: 200;

  padding: 25px;

  display: grid;
  place-items: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(24, 35, 27, .55);

  backdrop-filter:
    blur(4px);
}

.product-modal {
  width: min(760px, 100%);

  max-height:
    calc(100vh - 50px);

  position: relative;

  overflow: auto;

  background: white;

  border-radius: 26px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.2);
}

.modal-header {
  padding: 25px 28px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  position: sticky;
  top: 0;

  z-index: 4;

  background: white;

  border-bottom:
    1px solid var(--border);
}

.modal-header h2 {
  margin: 4px 0 0;

  font-family:
    "Playfair Display",
    serif;

  font-size: 28px;
}

.product-form {
  padding: 28px;
}

.image-drop {
  width: 100%;

  min-height: 150px;

  padding: 30px;

  display: grid;
  place-items: center;
  gap: 5px;

  border:
    2px dashed #ced4ca;

  border-radius: 18px;

  color: var(--muted);
  background: #fafbf8;
}

.upload-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  margin-bottom: 8px;

  border-radius: 50%;

  color: white;
  background: var(--green);

  font-size: 22px;
}

.image-drop strong {
  color: var(--ink);
}

.image-preview {
  margin: 15px 0 24px;

  display: flex;
  gap: 10px;

  overflow-x: auto;
}

.preview-item {
  min-width: 105px;
  height: 105px;

  position: relative;

  overflow: hidden;

  border-radius: 12px;

  background: var(--surface-2);
}

.preview-item img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.preview-existing button {
  width: 25px;
  height: 25px;

  position: absolute;

  top: 5px;
  right: 5px;

  border: 0;
  border-radius: 50%;

  color: white;
  background:
    rgba(35,35,35,.7);
}

.form-grid {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 0 16px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.money-input {
  position: relative;
}

.money-input span {
  position: absolute;

  top: 50%;
  left: 13px;

  transform:
    translateY(-23%);

  color: var(--muted);
}

.money-input input {
  padding-left: 30px;
}

.switch-row {
  margin: 5px 0 20px;

  display: grid;
  grid-template-columns:
    1fr 1fr;

  gap: 12px;
}

.switch-item {
  margin: 0;

  padding: 15px;

  display: flex;
  gap: 10px;
  align-items: flex-start;

  border:
    1px solid var(--border);

  border-radius: 13px;
}

.switch-item input {
  width: auto;

  margin-top: 3px;
}

.switch-item strong,
.switch-item small {
  display: block;
}

.switch-item small {
  margin-top: 3px;

  color: var(--muted);

  font-weight: 400;
}

.modal-actions {
  padding-top: 20px;

  display: flex;
  justify-content: flex-end;
  gap: 10px;

  border-top:
    1px solid var(--border);
}


@media (max-width: 900px) {

  .topbar nav > a {
    display: none;
  }

  .hero {
    min-height: unset;

    padding: 45px 30px;

    grid-template-columns: 1fr;
  }

  .hero-art {
    margin-top: 25px;

    transform: scale(.9);
  }

  .benefits,
  .products-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .admin-sidebar {
    height: auto;

    padding: 14px;

    position: relative;

    flex-direction: row;

    align-items: center;
  }

  .admin-logo {
    padding:
      0 15px 0 0;

    border: 0;
  }

  .admin-logo span {
    display: none;
  }

  .admin-nav {
    margin:
      0 0 0 auto;

    display: flex;
  }

  .admin-nav button {
    padding: 10px;
  }

  .admin-nav button span {
    display: none;
  }

  .admin-nav button small {
    display: none;
  }

  .logout-button {
    margin:
      0 0 0 5px;
  }

  .admin-main {
    padding: 25px 18px;
  }

  .admin-product {
    grid-template-columns:
      60px 1fr auto;
  }

  .admin-product > :nth-child(3),
  .admin-product > :nth-child(4) {
    display: none;
  }

}


@media (max-width: 620px) {

  .hero {
    padding:
      38px 22px;

    border-radius: 25px;
  }

  .hero h1 {
    font-size: 47px;
  }

  .hero-art {
    min-height: 330px;

    transform:
      scale(.8);

    transform-origin:
      center left;
  }

  .benefits,
  .products-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-image {
    height: 300px;
  }

  .admin-top {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-primary {
    width: 100%;
  }

  .admin-nav button:not(.active) {
    display: none;
  }

  .admin-logo strong {
    font-size: 14px;
  }

  .logout-button {
    font-size: 0;
  }

  .logout-button::after {
    content: "↪";

    font-size: 18px;
  }

  .form-grid,
  .switch-row {
    grid-template-columns: 1fr;
  }

  .form-grid .full {
    grid-column: auto;
  }

  .product-modal {
    max-height: 100vh;

    border-radius: 20px;
  }

  .modal {
    padding: 8px;
  }

}

/* LOGO NÚA */

.logo-wordmark {
  display: block;
  height: 58px;
  width: auto;
}

.footer-brand {
  display: flex;
  align-items: center;
}

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

.admin-logo-image {
  display: block;
  height: 54px;
  width: auto;
}

.login-brand,
.admin-logo,
.brand {
  align-items: center;
}

@media (max-width: 620px) {
  .logo-wordmark {
    height: 46px;
  }

  .footer-logo,
  .admin-logo-image {
    height: 44px;
  }
}


/* =====================================================
   NÚA — IDENTIDAD VISUAL PREMIUM
   ===================================================== */

:root {
  --bg: #f8f3eb;
  --surface: #fffdf9;
  --surface-2: #eee3d4;

  --ink: #4b2d1f;
  --muted: #8c796c;

  --green: #765038;
  --green-dark: #4b2d1f;
  --green-soft: #eee2d3;

  --sand: #d7b996;
  --border: rgba(75, 45, 31, .12);

  --danger: #a14c4c;

  --shadow:
    0 26px 70px rgba(75, 45, 31, .09);
}


/* GENERAL */

body {
  background:
    #f8f3eb;

  color:
    var(--ink);
}

.eyebrow {
  color: #8d664c;

  font-size: 11px;

  letter-spacing: 3px;
}


/* HEADER */

.topbar {
  width:
    min(1240px, calc(100% - 42px));

  margin: 18px auto;

  padding: 12px 25px;

  background:
    rgba(255, 253, 249, .86);

  border:
    1px solid rgba(75, 45, 31, .08);

  border-radius: 0;

  box-shadow:
    0 7px 30px rgba(75,45,31,.035);

  backdrop-filter: blur(20px);
}

.logo-wordmark {
  height: 67px;
}

.topbar nav {
  gap: 36px;

  font-size: 12px;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}

.topbar nav > a {
  position: relative;
}

.topbar nav > a::after {
  content: "";

  width: 0;
  height: 1px;

  position: absolute;

  left: 0;
  bottom: -7px;

  background:
    var(--ink);

  transition:
    width .25s ease;
}

.topbar nav > a:hover::after {
  width: 100%;
}

.cart-button {
  width: 46px;
  min-width: 46px;
  height: 46px;

  border-radius: 50%;

  background:
    var(--ink);
}


/* HERO NÚA */

.nua-hero {
  width:
    min(1240px, calc(100% - 42px));

  min-height: 670px;

  margin:
    26px auto 75px;

  padding:
    78px 72px;

  grid-template-columns:
    1.05fr .95fr;

  gap: 55px;

  border-radius: 0;

  position: relative;

  background:
    linear-gradient(
      115deg,
      #f2e9dc 0%,
      #f9f5ee 50%,
      #e8d7c4 100%
    );

  box-shadow:
    inset 0 0 0 1px rgba(75,45,31,.06);
}

.nua-hero::before {
  content: "";

  width: 460px;
  height: 460px;

  position: absolute;

  top: -180px;
  right: -120px;

  border-radius: 50%;

  background:
    rgba(255,255,255,.26);

  filter: blur(3px);
}

.hero-kicker {
  display: inline-block;

  margin-bottom: 25px;

  color:
    #8d664c;

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 3.5px;
}

.nua-hero h1 {
  max-width: 620px;

  margin:
    0 0 27px;

  color:
    var(--ink);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(58px, 6.2vw, 88px);

  font-weight: 600;

  line-height: .96;

  letter-spacing: -2px;
}

.nua-hero h1 em {
  display: block;

  margin-top: 9px;

  color:
    #916c53;

  font-weight: 500;
}

.nua-hero .hero-content > p {
  max-width: 540px;

  color:
    #7c6c61;

  font-size: 16px;

  line-height: 1.85;
}

.hero-actions {
  margin-top: 35px;

  gap: 14px;
}

.hero-actions .primary,
.hero-actions .secondary {
  padding:
    15px 24px;

  border-radius: 0;

  font-size: 11px;

  letter-spacing: 1.4px;

  text-transform: uppercase;

  transition:
    transform .2s ease,
    background .2s ease;
}

.hero-actions .primary {
  background:
    var(--ink);
}

.hero-actions .primary:hover {
  transform:
    translateY(-2px);

  background:
    #62402e;
}

.hero-actions .secondary {
  border-color:
    rgba(75,45,31,.35);

  color:
    var(--ink);
}

.hero-actions .secondary:hover {
  background:
    rgba(255,255,255,.35);
}

.hero-details {
  margin-top: 43px;

  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  color:
    #98877c;

  font-size: 10px;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}


/* HERO EDITORIAL */

.hero-editorial {
  min-height: 490px;

  position: relative;
}

.editorial-main {
  width: 83%;
  height: 440px;

  position: absolute;

  top: 10px;
  right: 0;

  padding:
    70px 45px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background:
    rgba(255,253,249,.75);

  box-shadow:
    0 35px 70px rgba(75,45,31,.10);

  backdrop-filter: blur(10px);
}

.hero-logo {
  width: 100%;
  max-width: 370px;

  margin: 0 auto;
}

.editorial-main p {
  margin:
    30px auto 0;

  max-width: 250px;

  text-align: center;

  color:
    #806c5f;

  font-family:
    "Playfair Display",
    serif;

  font-size: 15px;

  font-style: italic;

  line-height: 1.6;
}

.editorial-leaf {
  position: absolute;

  top: 24px;
  right: 30px;

  color:
    #b79276;

  font-size: 48px;
}

.editorial-small {
  width: 155px;
  height: 105px;

  padding: 18px;

  position: absolute;

  left: -6px;
  bottom: 13px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  color:
    #f9f1e6;

  background:
    #745039;

  box-shadow:
    0 20px 40px rgba(75,45,31,.15);
}

.editorial-small.second {
  width: 138px;
  height: 88px;

  left: auto;
  right: -16px;
  bottom: -25px;

  color:
    var(--ink);

  background:
    #d7b996;
}

.editorial-small span {
  opacity: .7;

  font-size: 10px;
}

.editorial-small strong {
  font-size: 10px;

  letter-spacing: 2px;
}


/* BENEFITS */

.benefits {
  width:
    min(1160px, calc(100% - 42px));

  margin:
    0 auto 120px;

  gap: 0;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.benefits article {
  padding:
    35px 32px;

  border: 0;

  border-right:
    1px solid var(--border);

  border-radius: 0;

  background:
    transparent;
}

.benefits article:last-child {
  border-right: 0;
}

.benefits article > div {
  color:
    #b28f72;

  font-family:
    "Playfair Display",
    serif;

  font-size: 20px;
}

.benefits strong {
  margin-bottom: 6px;

  font-family:
    "Playfair Display",
    serif;

  font-size: 16px;

  font-weight: 600;
}


/* PRODUCTS */

.products-section {
  width:
    min(1240px, calc(100% - 42px));

  margin:
    0 auto 140px;
}

.section-heading {
  margin-bottom: 42px;
}

.section-heading h2 {
  margin-top: 10px;

  color:
    var(--ink);

  font-size:
    clamp(39px, 4.3vw, 57px);

  font-weight: 600;

  letter-spacing: -1px;
}

.filters {
  gap: 4px;
}

.filter {
  padding:
    10px 17px;

  border: 0;
  border-bottom:
    1px solid transparent;

  border-radius: 0;

  color:
    #938177;

  background:
    transparent;

  font-size: 10px;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}

.filter.active {
  color:
    var(--ink);

  background:
    transparent;

  border-bottom-color:
    var(--ink);
}


/* PRODUCT CARDS PREMIUM */

.products-grid {
  grid-template-columns:
    repeat(3, 1fr);

  gap:
    38px 25px;
}

.product-card {
  overflow: visible;

  position: relative;

  border: 0;

  border-radius: 0;

  background:
    transparent;

  transition:
    transform .35s ease;
}

.product-card:hover {
  transform:
    translateY(-5px);

  box-shadow: none;
}

.product-image {
  height: 440px;

  position: relative;

  overflow: hidden;

  background:
    #eee5da;
}

.product-image::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent 65%,
      rgba(57,35,24,.08)
    );
}

.product-image img {
  transition:
    transform .55s ease;
}

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

.product-info {
  padding:
    20px 3px 0;
}

.product-info-top {
  gap: 20px;
}

.product-info h3 {
  font-size: 24px;

  font-weight: 500;

  letter-spacing: -.4px;
}

.product-info small {
  margin-top: 7px;

  color:
    #9a897e;

  font-size: 10px;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}

.price {
  color:
    var(--ink);

  font-family:
    "Playfair Display",
    serif;

  font-size: 18px;

  font-weight: 600;
}

.product-description {
  min-height: 45px;

  margin:
    15px 0 18px;

  color:
    #86766c;

  font-size: 13px;

  line-height: 1.65;
}

.product-actions {
  padding-top: 14px;

  border-top:
    1px solid var(--border);
}

.stock {
  color:
    #9a897e;

  font-size: 10px;

  letter-spacing: .7px;

  text-transform: uppercase;
}

.add-cart {
  padding:
    11px 17px;

  border-radius: 0;

  color:
    var(--ink);

  background:
    transparent;

  border:
    1px solid rgba(75,45,31,.28);

  font-size: 10px;

  letter-spacing: 1.3px;

  text-transform: uppercase;

  transition:
    .2s ease;
}

.add-cart:hover:not(:disabled) {
  color: white;

  background:
    var(--ink);

  border-color:
    var(--ink);
}


/* EMPTY / LOADING */

.loading-card,
.empty-products {
  border:
    1px solid var(--border);

  border-radius: 0;

  background:
    rgba(255,255,255,.3);
}


/* STORY */

.story-section {
  width:
    min(1240px, calc(100% - 42px));

  margin:
    0 auto 110px;
}

.story-card {
  min-height: 450px;

  padding:
    75px 9%;

  position: relative;

  overflow: hidden;

  border-radius: 0;

  color:
    #f8f0e6;

  background:
    #563624;
}

.story-card::after {
  content: "NÚA";

  position: absolute;

  right: -35px;
  bottom: -110px;

  color:
    rgba(255,255,255,.035);

  font-family:
    "Playfair Display",
    serif;

  font-size: 270px;
}

.story-number {
  position: absolute;

  top: 35px;
  right: 45px;

  color:
    rgba(255,255,255,.45);

  font-size: 10px;

  letter-spacing: 2px;
}

.story-card .eyebrow {
  color:
    #d9c0ab;
}

.story-card h2 {
  max-width: 600px;

  margin:
    15px 0 25px;

  font-size:
    clamp(45px, 5vw, 70px);

  font-weight: 500;
}

.story-card p {
  max-width: 650px;

  color:
    #d8cabe;

  font-size: 15px;

  line-height: 1.9;
}

.story-signature {
  margin-top: 40px;

  color:
    #d9c0ab;

  font-size: 10px;

  letter-spacing: 2px;

  text-transform: uppercase;
}


/* FOOTER */

footer {
  width:
    min(1240px, calc(100% - 42px));

  padding:
    45px 0;

  align-items: center;

  border-top:
    1px solid var(--border);
}

.footer-logo {
  height: 72px;
}


/* CART */

.cart-drawer {
  background:
    #fffdf9;
}

.checkout-button {
  border-radius: 0;

  background:
    var(--ink);

  letter-spacing: 1px;

  text-transform: uppercase;
}


/* RESPONSIVE NÚA */

@media (max-width: 900px) {

  .nua-hero {
    grid-template-columns: 1fr;

    padding:
      60px 38px;
  }

  .hero-editorial {
    width: 100%;
    min-height: 480px;

    margin-top: 15px;
  }

  .editorial-main {
    width: 88%;
  }

  .product-image {
    height: 390px;
  }

}


@media (max-width: 620px) {

  .topbar {
    width:
      calc(100% - 20px);

    margin:
      10px auto;

    padding:
      10px 14px;
  }

  .logo-wordmark {
    height: 47px;
  }

  .nua-hero {
    width:
      calc(100% - 20px);

    margin-top: 15px;

    padding:
      42px 24px 50px;
  }

  .nua-hero h1 {
    font-size: 49px;

    letter-spacing: -1px;
  }

  .hero-details {
    line-height: 1.8;
  }

  .hero-editorial {
    min-height: 365px;
  }

  .editorial-main {
    width: 94%;
    height: 320px;

    padding:
      45px 25px;
  }

  .editorial-small {
    width: 125px;
    height: 82px;
  }

  .editorial-small.second {
    width: 112px;
  }

  .benefits {
    width:
      calc(100% - 20px);

    grid-template-columns: 1fr;
  }

  .benefits article {
    border-right: 0;

    border-bottom:
      1px solid var(--border);
  }

  .benefits article:last-child {
    border-bottom: 0;
  }

  .products-section,
  .story-section {
    width:
      calc(100% - 20px);
  }

  .products-grid {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .product-image {
    height: 420px;
  }

  .story-card {
    padding:
      60px 27px;

    min-height: 430px;
  }

  .story-card h2 {
    font-size: 48px;
  }

  .story-number {
    top: 25px;
    right: 25px;
  }

}

.featured-badge {
  position: absolute;

  top: 15px;
  left: 15px;

  z-index: 2;

  padding:
    8px 12px;

  color:
    #fffaf3;

  background:
    rgba(75,45,31,.90);

  font-size: 9px;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}

.is-featured .product-image {
  box-shadow:
    inset 0 0 0 1px rgba(75,45,31,.08);
}


/* =====================================================
   NÚA — FICHA INDIVIDUAL DE PRODUCTO
   ===================================================== */

.product-page {
  width:
    min(1240px, calc(100% - 42px));

  margin:
    55px auto 130px;
}

.product-back {
  display: inline-block;

  margin-bottom: 35px;

  color:
    #8e796c;

  font-size: 11px;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}

.product-detail {
  display: grid;

  grid-template-columns:
    1.08fr .92fr;

  gap: 75px;

  align-items: start;
}

.product-gallery {
  min-width: 0;
}

.product-main-image {
  width: 100%;

  aspect-ratio: 4 / 5;

  display: grid;
  place-items: center;

  overflow: hidden;

  background:
    #ece1d3;
}

.product-main-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .5s ease;
}

.product-main-image:hover img {
  transform:
    scale(1.02);
}

.product-no-photo {
  font-size: 90px;
}

.product-thumbnails {
  margin-top: 14px;

  display: grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap: 10px;
}

.product-thumbnail {
  aspect-ratio: 1;

  padding: 0;

  overflow: hidden;

  border:
    1px solid transparent;

  background:
    #eee5da;
}

.product-thumbnail.active {
  border-color:
    var(--ink);
}

.product-thumbnail img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.product-detail-info {
  padding-top: 30px;

  position: sticky;

  top: 125px;
}

.product-brand-label {
  display: inline-block;

  margin-bottom: 17px;

  color:
    #987b68;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2.7px;
}

.product-detail-info h1 {
  margin:
    0 0 20px;

  color:
    var(--ink);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(45px, 5vw, 68px);

  font-weight: 500;

  line-height: 1.03;

  letter-spacing: -1.3px;
}

.product-page-price {
  margin-bottom: 32px;

  font-family:
    "Playfair Display",
    serif;

  font-size: 27px;

  font-weight: 600;
}

.product-meta {
  padding:
    20px 0;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.product-meta div {
  min-width: 0;
}

.product-meta span {
  display: block;

  margin-bottom: 6px;

  color:
    #a08d81;

  font-size: 9px;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}

.product-meta strong {
  display: block;

  font-size: 12px;

  font-weight: 600;
}

.product-long-description {
  margin:
    28px 0;

  color:
    #806f64;

  font-size: 14px;

  line-height: 1.9;
}

.product-quantity {
  margin:
    25px 0 16px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  border-top:
    1px solid var(--border);

  padding-top: 20px;

  color:
    #7d6e65;

  font-size: 11px;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.quantity-selector {
  display: flex;

  align-items: center;

  border:
    1px solid var(--border);
}

.quantity-selector button {
  width: 42px;
  height: 40px;

  border: 0;

  background:
    transparent;

  color:
    var(--ink);

  font-size: 18px;
}

.quantity-selector span {
  width: 40px;

  text-align: center;

  color:
    var(--ink);

  font-size: 13px;
}

.product-add-button {
  width: 100%;

  padding: 17px;

  border: 1px solid var(--ink);

  color:
    white;

  background:
    var(--ink);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.8px;

  text-transform: uppercase;

  transition:
    background .2s ease,
    color .2s ease;
}

.product-add-button:hover:not(:disabled) {
  color:
    var(--ink);

  background:
    transparent;
}

.product-add-button:disabled {
  cursor:
    not-allowed;

  opacity: .45;
}

.product-stock-message {
  min-height: 20px;

  margin-top: 10px;

  color:
    #9b887b;

  font-size: 10px;

  text-align: center;

  letter-spacing: .7px;
}

.product-assurances {
  margin-top: 42px;

  border-top:
    1px solid var(--border);
}

.product-assurances > div {
  padding:
    18px 0;

  display: grid;

  grid-template-columns:
    28px 1fr;

  gap: 15px;

  border-bottom:
    1px solid var(--border);
}

.product-assurances > div > span {
  color:
    #b08d72;

  font-family:
    "Playfair Display",
    serif;

  font-size: 14px;
}

.product-assurances p {
  margin: 0;

  color:
    #8a796e;

  font-size: 11px;

  line-height: 1.5;
}

.product-assurances strong {
  display: block;

  margin-bottom: 3px;

  color:
    var(--ink);

  font-size: 12px;
}

.product-page-loading,
.product-not-found {
  min-height: 450px;

  display: grid;
  place-items: center;

  text-align: center;
}

.product-not-found h2 {
  font-family:
    "Playfair Display",
    serif;

  font-size: 40px;
}

.product-not-found a {
  text-decoration: underline;
}

.product-philosophy {
  width:
    min(1240px, calc(100% - 42px));

  margin:
    0 auto 120px;

  padding:
    80px 8%;

  text-align: center;

  background:
    #eaddcc;
}

.product-philosophy h2 {
  max-width: 760px;

  margin:
    15px auto 25px;

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(40px, 5vw, 65px);

  font-weight: 500;

  line-height: 1.05;
}

.product-philosophy p {
  max-width: 610px;

  margin: auto;

  color:
    #806f64;

  line-height: 1.8;
}


@media (max-width: 900px) {

  .product-detail {
    grid-template-columns:
      1fr;

    gap: 40px;
  }

  .product-detail-info {
    padding-top: 0;

    position: static;
  }

}


@media (max-width: 620px) {

  .product-page {
    width:
      calc(100% - 20px);

    margin-top: 30px;
  }

  .product-main-image {
    aspect-ratio: 1 / 1.15;
  }

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

  .product-detail-info h1 {
    font-size: 45px;
  }

  .product-meta {
    grid-template-columns: 1fr;

    gap: 13px;
  }

  .product-philosophy {
    width:
      calc(100% - 20px);

    padding:
      60px 25px;
  }

}

.product-card {
  cursor: pointer;
}

.add-cart {
  cursor: pointer;
}


/* =====================================================
   NÚA — FICHA INDIVIDUAL DE PRODUCTO
   ===================================================== */

.product-page {
  width: min(1240px, calc(100% - 42px));
  margin: 55px auto 130px;
}

.product-back {
  display: inline-block;
  margin-bottom: 35px;

  color: #8e796c;

  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.product-detail {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 75px;
  align-items: start;
}

.product-gallery {
  min-width: 0;
}

.product-main-image {
  width: 100%;
  aspect-ratio: 4 / 5;

  display: grid;
  place-items: center;

  overflow: hidden;

  background: #ece1d3;
}

.product-main-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .5s ease;
}

.product-main-image:hover img {
  transform: scale(1.02);
}

.product-no-photo {
  font-size: 90px;
}

.product-thumbnails {
  margin-top: 14px;

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.product-thumbnail {
  aspect-ratio: 1;

  padding: 0;

  overflow: hidden;

  border: 1px solid transparent;

  background: #eee5da;
}

.product-thumbnail.active {
  border-color: var(--ink);
}

.product-thumbnail img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.product-detail-info {
  padding-top: 30px;

  position: sticky;
  top: 125px;
}

.product-brand-label {
  display: inline-block;

  margin-bottom: 17px;

  color: #987b68;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 2.7px;
}

.product-detail-info h1 {
  margin: 0 0 20px;

  color: var(--ink);

  font-family: "Playfair Display", serif;

  font-size: clamp(45px, 5vw, 68px);
  font-weight: 500;

  line-height: 1.03;

  letter-spacing: -1.3px;
}

.product-page-price {
  margin-bottom: 32px;

  font-family: "Playfair Display", serif;

  font-size: 27px;
  font-weight: 600;
}

.product-meta {
  padding: 20px 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.product-meta div {
  min-width: 0;
}

.product-meta span {
  display: block;

  margin-bottom: 6px;

  color: #a08d81;

  font-size: 9px;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}

.product-meta strong {
  display: block;

  font-size: 12px;
  font-weight: 600;
}

.product-long-description {
  margin: 28px 0;

  color: #806f64;

  font-size: 14px;

  line-height: 1.9;
}

.product-quantity {
  margin: 25px 0 16px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-top: 20px;

  border-top: 1px solid var(--border);

  color: #7d6e65;

  font-size: 11px;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.quantity-selector {
  display: flex;

  align-items: center;

  border: 1px solid var(--border);
}

.quantity-selector button {
  width: 42px;
  height: 40px;

  border: 0;

  background: transparent;

  color: var(--ink);

  font-size: 18px;
}

.quantity-selector span {
  width: 40px;

  text-align: center;

  color: var(--ink);

  font-size: 13px;
}

.product-add-button {
  width: 100%;

  padding: 17px;

  border: 1px solid var(--ink);

  color: white;

  background: var(--ink);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.8px;

  text-transform: uppercase;

  transition: background .2s ease, color .2s ease;
}

.product-add-button:hover:not(:disabled) {
  color: var(--ink);

  background: transparent;
}

.product-add-button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.product-stock-message {
  min-height: 20px;

  margin-top: 10px;

  color: #9b887b;

  font-size: 10px;

  text-align: center;

  letter-spacing: .7px;
}

.product-assurances {
  margin-top: 42px;

  border-top: 1px solid var(--border);
}

.product-assurances > div {
  padding: 18px 0;

  display: grid;
  grid-template-columns: 28px 1fr;

  gap: 15px;

  border-bottom: 1px solid var(--border);
}

.product-assurances > div > span {
  color: #b08d72;

  font-family: "Playfair Display", serif;

  font-size: 14px;
}

.product-assurances p {
  margin: 0;

  color: #8a796e;

  font-size: 11px;

  line-height: 1.5;
}

.product-assurances strong {
  display: block;

  margin-bottom: 3px;

  color: var(--ink);

  font-size: 12px;
}

.product-page-loading,
.product-not-found {
  min-height: 450px;

  display: grid;
  place-items: center;

  text-align: center;
}

.product-not-found h2 {
  font-family: "Playfair Display", serif;

  font-size: 40px;
}

.product-not-found a {
  text-decoration: underline;
}

.product-philosophy {
  width: min(1240px, calc(100% - 42px));

  margin: 0 auto 120px;

  padding: 80px 8%;

  text-align: center;

  background: #eaddcc;
}

.product-philosophy h2 {
  max-width: 760px;

  margin: 15px auto 25px;

  font-family: "Playfair Display", serif;

  font-size: clamp(40px, 5vw, 65px);

  font-weight: 500;

  line-height: 1.05;
}

.product-philosophy p {
  max-width: 610px;

  margin: auto;

  color: #806f64;

  line-height: 1.8;
}


@media (max-width: 900px) {

  .product-detail {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .product-detail-info {
    padding-top: 0;
    position: static;
  }

}


@media (max-width: 620px) {

  .product-page {
    width: calc(100% - 20px);
    margin-top: 30px;
  }

  .product-main-image {
    aspect-ratio: 1 / 1.15;
  }

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

  .product-detail-info h1 {
    font-size: 45px;
  }

  .product-meta {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .product-philosophy {
    width: calc(100% - 20px);
    padding: 60px 25px;
  }

}

.product-card {
  cursor: pointer;
}


/* =====================================================
   NÚA — CHECKOUT
   ===================================================== */

.checkout-body {
  min-height: 100vh;
  background: #f8f3eb;
}

.checkout-header {
  width: min(1240px, calc(100% - 42px));
  margin: 0 auto;
  padding: 25px 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid var(--border);
}

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

.checkout-secure {
  color: #8b7466;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.2px;
}

.checkout-page {
  width: min(1240px, calc(100% - 42px));
  margin: 0 auto 100px;

  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 70px;
}

.checkout-form-area {
  padding-top: 50px;
}

.checkout-back {
  display: inline-block;
  margin-bottom: 42px;

  color: #8c796c;

  font-size: 10px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.checkout-intro {
  max-width: 680px;
  margin-bottom: 55px;
}

.checkout-intro h1 {
  margin: 12px 0 18px;

  color: var(--ink);

  font-family: "Playfair Display", serif;

  font-size: clamp(48px, 5vw, 70px);
  font-weight: 500;

  line-height: 1.02;
  letter-spacing: -1.4px;
}

.checkout-intro p {
  max-width: 550px;

  color: #806f64;

  font-size: 15px;
  line-height: 1.8;
}


/* SECCIONES */

.checkout-section-title {
  margin: 50px 0 25px;
  padding-bottom: 20px;

  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 15px;

  border-bottom: 1px solid var(--border);
}

.checkout-section-title > span {
  color: #b28f72;

  font-family: "Playfair Display", serif;
  font-size: 17px;
}

.checkout-section-title strong {
  display: block;

  margin-bottom: 4px;

  color: var(--ink);

  font-family: "Playfair Display", serif;

  font-size: 20px;
  font-weight: 500;
}

.checkout-section-title small {
  color: #9a897e;

  font-size: 11px;
}


/* CAMPOS */

.checkout-fields {
  display: grid;
  gap: 20px;
}

.checkout-fields.two-columns {
  grid-template-columns: 1fr 1fr;
}

.checkout-fields label {
  display: block;
}

.checkout-fields label > span {
  display: block;

  margin-bottom: 8px;

  color: #75645a;

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 1px;
  text-transform: uppercase;
}

.checkout-fields input,
.checkout-fields select,
.checkout-fields textarea {
  width: 100%;

  padding: 15px 14px;

  border: 1px solid rgba(75, 45, 31, .17);
  border-radius: 0;

  outline: none;

  color: var(--ink);
  background: rgba(255, 253, 249, .72);

  font-family: "DM Sans", sans-serif;
  font-size: 14px;

  transition:
    border .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.checkout-fields input:focus,
.checkout-fields select:focus,
.checkout-fields textarea:focus {
  border-color: #7c5841;

  background: #fffdf9;

  box-shadow:
    0 0 0 3px rgba(124, 88, 65, .07);
}

.checkout-fields textarea {
  resize: vertical;
  min-height: 110px;
}

.full-field {
  grid-column: 1 / -1;
}


/* PAGO */

.checkout-payment-preview {
  padding: 22px;

  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;

  align-items: center;

  border: 1px solid var(--border);

  background: rgba(255, 253, 249, .55);
}

.payment-icon {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #fff;
  background: var(--ink);

  font-size: 16px;
}

.checkout-payment-preview strong {
  display: block;

  margin-bottom: 5px;

  color: var(--ink);
}

.checkout-payment-preview p {
  margin: 0;

  color: #8d7a6e;

  font-size: 12px;
  line-height: 1.6;
}


/* BOTÓN */

.checkout-submit {
  width: 100%;

  margin-top: 28px;
  padding: 18px 20px;

  border: 1px solid var(--ink);
  border-radius: 0;

  color: #fff;
  background: var(--ink);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1.8px;
  text-transform: uppercase;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.checkout-submit:hover:not(:disabled) {
  color: var(--ink);
  background: transparent;

  transform: translateY(-1px);
}

.checkout-submit:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.checkout-legal {
  margin-top: 13px;

  color: #a08d81;

  font-size: 10px;
  text-align: center;
  line-height: 1.5;
}


/* ERROR */

.checkout-error {
  margin-top: 24px;
  padding: 15px 18px;

  border: 1px solid rgba(150, 67, 67, .22);

  color: #914c4c;
  background: #fbefeb;

  font-size: 12px;
}


/* RESUMEN LATERAL */

.checkout-summary {
  min-width: 0;

  padding-top: 50px;
}

.checkout-summary-inner {
  position: sticky;
  top: 25px;

  padding: 42px 38px;

  background:
    linear-gradient(
      145deg,
      #eee2d3,
      #f4ece2
    );

  border: 1px solid rgba(75, 45, 31, .07);
}

.checkout-summary h2 {
  margin: 8px 0 30px;

  font-family: "Playfair Display", serif;

  font-size: 40px;
  font-weight: 500;
}


/* PRODUCTOS CHECKOUT */

.checkout-items {
  display: flex;
  flex-direction: column;
}

.checkout-item {
  padding: 18px 0;

  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 15px;

  align-items: center;

  border-bottom: 1px solid rgba(75, 45, 31, .11);
}

.checkout-item-image {
  width: 74px;
  height: 86px;

  position: relative;

  display: grid;
  place-items: center;

  overflow: visible;

  background: #e6d9c9;
}

.checkout-item-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.checkout-item-placeholder {
  font-size: 29px;
}

.checkout-item-quantity {
  min-width: 25px;
  height: 25px;

  padding: 0 6px;

  position: absolute;

  top: -9px;
  right: -9px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #fff;
  background: var(--ink);

  font-size: 10px;
  font-weight: 700;
}

.checkout-item-info {
  min-width: 0;
}

.checkout-item-info strong {
  display: block;

  margin-bottom: 5px;

  color: var(--ink);

  font-family: "Playfair Display", serif;

  font-size: 16px;
  font-weight: 600;
}

.checkout-item-info small {
  display: block;

  color: #907d71;

  font-size: 10px;
}

.checkout-edit-cart {
  margin-top: 8px;
  padding: 0;

  border: 0;

  color: #a17860;
  background: transparent;

  font-size: 9px;

  letter-spacing: 1px;
  text-transform: uppercase;

  text-decoration: underline;

  cursor: pointer;
}

.checkout-item-price {
  color: var(--ink);

  font-family: "Playfair Display", serif;

  font-size: 14px;
  font-weight: 600;

  white-space: nowrap;
}


/* TOTALES */

.checkout-totals {
  margin-top: 30px;
}

.checkout-totals > div {
  padding: 9px 0;

  display: flex;
  justify-content: space-between;
  gap: 20px;

  color: #806e62;

  font-size: 12px;
}

.checkout-totals strong {
  color: var(--ink);
}

.checkout-total-row {
  margin-top: 15px;
  padding-top: 21px !important;

  border-top: 1px solid rgba(75, 45, 31, .15);

  color: var(--ink) !important;

  font-size: 17px !important;
}

.checkout-total-row strong {
  font-family: "Playfair Display", serif;
  font-size: 25px;
}


/* NOTA */

.checkout-note {
  margin-top: 30px;
  padding-top: 24px;

  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;

  border-top: 1px solid rgba(75, 45, 31, .12);
}

.checkout-note span {
  color: #a37d63;
}

.checkout-note p {
  margin: 0;

  color: #89776b;

  font-size: 11px;
  line-height: 1.6;
}


/* CARRITO VACÍO */

.checkout-empty {
  padding: 45px 15px;

  text-align: center;
}

.checkout-empty > div {
  margin-bottom: 12px;

  font-size: 42px;
}

.checkout-empty h3 {
  margin: 0 0 8px;

  font-family: "Playfair Display", serif;

  font-size: 23px;
  font-weight: 500;
}

.checkout-empty p {
  color: #8a796d;

  font-size: 12px;
}

.checkout-empty a {
  display: inline-block;

  margin-top: 12px;

  color: var(--ink);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 1px;
  text-decoration: underline;
  text-transform: uppercase;
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .checkout-page {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .checkout-summary {
    order: -1;

    padding-top: 30px;
  }

  .checkout-summary-inner {
    position: static;
  }

  .checkout-form-area {
    padding-top: 30px;
  }

}


@media (max-width: 620px) {

  .checkout-header {
    width: calc(100% - 20px);

    padding: 15px 0;
  }

  .checkout-logo img {
    height: 50px;
  }

  .checkout-secure {
    font-size: 8px;

    letter-spacing: 1.4px;
  }

  .checkout-page {
    width: calc(100% - 20px);

    margin-bottom: 60px;
  }

  .checkout-summary-inner {
    padding: 30px 20px;
  }

  .checkout-intro h1 {
    font-size: 44px;
  }

  .checkout-fields.two-columns {
    grid-template-columns: 1fr;
  }

  .full-field {
    grid-column: auto;
  }

  .checkout-item {
    grid-template-columns: 65px 1fr;
  }

  .checkout-item-image {
    width: 65px;
    height: 76px;
  }

  .checkout-item-price {
    grid-column: 2;

    margin-top: -8px;
  }

}


/* =====================================================
   NÚA — PEDIDO CREADO
   ===================================================== */

.order-created-body {
  min-height: 100vh;

  background:
    linear-gradient(
      145deg,
      #f8f3eb,
      #eee1d1
    );
}

.order-created-page {
  width:
    min(900px, calc(100% - 30px));

  min-height:
    calc(100vh - 120px);

  margin: auto;

  padding:
    70px 0 110px;

  display: grid;

  place-items: center;
}

.order-created-card {
  width: 100%;

  max-width: 720px;

  padding:
    70px 65px;

  text-align: center;

  background:
    rgba(255, 253, 249, .78);

  border:
    1px solid rgba(75,45,31,.09);

  box-shadow:
    0 30px 90px rgba(75,45,31,.08);
}

.order-created-icon {
  width: 65px;
  height: 65px;

  margin:
    0 auto 30px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: white;

  background:
    var(--ink);

  font-size: 22px;
}

.order-created-card h1 {
  max-width: 600px;

  margin:
    13px auto 20px;

  color:
    var(--ink);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(45px, 6vw, 68px);

  font-weight: 500;

  line-height: 1.04;
}

.order-created-intro {
  max-width: 520px;

  margin:
    0 auto 40px;

  color:
    #806f64;

  line-height: 1.8;
}

.order-number-box {
  padding:
    26px 20px;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);
}

.order-number-box span {
  display: block;

  margin-bottom: 7px;

  color:
    #9a8475;

  font-size: 9px;

  letter-spacing: 1.8px;

  text-transform: uppercase;
}

.order-number-box strong {
  color:
    var(--ink);

  font-family:
    "Playfair Display",
    serif;

  font-size: 25px;

  letter-spacing: 1px;
}

.order-status-box {
  padding:
    24px 0;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  border-bottom:
    1px solid var(--border);
}

.order-status-box div {
  padding:
    0 15px;
}

.order-status-box div +
div {
  border-left:
    1px solid var(--border);
}

.order-status-box span {
  display: block;

  margin-bottom: 6px;

  color:
    #9a8475;

  font-size: 9px;

  letter-spacing: 1.4px;

  text-transform: uppercase;
}

.order-status-box strong {
  color:
    var(--ink);

  font-size: 13px;
}

.order-created-notice {
  margin-top: 32px;

  padding:
    22px;

  color:
    #755f50;

  background:
    #eee2d4;
}

.order-created-notice strong {
  display: block;

  margin-bottom: 7px;

  color:
    var(--ink);
}

.order-created-notice p {
  margin: 0;

  font-size: 12px;

  line-height: 1.6;
}

.order-created-home {
  display: inline-block;

  margin-top: 32px;

  padding:
    15px 28px;

  border:
    1px solid var(--ink);

  color:
    white;

  background:
    var(--ink);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


@media (max-width: 620px) {

  .order-created-page {
    padding:
      40px 0 70px;
  }

  .order-created-card {
    padding:
      50px 23px;
  }

  .order-created-card h1 {
    font-size: 44px;
  }

  .order-status-box {
    grid-template-columns:
      1fr;
  }

  .order-status-box div {
    padding:
      15px 0;
  }

  .order-status-box div +
  div {
    border-left: 0;

    border-top:
      1px solid var(--border);
  }

}


/* =====================================================
   NÚA — ADMIN PEDIDOS
   ===================================================== */

.admin-orders {
  display: flex;
  flex-direction: column;
}

.admin-order-row {
  width: 100%;

  padding: 22px 18px;

  display: grid;

  grid-template-columns:
    1.5fr 1.3fr .6fr 1fr .8fr;

  gap: 22px;

  align-items: center;

  border: 0;
  border-bottom: 1px solid var(--border);

  color: var(--ink);

  background: transparent;

  text-align: left;

  cursor: pointer;

  transition:
    background .2s ease;
}

.admin-order-row:hover {
  background:
    #f8f3eb;
}

.admin-order-row span {
  display: block;

  margin-bottom: 6px;

  color: #9d8a7e;

  font-size: 8px;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}

.admin-order-row strong {
  display: block;

  font-size: 12px;
}

.admin-order-row small {
  display: block;

  margin-top: 5px;

  color: #99877b;

  font-size: 9px;
}

.admin-order-number strong {
  font-family:
    "Playfair Display",
    serif;

  font-size: 15px;
}

.admin-order-total {
  text-align: right;
}

.admin-order-total strong {
  font-family:
    "Playfair Display",
    serif;

  font-size: 17px;
}

.order-payment-status {
  display: inline-block !important;
}

.payment-pending {
  color: #9a6a36;
}

.payment-approved {
  color: #4c7558;
}

.payment-declined,
.payment-voided {
  color: #974f4f;
}

.admin-orders-empty {
  padding: 60px 20px;

  text-align: center;

  color: #8b796e;
}

.admin-orders-empty strong {
  display: block;

  margin-bottom: 8px;

  color: var(--ink);

  font-family:
    "Playfair Display",
    serif;

  font-size: 22px;
}


/* MODAL PEDIDO */

.order-modal {
  width:
    min(850px, calc(100% - 30px));

  max-height:
    calc(100vh - 40px);

  padding: 36px;

  position: fixed;

  top: 50%;
  left: 50%;

  z-index: 1001;

  transform:
    translate(-50%, -50%);

  overflow-y: auto;

  background:
    #fffdf9;

  box-shadow:
    0 35px 90px rgba(50,30,20,.18);
}

.order-modal-header {
  margin-bottom: 30px;

  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  border-bottom:
    1px solid var(--border);

  padding-bottom: 20px;
}

.order-modal-header h2 {
  margin: 7px 0 0;

  font-family:
    "Playfair Display",
    serif;

  font-size: 32px;
}

.order-detail-status {
  padding: 20px 0;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  border-bottom:
    1px solid var(--border);
}

.order-detail-status > div {
  padding: 0 15px;

  text-align: center;
}

.order-detail-status span,
.order-detail-label,
.order-delivery-notes span {
  display: block;

  margin-bottom: 7px;

  color: #9a887c;

  font-size: 8px;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}

.order-detail-status strong {
  color: var(--ink);

  font-size: 13px;
}

.order-detail-grid {
  padding: 30px 0;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 40px;

  border-bottom:
    1px solid var(--border);
}

.order-detail-grid h3 {
  margin:
    0 0 10px;

  font-family:
    "Playfair Display",
    serif;

  font-size: 21px;
}

.order-detail-grid p {
  margin:
    4px 0;

  color: #806f65;

  font-size: 12px;

  line-height: 1.5;
}

.order-delivery-notes {
  padding:
    22px;

  margin-top: 25px;

  background:
    #f1e6d8;
}

.order-delivery-notes p {
  margin: 0;

  color: #745f52;

  font-size: 12px;

  line-height: 1.6;
}

.order-detail-products {
  padding:
    30px 0;
}

.order-detail-product {
  padding:
    15px 0;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 25px;

  border-bottom:
    1px solid var(--border);
}

.order-detail-product strong {
  font-size: 12px;
}

.order-detail-product small {
  display: block;

  margin-top: 5px;

  color: #958378;

  font-size: 10px;
}

.order-detail-totals {
  margin-left: auto;

  width:
    min(330px, 100%);
}

.order-detail-totals > div {
  padding:
    8px 0;

  display: flex;

  justify-content: space-between;

  font-size: 12px;
}

.order-detail-grand-total {
  margin-top: 8px;

  padding-top:
    16px !important;

  border-top:
    1px solid var(--border);

  font-size:
    17px !important;
}

.order-detail-grand-total strong {
  font-family:
    "Playfair Display",
    serif;

  font-size: 21px;
}

.order-detail-date {
  margin-top: 25px;

  color: #9b897e;

  font-size: 9px;

  letter-spacing: .8px;

  text-align: right;

  text-transform: uppercase;
}

.order-detail-loading {
  padding:
    70px 20px;

  text-align: center;

  color: #8d7b70;
}


@media (max-width: 900px) {

  .admin-order-row {
    grid-template-columns:
      1fr 1fr;

    gap: 18px;
  }

  .admin-order-total {
    text-align: left;
  }

}


@media (max-width: 620px) {

  .admin-order-row {
    grid-template-columns:
      1fr;

    padding:
      20px 10px;
  }

  .order-modal {
    width:
      calc(100% - 18px);

    padding:
      25px 18px;
  }

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

  .order-detail-status > div {
    padding:
      12px 0;

    border-bottom:
      1px solid var(--border);
  }

  .order-detail-grid {
    grid-template-columns:
      1fr;

    gap: 25px;
  }

}


/* =====================================================
   NÚA — FULFILLMENT MANUAL
   ===================================================== */

.fulfillment-panel {
  margin-top: 40px;
  padding-top: 35px;

  border-top:
    1px solid var(--border);
}

.fulfillment-heading {
  margin-bottom: 25px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.fulfillment-heading h3 {
  margin: 5px 0 0;

  font-family:
    "Playfair Display",
    serif;

  font-size: 27px;
  font-weight: 500;
}

.whatsapp-outline,
.whatsapp-action {
  padding: 12px 16px;

  border:
    1px solid var(--ink);

  background:
    transparent;

  color:
    var(--ink);

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1px;
  text-transform: uppercase;

  cursor: pointer;
}

.whatsapp-action {
  width: 100%;

  margin-top: 18px;

  background:
    var(--ink);

  color: white;
}

.fulfillment-payment {
  padding: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background:
    #f4ece2;
}

.fulfillment-payment span {
  color: #8b786c;

  font-size: 9px;
  letter-spacing: 1.4px;
}

.paid-ok {
  color: #467153;
}

.paid-waiting {
  color: #9d6e35;
}

.fulfillment-warning,
.payment-approved-box {
  margin-top: 18px;
  padding: 22px;

  background:
    #fbf1df;
}

.payment-approved-box {
  background:
    #e7efe8;
}

.fulfillment-warning p,
.payment-approved-box p {
  color: #7c6c61;

  font-size: 12px;
  line-height: 1.6;
}

.shipping-form {
  margin-top: 30px;

  display: grid;
  gap: 18px;
}

.shipping-form label {
  color: #78675d;

  font-size: 10px;

  letter-spacing: .8px;

  text-transform: uppercase;
}

.shipping-form label small {
  display: block;

  margin-top: 3px;

  color: #a39389;

  font-size: 8px;

  text-transform: none;
}

.shipping-form input {
  width: 100%;

  margin-top: 8px;
  padding: 14px;

  border:
    1px solid var(--border);

  background:
    #fffdf9;

  color:
    var(--ink);
}

.shipping-confirm-button {
  margin-top: 5px;
}

.shipment-complete {
  margin-top: 25px;

  padding: 25px;

  background:
    #f1e6d8;
}

.shipment-data {
  margin-top: 17px;

  display: grid;
  grid-template-columns:
    1fr 1fr;

  gap: 20px;
}

.shipment-data span {
  display: block;

  margin-bottom: 5px;

  color: #998477;

  font-size: 8px;

  letter-spacing: 1px;

  text-transform: uppercase;
}

.delivered-button {
  width: 100%;

  margin-top: 12px;
  padding: 13px;

  border:
    1px solid #567260;

  color:
    #496252;

  background:
    transparent;

  font-size: 9px;

  letter-spacing: 1px;

  text-transform: uppercase;

  cursor: pointer;
}

.delivered-confirmation {
  margin-top: 18px;

  padding: 14px;

  color: #476b52;

  background: #e0ebe2;

  text-align: center;

  font-size: 11px;
  font-weight: 700;
}


@media (max-width: 620px) {

  .fulfillment-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .shipment-data {
    grid-template-columns: 1fr;
  }

}


/* =====================================================
   FIX — MODAL TARJETA NÚA
   ===================================================== */

#nuaCardBackdrop {
  z-index: 4999 !important;
}

.nua-card-modal {
  width:
    min(560px, calc(100% - 24px)) !important;

  max-height:
    calc(100vh - 24px) !important;

  padding:
    22px !important;

  z-index:
    5000 !important;

  overflow-y:
    auto !important;
}


.nua-card-preview {
  width: 100%;

  max-height: 58vh;

  padding: 12px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  background:
    #eee2d4;
}


#nuaCustomerCard {
  display: block;

  width: auto !important;

  height:
    min(54vh, 590px) !important;

  max-width:
    100% !important;

  object-fit:
    contain;
}


.nua-card-actions {
  margin-top:
    18px !important;

  padding:
    12px 0 3px;

  position:
    sticky;

  bottom: 0;

  z-index: 5;

  background:
    #fffdf9;
}


@media (max-width: 620px) {

  #nuaCustomerCard {
    height:
      min(49vh, 500px) !important;
  }

}


/* =====================================================
   NÚA ADMIN — PWA
   ===================================================== */

.admin-pwa-box {
  margin: 25px 15px;

  padding: 17px;

  border:
    1px solid rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.045);
}

.admin-pwa-box > span {
  display: block;

  margin-bottom: 11px;

  color:
    rgba(255,255,255,.5);

  font-size: 8px;

  letter-spacing: 1.5px;
}

.admin-pwa-box button {
  width: 100%;

  padding: 11px 8px;

  border:
    1px solid rgba(255,255,255,.18);

  color: white;

  background:
    transparent;

  font-size: 9px;

  letter-spacing: .7px;

  cursor: pointer;
}

.admin-pwa-box button.push-enabled {
  color:
    #d9eadc;

  border-color:
    rgba(180,220,190,.35);
}


/* =====================================================
   NÚA ADMIN — RESPONSIVE FINAL
   PC / TABLET / CELULAR / PWA
   ===================================================== */

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;

  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}


/* =====================================================
   ESCRITORIO
   ===================================================== */

.admin-layout {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  display: grid;

  grid-template-columns:
    250px minmax(0, 1fr);

  align-items: stretch;
}


.admin-sidebar {
  width: 100%;
  min-width: 0;

  position: sticky;

  top: 0;

  height: 100vh;
  height: 100dvh;

  overflow-y: auto;

  padding-top:
    max(
      22px,
      env(safe-area-inset-top)
    );

  padding-bottom:
    max(
      22px,
      env(safe-area-inset-bottom)
    );
}


.admin-main {
  width: 100%;
  min-width: 0;

  padding:
    clamp(26px, 3vw, 50px);

  overflow-x: hidden;
}


.admin-top {
  width: 100%;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 24px;
}


.admin-top > div {
  min-width: 0;

  flex: 1 1 420px;
}


.admin-top h1 {
  max-width: 100%;

  overflow-wrap: break-word;
}


.stats-grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}


.stats-grid article {
  min-width: 0;
}


.admin-products-card {
  width: 100%;
  max-width: 100%;

  overflow: hidden;
}


.admin-products {
  width: 100%;
  max-width: 100%;
}


.admin-nav button {
  width: 100%;

  min-width: 0;
}


/* =====================================================
   LISTADO DE PEDIDOS
   ===================================================== */

.admin-order-row {
  width: 100%;

  grid-template-columns:
    minmax(180px, 1.5fr)
    minmax(150px, 1.25fr)
    minmax(80px, .6fr)
    minmax(130px, 1fr)
    minmax(110px, .8fr);

  gap: 18px;
}


.admin-order-row > div {
  min-width: 0;
}


.admin-order-row strong,
.admin-order-row small {
  overflow-wrap: anywhere;
}


/* =====================================================
   MODALES
   ===================================================== */

.product-modal,
.order-modal,
.nua-card-modal {
  max-width:
    calc(
      100vw - 32px
    );

  max-height:
    calc(
      100dvh - 32px
    );
}


.order-modal,
.product-modal {
  width:
    min(
      880px,
      calc(100vw - 32px)
    );
}


.nua-card-modal {
  width:
    min(
      560px,
      calc(100vw - 24px)
    );
}


.order-detail-grid {
  min-width: 0;
}


.order-detail-grid > section {
  min-width: 0;
}


.order-detail-grid p,
.order-detail-grid h3 {
  overflow-wrap: anywhere;
}


.shipping-form input,
.checkout-fields input,
.checkout-fields select,
.checkout-fields textarea,
.product-modal input,
.product-modal textarea,
.product-modal select {
  max-width: 100%;

  font-size: 16px;
}


/*
  16px evita que Safari haga zoom automático
  al tocar un input en iPhone.
*/


/* =====================================================
   TABLET / IPAD
   ===================================================== */

@media (
  min-width: 769px
) and (
  max-width: 1100px
) {

  .admin-layout {
    grid-template-columns:
      210px minmax(0, 1fr);
  }


  .admin-main {
    padding:
      28px 24px;
  }


  .admin-logo-image {
    max-width: 150px;

    height: auto !important;
  }


  .stats-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .stats-grid article:last-child {
    grid-column:
      1 / -1;
  }


  .admin-order-row {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      18px 24px;
  }


  .admin-order-total {
    text-align: left;
  }


  .order-modal {
    width:
      min(
        760px,
        calc(100vw - 30px)
      );
  }


  .order-detail-grid {
    gap: 28px;
  }

}



/* =====================================================
   CELULAR
   ===================================================== */

@media (
  max-width: 768px
) {

  body {
    padding: 0;
  }


  .admin-layout {
    display: block;

    min-height:
      100dvh;
  }


  /*
    Sidebar se convierte en cabecera móvil
  */

  .admin-sidebar {
    width: 100%;

    height: auto;

    position: sticky;

    top: 0;

    z-index: 800;

    overflow: visible;

    padding:
      max(
        10px,
        env(safe-area-inset-top)
      )
      12px
      10px;

    box-shadow:
      0 7px 22px
      rgba(30, 20, 15, .12);
  }


  .admin-logo {
    margin-bottom: 8px;
  }


  .admin-logo-image {
    display: block;

    width: auto;

    max-width: 125px;

    height: 42px !important;

    margin: auto;
  }


  /*
    Navegación horizontal
  */

  .admin-nav {
    width: 100%;

    display: flex;

    align-items: center;

    gap: 7px;

    overflow-x: auto;

    padding:
      3px 0 8px;

    scrollbar-width: none;

    -webkit-overflow-scrolling:
      touch;
  }


  .admin-nav::-webkit-scrollbar {
    display: none;
  }


  .admin-nav button {
    width: auto;

    min-width: max-content;

    flex:
      0 0 auto;

    padding:
      10px 13px;

    white-space: nowrap;
  }


  .admin-nav button span {
    margin-right: 5px;
  }


  /*
    Notificaciones PWA compactas
  */

  .admin-pwa-box {
    margin:
      5px 0 8px;

    padding: 8px;
  }


  .admin-pwa-box > span {
    display: none;
  }


  .admin-pwa-box button {
    padding:
      9px 10px;

    font-size: 8px;
  }


  .logout-button {
    width: 100%;

    margin-top: 4px;

    padding: 9px;
  }


  /*
    Contenido
  */

  .admin-main {
    width: 100%;

    padding:
      20px
      12px
      max(
        28px,
        env(safe-area-inset-bottom)
      );
  }


  .admin-top {
    gap: 16px;
  }


  .admin-top > div {
    flex:
      1 1 100%;
  }


  .admin-top h1 {
    font-size:
      clamp(
        34px,
        11vw,
        48px
      );

    line-height: 1;
  }


  .admin-top p {
    font-size: 13px;

    line-height: 1.55;
  }


  .admin-top .admin-primary {
    width: 100%;
  }


  /*
    Estadísticas
  */

  .stats-grid {
    grid-template-columns:
      1fr;

    gap: 10px;
  }


  .stats-grid article,
  .stats-grid article:last-child {
    grid-column: auto;

    padding: 17px;
  }


  /*
    Tarjetas administrativas
  */

  .admin-products-card {
    border-radius: 0;
  }


  .admin-card-heading {
    padding:
      18px 14px;
  }


  /*
    PEDIDOS
  */

  .admin-order-row {
    padding:
      18px 12px;

    grid-template-columns:
      1fr;

    gap: 16px;
  }


  .admin-order-row > div {
    width: 100%;
  }


  .admin-order-total {
    text-align: left;
  }


  .admin-order-number strong {
    font-size: 17px;
  }


  /*
    MODAL DE PEDIDO
  */

  .order-modal {
    width:
      calc(100vw - 12px);

    max-width:
      calc(100vw - 12px);

    height:
      calc(100dvh - 12px);

    max-height:
      calc(100dvh - 12px);

    padding:
      max(
        20px,
        env(safe-area-inset-top)
      )
      16px
      max(
        24px,
        env(safe-area-inset-bottom)
      );

    border-radius: 0;
  }


  .order-modal-header {
    position: sticky;

    top: 0;

    z-index: 4;

    padding-top: 4px;

    background:
      #fffdf9;
  }


  .order-modal-header h2 {
    font-size:
      clamp(
        24px,
        7vw,
        32px
      );

    overflow-wrap: anywhere;
  }


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


  .order-detail-status > div {
    padding:
      12px 0;
  }


  .order-detail-grid {
    grid-template-columns:
      1fr;

    gap: 24px;
  }


  .order-detail-totals {
    width: 100%;

    margin-left: 0;
  }


  /*
    Pago / envío
  */

  .fulfillment-heading {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .fulfillment-payment {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap: 8px;
  }


  .customer-communication-actions {
    grid-template-columns:
      1fr;
  }


  .shipment-data {
    grid-template-columns:
      1fr;
  }


  /*
    TARJETA NÚA
  */

  .nua-card-modal {
    width:
      calc(100vw - 12px) !important;

    max-width:
      calc(100vw - 12px) !important;

    height:
      calc(100dvh - 12px);

    max-height:
      calc(100dvh - 12px) !important;

    padding:
      max(
        14px,
        env(safe-area-inset-top)
      )
      10px
      max(
        15px,
        env(safe-area-inset-bottom)
      )
      !important;

    border-radius: 0;
  }


  .nua-card-modal-header {
    margin-bottom: 12px;
  }


  .nua-card-modal-header h2 {
    font-size: 23px;
  }


  .nua-card-preview {
    max-height:
      54dvh;

    padding: 7px;
  }


  #nuaCustomerCard {
    width: auto !important;

    max-width: 100% !important;

    height:
      min(
        51dvh,
        520px
      ) !important;
  }


  .nua-card-actions {
    grid-template-columns:
      1fr;

    gap: 7px;

    padding-top: 8px;
  }


  .nua-card-actions button {
    min-height: 43px;
  }


  .nua-card-help {
    font-size: 9px;

    line-height: 1.4;
  }


  /*
    FORMULARIO PRODUCTO
  */

  .product-modal {
    width:
      calc(100vw - 12px);

    max-width:
      calc(100vw - 12px);

    height:
      calc(100dvh - 12px);

    max-height:
      calc(100dvh - 12px);

    padding:
      max(
        18px,
        env(safe-area-inset-top)
      )
      14px
      max(
        24px,
        env(safe-area-inset-bottom)
      );

    overflow-y: auto;

    border-radius: 0;
  }

}



/* =====================================================
   CELULARES PEQUEÑOS
   ===================================================== */

@media (
  max-width: 430px
) {

  .admin-main {
    padding-left: 9px;

    padding-right: 9px;
  }


  .admin-nav button {
    padding:
      9px 11px;

    font-size: 9px;
  }


  .admin-logo-image {
    height:
      38px !important;
  }


  .admin-top h1 {
    font-size:
      38px;
  }


  .order-modal {
    width:
      calc(100vw - 6px);

    max-width:
      calc(100vw - 6px);

    height:
      calc(100dvh - 6px);

    max-height:
      calc(100dvh - 6px);
  }


  .order-detail-product {
    align-items:
      flex-start;
  }


  .order-detail-product > strong {
    white-space: nowrap;
  }

}



/* =====================================================
   PANTALLAS GRANDES
   ===================================================== */

@media (
  min-width: 1500px
) {

  .admin-layout {
    grid-template-columns:
      280px minmax(0, 1fr);
  }


  .admin-main {
    padding:
      55px 65px;
  }


  .admin-main >
  section {
    max-width:
      1450px;

    margin:
      0 auto;
  }

}


/* =====================================================
   NÚA ADMIN — MOBILE APP REAL
   ===================================================== */

.mobile-app-header,
.mobile-bottom-nav,
.mobile-settings-sheet {
  display: none;
}


@media (max-width: 768px) {

  /*
    Eliminamos completamente el sidebar
    de escritorio en celular.
  */

  .admin-sidebar {
    display: none !important;
  }


  .admin-layout {
    display: block !important;

    min-height: 100dvh;

    background:
      #f8f6f1;
  }


  /* ==========================
     HEADER APP
     ========================== */

  .mobile-app-header {
    height:
      calc(
        70px +
        env(safe-area-inset-top)
      );

    padding:
      env(safe-area-inset-top)
      18px
      0;

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 900;

    display: flex;

    align-items: center;
    justify-content: space-between;

    background:
      rgba(
        255,
        253,
        249,
        .97
      );

    border-bottom:
      1px solid
      rgba(89,52,33,.09);

    backdrop-filter:
      blur(18px);
  }


  .mobile-app-brand {
    display: flex;

    align-items: center;

    gap: 12px;
  }


  .mobile-app-brand img {
    width: 72px;

    height: auto;

    display: block;
  }


  .mobile-app-brand > div {
    display: flex;

    flex-direction: column;
  }


  .mobile-app-brand strong {
    color:
      #593421;

    font-family:
      "Playfair Display",
      Georgia,
      serif;

    font-size: 17px;

    font-weight: 600;
  }


  .mobile-app-brand span {
    margin-top: 1px;

    color:
      #9c8576;

    font-size: 8px;

    letter-spacing: 1px;

    text-transform: uppercase;
  }


  .mobile-header-button {
    width: 42px;
    height: 42px;

    display: grid;

    place-items: center;

    border:
      1px solid
      rgba(89,52,33,.12);

    border-radius: 50%;

    color:
      #593421;

    background:
      #f3e8dc;

    font-size: 21px;
  }


  /* ==========================
     CONTENIDO
     ========================== */

  .admin-main {
    width: 100%;

    padding:
      calc(
        94px +
        env(safe-area-inset-top)
      )
      16px
      calc(
        105px +
        env(safe-area-inset-bottom)
      ) !important;

    background:
      #f8f6f1;
  }


  .admin-main > section {
    width: 100%;

    max-width: 100%;
  }


  .admin-top {
    margin-bottom: 25px;

    display: block;
  }


  .admin-top .eyebrow {
    font-size: 10px;

    letter-spacing: 3px;
  }


  .admin-top h1 {
    margin:
      10px 0 8px;

    font-size: 43px !important;

    line-height: 1;

    letter-spacing: -1px;
  }


  .admin-top p {
    margin:
      0 0 23px;

    color:
      #8d7b70;

    font-size: 14px;
  }


  .admin-top .admin-primary {
    width: 100%;

    min-height: 52px;

    border-radius: 14px;

    font-size: 12px;
  }


  /* ==========================
     ESTADÍSTICAS
     ========================== */

  .stats-grid {
    margin:
      0 0 28px;

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0,1fr))
      !important;

    gap: 11px;
  }


  .stats-grid article {
    min-height: 112px;

    padding: 18px !important;

    display: flex;

    flex-direction: column;

    justify-content:
      space-between;

    border:
      1px solid
      rgba(89,52,33,.08);

    border-radius: 18px;

    background:
      #fff;

    box-shadow:
      0 8px 24px
      rgba(75,45,31,.035);
  }


  .stats-grid article:last-child {
    grid-column:
      1 / -1;
  }


  .stats-grid article span {
    color:
      #99877d;

    font-size: 11px;
  }


  .stats-grid article strong {
    color:
      #593421;

    font-family:
      "Playfair Display",
      serif;

    font-size: 30px;
  }


  /* ==========================
     TARJETAS
     ========================== */

  .admin-products-card {
    width: 100%;

    border:
      1px solid
      rgba(89,52,33,.08);

    border-radius: 20px;

    background:
      #fff;

    overflow: hidden;

    box-shadow:
      0 10px 30px
      rgba(75,45,31,.04);
  }


  .admin-card-heading {
    padding:
      22px 18px;
  }


  .admin-card-heading h2 {
    margin: 0 0 5px;

    font-size: 29px;
  }


  /* ==========================
     PEDIDOS
     ========================== */

  .admin-order-row {
    padding:
      18px;

    display: grid !important;

    grid-template-columns:
      1fr auto !important;

    gap:
      15px 12px !important;

    border-bottom:
      1px solid
      rgba(89,52,33,.08);

    background:
      #fff;
  }


  .admin-order-number,
  .admin-order-customer {
    grid-column:
      1;
  }


  .admin-order-total {
    grid-column:
      2;

    grid-row:
      1;

    text-align: right;
  }


  .admin-order-row > div:nth-child(3),
  .admin-order-row > div:nth-child(4) {
    grid-column:
      1 / -1;

    padding-top: 7px;

    border-top:
      1px dashed
      rgba(89,52,33,.09);
  }


  /* ==========================
     NAV INFERIOR
     ========================== */

  .mobile-bottom-nav {
    height:
      calc(
        72px +
        env(safe-area-inset-bottom)
      );

    padding:
      7px
      8px
      env(safe-area-inset-bottom);

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1000;

    display: grid;

    grid-template-columns:
      repeat(3,1fr);

    background:
      rgba(
        255,
        253,
        249,
        .97
      );

    border-top:
      1px solid
      rgba(89,52,33,.10);

    box-shadow:
      0 -8px 30px
      rgba(50,30,20,.05);

    backdrop-filter:
      blur(18px);
  }


  .mobile-bottom-nav button {
    min-width: 0;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 3px;

    border: 0;

    border-radius: 12px;

    color:
      #9a887e;

    background:
      transparent;
  }


  .mobile-bottom-nav button > span {
    font-size: 20px;
  }


  .mobile-bottom-nav small {
    font-size: 9px;

    font-weight: 600;
  }


  .mobile-bottom-nav button.active {
    color:
      #593421;

    background:
      #f2e6d9;
  }


  .mobile-tab-badge {
    min-width: 18px;
    height: 18px;

    padding: 0 4px;

    position: absolute;

    top: 4px;
    right:
      calc(50% - 27px);

    display: grid;

    place-items: center;

    border-radius: 20px;

    color: white;

    background:
      #9a4f43;

    font-size: 8px;
  }


  /* ==========================
     CONFIGURACIÓN
     ========================== */

  .mobile-settings-sheet {
    position: fixed;

    inset: 0;

    z-index: 2000;

    display: block;
  }


  .mobile-settings-sheet.hidden {
    display: none !important;
  }


  .mobile-settings-backdrop {
    position: absolute;

    inset: 0;

    background:
      rgba(28,24,21,.42);

    backdrop-filter:
      blur(4px);
  }


  .mobile-settings-panel {
    width: 100%;

    max-height: 82dvh;

    padding:
      10px
      18px
      calc(
        24px +
        env(safe-area-inset-bottom)
      );

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    overflow-y: auto;

    border-radius:
      26px
      26px
      0
      0;

    background:
      #fffdf9;

    box-shadow:
      0 -25px 70px
      rgba(30,20,15,.18);
  }


  .mobile-settings-handle {
    width: 42px;
    height: 4px;

    margin:
      3px auto 20px;

    border-radius: 10px;

    background:
      #d7ccc4;
  }


  .mobile-settings-header {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;
  }


  .mobile-settings-header span {
    color:
      #a18a7a;

    font-size: 8px;

    letter-spacing: 2px;
  }


  .mobile-settings-header h2 {
    margin:
      5px 0 25px;

    color:
      #593421;

    font-family:
      "Playfair Display",
      serif;

    font-size: 33px;

    font-weight: 500;
  }


  .mobile-settings-header button {
    width: 38px;
    height: 38px;

    border: 0;

    border-radius: 50%;

    background:
      #f2e7da;

    color:
      #593421;

    font-size: 21px;
  }


  .mobile-setting-card {
    padding:
      17px;

    display: grid;

    grid-template-columns:
      43px
      minmax(0,1fr);

    gap:
      13px;

    border:
      1px solid
      rgba(89,52,33,.09);

    border-radius: 16px;

    background:
      #faf5ee;
  }


  .mobile-setting-icon {
    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
      #eadccc;
  }


  .mobile-setting-card strong {
    display: block;

    color:
      #593421;
  }


  .mobile-setting-card p {
    margin:
      4px 0 12px;

    color:
      #938075;

    font-size: 11px;

    line-height: 1.5;
  }


  .mobile-setting-action {
    grid-column:
      2;

    width: max-content;

    padding:
      9px 13px;

    border:
      1px solid #593421;

    border-radius: 9px;

    color:
      white;

    background:
      #593421;

    font-size: 9px;

    text-transform:
      uppercase;
  }


  .mobile-install-notice {
    margin-top: 12px;

    padding: 15px;

    border-radius: 14px;

    color:
      #755f52;

    background:
      #f3e7d8;
  }


  .mobile-install-notice strong {
    display: block;

    margin-bottom: 4px;
  }


  .mobile-install-notice p {
    margin: 0;

    font-size: 11px;

    line-height: 1.5;
  }


  .mobile-account-card {
    margin-top: 14px;

    padding: 17px;

    display: flex;

    flex-direction: column;

    border:
      1px solid
      rgba(89,52,33,.08);

    border-radius: 16px;
  }


  .mobile-account-card span {
    color:
      #a18a7a;

    font-size: 8px;

    letter-spacing: 1.5px;
  }


  .mobile-account-card strong {
    margin-top: 8px;

    color:
      #593421;
  }


  .mobile-account-card small {
    margin-top: 4px;

    color:
      #9a887e;
  }


  .mobile-logout-button {
    width: 100%;

    margin-top: 15px;

    min-height: 49px;

    border:
      1px solid
      rgba(139,62,62,.2);

    border-radius: 13px;

    color:
      #984b4b;

    background:
      #fff7f5;

    font-weight: 600;
  }

}


/* =====================================================
   NÚA ADMIN — SEGURIDAD VISUAL LOGIN / APP
   ===================================================== */

.mobile-app-header,
.mobile-bottom-nav,
.mobile-settings-sheet {
  display: none !important;
}


@media (max-width: 768px) {

  /*
    Nada de la interfaz App puede aparecer
    antes de iniciar sesión.
  */

  body.admin-authenticated
  .mobile-app-header {
    display: flex !important;
  }


  body.admin-authenticated
  .mobile-bottom-nav {
    display: grid !important;
  }


  body.admin-authenticated
  .mobile-settings-sheet:not(.hidden) {
    display: block !important;
  }


  body:not(.admin-authenticated)
  .mobile-app-header,

  body:not(.admin-authenticated)
  .mobile-bottom-nav,

  body:not(.admin-authenticated)
  .mobile-settings-sheet {
    display: none !important;
  }

}


/* =====================================================
   FIX FINAL LOGIN / MOBILE NÚA ADMIN
   ===================================================== */

/*
  hidden SIEMPRE debe ganar frente
  a cualquier regla responsive.
*/

.hidden,
#adminView.hidden,
#loginView.hidden,
.mobile-settings-sheet.hidden {
  display: none !important;
}


/*
  Antes del login jamás mostramos
  ninguna parte del administrador.
*/

body:not(.admin-authenticated) #adminView {
  display: none !important;
}

body:not(.admin-authenticated)
.mobile-app-header,

body:not(.admin-authenticated)
.mobile-bottom-nav,

body:not(.admin-authenticated)
.mobile-settings-sheet {
  display: none !important;
}


/*
  Después del login ocultamos completamente
  la pantalla de acceso.
*/

body.admin-authenticated #loginView {
  display: none !important;
}


/* =====================================================
   LOGIN RESPONSIVE
   ===================================================== */

#loginView {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  padding:
    max(28px, env(safe-area-inset-top))
    20px
    max(28px, env(safe-area-inset-bottom));

  display: grid;
  place-items: center;

  overflow-x: hidden;

  background: #f8f3eb;
}


#loginView > * {
  width: min(460px, 100%);
  max-width: 100%;
}


#loginView .login-card {
  width: 100%;
  max-width: 440px;

  margin: 0 auto;

  padding: 40px 34px;

  border-radius: 24px;

  background: #fffdf9;

  box-shadow:
    0 20px 60px
    rgba(75,45,31,.08);
}


#loginView .login-brand {
  width: 100%;

  display: flex;
  justify-content: center;

  margin-bottom: 28px;
}


#loginView .admin-logo-image,
#loginView .login-brand img {
  width: min(220px, 70%);
  height: auto !important;
}


#loginView form {
  width: 100%;
}


#loginView input {
  width: 100%;
  max-width: 100%;

  min-height: 50px;

  padding: 13px 14px;

  font-size: 16px;

  box-sizing: border-box;
}


#loginView button[type="submit"] {
  width: 100%;

  min-height: 52px;

  margin-top: 10px;
}


/* =====================================================
   IPHONE / CELULAR
   ===================================================== */

@media (max-width: 768px) {

  #loginView {
    padding:
      max(24px, env(safe-area-inset-top))
      16px
      max(24px, env(safe-area-inset-bottom));
  }


  #loginView .login-card {
    width: 100%;

    max-width: 100%;

    padding:
      30px 20px;

    border-radius: 20px;
  }


  #loginView .login-brand img,
  #loginView .admin-logo-image {
    width: min(190px, 65%);
  }


  /*
    El admin móvil SOLO existe
    cuando hay sesión iniciada.
  */

  body.admin-authenticated
  #adminView {
    display: block !important;
  }


  body.admin-authenticated
  .mobile-app-header {
    display: flex !important;
  }


  body.admin-authenticated
  .mobile-bottom-nav {
    display: grid !important;
  }


  /*
    Evitar que nada sea más ancho
    que el iPhone.
  */

  #adminView,
  .admin-main,
  #productsAdminSection,
  #ordersAdminSection,
  .admin-products-card,
  .admin-products,
  .stats-grid {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;
  }


  .admin-main {
    overflow-x: hidden;
  }


  img,
  canvas {
    max-width: 100%;
  }

}


/* iPhone pequeño */

@media (max-width: 430px) {

  #loginView {
    padding-left: 12px;
    padding-right: 12px;
  }


  #loginView .login-card {
    padding:
      27px 17px;
  }

}


/* =====================================================
   NÚA ADMIN MOBILE V2
   ===================================================== */

.hidden {
  display: none !important;
}


.mobile-settings-sheet {
  display: none !important;
}


@media (max-width: 768px) {

  html,
  body {
    width: 100%;
    max-width: 100%;

    margin: 0;

    overflow-x: hidden;

    background:
      #f8f6f1;
  }


  body.admin-authenticated
  #adminView {
    width: 100%;

    min-height: 100dvh;

    display: block !important;

    background:
      #f8f6f1;
  }


  .admin-sidebar {
    display: none !important;
  }


  /* CABECERA */

  body.admin-authenticated
  .mobile-app-header {
    height:
      calc(
        66px +
        env(safe-area-inset-top)
      );

    padding:
      env(safe-area-inset-top)
      15px
      0;

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1500;

    display: flex !important;

    align-items: center;

    background:
      rgba(255,253,249,.98);

    border-bottom:
      1px solid
      rgba(89,52,33,.09);
  }


  .mobile-app-brand img {
    width: 62px;

    max-height: 36px;

    object-fit: contain;
  }


  .mobile-app-brand strong {
    font-size: 15px;
  }


  /* CONTENIDO */

  .admin-main {
    width: 100%;

    max-width: 100%;

    min-height: 100dvh;

    padding:
      calc(
        82px +
        env(safe-area-inset-top)
      )
      12px
      calc(
        92px +
        env(safe-area-inset-bottom)
      )
      !important;

    overflow-x: hidden;

    background:
      #f8f6f1;
  }


  #productsAdminSection,
  #ordersAdminSection,
  #settingsAdminSection {
    width: 100%;

    max-width: 100%;

    min-width: 0;
  }


  .admin-top {
    width: 100%;

    margin:
      0 0 20px;

    display: block;
  }


  .admin-top h1 {
    margin:
      8px 0;

    font-size:
      clamp(
        36px,
        10vw,
        44px
      )
      !important;
  }


  .admin-top p {
    margin:
      0 0 20px;
  }


  .admin-top .admin-primary {
    width: 100%;
  }


  /* ESTADÍSTICAS */

  .stats-grid {
    width: 100%;

    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      )
      !important;

    gap: 9px;

    margin-bottom: 22px;
  }


  .stats-grid article {
    min-height: 100px;

    padding: 15px !important;

    border-radius: 15px;
  }


  .stats-grid article:last-child {
    grid-column:
      1 / -1;
  }


  /* CARDS */

  .admin-products-card {
    width: 100%;

    max-width: 100%;

    margin: 0;

    border-radius: 17px;
  }


  .admin-card-heading {
    padding:
      19px 15px;
  }


  /* BARRA INFERIOR */

  body.admin-authenticated
  .mobile-bottom-nav {
    height:
      calc(
        68px +
        env(safe-area-inset-bottom)
      );

    padding:
      6px 7px
      env(safe-area-inset-bottom);

    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1600;

    display: grid !important;

    grid-template-columns:
      repeat(3,1fr);

    background:
      rgba(255,253,249,.98);

    border-top:
      1px solid
      rgba(89,52,33,.10);

    box-shadow:
      0 -4px 20px
      rgba(40,25,18,.06);
  }


  /* ==========================
     PEDIDO ABIERTO
     ========================== */

  #orderModal:not(.hidden) {
    display: block !important;
  }


  #orderModal
  .modal-backdrop {
    display: none !important;
  }


  .order-modal {
    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    max-height: none !important;

    padding:
      16px 14px
      30px !important;

    position: fixed !important;

    top:
      calc(
        66px +
        env(safe-area-inset-top)
      )
      !important;

    right: 0 !important;

    bottom:
      calc(
        68px +
        env(safe-area-inset-bottom)
      )
      !important;

    left: 0 !important;

    z-index:
      1400 !important;

    transform:
      none !important;

    overflow-y:
      auto !important;

    border-radius: 0 !important;

    background:
      #fffdf9;
  }


  .order-modal-header {
    margin: 0;

    padding:
      6px 0 15px;

    position: sticky;

    top: 0;

    z-index: 5;

    background:
      #fffdf9;
  }


  .order-modal-header h2 {
    max-width:
      calc(100vw - 80px);

    font-size:
      25px !important;

    overflow-wrap:
      anywhere;
  }


  .order-detail-status {
    grid-template-columns:
      1fr !important;
  }


  .order-detail-grid {
    grid-template-columns:
      1fr !important;
  }


  .fulfillment-panel {
    margin-top: 25px;
  }


  /* ==========================
     PRODUCTO MODAL
     ========================== */

  #productModal
  .modal-backdrop {
    display: none !important;
  }


  .product-modal {
    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    max-height: none !important;

    padding:
      18px 14px
      30px !important;

    position: fixed !important;

    top:
      calc(
        66px +
        env(safe-area-inset-top)
      )
      !important;

    right: 0 !important;

    bottom:
      calc(
        68px +
        env(safe-area-inset-bottom)
      )
      !important;

    left: 0 !important;

    transform:
      none !important;

    overflow-y:
      auto !important;

    border-radius: 0 !important;
  }


  /* ==========================
     CONFIGURACIÓN
     ========================== */

  .settings-admin-section {
    padding-bottom: 15px;
  }


  .settings-grid {
    display: grid;

    gap: 12px;
  }


  .settings-card {
    width: 100%;

    padding: 18px;

    display: grid;

    grid-template-columns:
      44px minmax(0,1fr);

    gap: 14px;

    border:
      1px solid
      rgba(89,52,33,.08);

    border-radius: 17px;

    background:
      white;

    box-shadow:
      0 8px 25px
      rgba(60,40,30,.035);
  }


  .settings-card-icon {
    width: 44px;
    height: 44px;

    display: grid;

    place-items: center;

    border-radius: 13px;

    background:
      #f1e5d8;

    font-size: 19px;
  }


  .settings-card-content {
    min-width: 0;
  }


  .settings-card-content > span {
    color:
      #a08b7d;

    font-size: 8px;

    letter-spacing: 1.5px;
  }


  .settings-card-content h2 {
    margin:
      6px 0 5px;

    color:
      #593421;

    font-family:
      "Playfair Display",
      serif;

    font-size: 21px;

    font-weight: 500;
  }


  .settings-card-content p {
    margin:
      0 0 15px;

    color:
      #8c7a70;

    font-size: 11px;

    line-height: 1.55;
  }


  .settings-primary-button {
    min-height: 41px;

    padding:
      10px 14px;

    border: 0;

    border-radius: 10px;

    color: white;

    background:
      #593421;

    font-size: 10px;

    font-weight: 600;
  }


  .settings-session-card {
    grid-template-columns:
      1fr;
  }


  .settings-logout-button {
    width: 100%;

    min-height: 45px;

    border:
      1px solid
      rgba(145,70,70,.18);

    border-radius: 11px;

    color:
      #984d4d;

    background:
      #fff7f5;

    font-weight: 600;
  }


  .mobile-install-notice {
    margin: 0;

    border-radius: 14px;
  }

}

.settings-test-button {
  min-height: 41px;

  margin-left: 7px;

  padding: 10px 14px;

  border: 1px solid #593421;

  border-radius: 10px;

  color: #593421;

  background: transparent;

  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 500px) {
  .settings-test-button {
    display: block;

    width: 100%;

    margin:
      8px 0 0;
  }

  .settings-primary-button {
    width: 100%;
  }
}


.desktop-test-push {
  width: 100%;

  margin-top: 8px;

  padding: 11px 8px;

  border:
    1px solid rgba(255,255,255,.18);

  color: rgba(255,255,255,.82);

  background: rgba(255,255,255,.04);

  font-size: 9px;

  letter-spacing: .7px;

  cursor: pointer;
}


.desktop-test-push:hover {
  background: rgba(255,255,255,.10);
}


/* NÚA — PUSH ACTIVADO */

.settings-primary-button.push-enabled,
.admin-pwa-box button.push-enabled {
  opacity: 1;

  color: #42634c;

  border-color: rgba(66,99,76,.25);

  background: #e6efe7;

  cursor: default;
}

.settings-primary-button.push-enabled:disabled,
.admin-pwa-box button.push-enabled:disabled {
  opacity: 1;
}


/* =====================================================
   NÚA — PAGO WOMPI
   ===================================================== */

.wompi-payment-box {
  text-align: center;
}

.wompi-pay-button {
  width: 100%;

  min-height: 54px;

  margin-top: 14px;

  padding: 14px 20px;

  border: 0;
  border-radius: 12px;

  color: #fff;

  background: #593421;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  letter-spacing: 1.3px;

  cursor: pointer;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.wompi-pay-button:hover {
  transform: translateY(-1px);
}

.wompi-pay-button:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
}

.wompi-payment-message {
  margin: 12px 0 0;

  color: #a04e42;

  font-size: 12px;
}

.wompi-payment-message:empty {
  display: none;
}

.wompi-sandbox-label {
  display: block;

  margin-top: 12px;

  color: #9b897e;

  font-size: 10px;

  letter-spacing: .5px;
}


/* =====================================================
   NÚA — WOMPI SANDBOX
   ===================================================== */

.wompi-payment-box {
  text-align: center;
}

.wompi-pay-button {
  width: 100%;
  min-height: 54px;

  margin-top: 14px;
  padding: 14px 20px;

  border: 0;
  border-radius: 10px;

  background: #593421;
  color: #ffffff;

  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;

  cursor: pointer;
}

.wompi-pay-button:disabled {
  opacity: .55;
  cursor: wait;
}

.wompi-payment-message {
  margin: 12px 0 0;

  color: #a04e42;
  font-size: 12px;
}

.wompi-payment-message:empty {
  display: none;
}

.wompi-sandbox-label {
  display: block;

  margin-top: 12px;

  color: #9b897e;
  font-size: 10px;
  letter-spacing: .5px;
}

/* NÚA - Botón pagar con Wompi */
#wompiPayBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 240px;
  min-height: 52px;

  padding: 14px 28px;

  background: #5a2d1d;
  color: #fffaf4;

  border: 1px solid #3f1d13;
  border-radius: 0;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;

  text-transform: uppercase;
  text-decoration: none;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

#wompiPayBtn:hover {
  background: #3f1d13;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(63, 29, 19, 0.18);
}

#wompiPayBtn:active {
  transform: translateY(0);
}

#wompiPayBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 600px) {
  #wompiPayBtn {
    width: 100%;
    max-width: 320px;
  }
}

.nua-shipping-notice {
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid rgba(75, 48, 34, 0.22);
  background: rgba(246, 239, 230, 0.72);
  color: #4b3022;
  line-height: 1.55;
}

.nua-shipping-notice strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.nua-shipping-notice span {
  display: block;
  font-size: 13px;
}



/* ==========================================================
   NÚA STORE V1
   Cabecera · categorías · búsqueda · ubicación
   ========================================================== */

.nua-shipping-strip {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px;
  background: #4b2d22;
  color: #fffaf3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
}

.nua-store-header {
  position: sticky;
  top: 0;
  z-index: 900;
  min-height: 82px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 14px clamp(20px, 4vw, 70px);
  background: rgba(251, 247, 239, .96);
  border-bottom: 1px solid rgba(75, 45, 34, .12);
  backdrop-filter: blur(18px);
}

.nua-primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 30px);
}

.nua-primary-nav a,
.nua-mobile-nav a {
  color: #4b2d22;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  white-space: nowrap;
}

.nua-primary-nav a {
  position: relative;
  padding: 9px 0;
}

.nua-primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 3px;
  height: 1px;
  background: #4b2d22;
  transition: right .25s ease;
}

.nua-primary-nav a:hover::after {
  right: 0;
}

.nua-header-brand {
  justify-self: center;
  display: flex;
  align-items: center;
}

.nua-store-header .logo-wordmark {
  width: 105px;
  max-height: 54px;
  object-fit: contain;
}

.nua-header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nua-header-action {
  border: 0;
  background: transparent;
  color: #4b2d22;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.nua-action-icon {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.nua-cart-action #cartCount {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #4b2d22;
  color: #fffaf3;
  font-size: 10px;
}

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


/* BUSCADOR */

body.nua-search-open {
  overflow: hidden;
}

.nua-search-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(35, 24, 18, .44);
  backdrop-filter: blur(6px);
}

.nua-search-box {
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding:
    clamp(26px, 5vw, 60px)
    clamp(20px, 7vw, 110px)
    55px;
  background: #fbf7ef;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .18);
}

.nua-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6b5146;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
}

.nua-search-head button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(75, 45, 34, .08);
  color: #4b2d22;
  font-size: 26px;
  cursor: pointer;
}

.nua-search-input-wrap {
  margin-top: 25px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid rgba(75, 45, 34, .32);
}

.nua-search-input-wrap > span {
  font-size: 30px;
  color: #4b2d22;
}

.nua-search-input-wrap input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 20px 0;
  color: #3f2a22;
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 4vw, 48px);
}

.nua-search-input-wrap input::placeholder {
  color: rgba(75, 45, 34, .32);
}

.nua-search-results {
  max-width: 920px;
  margin-top: 26px;
}

.nua-search-empty {
  padding: 25px 0;
  color: #806d64;
  font-size: 14px;
}

.nua-search-result {
  width: 100%;
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid rgba(75, 45, 34, .1);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.nua-search-result-image {
  width: 74px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: #efe6d8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nua-search-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nua-search-result-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nua-search-result-copy small {
  color: #8b7468;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.nua-search-result-copy strong {
  color: #3e291f;
  font-family: "Playfair Display", serif;
  font-size: 17px;
}

.nua-search-result-copy span {
  color: #5f493e;
  font-size: 13px;
}

.nua-search-arrow {
  color: #4b2d22;
  font-size: 22px;
}


/* CATEGORÍAS */

.nua-categories-section {
  padding:
    clamp(70px, 9vw, 130px)
    clamp(20px, 5vw, 80px);
  background: #f8f2e8;
}

.nua-section-intro {
  max-width: 650px;
  margin-bottom: 42px;
}

.nua-section-intro h2 {
  margin: 8px 0 12px;
  color: #3c281f;
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 5vw, 65px);
  line-height: .98;
}

.nua-section-intro p {
  max-width: 540px;
  color: #78645a;
  line-height: 1.7;
}

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

.nua-category-card {
  min-height: 420px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  border-radius: 4px;
  text-decoration: none;
  color: #3d291f;
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.nua-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 50px rgba(55, 37, 28, .12);
}

.nua-category-card > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}

.nua-category-card small {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.nua-category-card h3 {
  margin: 0 0 10px;
  font-family: "Playfair Display", serif;
  font-size: clamp(36px, 4vw, 55px);
  font-weight: 600;
}

.nua-category-card p {
  max-width: 310px;
  margin: 0 0 24px;
  line-height: 1.55;
  font-size: 14px;
}

.nua-category-card strong {
  font-size: 11px;
  letter-spacing: .13em;
}

.nua-category-products {
  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(255,255,255,.75),
      transparent 35%
    ),
    #e3cfb1;
}

.nua-category-kits {
  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(255,255,255,.5),
      transparent 35%
    ),
    #c7b199;
}

.nua-category-accessories {
  background:
    radial-gradient(
      circle at 75% 30%,
      rgba(255,255,255,.3),
      transparent 36%
    ),
    #745345;
  color: #fffaf3;
}


/* UBICACIÓN */

.nua-location-section {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  min-height: 600px;
  background: #eee2d3;
}

.nua-location-copy {
  padding:
    clamp(60px, 9vw, 125px)
    clamp(25px, 7vw, 100px);
}

.nua-location-copy h2 {
  max-width: 650px;
  margin: 12px 0 24px;
  color: #3e291f;
  font-family: "Playfair Display", serif;
  font-size: clamp(42px, 6vw, 75px);
  line-height: 1;
}

.nua-location-copy h2 em {
  font-weight: 400;
}

.nua-location-copy > p {
  max-width: 540px;
  color: #6f594f;
  font-size: 16px;
  line-height: 1.8;
}

.nua-location-details {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.nua-location-details > div {
  padding-top: 20px;
  border-top: 1px solid rgba(75, 45, 34, .25);
}

.nua-location-details span {
  display: block;
  margin-bottom: 8px;
  color: #8c7569;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
}

.nua-location-details strong {
  color: #4b2d22;
}

.nua-location-details p {
  color: #806d64;
  font-size: 13px;
}

.nua-location-art {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: #4b2d22;
  color: #fff9ef;
  text-align: center;
}

.nua-location-art > span {
  margin-bottom: 30px;
  font-family: "Playfair Display", serif;
  font-size: clamp(75px, 10vw, 145px);
  line-height: .7;
}

.nua-location-art strong {
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .22em;
}

.nua-location-art small {
  margin-top: 35px;
  opacity: .65;
  letter-spacing: .16em;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

  .nua-primary-nav {
    gap: 14px;
  }

  .nua-primary-nav a {
    font-size: 9px;
  }

}

@media (max-width: 900px) {

  .nua-store-header {
    position: sticky;
    grid-template-columns: 1fr auto;
    min-height: 70px;
    padding: 10px 18px;
  }

  .nua-primary-nav {
    display: none;
  }

  .nua-header-brand {
    justify-self: start;
  }

  .nua-store-header .logo-wordmark {
    width: 82px;
  }

  .nua-header-action > span:not(.nua-action-icon) {
    display: none;
  }

  .nua-mobile-nav {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding: 13px 18px;
    background: #fbf7ef;
    border-bottom: 1px solid rgba(75, 45, 34, .1);
    scrollbar-width: none;
  }

  .nua-mobile-nav::-webkit-scrollbar {
    display: none;
  }

  .nua-category-grid {
    grid-template-columns: 1fr;
  }

  .nua-category-card {
    min-height: 330px;
  }

  .nua-location-section {
    grid-template-columns: 1fr;
  }

  .nua-location-art {
    min-height: 420px;
  }

}

@media (max-width: 600px) {

  .nua-shipping-strip {
    font-size: 9px;
  }

  .nua-search-box {
    padding: 24px 18px 40px;
  }

  .nua-search-input-wrap input {
    font-size: 25px;
  }

  .nua-search-result {
    grid-template-columns: 58px 1fr auto;
  }

  .nua-search-result-image {
    width: 58px;
  }

  .nua-location-details {
    grid-template-columns: 1fr;
  }

}


/* ==========================================================
   NÚA STORE V2
   Hero premium + productos editoriales
   ========================================================== */


/* HERO MÁS EDITORIAL */

.nua-hero {
  width: 100%;
  max-width: none;
  min-height: 720px;
  margin: 0 0 90px;
  padding:
    clamp(65px, 8vw, 120px)
    clamp(25px, 7vw, 110px);
  gap: clamp(40px, 7vw, 110px);
  border: 0;
  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(255,255,255,.85),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      #f1e6d6 0%,
      #faf6ef 48%,
      #dfc9af 100%
    );
}

.nua-hero::before {
  width: 600px;
  height: 600px;
  top: -220px;
  right: -130px;
  background: rgba(255,255,255,.3);
}

.nua-hero .hero-content {
  max-width: 680px;
}

.hero-kicker {
  margin-bottom: 30px;
  color: #896650;
  font-size: 10px;
  letter-spacing: .28em;
}

.nua-hero h1 {
  max-width: 720px;
  font-size: clamp(58px, 7vw, 105px);
  line-height: .88;
  letter-spacing: -.045em;
}

.nua-hero h1 em {
  margin-top: 13px;
  color: #9a755d;
  font-weight: 400;
}

.nua-hero .hero-content > p {
  max-width: 520px;
  margin-top: 30px;
  font-size: 16px;
  line-height: 1.85;
}

.hero-actions {
  margin-top: 40px;
}

.hero-actions .primary,
.hero-actions .secondary {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 28px;
}

.hero-details {
  margin-top: 50px;
  padding-top: 22px;
  border-top: 1px solid rgba(75,45,31,.14);
}


/* EDITORIAL DERECHA */

.hero-editorial {
  min-height: 540px;
}

.editorial-main {
  width: 88%;
  height: 500px;
  padding: 70px 55px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.84),
      rgba(248,239,228,.7)
    );
  box-shadow:
    0 40px 90px rgba(75,45,31,.11);
}

.hero-logo {
  max-width: 400px;
}

.editorial-main p {
  max-width: 290px;
  margin-top: 35px;
  font-size: 16px;
}

.editorial-small {
  width: 170px;
  height: 112px;
}

.editorial-small.second {
  width: 150px;
  height: 94px;
}


/* BENEFICIOS */

.benefits {
  margin-bottom: 130px;
}

.benefits article {
  min-height: 140px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 38px 35px;
}

.benefits article > div {
  font-size: 28px;
}

.benefits strong {
  font-size: 18px;
}


/* PRODUCTOS */

.products-section {
  width: min(1380px, calc(100% - 48px));
  margin-bottom: 150px;
}

.section-heading {
  align-items: flex-end;
  margin-bottom: 50px;
}

.section-heading h2 {
  margin-top: 8px;
  font-size: clamp(42px, 5vw, 68px);
  line-height: .95;
  letter-spacing: -.035em;
}

.products-grid {
  gap: 24px;
}


/* TARJETA MÁS LIMPIA */

.product-card {
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  transition:
    transform .35s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
  background: #eee3d5;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform .65s cubic-bezier(.2,.6,.2,1);
}

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

.featured-badge {
  top: 16px !important;
  left: 16px !important;
  z-index: 4;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  background: rgba(255,250,244,.92) !important;
  color: #4b2d22 !important;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

.product-info {
  padding: 20px 1px 5px !important;
}

.product-info-top {
  align-items: flex-start;
  gap: 20px;
}

.product-info h3 {
  margin: 0 0 6px;
  color: #3d291f;
  font-family: "Playfair Display", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.15;
}

.product-info small {
  color: #9a8579;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.price {
  color: #4b2d22 !important;
  font-size: 14px !important;
  font-weight: 700;
  white-space: nowrap;
}

.product-description {
  display: -webkit-box;
  overflow: hidden;
  margin: 15px 0 20px !important;
  color: #806e64 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-actions {
  padding-top: 13px;
  border-top: 1px solid rgba(75,45,31,.1);
}

.stock {
  color: #9b887d !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.add-cart {
  min-height: 42px;
  padding: 10px 20px !important;
  border: 1px solid #4b2d22 !important;
  border-radius: 0 !important;
  background: #4b2d22 !important;
  color: #fffaf3 !important;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition:
    background .25s ease,
    color .25s ease;
}

.add-cart:hover {
  background: transparent !important;
  color: #4b2d22 !important;
}

.add-cart:disabled {
  opacity: .35;
  cursor: not-allowed;
}


/* FILTROS */

.filters {
  border-bottom: 1px solid rgba(75,45,31,.12);
}

.filter {
  padding: 12px 18px;
  color: #9a877b;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.filter.active {
  color: #4b2d22;
  border-bottom-color: #4b2d22;
}


/* DESKTOP GRANDE */

@media (min-width: 1200px) {

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

}


/* TABLET */

@media (max-width: 900px) {

  .nua-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 65px;
  }

  .nua-hero h1 {
    font-size: clamp(54px, 11vw, 85px);
  }

  .hero-editorial {
    min-height: 460px;
  }

  .editorial-main {
    width: 92%;
    height: 410px;
  }

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

}


/* MÓVIL */

@media (max-width: 600px) {

  .nua-hero {
    margin-bottom: 65px;
    padding:
      55px 20px
      65px;
  }

  .nua-hero h1 {
    font-size: 52px;
  }

  .nua-hero .hero-content > p {
    font-size: 14px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .primary,
  .hero-actions .secondary {
    width: 100%;
  }

  .hero-details {
    gap: 8px;
  }

  .hero-editorial {
    min-height: 380px;
  }

  .editorial-main {
    width: 95%;
    height: 340px;
    padding: 45px 28px;
  }

  .editorial-small {
    width: 128px;
    height: 88px;
  }

  .editorial-small.second {
    width: 118px;
    height: 78px;
  }

  .products-section {
    width: calc(100% - 30px);
  }

  .section-heading {
    align-items: flex-start;
  }

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

  .product-image {
    aspect-ratio: 1 / 1.12;
  }

}


/* ==========================================
   ADMIN · PORTADA DE LA TIENDA
   ========================================== */

.nua-storefront-admin {
  margin-bottom: 28px;
}

.nua-storefront-grid {
  display: grid;
  grid-template-columns:
    minmax(260px, .85fr)
    minmax(320px, 1.15fr);
  gap: 32px;
  padding-top: 20px;
}

.nua-storefront-image-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nua-storefront-image-picker {
  cursor: pointer;
}

.nua-storefront-preview {
  min-height: 320px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border:
    1px dashed
    rgba(75,45,34,.28);
  background: #f4eadc;
  color: #795c4b;
  text-align: center;
}

.nua-storefront-preview img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  position: absolute;
  inset: 0;
  object-fit: cover;
}

.nua-storefront-preview > span {
  position: relative;
  z-index: 2;
  padding: 12px 16px;
}

.nua-storefront-preview
.nua-change-image {
  position: absolute;
  left: 15px;
  bottom: 15px;
  padding: 9px 13px;
  background: rgba(255,250,244,.92);
  color: #4b2d22;
  font-size: 11px;
  font-weight: 700;
}

.nua-storefront-image-column small {
  color: #877369;
  line-height: 1.5;
}

.nua-storefront-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nua-storefront-fields label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.nua-storefront-fields label > span {
  color: #60483c;
  font-size: 12px;
  font-weight: 700;
}

.nua-storefront-fields input,
.nua-storefront-fields textarea {
  width: 100%;
  border:
    1px solid
    rgba(75,45,34,.15);
  background: #fffdf9;
  padding: 13px 14px;
  color: #3f2a21;
  font: inherit;
  outline: 0;
}

.nua-storefront-fields textarea {
  resize: vertical;
}

.nua-storefront-fields input:focus,
.nua-storefront-fields textarea:focus {
  border-color: #6a4633;
}

@media (max-width: 800px) {

  .nua-storefront-grid {
    grid-template-columns: 1fr;
  }

  .nua-storefront-preview {
    min-height: 260px;
  }

}


/* ==========================================================
   NÚA ADMIN · PALETA OFICIAL CAFÉ
   ========================================================== */

.admin-view {
  --admin-coffee: #4b2d22;
  --admin-coffee-dark: #3d241b;
  --admin-coffee-medium: #745345;
  --admin-coffee-light: #a8836b;
  --admin-cream: #f8f2e8;
  --admin-paper: #fffdf9;
  --admin-ink: #3d291f;
  --admin-muted: #89756a;
  --admin-border: rgba(75,45,34,.13);
}


/* SIDEBAR */

.admin-sidebar {
  background:
    linear-gradient(
      180deg,
      #4b2d22 0%,
      #3d241b 100%
    ) !important;

  color: #fffaf3 !important;
  border-right: 0 !important;
}


.admin-logo {
  border-bottom:
    1px solid
    rgba(255,255,255,.12) !important;
}


.admin-logo-image {
  filter:
    brightness(0)
    invert(1);
}


/* NAVEGACIÓN */

.admin-nav button {
  color:
    rgba(255,250,243,.70) !important;

  background:
    transparent !important;

  border-color:
    transparent !important;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}


.admin-nav button:hover:not(:disabled) {
  color: #fffaf3 !important;

  background:
    rgba(255,255,255,.07) !important;
}


.admin-nav button.active {
  color: #4b2d22 !important;

  background:
    #f8f2e8 !important;

  box-shadow:
    0 10px 25px
    rgba(25,12,7,.15);
}


.admin-nav button.active span {
  color: #4b2d22 !important;
}


.admin-nav button:disabled {
  color:
    rgba(255,250,243,.30) !important;
}


.admin-nav small {
  background:
    rgba(255,255,255,.12) !important;

  color:
    rgba(255,250,243,.8) !important;
}


.admin-nav button.active small {
  background:
    #4b2d22 !important;

  color:
    #fffaf3 !important;
}


/* ZONA PRINCIPAL */

.admin-main {
  background:
    #f8f2e8 !important;

  color:
    #3d291f !important;
}


.admin-main h1,
.admin-main h2,
.admin-main h3,
.admin-main strong {
  color:
    #3d291f;
}


.admin-main .eyebrow {
  color:
    #8f6d59 !important;
}


/* BOTONES */

.admin-primary {
  background:
    #4b2d22 !important;

  border-color:
    #4b2d22 !important;

  color:
    #fffaf3 !important;
}


.admin-primary:hover {
  background:
    #3d241b !important;

  border-color:
    #3d241b !important;
}


/* TARJETAS */

.admin-products-card,
.stats-grid article,
.nua-storefront-admin {
  background:
    #fffdf9 !important;

  border-color:
    rgba(75,45,34,.11) !important;

  box-shadow:
    0 14px 45px
    rgba(75,45,34,.045) !important;
}


/* INPUTS */

.admin-main input,
.admin-main textarea,
.admin-main select {
  border-color:
    rgba(75,45,34,.15) !important;

  background:
    #fffdf9 !important;

  color:
    #3d291f !important;
}


.admin-main input:focus,
.admin-main textarea:focus,
.admin-main select:focus {
  border-color:
    #745345 !important;

  box-shadow:
    0 0 0 3px
    rgba(116,83,69,.08) !important;
}


/* SUBIDA DE IMAGEN */

.image-drop,
.nua-storefront-preview {
  background:
    #f4eadc !important;

  border-color:
    rgba(75,45,34,.24) !important;

  color:
    #745345 !important;
}


/* CAJA PWA */

.admin-pwa-box {
  background:
    rgba(255,255,255,.07) !important;

  border-color:
    rgba(255,255,255,.11) !important;

  color:
    #fffaf3 !important;
}


.admin-pwa-box button {
  border-color:
    rgba(255,255,255,.18) !important;

  color:
    #fffaf3 !important;

  background:
    rgba(255,255,255,.06) !important;
}


/* HEADER MÓVIL */

.mobile-app-header {
  background:
    #4b2d22 !important;

  color:
    #fffaf3 !important;

  border-color:
    rgba(255,255,255,.10) !important;
}


.mobile-app-brand strong,
.mobile-app-brand span {
  color:
    #fffaf3 !important;
}


/* BOTTOM NAV MÓVIL */

.mobile-bottom-nav {
  background:
    #fffdf9 !important;

  border-color:
    rgba(75,45,34,.12) !important;
}


.mobile-bottom-nav button {
  color:
    #927a6e !important;
}


.mobile-bottom-nav button.active {
  color:
    #4b2d22 !important;
}



/* ==========================================================
   NÚA ADMIN PROFESSIONAL V2
   ========================================================== */

body.admin-authenticated {
  background: #f5efe7 !important;
}


/* MUY IMPORTANTE:
   solo una sección administrativa visible a la vez */

.admin-main .hidden {
  display: none !important;
}


/* SIDEBAR */

body.admin-authenticated .admin-sidebar {
  background:
    linear-gradient(
      180deg,
      #382219 0%,
      #2b1913 100%
    ) !important;

  color: #fff9f2 !important;

  border: 0 !important;

  box-shadow:
    12px 0 40px
    rgba(46, 27, 19, .08) !important;
}


body.admin-authenticated .admin-logo {
  min-height: 115px;

  padding: 22px 22px !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.10) !important;
}


body.admin-authenticated .admin-logo-image {
  max-width: 125px;

  filter: none !important;
}


/* MENÚ */

body.admin-authenticated .admin-nav {
  padding-top: 18px;
}


body.admin-authenticated .admin-nav button {
  min-height: 48px;

  margin-bottom: 6px;

  padding: 0 15px !important;

  border: 1px solid transparent !important;

  border-radius: 10px !important;

  background: transparent !important;

  color:
    rgba(255,249,242,.72) !important;

  font-weight: 500 !important;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease !important;
}


body.admin-authenticated .admin-nav button:hover:not(:disabled) {
  background:
    rgba(255,255,255,.07) !important;

  color: #ffffff !important;

  transform:
    translateX(2px);
}


body.admin-authenticated .admin-nav button.active {
  background:
    #f4e9db !important;

  border-color:
    rgba(255,255,255,.06) !important;

  color:
    #43281d !important;

  font-weight: 700 !important;

  box-shadow:
    0 8px 22px
    rgba(0,0,0,.12) !important;
}


body.admin-authenticated .admin-nav button.active span {
  color:
    #43281d !important;
}


body.admin-authenticated .admin-nav button:not(.active) span {
  color:
    #d7b89e !important;
}


body.admin-authenticated .admin-nav small {
  background:
    rgba(255,255,255,.10) !important;

  color:
    rgba(255,255,255,.70) !important;
}


body.admin-authenticated .admin-nav button.active small {
  background:
    #4b2d22 !important;

  color:
    white !important;
}


/* VENTAS DESACTIVADO */

body.admin-authenticated .admin-nav button:disabled {
  opacity: .45 !important;
  cursor: default;
}


/* CONTENIDO */

body.admin-authenticated .admin-main {
  background:
    #f7f3ed !important;

  color:
    #3b271f !important;
}


body.admin-authenticated .admin-top {
  margin-bottom: 25px;
}


body.admin-authenticated .admin-top h1 {
  color:
    #3b2118 !important;

  font-family:
    "Playfair Display",
    serif !important;

  font-weight: 600 !important;
}


body.admin-authenticated .admin-top p {
  color:
    #806e64 !important;
}


body.admin-authenticated .eyebrow {
  color:
    #916b55 !important;

  font-weight: 700 !important;

  letter-spacing:
    .22em !important;
}


/* TARJETAS */

body.admin-authenticated .admin-products-card,
body.admin-authenticated .stats-grid article,
body.admin-authenticated .nua-storefront-admin {
  border:
    1px solid
    rgba(75,45,34,.10) !important;

  border-radius:
    18px !important;

  background:
    #fffdf9 !important;

  box-shadow:
    0 12px 40px
    rgba(75,45,34,.045) !important;
}


/* ESTADÍSTICAS */

body.admin-authenticated .stats-grid article span {
  color:
    #8a776d !important;
}


body.admin-authenticated .stats-grid article strong {
  color:
    #4b2d22 !important;
}


/* BOTONES */

body.admin-authenticated .admin-primary {
  border:
    1px solid
    #4b2d22 !important;

  border-radius:
    9px !important;

  background:
    #4b2d22 !important;

  color:
    #fffaf3 !important;

  box-shadow:
    none !important;

  transition:
    background .2s ease,
    transform .2s ease !important;
}


body.admin-authenticated .admin-primary:hover {
  background:
    #352018 !important;

  border-color:
    #352018 !important;

  transform:
    translateY(-1px);
}


/* INPUTS */

body.admin-authenticated .admin-main input,
body.admin-authenticated .admin-main textarea,
body.admin-authenticated .admin-main select {
  border:
    1px solid
    rgba(75,45,34,.16) !important;

  border-radius:
    9px !important;

  background:
    #fffefa !important;

  color:
    #3d291f !important;

  box-shadow:
    none !important;
}


body.admin-authenticated .admin-main input:focus,
body.admin-authenticated .admin-main textarea:focus,
body.admin-authenticated .admin-main select:focus {
  border-color:
    #8f6852 !important;

  box-shadow:
    0 0 0 3px
    rgba(143,104,82,.08) !important;

  outline: none !important;
}


/* SUBIDA DE ARCHIVOS */

body.admin-authenticated .image-drop,
body.admin-authenticated .nua-storefront-preview {
  border:
    1px dashed
    rgba(75,45,34,.28) !important;

  border-radius:
    12px !important;

  background:
    #f5eadc !important;

  color:
    #6e4c3b !important;
}


/* CAJA DE NOTIFICACIONES */

body.admin-authenticated .admin-pwa-box {
  border:
    1px solid
    rgba(255,255,255,.13) !important;

  border-radius:
    12px !important;

  background:
    rgba(255,255,255,.045) !important;

  color:
    #fff8ef !important;
}


body.admin-authenticated .admin-pwa-box button {
  border:
    1px solid
    rgba(255,255,255,.22) !important;

  background:
    transparent !important;

  color:
    #fff8ef !important;
}


body.admin-authenticated .admin-pwa-box button:hover {
  background:
    rgba(255,255,255,.08) !important;
}


/* CERRAR SESIÓN */

body.admin-authenticated .logout-button {
  border:
    1px solid
    rgba(255,255,255,.20) !important;

  border-radius:
    10px !important;

  background:
    transparent !important;

  color:
    #fff9f2 !important;
}


body.admin-authenticated .logout-button:hover {
  background:
    rgba(255,255,255,.08) !important;
}


/* HEADER MÓVIL */

body.admin-authenticated .mobile-app-header {
  background:
    #382219 !important;

  color:
    #fff9f2 !important;

  border-color:
    rgba(255,255,255,.08) !important;
}


/* NAVEGACIÓN MÓVIL */

body.admin-authenticated .mobile-bottom-nav {
  background:
    #fffdf9 !important;

  border-top:
    1px solid
    rgba(75,45,34,.12) !important;

  box-shadow:
    0 -8px 30px
    rgba(75,45,34,.06) !important;
}


body.admin-authenticated .mobile-bottom-nav button {
  color:
    #978379 !important;
}


body.admin-authenticated .mobile-bottom-nav button.active {
  color:
    #4b2d22 !important;
}


@media (max-width: 800px) {

  body.admin-authenticated .admin-main {
    background:
      #f7f3ed !important;
  }

}



/* ==========================================================
   NÚA ADMIN V3
   LOGO + CONFIGURACIÓN
   ========================================================== */


/* LOGO NÚA MÁS VISIBLE */

body.admin-authenticated .admin-logo {
  min-height: 135px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px 14px !important;
  background: transparent !important;
}


body.admin-authenticated .admin-logo-image {
  width: 170px !important;
  height: 82px !important;
  max-width: none !important;
  max-height: none !important;

  padding: 13px 18px !important;

  object-fit: contain !important;

  border-radius: 12px !important;

  background:
    #f5eadc !important;

  filter: none !important;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.16) !important;
}


/* CONFIGURACIÓN */

.nua-settings-card {
  max-width: 850px;
}


.nua-settings-card
.admin-card-heading {
  padding-bottom: 20px;

  border-bottom:
    1px solid
    rgba(75,45,34,.10);
}


.nua-settings-card h2 {
  margin:
    7px 0 6px;

  font-family:
    "Playfair Display",
    serif;

  font-size: 27px;
}


.nua-settings-card
.admin-card-heading p {
  max-width: 570px;

  color:
    #847168;

  line-height: 1.6;
}


.nua-settings-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  padding:
    28px 0 22px;
}


.nua-settings-actions button {
  min-height: 45px;

  padding:
    11px 18px;

  border-radius:
    9px;

  font-family:
    inherit;

  font-weight:
    700;

  cursor: pointer;
}


.nua-admin-secondary {
  border:
    1px solid
    rgba(75,45,34,.24);

  background:
    transparent;

  color:
    #4b2d22;
}


.nua-admin-secondary:hover {
  border-color:
    #4b2d22;

  background:
    #f5eadc;
}


.nua-settings-note {
  padding:
    18px 20px;

  border-radius:
    10px;

  background:
    #f7efe5;

  color:
    #60483c;
}


.nua-settings-note strong {
  display: block;

  margin-bottom:
    5px;

  color:
    #4b2d22;
}


.nua-settings-note p {
  margin: 0;

  color:
    #806d63;

  font-size:
    13px;

  line-height:
    1.55;
}


/* LÍNEA DIVISORIA ANTES DE CONFIGURACIÓN */

body.admin-authenticated
#settingsNavBtn {
  margin-top:
    16px !important;

  position:
    relative;
}


body.admin-authenticated
#settingsNavBtn::before {
  content: "";

  position:
    absolute;

  left: 0;
  right: 0;

  top: -10px;

  height: 1px;

  background:
    rgba(255,255,255,.10);
}


@media (max-width: 800px) {

  .nua-settings-actions {
    flex-direction:
      column;
  }

  .nua-settings-actions button {
    width: 100%;
  }

}



/* ==========================================================
   ADMIN NÚA · LOGO Y CONFIGURACIÓN FIX
   ========================================================== */

body.admin-authenticated
.admin-sidebar
.admin-logo {
  min-height: 150px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 24px 18px !important;
}


body.admin-authenticated
.admin-sidebar
.admin-logo
.admin-logo-image {
  width: 172px !important;
  height: auto !important;

  max-width: 172px !important;
  max-height: 90px !important;

  display: block !important;

  padding: 17px 20px !important;

  border-radius: 12px !important;

  background: #f5eadc !important;

  filter: none !important;

  opacity: 1 !important;

  box-shadow:
    0 12px 32px
    rgba(0,0,0,.18) !important;
}


/* Separación de Configuración */

body.admin-authenticated
#settingsNavBtn {
  margin-top: 19px !important;

  border-top:
    1px solid
    rgba(255,255,255,.10) !important;
}


/* Configuración */

.nua-settings-card {
  max-width: 900px;
}


.nua-settings-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;

  padding-top: 25px;
}


.nua-settings-actions button {
  min-height: 45px;

  padding: 11px 20px;

  border-radius: 8px;

  font-family: inherit;
  font-weight: 700;

  cursor: pointer;
}


.nua-admin-secondary {
  border:
    1px solid
    rgba(75,45,34,.24);

  background:
    #fffdf9;

  color:
    #4b2d22;
}


.nua-admin-secondary:hover {
  background:
    #f5eadc;
}


/* No permitir que hidden pierda contra reglas antiguas */

body.admin-authenticated
.admin-main
section.hidden {
  display: none !important;
}



/* ==========================================================
   NÚA ADMIN FINAL · SIDEBAR
   ========================================================== */

body.admin-authenticated .admin-sidebar {
  background:
    linear-gradient(
      180deg,
      #40271d 0%,
      #2d1a14 100%
    ) !important;
}


/* LOGO CLARO Y VISIBLE */

body.admin-authenticated .admin-logo {
  min-height: 155px !important;
  padding: 22px 18px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  border-bottom:
    1px solid rgba(255,255,255,.10) !important;
}


body.admin-authenticated .admin-logo-image {
  width: 165px !important;
  max-width: 165px !important;
  height: auto !important;
  max-height: none !important;

  display: block !important;

  padding: 18px 22px !important;

  border-radius: 12px !important;

  background: #f7ecde !important;

  opacity: 1 !important;
  filter: none !important;

  box-shadow:
    0 12px 35px rgba(0,0,0,.18) !important;
}


/* MENÚ */

body.admin-authenticated .admin-nav {
  padding-top: 20px !important;
}


body.admin-authenticated .admin-nav button {
  min-height: 49px !important;
  margin-bottom: 6px !important;

  border-radius: 10px !important;
}


body.admin-authenticated .admin-nav button.active {
  background: #f7ecde !important;
  color: #40271d !important;
}


/* CONFIGURACIÓN SEPARADA */

body.admin-authenticated #settingsNavBtn {
  margin-top: 20px !important;

  border-top:
    1px solid rgba(255,255,255,.10) !important;

  padding-top: 12px !important;
}


/* CONFIGURACIÓN */

body.admin-authenticated .settings-admin-section {
  max-width: 1200px;
}


body.admin-authenticated .settings-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}


body.admin-authenticated .settings-card {
  padding: 28px !important;

  border:
    1px solid rgba(75,45,34,.10) !important;

  border-radius: 18px !important;

  background: #fffdf9 !important;

  box-shadow:
    0 12px 40px rgba(75,45,34,.05) !important;
}


body.admin-authenticated .settings-card-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  margin-bottom: 20px;

  border-radius: 12px;

  background: #f4e7d8;

  font-size: 22px;
}


body.admin-authenticated .settings-card-content > span {
  color: #957360 !important;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: .18em;
}


body.admin-authenticated .settings-card-content h2 {
  margin: 8px 0 10px;

  color: #3d291f !important;

  font-family:
    "Playfair Display",
    serif;

  font-size: 27px;
}


body.admin-authenticated .settings-card-content p {
  max-width: 520px;

  color: #837067 !important;

  line-height: 1.6;
}


/* GARANTIZAR QUE SOLO SE VEA LA SECCIÓN ELEGIDA */

body.admin-authenticated .admin-main .hidden {
  display: none !important;
}



/* ==========================================================
   PORTADA DINÁMICA NÚA
   ========================================================== */

.nua-hero h1
.nua-live-hero-title {
  display: block;
  color: #3d291f;
}


.editorial-main.nua-live-storefront-image {
  overflow: hidden;

  padding: 0 !important;

  background:
    linear-gradient(
      180deg,
      rgba(44,27,19,.01) 45%,
      rgba(44,27,19,.38) 100%
    ),
    var(--nua-storefront-image)
    center / cover no-repeat
    !important;
}


.editorial-main.nua-live-storefront-image
.hero-logo,

.editorial-main.nua-live-storefront-image
.editorial-leaf,

.editorial-main.nua-live-storefront-image
> p {
  display: none !important;
}


.editorial-main.nua-live-storefront-image::after {
  content: "NÚA";

  position: absolute;

  left: 26px;
  bottom: 25px;

  color: rgba(255,255,255,.94);

  font-family:
    "Playfair Display",
    serif;

  font-size: 29px;

  letter-spacing: .16em;

  text-shadow:
    0 2px 15px
    rgba(0,0,0,.18);
}


@media (max-width: 600px) {

  .editorial-main.nua-live-storefront-image {
    background-position:
      center center !important;
  }

  .editorial-main.nua-live-storefront-image::after {
    left: 20px;
    bottom: 20px;
    font-size: 23px;
  }

}



/* ==========================================================
   HERO NÚA · ETIQUETAS LIMPIAS
   ========================================================== */

.editorial-small {
  padding: 20px 22px !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.editorial-small span {
  opacity: .72 !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
}

.editorial-small strong {
  font-family: "Playfair Display", serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: .08em !important;
}

.editorial-small.second strong {
  color: #4b2d22 !important;
}



/* ==========================================================
   NÚA · DISEÑO SIN NUMERACIÓN DECORATIVA
   ========================================================== */

.nua-category-card {
  justify-content: flex-end !important;
}

.benefits article {
  gap: 0 !important;
}

.benefits article > span {
  width: 100%;
}



/* NUA ADMIN CATEGORIAS */

.admin-category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 24px;
}

.admin-category-filters button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border: 1px solid #e5d8c9;
  border-radius: 30px;
  background: #fffdf9;
  color: #684d3e;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.admin-category-filters button.active {
  background: #503429;
  border-color: #503429;
  color: white;
}

.admin-category-filters button span {
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(150, 117, 94, .17);
  font-size: 11px;
}

.admin-category-label {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #f3e7da;
  color: #644839;
  font-size: 11px;
}

.admin-category-empty {
  padding: 42px 20px;
  text-align: center;
  color: #806f63;
}

.product-form #productCategory {
  display: block;
  width: 100%;
  padding: 13px;
  border: 1px solid #e0d6ca;
  border-radius: 10px;
  background: #fffdf9;
  color: #493227;
  font: inherit;
}


/* NÚA: ADMINISTRACIÓN DE VARIANTES */

.nua-variants-overlay[hidden] {
  display: none !important;
}

.nua-variants-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: rgba(35, 22, 17, .65);
}

.nua-variants-window {
  width: min(940px, 100%);
  max-height: 92vh;
  overflow: auto;
  padding: 28px;
  border-radius: 20px;
  background: #fffaf4;
  color: #473126;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .2);
}

.nua-variants-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 25px;
}

.nua-variants-heading small {
  font-size: 10px;
  letter-spacing: .2em;
  color: #9b7961;
}

.nua-variants-heading h2 {
  margin: 7px 0;
  font-size: 28px;
}

.nua-variants-heading > button {
  border: 0;
  background: transparent;
  color: #503429;
  font-size: 32px;
  cursor: pointer;
}

.nua-variants-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}

#nuaVariantsForm,
.nua-variants-existing {
  min-width: 0;
}

#nuaVariantsForm label {
  display: block;
  margin: 15px 0;
  font-size: 13px;
  font-weight: 600;
}

#nuaVariantsForm label > input:not([type="checkbox"]) {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #dfd2c5;
  border-radius: 9px;
  background: white;
  color: #473126;
  font: inherit;
}

#nuaVariantsForm label small {
  display: block;
  margin-top: 7px;
  font-weight: 400;
  color: #86766c;
}

.nua-variants-check {
  display: flex !important;
  gap: 10px;
  align-items: center;
}

.nua-variants-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nua-variants-form-actions button,
.nua-variant-item button,
.nua-variants-button {
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid #c9ae98;
  cursor: pointer;
}

#nuaVarSave {
  background: #503429;
  color: white;
}

.nua-variant-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid #e9ded3;
}

.nua-variant-image {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 10px;
  background: #f2e7dc;
}

.nua-variant-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nua-variant-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.nua-variant-info span,
.nua-variant-info small {
  color: #847267;
}

#nuaVarMessage {
  font-size: 13px;
  color: #624837;
}

@media (max-width: 650px) {
  .nua-variants-window {
    padding: 20px;
  }

  .nua-variants-layout {
    grid-template-columns: 1fr;
  }
}


/* NUA ADMIN - PRODUCTOS Y BOTONES */

body.admin-authenticated .admin-products .admin-product {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "photo info price stock"
    "photo info actions actions" !important;
  gap: 12px 18px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 18px !important;
}

body.admin-authenticated .admin-product > .admin-product-image {
  grid-area: photo;
}

body.admin-authenticated .admin-product > div:nth-child(2) {
  grid-area: info;
  min-width: 0;
}

body.admin-authenticated .admin-product > strong {
  grid-area: price;
  white-space: nowrap;
}

body.admin-authenticated .admin-product > span {
  grid-area: stock;
  white-space: nowrap;
}

/* Botones perfectamente alineados */

body.admin-authenticated .admin-product .product-admin-actions {
  grid-area: actions;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
  width: auto !important;
}

body.admin-authenticated .product-admin-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 88px !important;
  min-height: 37px !important;
  padding: 9px 14px !important;
  margin: 0 !important;
  border: 1px solid #dac9b9 !important;
  border-radius: 9px !important;
  background: #fffdf9 !important;
  color: #503429 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  cursor: pointer;
  box-sizing: border-box !important;
}

body.admin-authenticated .product-admin-actions
.nua-variants-button {
  background: #f1e5d7 !important;
  border-color: #e4d3c1 !important;
}

/* Eliminar: distinguible sin ser llamativo */

body.admin-authenticated .product-admin-actions
.delete-product {
  background: #fff5f3 !important;
  border-color: #e7c3be !important;
  color: #a14742 !important;
}

body.admin-authenticated .product-admin-actions
.delete-product:hover {
  background: #f9e3df !important;
}

/* Adaptación para celulares */

@media (max-width: 700px) {
  body.admin-authenticated .admin-products .admin-product {
    grid-template-columns: 55px minmax(0, 1fr) !important;
    grid-template-areas:
      "photo info"
      "price stock"
      "actions actions" !important;
  }

  body.admin-authenticated .admin-product
  .product-admin-actions {
    justify-content: flex-start !important;
  }

  body.admin-authenticated .product-admin-actions button {
    flex: 1 1 85px;
  }
}


/* NÚA: DESCRIPCIÓN DE PRODUCTOS */

#productDescription {
  white-space: pre-line !important;
  line-height: 1.9 !important;
  overflow-wrap: anywhere;
}



/* NUA PRODUCTO: DESCRIPCIÓN COMPACTA */

.nua-description-button {
  display: inline-flex;
  align-items: center;
  margin: 14px 0 24px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid #75513d;
  background: transparent;
  color: #624330;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
}

.nua-description-button:hover {
  color: #a47b5b;
}

.nua-description-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(39, 24, 17, .58);
  box-sizing: border-box;
}

.nua-description-dialog {
  width: min(690px, 100%);
  max-height: min(780px, 88dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: 16px;
  background: #faf5ed;
  color: #493023;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
}

.nua-description-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 26px 30px;
  border-bottom: 1px solid #e6d9c9;
}

.nua-description-header small {
  color: #9a765d;
  font-size: 10px;
  letter-spacing: .17em;
}

.nua-description-header h2 {
  margin: 10px 0 0;
  color: #493023;
  font-size: clamp(23px, 4vw, 32px);
}

.nua-description-close {
  border: 0;
  background: transparent;
  color: #493023;
  font-size: 30px;
  cursor: pointer;
}

.nua-description-full {
  overflow-y: auto;
  padding: 8px 30px 35px;
  line-height: 1.8;
  font-size: 14px;
}

.nua-description-full p {
  margin: 15px 0;
}

.nua-description-full h3 {
  margin: 27px 0 12px;
  font-size: 15px;
  letter-spacing: .06em;
  color: #624330;
}

.nua-description-bullet {
  position: relative;
  padding-left: 17px;
  margin: 6px 0 !important;
}

.nua-description-bullet::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #9c795e;
}

/* OCULTAR MINIATURAS DEBAJO DEL PRODUCTO */

#productThumbnails,
.product-gallery .product-thumbnails {
  display: none !important;
}

@media (max-width: 600px) {
  .nua-description-header {
    padding: 20px;
  }

  .nua-description-full {
    padding: 8px 20px 25px;
  }
}



/* NÚA: SELECCIÓN DE VARIANTES */

.nua-variant-picker[hidden] {
  display: none !important;
}

.nua-variant-picker {
  margin: 22px 0;
  padding: 22px;
  border: 1px solid #e4d5c5;
  border-radius: 14px;
  background: #faf3e9;
}

.nua-variant-picker h2 {
  margin: 0 0 17px;
  color: #4d3126;
  font-size: 21px;
}

.nua-picker-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.nua-picker-modes label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #5b4033;
  font-size: 13px;
  cursor: pointer;
}

.nua-picker-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.nua-picker-fields label {
  min-width: 0;
  color: #604535;
  font-size: 12px;
}

.nua-picker-fields select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #dcc9b6;
  border-radius: 9px;
  background: white;
  color: #503429;
  font: inherit;
}

#nuaPickerNote {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #80624d;
}

@media (max-width: 540px) {
  .nua-picker-fields {
    grid-template-columns: 1fr;
  }
}



/* NUA_VARIANT_CARDS_V2 */

.nua-choice-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.nua-choice-modes button {
  padding: 12px 15px;
  border: 1px solid #dbcbbb;
  border-radius: 9px;
  background: #fffdf9;
  color: #634a3d;
  cursor: pointer;
}

.nua-choice-modes button.active {
  background: #503429;
  border-color: #503429;
  color: #fff;
}

.nua-choice-heading {
  display: block;
  margin: 14px 0;
  color: #503429;
  font-size: 13px;
  font-weight: 600;
}

.nua-variant-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.nua-variant-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 12px 8px;
  border: 1px solid #e3d4c4;
  border-radius: 12px;
  background: #fffdf9;
  color: #493227;
  cursor: pointer;
  text-align: center;
}

.nua-variant-choice.active {
  border: 2px solid #634536;
  background: #f6ebe0;
}

.nua-variant-choice.sold-out {
  opacity: .48;
  cursor: not-allowed;
}

.nua-choice-photo,
.nua-choice-swatch {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
}

.nua-choice-swatch {
  display: block;
  border: 1px solid #e2d7cd;
}

.nua-variant-choice strong {
  font-size: 12px;
}

.nua-variant-choice small {
  font-size: 10px;
  color: #897469;
}

.nua-custom-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 20px;
}

.nua-custom-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 7px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}

.nua-custom-swatch.active {
  border-color: #634536;
}

.nua-custom-swatch span {
  width: 42px;
  height: 42px;
  border: 1px solid #d9c8b8;
  border-radius: 50%;
}

.nua-custom-swatch small {
  color: #634a3d;
  font-size: 10px;
}

#nuaCustomFragrance {
  width: 100%;
  padding: 12px;
  border: 1px solid #dbcbbb;
  border-radius: 9px;
  background: #fff;
  color: #493227;
}

.nua-choice-summary {
  margin-top: 20px;
  color: #493227;
  font-size: 13px;
  font-weight: 600;
}

.nua-choice-purchase-note {
  margin: 12px 0 0;
  color: #8a7364;
  font-size: 11px;
  line-height: 1.6;
}

.nua-variant-picker [hidden] {
  display: none !important;
}

@media (max-width: 600px) {
  .nua-variant-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* NÚA: SELECTOR COMPACTO DE PRESENTACIONES */

.nua-variant-picker {
  padding: 8px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.nua-variant-picker > h2 {
  display: none !important;
}

.nua-choice-heading {
  margin-bottom: 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #51382b !important;
}

.nua-variant-cards {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}

.nua-variant-choice {
  width: 66px !important;
  min-width: 0 !important;
  padding: 5px 2px !important;
  gap: 5px !important;

  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;

  box-shadow: none !important;
}

.nua-variant-choice .nua-choice-swatch {
  display: block !important;

  width: 37px !important;
  height: 37px !important;

  margin-bottom: 3px !important;

  border-radius: 50% !important;
  border: 1px solid #d8cbbd !important;

  box-sizing: border-box !important;
}

.nua-variant-choice.active .nua-choice-swatch {
  outline: 2px solid #614737 !important;
  outline-offset: 4px !important;
}

.nua-variant-choice strong {
  color: #4e382c !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
}

.nua-variant-choice small {
  color: #947e70 !important;
  font-size: 9px !important;
}

.nua-variant-choice small:last-child {
  display: none !important;
}

.nua-variant-choice.sold-out {
  opacity: .35 !important;
}

.nua-choice-summary {
  margin-top: 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Personalización discreta */

.nua-choice-modes {
  margin-bottom: 20px !important;
  gap: 8px !important;
}

.nua-choice-modes button {
  padding: 9px 12px !important;
  border-radius: 7px !important;
  font-size: 11px !important;
}

@media (max-width: 600px) {
  .nua-variant-cards {
    gap: 10px !important;
  }
}



/* NÚA: FRAGANCIA Y COLOR EN LOS CARRITOS */

.nua-cart-variant-detail {
  display: block;
  margin: 5px 0;
  color: #846957;
  font-size: 12px;
  line-height: 1.5;
}


/* NUA_CONTACT_SETTINGS_V1 */
.nua-contact-title {
  margin: 18px 0 2px;
  padding-top: 18px;
  border-top: 1px solid rgba(74, 46, 34, 0.12);
  font-weight: 600;
  color: #4a2e22;
}

.nua-contact-title small {
  display: block;
  margin-top: 4px;
  font-weight: 400;
  color: #8c796c;
  line-height: 1.5;
}

/* NUA_CATEGORIES_V1 */
.nua-category-card.is-live {
  cursor: pointer;
}

.nua-category-card.is-live:focus-visible {
  outline: 2px solid #4a2e22;
  outline-offset: 3px;
}

/* NUA_FOOTER_V1 */
footer.nua-footer {
  display: block;
  padding: 64px max(24px, 6vw) 28px;
  background: #f4ece2;
  border-top: 1px solid rgba(74, 46, 34, 0.12);
  color: #4a2e22;
  text-align: left;
}

.nua-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.nua-footer-brand .footer-logo {
  width: 120px;
  height: auto;
  margin: 0 0 14px;
}

.nua-footer-brand p,
.nua-footer-col p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #7a6658;
}

.nua-footer-col h3 {
  margin: 0 0 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a2e22;
}

.nua-footer-col a {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  color: #7a6658;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.nua-footer-col a:hover {
  color: #4a2e22;
  text-decoration: underline;
}

.nua-footer-bottom {
  max-width: 1200px;
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(74, 46, 34, 0.12);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #8c796c;
}

@media (max-width: 860px) {
  .nua-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }

  .nua-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .nua-footer-grid {
    grid-template-columns: 1fr;
  }

  .nua-footer-col a {
    padding: 4px 0;
  }
}

footer.nua-footer {
  max-width: none;
  width: auto;
  margin: 0;
}

/* NUA_FOOTER_ICONS_V1: íconos de contacto con los colores de NÚA */
.nua-social-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nua-footer-col a.nua-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid rgba(74, 46, 34, 0.35);
  border-radius: 50%;
  color: #4a2e22;
  background: transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nua-footer-col a.nua-social svg {
  width: 20px;
  height: 20px;
}

.nua-footer-col a.nua-social:hover,
.nua-footer-col a.nua-social:focus-visible {
  background: #4a2e22;
  border-color: #4a2e22;
  color: #f4ece2;
  text-decoration: none;
}

.nua-footer-col a.nua-social:focus-visible {
  outline: 2px solid #4a2e22;
  outline-offset: 3px;
}

/* NUA_ORDER_TRACKING_V1 */
.nua-track-card {
  text-align: left;
}

.nua-track-card .eyebrow,
.nua-track-card h1,
.nua-track-card .order-created-intro {
  text-align: center;
}

.nua-track-loading {
  padding: 48px 0;
  text-align: center;
  color: #8c796c;
}

.nua-track-form {
  display: grid;
  gap: 16px;
}

.nua-track-form label {
  display: grid;
  gap: 6px;
}

.nua-track-form label span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c796c;
}

.nua-track-form input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(74, 46, 34, 0.25);
  background: #fffaf4;
  font: inherit;
  font-size: 16px;
  color: #4a2e22;
}

.nua-track-form input:focus {
  outline: 2px solid #4a2e22;
  outline-offset: 1px;
}

.nua-track-error {
  min-height: 1.2em;
  margin: 0;
  font-size: 14px;
  color: #a2412f;
}

.nua-track-steps {
  list-style: none;
  margin: 28px 0 8px;
  padding: 0;
}

.nua-track-step {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 0 0 22px;
  color: #a8968a;
}

.nua-track-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: 0;
  width: 2px;
  background: #e6d8c8;
}

.nua-track-step.done:not(:last-child)::before {
  background: #4a2e22;
}

.nua-track-dot {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid #d8c7b5;
  border-radius: 50%;
  background: #fffaf4;
}

.nua-track-step.done .nua-track-dot {
  border-color: #4a2e22;
  background: #4a2e22;
  box-shadow: inset 0 0 0 4px #fffaf4;
}

.nua-track-step.current .nua-track-dot {
  box-shadow: inset 0 0 0 4px #fffaf4, 0 0 0 5px rgba(74, 46, 34, 0.14);
}

.nua-track-step strong {
  display: block;
  font-size: 15px;
}

.nua-track-step.done {
  color: #4a2e22;
}

.nua-track-step small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #8c796c;
}

.nua-track-steps.is-cancelled {
  opacity: 0.5;
}

.nua-track-guide {
  margin: 8px 0 20px;
  padding: 16px;
  background: #f4ece2;
  font-size: 14px;
  line-height: 1.6;
  color: #4a2e22;
}

.nua-track-guide p {
  margin: 0;
}

.nua-track-items {
  border-top: 1px solid rgba(74, 46, 34, 0.12);
  margin-bottom: 24px;
}

.nua-track-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(74, 46, 34, 0.08);
  font-size: 14px;
  color: #4a2e22;
}

.nua-track-item small {
  display: block;
  margin-top: 2px;
  color: #8c796c;
}

.nua-track-item > span {
  white-space: nowrap;
}

.nua-track-total {
  border-bottom: 0;
  font-size: 15px;
}

.nua-track-card .order-created-home {
  display: table;
  margin: 8px auto 0;
}

.nua-track-link {
  display: block;
  margin: 20px 0 0;
  text-align: center;
  text-decoration: none;
}

.nua-track-link[hidden] {
  display: none;
}

.nua-track-form[hidden],
.nua-track-loading[hidden],
#trackResult[hidden] {
  display: none;
}

.nua-track-card h1 {
  font-size: clamp(34px, 6vw, 52px);
}

/* NUA_ORDERS_TABS_V1: pedidos por estado */
.nua-ord-stats { grid-template-columns: repeat(4, 1fr); }
.nua-ord-stats article[data-ord-ir] { cursor: pointer; transition: border-color .2s ease, transform .15s ease; }
.nua-ord-stats article[data-ord-ir]:hover { border-color: var(--green); }
.nua-ord-stats article[data-ord-ir]:active { transform: scale(.98); }
.nua-ord-stats small { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; }
#statOrdToShip { color: #a8641e; }
#statOrdShipped { color: #2f6690; }
#statOrdDelivered { color: var(--green); }

.nua-ord-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
.nua-ord-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.nua-ord-tabs button {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  padding: 9px 14px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px; transition: background .2s ease, border-color .2s ease;
}
.nua-ord-tabs button b {
  font-size: 11px; min-width: 20px; padding: 2px 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); text-align: center;
}
.nua-ord-tabs button:hover { border-color: var(--green); }
.nua-ord-tabs button.activo { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.nua-ord-tabs button.activo b { background: rgba(255,255,255,.18); color: #fff; }
.nua-ord-search {
  flex: 1 1 260px; max-width: 360px; padding: 10px 14px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--bg); font: inherit; font-size: 14px; color: var(--ink);
}
.nua-ord-search:focus { outline: none; border-color: var(--green); background: #fff; }

.nua-ord-chip {
  display: inline-block; font-style: normal; font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.chip-enviar { background: #fbeedd; color: #8a4f12; }
.chip-camino { background: #e2edf6; color: #24557a; }
.chip-entregados { background: var(--green-soft); color: var(--green-dark); }
.chip-sinpago, .chip-cancelado { background: #f1efea; color: #8b8379; }
.nua-ord-row small.nua-ord-late { color: var(--danger); font-weight: 600; }

@media (max-width: 860px) {
  .nua-ord-stats { grid-template-columns: repeat(2, 1fr); }
  .nua-ord-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .nua-ord-tabs button { flex: 0 0 auto; }
  .nua-ord-search { max-width: none; }
}
@media (max-width: 860px) {
  .nua-ord-stats { gap: 10px; margin: 22px 0 18px; }
  .nua-ord-stats article { grid-column: auto !important; padding: 14px 16px; min-height: 0; }
  .nua-ord-stats span { margin-bottom: 6px; font-size: 12px; }
  .nua-ord-stats strong { font-size: 24px; }
}
@media (max-width: 860px) {
  .admin-order-row.nua-ord-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "num total" "cli estado";
    gap: 8px 12px !important;
    padding: 14px 4px !important;
  }
  .nua-ord-row > div { margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .nua-ord-row > div:nth-child(1) { grid-area: num; }
  .nua-ord-row > div:nth-child(2) { grid-area: cli; }
  .nua-ord-row > div:nth-child(3) { display: none !important; }
  .nua-ord-row > div:nth-child(4) { grid-area: estado; text-align: right; }
  .nua-ord-row > div:nth-child(5) { grid-area: total; text-align: right; }
  .nua-ord-row > div > span { display: none !important; }
  .nua-ord-row .admin-order-number strong { font-size: 14px; }
  .nua-ord-row small { margin-top: 3px; }
}
.nua-track-guide .nua-track-note { display: block; margin-top: 8px; color: #8b7a6e; font-size: 12px; line-height: 1.45; }

/* NUA_LEGAL_V1: páginas de términos y privacidad */
.nua-legal { padding: 40px 16px 70px; display: flex; justify-content: center; }
.nua-legal-card {
  width: 100%; max-width: 760px; background: #fffdf8; border-radius: 4px;
  padding: 56px 56px 44px; box-shadow: 0 18px 55px rgba(74, 46, 34, .07);
  color: #3b2a22; line-height: 1.7; font-size: 15px;
}
.nua-legal-card h1 { font-family: "Playfair Display", serif; font-weight: 500; font-size: clamp(32px, 5vw, 44px); line-height: 1.15; margin: 10px 0 6px; color: #2e1d16; }
.nua-legal-fecha { color: #9a8778; font-size: 13px; margin: 0 0 28px; }
.nua-legal-card h2 { font-family: "Playfair Display", serif; font-weight: 600; font-size: 20px; margin: 34px 0 8px; color: #2e1d16; }
.nua-legal-card p { margin: 0 0 12px; }
.nua-legal-card ul { margin: 0 0 12px; padding-left: 20px; }
.nua-legal-card li { margin-bottom: 6px; }
.nua-legal-card a { color: #6b3f2c; text-underline-offset: 3px; }
.nua-legal-contacto { list-style: none; padding: 0 !important; }
.nua-legal-otra { margin-top: 36px !important; padding-top: 20px; border-top: 1px solid #ece3d8; color: #8b7a6e; }
.nua-legal-card .order-created-home { display: inline-block; margin-top: 18px; }
.nua-footer-legal { display: inline-flex; gap: 18px; margin-left: 18px; flex-wrap: wrap; }
.nua-footer-legal a { color: inherit; opacity: .8; text-decoration: none; }
.nua-footer-legal a:hover { opacity: 1; text-decoration: underline; }
.checkout-legal a { color: inherit; text-decoration: underline; }
@media (max-width: 640px) {
  .nua-legal { padding: 20px 12px 50px; }
  .nua-legal-card { padding: 34px 20px 30px; font-size: 15px; }
  .nua-footer-legal { display: flex; justify-content: center; margin: 10px 0 0; }
}

/* NUA_CATEGORY_PHOTOS_V1: foto de producto arriba de cada tarjeta, que se desvanece en su color hacia el texto */
.nua-category-products { background: #e3cfb1 !important; }
.nua-category-kits { background: #c7b199 !important; }
.nua-category-accessories { background: #5f4034 !important; }
.nua-category-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 66%;
  background: center 78% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  transition: transform .6s cubic-bezier(.23, 1, .32, 1);
  pointer-events: none;
}
.nua-category-products::before { background-image: url("/tarjeta-productos.jpg"); }
.nua-category-kits::before { background-image: url("/tarjeta-kits.jpg"); }
.nua-category-accessories::before { background-image: url("/tarjeta-accesorios.jpg"); }
.nua-category-card:hover::before { transform: scale(1.03); }
.nua-category-card > div { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .nua-category-card::before { height: 62%; background-position: 70% 75%; }
}
@media (prefers-reduced-motion: reduce) {
  .nua-category-card:hover::before { transform: none; }
}

/* NUA_DYNAMIC_CATEGORIES_V1: ventana de categorías del panel */
.admin-card-heading .nua-cat-open { margin-left: auto; padding: 10px 18px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; }
.nua-cat-dialog {
  width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 40px);
  border: 0; border-radius: 22px; padding: 28px; background: #fffdf8; color: var(--ink);
  box-shadow: 0 30px 80px rgba(40, 25, 18, .25);
}
.nua-cat-dialog::backdrop { background: rgba(40, 25, 18, .45); }
.nua-cat-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.nua-cat-head h2 { font-family: "Playfair Display", serif; font-size: 30px; margin: 4px 0 6px; }
.nua-cat-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.nua-cat-close { border: 0; background: var(--surface-2); width: 38px; height: 38px; border-radius: 50%; font-size: 22px; cursor: pointer; color: var(--ink); flex: none; }
.nua-cat-create { display: grid; gap: 10px; margin: 22px 0 6px; padding: 18px; border-radius: 16px; background: var(--surface-2); }
.nua-cat-create h3, .nua-cat-sub { margin: 0; font-size: 14px; font-weight: 700; }
.nua-cat-sub { margin: 18px 0 10px; }
.nua-cat-dialog input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px;
  background: #fff; font: inherit; font-size: 15px; color: var(--ink); box-sizing: border-box;
}
.nua-cat-dialog input:focus { outline: none; border-color: var(--green); }
.nua-cat-create .admin-primary { padding: 12px; border-radius: 11px; font: inherit; font-weight: 600; cursor: pointer; }
.nua-cat-msg { min-height: 20px; margin: 8px 0 0; font-size: 13px; }
.nua-cat-msg.ok { color: var(--green-dark); }
.nua-cat-msg.error { color: var(--danger); }
.nua-cat-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--border); }
.nua-cat-fields { flex: 1; display: grid; gap: 8px; }
.nua-cat-fields small { color: var(--muted); font-size: 12px; }
.nua-cat-actions { display: flex; flex-direction: column; gap: 8px; }
.nua-cat-actions button { padding: 9px 14px; border-radius: 10px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.nua-cat-delete { border: 1px solid #ecd2d2; background: #fff; color: var(--danger); }
@media (max-width: 640px) {
  .nua-cat-dialog { padding: 20px; }
  .nua-cat-row { flex-direction: column; }
  .nua-cat-actions { flex-direction: row; }
}

/* NUA_DYNAMIC_CATEGORIES_V1: tarjetas de categorías nuevas en la portada */
.nua-category-custom::before { background-image: var(--cat-img); background-position: center 45%; }
.nua-cat-tone-a { background: #ead8c6 !important; color: #3d291f; }
.nua-cat-tone-b { background: #d9c2ad !important; color: #3d291f; }
.nua-cat-tone-c { background: #8a6553 !important; color: #fffaf3; }
.nua-category-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1300px) {
  .nua-category-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nua-category-grid-4 { grid-template-columns: 1fr; }
}
.nua-category-custom[data-cat="aromatizantes"]::before { background-image: url("/tarjeta-aromatizantes.jpg"); background-position: center 78%; }
.nua-category-grid-4 .nua-category-card h3 { font-size: clamp(34px, 2.8vw, 50px); }
@media (min-width: 1301px) {
  .nua-category-grid-4 .nua-category-card { padding: 26px; }
}

/* NUA_VARIANT_SWATCH_V1: paleta del círculo en Variantes */
.nua-var-swatch { display: grid; gap: 8px; }
.nua-var-swatch > span { font-size: 13px; font-weight: 600; }
.nua-var-swatch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.nua-var-swatch-preview { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); flex: none; }
.nua-var-swatch-preview.is-auto { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5) 0 4px, transparent 4px 8px) !important; }
.nua-var-swatch input[type="color"] { width: 46px; height: 36px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; }
.nua-var-swatch-two { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.nua-var-swatch-two input { width: auto !important; margin: 0; }
.nua-var-swatch-auto { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.nua-var-swatch small { color: var(--muted); font-size: 12px; }
.nua-var-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; margin-right: 4px; border: 1px solid rgba(0,0,0,.1); }

/* NUA_SOLDOUT_V1: producto agotado = foto opaca y cinta de esquina a esquina */
.product-image, .product-main-image { position: relative; }
.is-soldout .product-image img,
.product-main-image.is-soldout img {
  opacity: .42;
  filter: grayscale(.35) sepia(.15);
  transition: opacity .3s ease;
}
.nua-soldout-ribbon {
  position: absolute;
  top: 50%; left: 50%;
  width: 170%;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 3;
  pointer-events: none;
  background: #4a2e22;
  box-shadow: 0 8px 22px rgba(46, 29, 22, .25);
  padding: 4px 0;
}
.nua-soldout-ribbon span {
  display: block;
  border-top: 1px solid rgba(247, 239, 228, .55);
  border-bottom: 1px solid rgba(247, 239, 228, .55);
  padding: 9px 0;
  color: #f7efe4;
  text-align: center;
  font-family: "Playfair Display", serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em;
}
.product-main-image .nua-soldout-ribbon { transform: translate(-50%, -50%) rotate(-51deg); }
.product-main-image .nua-soldout-ribbon span { font-size: 22px; padding: 12px 0; }
.is-soldout .featured-badge { z-index: 4; }
.is-soldout .add-cart { opacity: .55; }

/* NUA_SALES_V1: sección Ventas del panel */
.nua-sales-periods { margin: 26px 0 0; }
.nua-sales-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nua-sales-cat { padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); display: grid; gap: 4px; }
.nua-sales-cat span { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.nua-sales-cat strong { font-size: 22px; }
.nua-sales-cat small { font-size: 12px; color: var(--muted); }
.nua-sales-bar { display: block; height: 6px; margin-top: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.nua-sales-bar b { display: block; height: 100%; border-radius: inherit; background: #8a5a44; transition: width .5s cubic-bezier(.23, 1, .32, 1); }
.nua-sales-products-card { margin-top: 18px; }
.nua-sales-product { border-bottom: 1px solid var(--border); }
.nua-sales-product summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 110px 140px;
  gap: 14px; align-items: center; padding: 16px 6px;
}
.nua-sales-product summary::-webkit-details-marker { display: none; }
.nua-sales-product summary:hover { background: #f8f3eb; }
.nua-sales-product summary strong { display: block; font-size: 15px; }
.nua-sales-product summary small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.nua-sales-num { text-align: right; }
.nua-sales-num span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #9d8a7e; }
.nua-sales-variants { list-style: none; margin: 0 0 14px; padding: 0 6px; }
.nua-sales-variants li {
  display: grid; grid-template-columns: 1fr 110px 140px; gap: 14px; align-items: center;
  padding: 9px 12px; border-radius: 10px; font-size: 13px;
}
.nua-sales-variants li:nth-child(odd) { background: var(--bg); }
.nua-sales-variants li span:nth-child(2), .nua-sales-variants li strong { text-align: right; }
.nua-sales-variants em { font-style: normal; color: var(--muted); }
.nua-sales-novar { margin: 0 6px 14px; color: var(--muted); font-size: 13px; }
@media (max-width: 860px) {
  .nua-sales-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nua-sales-cat strong { font-size: 18px; }
  .nua-sales-product summary, .nua-sales-variants li { grid-template-columns: 1fr auto auto; gap: 10px; }
  .nua-sales-num span { display: none; }
  .nua-sales-periods { flex-wrap: nowrap; overflow-x: auto; }
}
.mobile-bottom-nav { grid-template-columns: repeat(4, 1fr) !important; }