/*
 * Chetto theme · account / checkout / cart / wishlist styles
 * --------------------------------------------------------------------
 * Replica el estilo del Next.js (chettoweb) para todas las pantallas
 * de cuenta, carrito, checkout, favoritos y estado-pedido.
 *
 * Carga después de chetto.custom.css. Usa los design tokens definidos
 * en `:root` (ver chetto.custom.css).
 *
 * Mobile-first.
 */

/* ------------------------------------------------------------------ */
/* Account hero (cuenta + subrutas)                                    */
/* ------------------------------------------------------------------ */
.chetto-account {
  background: var(--chetto-color-white);
}

.chetto-account__hero {
  background: linear-gradient(180deg, #f7f6f4 0%, #eae7e1 100%);
  padding: 32px 16px 36px;
  /* Full-bleed: el bg degradado ocupa 100% del viewport aunque algún
     container padre del módulo lo meta dentro de un Bootstrap .container.
     El contenido sigue dentro de __hero-inner con max-width 1200. */
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  right: 50%;
}

@media (min-width: 768px) {
  .chetto-account__hero {
    padding: 48px 32px 56px;
  }
}

.chetto-account__hero-inner {
  margin-inline: auto;
  max-width: 1200px;
}

.chetto-account__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--chetto-color-ink);
  transition: color 0.15s ease;
}

.chetto-account__back:hover {
  color: var(--chetto-color-brand-hover);
}

.chetto-account__back-icon {
  width: 20px;
  height: 20px;
}

.chetto-account__title-row {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.chetto-account__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--chetto-color-brand);
  color: var(--chetto-color-white);
  border-radius: 16px;
  flex-shrink: 0;
}

.chetto-account__avatar svg {
  width: 32px;
  height: 32px;
}

.chetto-account__title {
  margin: 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.0073em;
  color: var(--chetto-color-ink);
}

@media (min-width: 768px) {
  .chetto-account__title {
    font-size: 48px;
  }
}

.chetto-account__greeting {
  margin: 4px 0 0;
  font-size: 16px;
  color: rgba(10, 10, 10, 0.7);
}

/* ------------------------------------------------------------------ */
/* Account body grid (sidebar + content)                               */
/* ------------------------------------------------------------------ */
.chetto-account__body {
  padding: 0 16px 64px;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  right: 50%;
}

@media (min-width: 768px) {
  .chetto-account__body {
    padding: 0 32px 80px;
  }
}

.chetto-account__layout {
  margin: 32px auto 0;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 992px) {
  .chetto-account__layout {
    grid-template-columns: 264px 1fr;
    gap: 32px;
  }
}

.chetto-account__sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.chetto-account__nav {
  background: #f7f6f4;
  border-radius: 16px;
  padding: 24px;
}

.chetto-account__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chetto-account__nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 12px 0 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--chetto-color-ink);
  transition: background 0.15s ease, color 0.15s ease;
}

.chetto-account__nav-link:hover {
  background: rgba(255, 255, 255, 0.6);
  color: var(--chetto-color-ink);
}

.chetto-account__nav-link--active,
.chetto-account__nav-link--active:hover {
  background: var(--chetto-color-brand);
  color: var(--chetto-color-white);
}

.chetto-account__nav-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.chetto-account__nav-link--signout {
  margin-top: 8px;
  color: #b00020;
}

.chetto-account__nav-link--signout:hover {
  background: rgba(176, 0, 32, 0.08);
  color: #b00020;
}

.chetto-account__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Cards comunes                                                       */
/* ------------------------------------------------------------------ */
.chetto-card {
  border: 1px solid rgba(196, 181, 160, 0.2);
  background: var(--chetto-color-white);
  border-radius: 16px;
  padding: 24px;
}

@media (min-width: 768px) {
  .chetto-card {
    padding: 32px;
  }
}

.chetto-card__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;
}

.chetto-card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: 0.003em;
  color: var(--chetto-color-ink);
}

.chetto-card__subtitle {
  margin: 0;
  font-size: 14px;
  color: rgba(10, 10, 10, 0.7);
}

/* ------------------------------------------------------------------ */
/* Forms (account, checkout, register, recover, reset, tracking)        */
/* ------------------------------------------------------------------ */
.chetto-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chetto-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 576px) {
  .chetto-form__row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.chetto-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chetto-form__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--chetto-color-ink);
}

.chetto-form__label .required,
.chetto-form__label.required::after {
  color: #b00020;
}

.chetto-form__input,
.chetto-form .form-control {
  height: 50px;
  width: 100%;
  border: 1px solid rgba(196, 181, 160, 0.3);
  background: var(--chetto-color-white);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--chetto-color-ink);
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chetto-form__input:focus,
.chetto-form .form-control:focus {
  outline: none;
  border-color: var(--chetto-color-brand);
  box-shadow: 0 0 0 3px rgba(196, 181, 160, 0.2);
}

.chetto-form__input--pill {
  height: 48px;
  border-radius: 9999px;
  background: var(--chetto-color-surface-muted);
  border-color: var(--chetto-color-border-subtle);
  padding: 0 20px;
}

.chetto-form__input--pill:focus {
  background: var(--chetto-color-white);
  border-color: var(--chetto-color-ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.chetto-form__textarea {
  min-height: 120px;
  resize: vertical;
}

.chetto-form__error {
  font-size: 13px;
  color: #b00020;
}

.chetto-form__hint {
  font-size: 13px;
  color: rgba(10, 10, 10, 0.6);
}

.chetto-form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: rgba(10, 10, 10, 0.8);
}

.chetto-form__check input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--chetto-color-ink);
  flex-shrink: 0;
}

.chetto-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.chetto-form__status {
  min-height: 1.25rem;
  font-size: 13px;
  color: #b00020;
}

/* ------------------------------------------------------------------ */
/* Botones brand                                                       */
/* ------------------------------------------------------------------ */
.chetto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.0195em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}

.chetto-btn:disabled,
.chetto-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.chetto-btn--brand {
  background: var(--chetto-color-brand);
  color: var(--chetto-color-white);
}

.chetto-btn--brand:hover {
  background: #a89584;
  color: var(--chetto-color-white);
}

.chetto-btn--ink {
  background: var(--chetto-color-ink);
  color: var(--chetto-color-white);
}

.chetto-btn--ink:hover {
  background: #2d2d2d;
  color: var(--chetto-color-white);
}

.chetto-btn--outline {
  background: var(--chetto-color-white);
  color: var(--chetto-color-ink);
  border-color: var(--chetto-color-ink);
}

.chetto-btn--outline:hover {
  background: var(--chetto-color-ink);
  color: var(--chetto-color-white);
}

.chetto-btn--ghost {
  background: transparent;
  color: var(--chetto-color-ink);
  border-color: var(--chetto-color-border-subtle);
}

.chetto-btn--ghost:hover {
  background: var(--chetto-color-surface-muted);
}

.chetto-btn--block {
  width: 100%;
}

.chetto-btn--sm {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
}

.chetto-btn--lg {
  height: 56px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 600;
}

/* Alias para botones nativos PS dentro de scopes account/checkout */
.chetto-account .btn-primary,
.chetto-cart .btn-primary,
.chetto-checkout .btn-primary,
.chetto-favorites .btn-primary,
.chetto-tracking .btn-primary {
  background: var(--chetto-color-brand);
  border-color: var(--chetto-color-brand);
  color: var(--chetto-color-white);
  border-radius: 9999px;
  padding: 12px 24px;
  font-weight: 500;
}

.chetto-account .btn-primary:hover,
.chetto-cart .btn-primary:hover,
.chetto-checkout .btn-primary:hover,
.chetto-favorites .btn-primary:hover,
.chetto-tracking .btn-primary:hover {
  background: #a89584;
  border-color: #a89584;
  color: var(--chetto-color-white);
}

.chetto-account .btn-outline-primary,
.chetto-cart .btn-outline-primary,
.chetto-checkout .btn-outline-primary {
  background: var(--chetto-color-white);
  border-color: var(--chetto-color-brand);
  color: var(--chetto-color-ink);
  border-radius: 9999px;
}

.chetto-account .btn-outline-primary:hover,
.chetto-cart .btn-outline-primary:hover,
.chetto-checkout .btn-outline-primary:hover {
  background: var(--chetto-color-brand);
  border-color: var(--chetto-color-brand);
  color: var(--chetto-color-white);
}

/* ------------------------------------------------------------------ */
/* Auth (login / register / recover / reset)                            */
/* ------------------------------------------------------------------ */
.chetto-auth {
  margin-inline: auto;
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px 24px 64px;
}

@media (min-width: 768px) {
  .chetto-auth {
    padding: 64px 24px 80px;
  }
}

.chetto-auth__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.chetto-auth__eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(10, 10, 10, 0.6);
  margin: 0;
}

.chetto-auth__title {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  color: var(--chetto-color-ink);
  line-height: 1.2;
}

.chetto-auth__subtitle {
  margin: 0;
  font-size: 14px;
  color: rgba(10, 10, 10, 0.7);
}

.chetto-auth__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  font-size: 14px;
  color: rgba(10, 10, 10, 0.7);
}

.chetto-auth__links a {
  text-underline-offset: 4px;
}

.chetto-auth__links a:hover {
  color: var(--chetto-color-ink);
  text-decoration: underline;
}

.chetto-auth__divider {
  border: 0;
  border-top: 1px solid var(--chetto-color-border-subtle);
  margin: 16px 0;
}

.chetto-auth__register-prompt {
  text-align: center;
  font-size: 14px;
  color: rgba(10, 10, 10, 0.7);
}

.chetto-auth__register-text {
  margin: 0 0 12px;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-auth__register-prompt--inline {
  margin: 0;
}

.chetto-auth__inline-link {
  font-weight: 500;
  color: var(--chetto-color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
}

.chetto-auth__inline-link:hover {
  color: var(--chetto-color-brand);
}

/* ------------------------------------------------------------------ */
/* Auth form overrides — adapta los partials nativos PS (Bootstrap 5)   */
/* a la maqueta Next.js: pill inputs, brand button, password toggle.    */
/* ------------------------------------------------------------------ */
.chetto-auth__form #login-form,
.chetto-auth__form #customer-form,
.chetto-auth__form .forgotten-password,
.chetto-auth__form > form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chetto-auth__form .mb-3 {
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chetto-auth__form .form-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--chetto-color-ink);
  margin: 0;
}

.chetto-auth__form .form-label.required::after {
  content: " *";
  color: #b00020;
}

.chetto-auth__form .form-control {
  height: 48px;
  width: 100%;
  border: 1px solid var(--chetto-color-border-subtle);
  background: var(--chetto-color-surface-muted);
  border-radius: 9999px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--chetto-color-ink);
  font-family: inherit;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.chetto-auth__form .form-control:focus {
  outline: none;
  background: var(--chetto-color-white);
  border-color: var(--chetto-color-ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.chetto-auth__form .form-text {
  font-size: 13px;
  color: rgba(10, 10, 10, 0.6);
  margin: 0;
}

.chetto-auth__form .form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  min-height: auto;
  margin: 0;
}

.chetto-auth__form .form-check-input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--chetto-color-border-subtle);
  accent-color: var(--chetto-color-ink);
  cursor: pointer;
}

.chetto-auth__form .form-check-input:checked {
  background-color: var(--chetto-color-ink);
  border-color: var(--chetto-color-ink);
}

.chetto-auth__form .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
  border-color: var(--chetto-color-ink);
}

.chetto-auth__form .form-check-label {
  font-size: 14px;
  color: rgba(10, 10, 10, 0.8);
  cursor: pointer;
  line-height: 1.4;
}

.chetto-auth__form .form-check-label a {
  color: var(--chetto-color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chetto-auth__form .form-check-label a:hover {
  color: var(--chetto-color-brand);
}

.chetto-auth__form .form-check-inline {
  display: inline-flex;
  margin-right: 16px;
}

/* Password input + toggle */
.chetto-auth__form .input-group.password-field {
  position: relative;
  display: block;
}

.chetto-auth__form .input-group.password-field .form-control {
  padding-right: 56px;
}

.chetto-auth__form .input-group.password-field > .btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(10, 10, 10, 0.55);
  border: 0;
  border-radius: 9999px;
  box-shadow: none;
  cursor: pointer;
  z-index: 2;
}

.chetto-auth__form .input-group.password-field > .btn:hover {
  background: rgba(10, 10, 10, 0.05);
  color: var(--chetto-color-ink);
}

.chetto-auth__form .input-group.password-field > .btn .material-icons {
  font-size: 18px;
}

/* Botones submit dentro del wrapper auth → marca chetto */
.chetto-auth__form .btn-primary,
.chetto-auth__form button[data-link-action="sign-in"],
.chetto-auth__form button[data-link-action="save-customer"] {
  height: 48px;
  width: 100%;
  border-radius: 9999px;
  background: var(--chetto-color-brand);
  border: 0;
  color: var(--chetto-color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.0195em;
  cursor: pointer;
  transition: background 0.15s ease;
  box-shadow: none;
}

.chetto-auth__form .btn-primary:hover,
.chetto-auth__form button[data-link-action="sign-in"]:hover,
.chetto-auth__form button[data-link-action="save-customer"]:hover {
  background: #a89584;
  color: var(--chetto-color-white);
}

.chetto-auth__form .btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* El toggle password no debe heredar tamaño/ancho de submit */
.chetto-auth__form .input-group.password-field > .btn-primary {
  width: 36px;
  height: 36px;
  background: transparent;
  color: rgba(10, 10, 10, 0.55);
}

.chetto-auth__form .input-group.password-field > .btn-primary:hover {
  background: rgba(10, 10, 10, 0.05);
  color: var(--chetto-color-ink);
}

/* Wrapper de buttons split (login: forgot + submit) → vertical stack */
.chetto-auth__form .buttons-wrapper {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  align-items: stretch;
}

.chetto-auth__form .buttons-wrapper .btn-basic {
  background: transparent;
  color: rgba(10, 10, 10, 0.7);
  font-size: 14px;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 4px 0;
  border: 0;
  width: auto;
}

.chetto-auth__form .buttons-wrapper .btn-basic:hover {
  color: var(--chetto-color-ink);
}

/* En register, no invertir el orden */
.chetto-auth--register .chetto-auth__form .buttons-wrapper {
  flex-direction: column;
}

/* Alertas dentro del form auth */
.chetto-auth__form .alert {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  margin: 0;
}

.chetto-auth__form .alert-danger {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #9f1239;
}

.chetto-auth__form .alert ul {
  margin: 0;
  padding-left: 18px;
}

/* ------------------------------------------------------------------ */
/* Account dashboard shortcuts (my-account)                            */
/* ------------------------------------------------------------------ */
.chetto-account-dashboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chetto-account-shortcuts {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .chetto-account-shortcuts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .chetto-account-shortcuts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.chetto-shortcut {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(196, 181, 160, 0.25);
  background: var(--chetto-color-white);
  border-radius: 16px;
  text-decoration: none;
  color: var(--chetto-color-ink);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.chetto-shortcut:hover {
  border-color: var(--chetto-color-brand);
  box-shadow: 0 6px 20px rgba(196, 181, 160, 0.15);
  transform: translateY(-1px);
  color: var(--chetto-color-ink);
}

.chetto-shortcut__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(196, 181, 160, 0.18);
  color: var(--chetto-color-brand);
  margin-bottom: 4px;
}

.chetto-shortcut__icon svg {
  width: 20px;
  height: 20px;
}

.chetto-shortcut__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--chetto-color-ink);
  letter-spacing: -0.005em;
}

.chetto-shortcut__text {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(10, 10, 10, 0.6);
}

.chetto-shortcut--signout .chetto-shortcut__icon {
  background: rgba(176, 0, 32, 0.08);
  color: #b00020;
}

.chetto-shortcut--signout:hover {
  border-color: rgba(176, 0, 32, 0.4);
  box-shadow: 0 6px 20px rgba(176, 0, 32, 0.08);
}

.chetto-shortcut--signout .chetto-shortcut__title {
  color: #b00020;
}

/* ------------------------------------------------------------------ */
/* Cart                                                                */
/* ------------------------------------------------------------------ */
.chetto-cart {
  padding: 32px 16px 64px;
}

@media (min-width: 768px) {
  .chetto-cart {
    padding: 40px 32px 80px;
  }
}

.chetto-cart__inner {
  margin-inline: auto;
  max-width: 1354px;
}

.chetto-cart__breadcrumb {
  margin-bottom: 24px;
  font-size: 14px;
  letter-spacing: -0.0107em;
}

.chetto-cart__breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.chetto-cart__breadcrumb a {
  color: #6b6b6b;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

.chetto-cart__breadcrumb a:hover { color: var(--chetto-color-ink); }
.chetto-cart__breadcrumb li[aria-hidden] { color: #6b6b6b; }
.chetto-cart__breadcrumb li:last-child { color: var(--chetto-color-ink); }

.chetto-cart__title {
  margin: 0 0 32px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.013em;
  color: var(--chetto-color-ink);
}

.chetto-cart__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 992px) {
  .chetto-cart__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 40px;
  }
}

.chetto-cart__items {
  border: 1px solid var(--chetto-color-border-subtle);
  border-radius: 16px;
  background: var(--chetto-color-white);
  overflow: hidden;
}

.chetto-cart__items > * + * {
  border-top: 1px solid var(--chetto-color-border-subtle);
}

.chetto-cart__summary {
  border: 1px solid var(--chetto-color-border-subtle);
  border-radius: 16px;
  background: var(--chetto-color-white);
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  height: max-content;
}

@media (min-width: 992px) {
  .chetto-cart__summary {
    position: sticky;
    top: 32px;
  }
}

.chetto-cart__summary-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: -0.0195em;
  color: var(--chetto-color-ink);
}

.chetto-cart__totals {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.4;
}

.chetto-cart__totals-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--chetto-color-ink);
}

.chetto-cart__totals-row--muted {
  color: #6b6b6b;
}

.chetto-cart__totals-row--total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--chetto-color-border-subtle);
  font-size: 16px;
  font-weight: 500;
}

.chetto-cart__cta {
  margin-top: 24px;
}

.chetto-cart__hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: #6b6b6b;
}

.chetto-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--chetto-color-border-subtle);
  background: rgba(245, 243, 238, 0.4);
  border-radius: 16px;
  padding: 80px 24px;
  text-align: center;
}

.chetto-cart__empty-icon {
  width: 96px;
  height: 96px;
  border-radius: 9999px;
  background: var(--chetto-color-white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chetto-cart__empty-icon svg {
  width: 48px;
  height: 48px;
  color: rgba(10, 10, 10, 0.7);
}

.chetto-cart__empty-title {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.27;
  color: var(--chetto-color-ink);
}

.chetto-cart__empty-text {
  margin: 0;
  max-width: 28rem;
  font-size: 14px;
  line-height: 1.4;
  color: #6b6b6b;
}

/* Override de los partials nativos PS dentro del scope .chetto-cart */
.chetto-cart .cart__overview,
.chetto-cart .cart-overview {
  border: 0;
  background: transparent;
  padding: 0;
}

.chetto-cart .cart__overview > hr,
.chetto-cart .cart-overview > hr { display: none; }

.chetto-cart .cart__list { display: flex; flex-direction: column; }

.chetto-cart .cart__item {
  padding: 20px;
  border: 0;
  background: var(--chetto-color-white);
}

.chetto-cart .cart__item + .cart__item {
  border-top: 1px solid var(--chetto-color-border-subtle);
}

.chetto-cart .product-line {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .chetto-cart .product-line {
    grid-template-columns: 112px minmax(0, 1fr) auto;
  }
}

.chetto-cart .product-line__image { margin: 0; }

.chetto-cart .product-line__img {
  width: 112px;
  height: 112px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--chetto-color-white);
  border: 1px solid var(--chetto-color-border-subtle);
  padding: 6px;
}

.chetto-cart .product-line__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Desktop ≥768px: layout en 2 columnas internas
   ┌──────────────┬────────────┐
   │              │  qty       │
   │  info+precio │  total     │
   │              │  Eliminar  │
   └──────────────┴────────────┘
*/
@media (min-width: 768px) {
  .chetto-cart .product-line__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "left right"
      "left actions";
    column-gap: 24px;
    row-gap: 8px;
    align-items: start;
  }
  .chetto-cart .product-line__content-left { grid-area: left; min-width: 0; }
  .chetto-cart .product-line__content-right {
    grid-area: right;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 0;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .chetto-cart .product-line__actions {
    grid-area: actions;
    justify-self: end;
    text-align: right;
    margin-top: 4px;
  }
}

.chetto-cart .product-line__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--chetto-color-ink);
  letter-spacing: -0.0195em;
  line-height: 1.4;
  text-decoration: none;
}

.chetto-cart .product-line__title:hover { text-decoration: underline; }

.chetto-cart .product-line__item--info {
  font-size: 13px;
  color: #6b6b6b;
}

.chetto-cart .product-line__item--prices {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: #6b6b6b;
}

.chetto-cart .product-line__item-price {
  font-size: 14px;
  color: #6b6b6b;
}

.chetto-cart .product-line__content-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.chetto-cart .product-line__quantity-button {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--chetto-color-border-subtle);
  border-radius: 9999px;
  padding: 2px 4px;
  background: var(--chetto-color-white);
}

.chetto-cart .product-line__quantity-button input,
.chetto-cart .product-line__quantity-button .form-control {
  width: 40px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 14px;
  color: var(--chetto-color-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.chetto-cart .product-line__quantity-button input::-webkit-outer-spin-button,
.chetto-cart .product-line__quantity-button input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.chetto-cart .product-line__quantity-button button,
.chetto-cart .product-line__quantity-button .btn {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: transparent;
  border: 0;
  color: var(--chetto-color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.chetto-cart .product-line__quantity-button button:hover { background: var(--chetto-color-surface-muted); }

/* Precio total por línea: oculto. El precio unitario aparece a la izquierda
   bajo el título y el subtotal real está en el resumen del pedido. */
.chetto-cart .product-line__price { display: none; }

/* Cross-selling del carrito: mantenemos los productos pero ocultamos el
   botón "Todos los productos destacados" que enlaza a la categoría. */
.chetto-cart__cross-selling .btn-outline-primary,
.chetto-cart__cross-selling a.btn-outline-primary { display: none !important; }

/* ============================================================================
   Página /module/blockwishlist/lists (wishlists del cliente)
   Bug: el botón "Create new list" hereda background:#c4b5a0 + color:#c4b5a0
   del .text-primary override, dejando texto invisible sobre fondo beige.
   ============================================================================ */
.wishlist-container-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 24px;
}
.wishlist-container-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: var(--chetto-color-ink, #2d2d2d);
}
/* Reglas de .wishlist-add-to-new movidas más abajo (línea ~2452) para que
   ganen en cascada y sobreescriban .text-primary del módulo Vue. */

.chetto-cart .product-line__actions {
  margin-top: 8px;
}

.chetto-cart .product-line__actions a,
.chetto-cart .js-remove-from-cart {
  font-size: 13px;
  color: #6b6b6b;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chetto-cart .product-line__actions a:hover,
.chetto-cart .js-remove-from-cart:hover { color: var(--chetto-color-ink); text-decoration: underline; }

.chetto-cart .cart-summary__totals {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.chetto-cart .cart-summary__line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #6b6b6b;
}

.chetto-cart .cart-summary__line .cart-summary__label,
.chetto-cart .cart-summary__line .js-subtotal { color: var(--chetto-color-ink); }

.chetto-cart .cart-summary__line.cart-summary__totals,
.chetto-cart .cart-total {
  border-top: 1px solid var(--chetto-color-border-subtle);
  padding-top: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--chetto-color-ink);
  display: flex;
  justify-content: space-between;
}

.chetto-cart .cart-summary__actions { margin-top: 16px; }

.chetto-cart .cart-summary__actions .btn {
  width: 100%;
  height: 48px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.0143em;
  font-size: 14px;
  font-weight: 500;
}

.chetto-cart .cart-voucher,
.chetto-cart .promo-code {
  margin-top: 16px;
}

.chetto-cart .promo-code__inputs,
.chetto-cart .cart-voucher__inputs {
  display: flex;
  gap: 8px;
}

.chetto-cart .cart-voucher .form-control,
.chetto-cart .promo-code .form-control {
  height: 44px;
  flex: 1;
  border-radius: 9999px;
  border: 1px solid var(--chetto-color-border-subtle);
  background: var(--chetto-color-surface-muted);
  padding: 0 16px;
  font-size: 14px;
}

.chetto-cart .cart-voucher .form-control:focus,
.chetto-cart .promo-code .form-control:focus {
  background: var(--chetto-color-white);
  outline: none;
  box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.08);
}

.chetto-cart .cart-voucher .btn,
.chetto-cart .promo-code .btn {
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--chetto-color-ink);
  background: transparent;
  color: var(--chetto-color-ink);
  padding: 0 20px;
  font-size: 13px;
  font-weight: 500;
}

.chetto-cart .cart-voucher .btn:hover,
.chetto-cart .promo-code .btn:hover {
  background: var(--chetto-color-ink);
  color: var(--chetto-color-white);
}

.chetto-divider {
  border: 0;
  border-top: 1px solid var(--chetto-color-border-subtle);
  margin: 16px 0;
}

/* ------------------------------------------------------------------ */
/* Mini-cart drawer                                                    */
/* ------------------------------------------------------------------ */
.chetto-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
}

.chetto-cart-drawer[data-open="true"] { pointer-events: auto; }

.chetto-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.chetto-cart-drawer[data-open="true"] .chetto-cart-drawer__overlay { opacity: 1; }

.chetto-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 28rem;
  background: var(--chetto-color-white);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
  transform: translateX(100%);
  transition: transform 300ms ease-out;
  outline: none;
}

.chetto-cart-drawer[data-open="true"] .chetto-cart-drawer__panel { transform: translateX(0) !important; }

.chetto-cart-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--chetto-color-border-subtle);
}

.chetto-cart-drawer__title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--chetto-color-ink);
  letter-spacing: -0.0195em;
}

.chetto-cart-drawer__close {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: var(--chetto-color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.chetto-cart-drawer__close:hover { background: var(--chetto-color-surface-muted); }
.chetto-cart-drawer__close svg { width: 20px; height: 20px; }

.chetto-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.chetto-cart-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.chetto-cart-drawer__item {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--chetto-color-border-subtle);
}

.chetto-cart-drawer__item:last-child { border-bottom: 0; }

.chetto-cart-drawer__thumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  border: 1px solid var(--chetto-color-border-subtle);
  background: var(--chetto-color-white);
  flex-shrink: 0;
  overflow: hidden;
  display: block;
}

.chetto-cart-drawer__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.chetto-cart-drawer__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chetto-cart-drawer__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--chetto-color-ink);
  letter-spacing: -0.0107em;
  line-height: 1.4;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chetto-cart-drawer__name:hover { text-decoration: underline; }

.chetto-cart-drawer__variant {
  margin: 0;
  font-size: 12px;
  color: #6b6b6b;
}

.chetto-cart-drawer__row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}

.chetto-cart-drawer__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--chetto-color-border-subtle);
  border-radius: 9999px;
  padding: 2px 4px;
}

.chetto-cart-drawer__qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: var(--chetto-color-ink);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chetto-cart-drawer__qty-btn:hover { background: var(--chetto-color-surface-muted); }

.chetto-cart-drawer__qty-val {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--chetto-color-ink);
}

.chetto-cart-drawer__price {
  font-size: 14px;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-cart-drawer__remove {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  color: rgba(10, 10, 10, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chetto-cart-drawer__remove:hover {
  background: var(--chetto-color-surface-muted);
  color: var(--chetto-color-ink);
}

.chetto-cart-drawer__remove svg { width: 16px; height: 16px; }

.chetto-cart-drawer__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 16px;
  text-align: center;
}

.chetto-cart-drawer__empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 9999px;
  background: var(--chetto-color-surface-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chetto-cart-drawer__empty-icon svg {
  width: 40px;
  height: 40px;
  color: rgba(10, 10, 10, 0.7);
}

.chetto-cart-drawer__empty-text {
  margin: 0;
  font-size: 16px;
  color: var(--chetto-color-ink);
  letter-spacing: -0.0195em;
}

.chetto-cart-drawer__footer {
  border-top: 1px solid var(--chetto-color-border-subtle);
  padding: 20px 24px;
}

.chetto-cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: var(--chetto-color-ink);
  letter-spacing: -0.0195em;
}

.chetto-cart-drawer__subtotal :last-child { font-weight: 500; }

.chetto-cart-drawer__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: #6b6b6b;
}

.chetto-cart-drawer__actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chetto-cart-drawer__actions .chetto-btn {
  width: 100%;
}

/* ------------------------------------------------------------------ */
/* Checkout                                                            */
/* ------------------------------------------------------------------ */
.chetto-checkout {
  padding: 24px 16px 64px;
}

@media (min-width: 768px) {
  .chetto-checkout {
    padding: 32px 32px 80px;
  }
}

.chetto-checkout__inner {
  margin-inline: auto;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 992px) {
  .chetto-checkout__inner {
    grid-template-columns: 1fr 420px;
  }
}

.chetto-checkout__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chetto-checkout__step {
  border: 1px solid var(--chetto-color-border-subtle);
  background: var(--chetto-color-white);
  border-radius: 16px;
  padding: 24px;
}

@media (min-width: 768px) {
  .chetto-checkout__step {
    padding: 32px;
  }
}

.chetto-checkout__step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.chetto-checkout__step-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-checkout__aside {
  position: relative;
}

@media (min-width: 992px) {
  .chetto-checkout__aside {
    position: sticky;
    top: 32px;
    align-self: start;
  }
}

.chetto-checkout__summary {
  border: 1px solid var(--chetto-color-border-subtle);
  background: var(--chetto-color-white);
  border-radius: 16px;
  padding: 24px;
}

@media (min-width: 768px) {
  .chetto-checkout__summary {
    padding: 32px;
  }
}

.chetto-checkout__pay {
  height: 56px;
  border-radius: 10px;
  background: var(--chetto-color-ink);
  color: var(--chetto-color-white);
  width: 100%;
  font-weight: 600;
  font-size: 16px;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}

.chetto-checkout__pay:hover {
  background: #2d2d2d;
}

/* Override del checkout-process nativo */
.chetto-checkout .checkout-process {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chetto-checkout .checkout-step {
  border: 1px solid var(--chetto-color-border-subtle) !important;
  background: var(--chetto-color-white) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  .chetto-checkout .checkout-step {
    padding: 32px !important;
  }
}

.chetto-checkout .step-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--chetto-color-ink) !important;
}

/* ============================================================================
   Wizard checkout: REEMPLAZAR todos los verdes (Bootstrap success)
   por el beige de marca (#c4b5a0).
   Cubre: número de step circular, paso completado/actual, botón "editar",
   ticks verdes, mensajes success y radios marcados.
   ============================================================================ */
.chetto-checkout {
  --bs-success: var(--chetto-color-brand);
  --bs-success-rgb: 196, 181, 160;
  --bs-success-bg-subtle: #f3eee6;
  --bs-success-border-subtle: rgba(196, 181, 160, 0.4);
  --bs-success-text: var(--chetto-color-brand);
  --bs-success-text-emphasis: var(--chetto-color-brand);
}

/* Texto / fondo / borde success → beige */
.chetto-checkout .text-success,
.chetto-checkout .text-success-emphasis,
.chetto-checkout .text-bg-success { color: var(--chetto-color-brand) !important; }
.chetto-checkout .bg-success,
.chetto-checkout .badge.bg-success,
.chetto-checkout .alert-success { background-color: var(--chetto-color-brand) !important; color: #fff !important; }
.chetto-checkout .border-success { border-color: var(--chetto-color-brand) !important; }
.chetto-checkout .alert-success { border-color: rgba(196, 181, 160, 0.45) !important; background: #f3eee6 !important; color: #6b5a44 !important; }

/* Número del step (círculo). Cuando está completado o activo va beige. */
.chetto-checkout .step-number,
.chetto-checkout .checkout-step .step-number,
.chetto-checkout .checkout-step.-current .step-number,
.chetto-checkout .checkout-step.-complete .step-number,
.chetto-checkout .checkout-step.-reachable .step-number {
  background-color: var(--chetto-color-brand) !important;
  color: #fff !important;
  border-color: var(--chetto-color-brand) !important;
}
/* Step todavía no alcanzable → gris suave */
.chetto-checkout .checkout-step:not(.-current):not(.-complete):not(.-reachable) .step-number,
.chetto-checkout .checkout-step.-unreachable .step-number {
  background-color: var(--chetto-color-surface-muted) !important;
  color: #999 !important;
  border-color: var(--chetto-color-border-subtle) !important;
}

/* Botón "Editar" del step */
.chetto-checkout .step-edit,
.chetto-checkout .step-edit:hover,
.chetto-checkout .checkout-step .step-edit { color: var(--chetto-color-brand) !important; }

/* Iconos material done/check verdes en cualquier sitio del wizard */
.chetto-checkout .material-icons.text-success,
.chetto-checkout .checkout-step .material-icons.text-success,
.chetto-checkout .step-edit .material-icons,
.chetto-checkout .checkout-step .material-icons { color: var(--chetto-color-brand) !important; }

/* SVG en checkout (currentColor o stroke verde) → beige */
.chetto-checkout .checkout-step svg [stroke="#28a745"],
.chetto-checkout .checkout-step svg [stroke="#198754"],
.chetto-checkout .checkout-step svg [fill="#28a745"],
.chetto-checkout .checkout-step svg [fill="#198754"] { stroke: var(--chetto-color-brand) !important; fill: var(--chetto-color-brand) !important; }

/* Radios y checks de pasos completados (form-check-input checked verde BS) */
.chetto-checkout .form-check-input:checked,
.chetto-checkout input[type="radio"]:checked,
.chetto-checkout input[type="checkbox"]:checked {
  background-color: var(--chetto-color-brand) !important;
  border-color: var(--chetto-color-brand) !important;
}
.chetto-checkout .form-check-input:focus {
  border-color: var(--chetto-color-brand) !important;
  box-shadow: 0 0 0 0.2rem rgba(196, 181, 160, 0.25) !important;
}

/* "Continuar" / botón principal del step → beige */
.chetto-checkout .checkout-step .btn-primary,
.chetto-checkout .checkout-step .continue.btn-primary {
  background-color: var(--chetto-color-brand) !important;
  border-color: var(--chetto-color-brand) !important;
  color: #fff !important;
}
.chetto-checkout .checkout-step .btn-primary:hover {
  background-color: #b4a48d !important;
  border-color: #b4a48d !important;
}

/* ------------------------------------------------------------------ */
/* Order detail                                                        */
/* ------------------------------------------------------------------ */
.chetto-order-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--chetto-color-brand);
  margin-bottom: 16px;
}

.chetto-order-detail__back:hover {
  color: var(--chetto-color-brand-hover);
}

.chetto-order-detail__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--chetto-color-border-subtle);
  border-bottom: 1px solid var(--chetto-color-border-subtle);
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .chetto-order-detail__meta {
    grid-template-columns: repeat(4, 1fr);
  }
}

.chetto-order-detail__meta-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(10, 10, 10, 0.6);
  margin: 0 0 4px;
}

.chetto-order-detail__meta-value {
  margin: 0;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-order-detail__section {
  margin-top: 32px;
}

.chetto-order-detail__section-title {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chetto-color-ink);
}

/* ------------------------------------------------------------------ */
/* Orders list                                                         */
/* ------------------------------------------------------------------ */
.chetto-orders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chetto-orders-list__item {
  border: 1px solid rgba(196, 181, 160, 0.2);
  border-radius: 10px;
  background: var(--chetto-color-white);
  transition: border-color 0.15s ease;
}

.chetto-orders-list__item:hover {
  border-color: rgba(196, 181, 160, 0.45);
}

.chetto-orders-list__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

@media (min-width: 576px) {
  .chetto-orders-list__link {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
}

.chetto-orders-list__main {
  min-width: 0;
  flex: 1;
}

.chetto-orders-list__ref {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-orders-list__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(10, 10, 10, 0.6);
}

.chetto-orders-list__badge {
  display: inline-flex;
  width: fit-content;
  flex-shrink: 0;
  background: #f7f6f4;
  color: var(--chetto-color-ink);
  border-radius: 9999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
}

.chetto-orders-list__total {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--chetto-color-ink);
}

@media (min-width: 576px) {
  .chetto-orders-list__total {
    min-width: 80px;
    text-align: right;
  }
}

/* ------------------------------------------------------------------ */
/* Empty states                                                        */
/* ------------------------------------------------------------------ */
.chetto-empty {
  border: 1px dashed rgba(196, 181, 160, 0.3);
  background: #f7f6f4;
  border-radius: 10px;
  padding: 32px 24px;
  text-align: center;
}

.chetto-empty__icon {
  margin: 0 auto 12px;
  width: 32px;
  height: 32px;
  color: rgba(10, 10, 10, 0.4);
}

.chetto-empty__title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-empty__text {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(10, 10, 10, 0.6);
}

.chetto-empty__cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  background: var(--chetto-color-brand);
  color: var(--chetto-color-white);
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
}

.chetto-empty__cta:hover {
  background: #a89584;
  color: var(--chetto-color-white);
}

/* ------------------------------------------------------------------ */
/* Address cards                                                       */
/* ------------------------------------------------------------------ */
.chetto-address-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .chetto-address-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.chetto-address-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(196, 181, 160, 0.2);
  background: var(--chetto-color-white);
  border-radius: 10px;
  padding: 20px;
}

.chetto-address-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chetto-address-card__icon {
  width: 20px;
  height: 20px;
  color: var(--chetto-color-brand);
  flex-shrink: 0;
}

.chetto-address-card__alias {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-address-card__body {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(10, 10, 10, 0.7);
  font-style: normal;
}

.chetto-address-card__name {
  margin: 0 0 4px;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-address-card__actions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chetto-address-card__action {
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chetto-address-card__action--edit {
  color: var(--chetto-color-ink);
}

.chetto-address-card__action--delete {
  color: #b00020;
}

.chetto-address-card--add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px dashed rgba(196, 181, 160, 0.5);
  background: var(--chetto-color-surface-muted);
  color: var(--chetto-color-ink);
  font-weight: 500;
  min-height: 140px;
  text-align: center;
  border-radius: 10px;
  padding: 24px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.chetto-address-card--add:hover {
  border-color: var(--chetto-color-brand);
  background: var(--chetto-color-white);
}

/* ------------------------------------------------------------------ */
/* Order confirmation (thank-you)                                       */
/* ------------------------------------------------------------------ */
.chetto-thanks {
  margin-inline: auto;
  width: 100%;
  max-width: 860px;
  padding: 48px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.chetto-thanks__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.chetto-thanks__check {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: #d1fae5;
  color: #047857;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chetto-thanks__check svg {
  width: 32px;
  height: 32px;
}

.chetto-thanks__title {
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  color: var(--chetto-color-ink);
}

.chetto-thanks__subtitle {
  margin: 0;
  max-width: 28rem;
  font-size: 14px;
  color: rgba(10, 10, 10, 0.7);
}

.chetto-thanks__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  border: 1px solid var(--chetto-color-border-subtle);
  background: var(--chetto-color-white);
  border-radius: 16px;
  padding: 24px;
}

@media (min-width: 768px) {
  .chetto-thanks__meta {
    grid-template-columns: repeat(3, 1fr);
    padding: 32px;
  }
}

.chetto-thanks__meta-label {
  margin: 0 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(10, 10, 10, 0.6);
}

.chetto-thanks__meta-value {
  margin: 0;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 16px;
}

/* ------------------------------------------------------------------ */
/* Wishlist                                                            */
/* ------------------------------------------------------------------ */
.chetto-favorites {
  padding: 32px 16px 64px;
}

@media (min-width: 768px) {
  .chetto-favorites {
    padding: 40px 32px 80px;
  }
}

.chetto-favorites__inner {
  margin-inline: auto;
  max-width: 1200px;
}

.chetto-favorites__header {
  margin-bottom: 32px;
}

.chetto-favorites__title {
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.013em;
  color: var(--chetto-color-ink);
}

.chetto-favorites__subtitle {
  margin: 8px 0 0;
  font-size: 16px;
  color: #6b6b6b;
  letter-spacing: -0.0195em;
}

.chetto-favorites__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--chetto-color-border-subtle);
  background: var(--chetto-color-white);
  border-radius: 16px;
  padding: 80px 24px;
  text-align: center;
}

.chetto-favorites__empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: rgba(196, 181, 160, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chetto-favorites__empty-icon svg {
  width: 28px;
  height: 28px;
  color: var(--chetto-color-brand);
}

.chetto-favorites__empty-title {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--chetto-color-ink);
}

.chetto-favorites__empty-text {
  margin: 0;
  max-width: 28rem;
  font-size: 14px;
  line-height: 1.4;
  color: #6b6b6b;
}

/* ------------------------------------------------------------------ */
/* Wishlist module overrides (blockwishlist nativo)                     */
/* ------------------------------------------------------------------ */
.wishlist-list,
.wishlist-products-list {
  margin-inline: auto;
  max-width: 1200px;
  padding: 32px 16px 64px;
}

@media (min-width: 768px) {
  .wishlist-list,
  .wishlist-products-list {
    padding: 40px 32px 80px;
  }
}

.wishlist-list__title,
.wishlist-products-list__title,
.wishlist-products-title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.013em;
  color: var(--chetto-color-ink);
  margin: 0 0 24px;
}

.wishlist-list__item {
  border: 1px solid var(--chetto-color-border-subtle);
  background: var(--chetto-color-white);
  border-radius: 16px;
  padding: 20px;
  transition: border-color 0.15s ease;
}

.wishlist-list__item:hover {
  border-color: var(--chetto-color-brand);
}

.wishlist-list__item-button {
  background: var(--chetto-color-brand);
  color: var(--chetto-color-white);
  border-radius: 9999px;
}
.wishlist-list__item-button:hover {
  background: #a89584;
}

/* Botón "Crear nueva lista" del wishlist (Vue): texto blanco visible
   sobre fondo beige, pill rounded, padding e icono blanco. !important
   porque .text-primary del módulo fuerza color al --bs-primary. */
a.wishlist-add-to-new,
a.wishlist-add-to-new.text-primary,
a.wishlist-add-to-new:link,
a.wishlist-add-to-new:visited,
.wishlist-add-to-new {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: var(--chetto-color-brand, #c4b5a0) !important;
  color: #ffffff !important;
  padding: 10px 18px !important;
  border-radius: 9999px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  width: auto !important;
  cursor: pointer !important;
  border: 0 !important;
  line-height: 1.2 !important;
  transition: background-color 0.15s ease;
}
a.wishlist-add-to-new:hover,
.wishlist-add-to-new:hover {
  background-color: #b4a48d !important;
  color: #ffffff !important;
}
.wishlist-add-to-new .material-icons,
a.wishlist-add-to-new > .material-icons {
  color: #ffffff !important;
  font-size: 18px !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Wishlist · cards estilo .ch-card (image arriba + info abajo)         */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* Wishlist page · arquitectura igual que /mi-cuenta                    */
/* ------------------------------------------------------------------ */

/* Ocultar el dropdown nativo "Ordenar por: Último añadido" — no lo
   estilamos chetto, mejor quitarlo para liberar espacio. */
.wishlist-products-container-header .sort-by-row,
.wishlist-list .sort-by-row {
  display: none !important;
}

/* Fondo y padding similares al hero de /mi-cuenta */
.wishlist-list,
.wishlist-products-container,
.wishlist-products-list-wrapper {
  background: #fff;
}
.wishlist-products-container {
  margin-inline: auto;
  max-width: 1200px;
  padding: 32px 16px 64px !important;
}
@media (min-width: 768px) {
  .wishlist-products-container { padding: 48px 32px 80px !important; }
}
.wishlist-products-container-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px !important;
}
.wishlist-products-container-header h1 {
  margin: 0;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.013em;
  color: var(--chetto-color-ink, #2d2d2d);
}
@media (min-width: 768px) {
  .wishlist-products-container-header h1 { font-size: 36px !important; }
}
.wishlist-products-container-header h1 .wishlist-products-count {
  color: rgba(10, 10, 10, 0.5);
  font-weight: 400;
}

.wishlist-products-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
}
@media (min-width: 640px) { .wishlist-products-list { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; } }
@media (min-width: 992px) { .wishlist-products-list { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } }

.wishlist-products-item {
  list-style: none;
  display: flex;
}
.wishlist-product {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--chetto-color-border-subtle, #e7e3da);
  background: #fff;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wishlist-product:hover {
  border-color: var(--chetto-color-brand, #c4b5a0);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.wishlist-product-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.wishlist-product-link:hover { color: inherit; text-decoration: none; }

.wishlist-products-list .wishlist-product .wishlist-product-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  overflow: hidden !important;
  background: #f7f6f4 !important;
}
.wishlist-product-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Stock badge sobre la imagen, esquina inf-izq */
.wishlist-product-availability {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--chetto-color-ink, #2d2d2d);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.wishlist-product-availability i.material-icons { font-size: 14px; color: #c1432d; }

/* Info bajo la imagen */
.wishlist-product-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}
.wishlist-product-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--chetto-color-ink, #2d2d2d);
  letter-spacing: -0.0107em;
  /* Truncar a 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wishlist-product-price {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--chetto-color-ink, #2d2d2d);
}
.wishlist-product-combinations {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.wishlist-product-combinations-text {
  margin: 0;
  font-size: 12px;
  color: rgba(45, 45, 45, 0.65);
  line-height: 1.4;
}
.wishlist-product-combinations a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  color: rgba(45, 45, 45, 0.55);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.wishlist-product-combinations a:hover {
  background: rgba(196, 181, 160, 0.15);
  color: var(--chetto-color-ink, #2d2d2d);
}
.wishlist-product-combinations a i.material-icons { font-size: 18px; }

/* Botón Añadir al carrito en la base de la card */
.wishlist-product .wishlist-product-addtocart {
  margin: 0 16px 16px;
  height: 42px;
  border: 1px solid var(--chetto-color-ink, #2d2d2d);
  background: #fff;
  color: var(--chetto-color-ink, #2d2d2d);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.0143em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  text-transform: none;
}
.wishlist-product .wishlist-product-addtocart:hover {
  background: var(--chetto-color-ink, #2d2d2d);
  color: #fff;
}

/* Trash button — esquina sup-der absoluta. La clase nativa para la
   eliminación es `.wishlist-button-add` (sí, mal nombrada por el módulo).
   theme-83cc18.css (Bootstrap compilado) declara `.wishlist-button-add` con
   !important — necesitamos selector más específico (3 clases mín) +
   !important para vencerlo. */
.wishlist-products-list .wishlist-product .wishlist-button-add,
.wishlist-products-list .wishlist-products-item .wishlist-button-add {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid var(--chetto-color-border-subtle, #e7e3da) !important;
  border-radius: 9999px !important;
  color: rgba(45, 45, 45, 0.65) !important;
  cursor: pointer !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.wishlist-products-list .wishlist-product .wishlist-button-add:hover,
.wishlist-products-list .wishlist-products-item .wishlist-button-add:hover {
  color: #c1432d !important;
  border-color: #c1432d !important;
  background: #fff !important;
}
.wishlist-products-list .wishlist-product .wishlist-button-add i.material-icons {
  font-size: 18px !important;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Tracking (estado-pedido)                                             */
/* ------------------------------------------------------------------ */
.chetto-tracking {
  margin-inline: auto;
  width: 100%;
  max-width: 720px;
  padding: 48px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.chetto-tracking__hero {
  text-align: center;
}

.chetto-tracking__eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(10, 10, 10, 0.6);
  margin: 0;
}

.chetto-tracking__title {
  margin: 8px 0 0;
  font-size: 30px;
  font-weight: 600;
  color: var(--chetto-color-ink);
}

.chetto-tracking__subtitle {
  margin: 8px auto 0;
  max-width: 36rem;
  font-size: 14px;
  color: rgba(10, 10, 10, 0.7);
}

/* ------------------------------------------------------------------ */
/* Misc                                                                */
/* ------------------------------------------------------------------ */
.chetto-divider {
  border: 0;
  border-top: 1px solid var(--chetto-color-border-subtle);
  margin: 24px 0;
}

.chetto-page-title {
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.013em;
  color: var(--chetto-color-ink);
}

/* Cuando reutilizamos el shell customer/page.tpl, ocultar duplicados */
.chetto-account .page-header h1.page-title,
.chetto-account .page-header h2.page-title {
  display: none;
}

/* ============================================================================
   Sidebar /mi-cuenta · iconos SVG outline beige + ocultar módulos no usados
   ============================================================================ */
/* Ocultar wishlist + email alerts del hook displayCustomerAccount.
   Aplica al sidebar real (chetto-account__nav) y al fallback account-menu.
   También cubre los <li> padre cuando el módulo envuelve el <a> en un li. */
#wishlist_link,
#emailalerts_link,
.chetto-account__nav li:has(> #wishlist_link),
.chetto-account__nav li:has(> #emailalerts_link),
.account-menu #wishlist_link,
.account-menu #emailalerts_link {
  display: none !important;
}

/* Icono container */
.account-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  color: var(--chetto-color-brand, #c4b5a0);
  flex-shrink: 0;
  vertical-align: middle;
}
.account-menu__icon svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: var(--chetto-color-brand, #c4b5a0);
  fill: none;
}

/* Asegurar que los <i> material-icons heredados de hooks externos también
   se vean en beige (por consistencia visual cuando los hooks añaden links) */
.account-menu__nav .material-icons {
  color: var(--chetto-color-brand, #c4b5a0);
}

/* Link layout uniforme — `align-items: flex-start` para que en links con
   texto de 2 líneas (ej. "RGPD - Datos personales") el icono se alinee con
   la primera línea, no en el centro vertical del bloque. */
.account-menu__nav a.account-menu__link {
  display: flex;
  align-items: flex-start;
  gap: 0;
  text-decoration: none;
  line-height: 1.4;
}
.account-menu__nav a.account-menu__link .account-menu__icon {
  margin-top: 1px;
}

/* Sidebar real /mi-cuenta (chetto-account__nav) — iconos SVG beige outline */
.chetto-account__nav-link svg {
  stroke: var(--chetto-color-brand, #c4b5a0);
  fill: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.chetto-account__nav-link--active svg {
  stroke: var(--chetto-color-ink, #2d2d2d);
}

/* ============================================================================
   Wishlist · UI mejorada (cards listas + modal Crear)
   ============================================================================ */
.wishlist-list-container { background: transparent !important; padding: 0 !important; }
.wishlist-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
  width: 100% !important;
}
.wishlist-list-item { width: 100% !important; }

.wishlist-list-item {
  list-style: none;
  border: 1px solid var(--chetto-color-border-subtle, #e8e6e3) !important;
  border-radius: 14px !important;
  background: #fff !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  cursor: pointer;
}
.wishlist-list-item:hover {
  border-color: var(--chetto-color-brand, #c4b5a0) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.wishlist-list-item-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px !important;
  text-decoration: none !important;
  color: var(--chetto-color-ink, #2d2d2d) !important;
  width: 100%;
  cursor: pointer;
}
.wishlist-list-item-title {
  margin: 0 !important;
  font-size: 16px;
  font-weight: 500;
  color: var(--chetto-color-ink, #2d2d2d);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.wishlist-list-item-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  padding: 0 10px;
  border-radius: 9999px;
  background: var(--chetto-color-surface-muted, #f7f6f4);
  color: rgba(45, 45, 45, 0.65);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap !important;
  flex-shrink: 0;
  line-height: 1;
}
.wishlist-list-item-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.wishlist-list-item-right button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9999px !important;
  color: rgba(45, 45, 45, 0.55) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease;
  padding: 0 !important;
}
.wishlist-list-item-right button:hover {
  background: var(--chetto-color-surface-muted, #f7f6f4) !important;
  color: var(--chetto-color-ink, #2d2d2d) !important;
}
.wishlist-list-item-right .material-icons { font-size: 18px; }

/* Botón "ver lista" (eye outline) inyectado por JS */
.chetto-wl-view-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9999px !important;
  color: var(--chetto-color-brand, #c4b5a0) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0 !important;
}
.chetto-wl-view-btn:hover {
  background: var(--chetto-color-surface-muted, #f7f6f4) !important;
  color: var(--chetto-color-ink, #2d2d2d) !important;
}
.chetto-wl-view-btn svg { width: 18px; height: 18px; display: block; stroke: currentColor; }

/* Botón "eliminar lista" inyectado por JS — rojo suave en hover */
.chetto-wl-delete-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 9999px !important;
  color: rgba(45, 45, 45, 0.55) !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0 !important;
}
.chetto-wl-delete-btn:hover {
  background: rgba(196, 115, 107, 0.1) !important;
  color: #c4736b !important;
}
.chetto-wl-delete-btn:disabled { opacity: 0.5; cursor: wait !important; }
.chetto-wl-delete-btn svg { width: 18px; height: 18px; display: block; stroke: currentColor; }

/* Botón share dentro del wishlist-list-item-right (después de mi normalización) */
.wishlist-list-item-right > button:not(.chetto-wl-view-btn):not(.chetto-wl-delete-btn) svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
}

.wishlist-footer-links {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.wishlist-footer-links a,
.wishlist-footer-links a.text-primary {
  color: var(--chetto-color-brand, #c4b5a0) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}
.wishlist-footer-links a:hover { color: #b4a48d !important; }
.wishlist-footer-links .material-icons { font-size: 18px; }

/* Modal custom "Crear nueva lista" */
.chetto-wl-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.chetto-wl-modal[hidden] { display: none; }
body.chetto-wl-modal-open { overflow: hidden; }
.chetto-wl-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.55);
  cursor: pointer;
  animation: chettoWlFadeIn 0.18s ease;
}
@keyframes chettoWlFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes chettoWlPopIn { from { opacity: 0; transform: scale(0.96) translateY(8px) } to { opacity: 1; transform: none } }
.chetto-wl-modal__dialog {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  overflow: hidden;
  animation: chettoWlPopIn 0.22s ease;
  margin: 0;
}
.chetto-wl-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--chetto-color-border-subtle, #e8e6e3);
}
.chetto-wl-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--chetto-color-ink, #2d2d2d);
}
.chetto-wl-modal__close {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 9999px;
  color: rgba(45,45,45,0.6);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chetto-wl-modal__close:hover { background: var(--chetto-color-surface-muted, #f7f6f4); }
.chetto-wl-modal__close svg { width: 18px; height: 18px; }
.chetto-wl-modal__body { padding: 20px; }
.chetto-wl-modal__label {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(45,45,45,0.7);
  font-weight: 500;
}
.chetto-wl-modal__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--chetto-color-border-subtle, #e8e6e3);
  border-radius: 10px;
  font-size: 14px;
  color: var(--chetto-color-ink, #2d2d2d);
  background: #fff;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.chetto-wl-modal__input:focus {
  border-color: var(--chetto-color-brand, #c4b5a0);
  box-shadow: 0 0 0 3px rgba(196,181,160,0.18);
}
.chetto-wl-modal__error {
  margin: 8px 0 0;
  font-size: 13px;
  color: #c4736b;
}
.chetto-wl-modal__foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px 20px;
  border-top: 1px solid var(--chetto-color-border-subtle, #e8e6e3);
}
.chetto-wl-modal__btn {
  border: 0;
  border-radius: 9999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.chetto-wl-modal__btn:disabled { opacity: 0.6; cursor: not-allowed; }
.chetto-wl-modal__btn--brand {
  background: var(--chetto-color-brand, #c4b5a0);
  color: #fff;
}
.chetto-wl-modal__btn--brand:hover:not(:disabled) { background: #b4a48d; }
.chetto-wl-modal__btn--ghost {
  background: transparent;
  color: var(--chetto-color-ink, #2d2d2d);
  border: 1px solid var(--chetto-color-border-subtle, #e8e6e3);
}
.chetto-wl-modal__btn--ghost:hover { background: var(--chetto-color-surface-muted, #f7f6f4); }

/* ============================================================================
   Asterisco de campos requeridos · alineado con el label (no en línea aparte)
   Aplica a labels de formularios de contacto, registro, etc.
   ============================================================================ */
.form-required,
.required,
label .required,
.form-group label .required,
label .form-required {
  display: inline !important;
  vertical-align: middle !important;
  position: relative !important;
  top: 0 !important;
  left: 2px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1em !important;
  color: #c4736b !important;
}
.form-label,
label.form-label,
.form-group > label {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 2px !important;
}

/* ============================================================
   CHETTO · Checkout · Paso 4 (Pago)  — Tarjetas elegantes
   ============================================================ */
#checkout-payment-step .payment-options__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0 24px;
}

#checkout-payment-step .payment-option {
  position: relative;
  background: #fff;
  border: 1.5px solid #e7e7e7;
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
  cursor: pointer;
}

#checkout-payment-step .payment-option:hover {
  border-color: #c4736b;
  box-shadow: 0 4px 14px rgba(196,115,107,.08);
}

/* Opción seleccionada (cuando el radio interno está marcado) */
#checkout-payment-step .payment-option:has(input.payment-option__input:checked) {
  border-color: #c4736b;
  background: #fdf7f6;
  box-shadow: 0 4px 14px rgba(196,115,107,.12);
}

/* Fila check + label */
#checkout-payment-step .payment-option__form-check {
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  min-height: 36px;
}

/* Radio custom */
#checkout-payment-step .payment-option__input.form-check-input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid #cfcfcf;
  background-color: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
#checkout-payment-step .payment-option__input.form-check-input:checked {
  background-color: #c4736b;
  border-color: #c4736b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23fff'/%3E%3C/svg%3E");
}
#checkout-payment-step .payment-option__input.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(196,115,107,.18);
  border-color: #c4736b;
  outline: none;
}

/* Label de la opción */
#checkout-payment-step .payment-option__label.form-check-label {
  flex: 1;
  display: flex !important;
  align-items: center;
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  cursor: pointer;
  line-height: 1.3;
}

/* Logos / iconos de método */
#checkout-payment-step .payment-option__label img.img-fluid {
  max-height: 26px;
  width: auto;
  object-fit: contain;
  margin: 0;
}

/* PayPal mark a la derecha (lo PS lo mete en <span paypal-mark-container>) */
#checkout-payment-step .payment-option [paypal-mark-container] {
  margin-left: auto;
}
#checkout-payment-step .payment-option .paypal-mark {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
#checkout-payment-step .payment-option .paypal-mark img {
  height: 26px;
}

/* Info adicional (el botón nativo de PayPal aparece aquí) */
#checkout-payment-step .payment-option__additional-information {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #ebebeb;
}

/* Wrapper de botones (volver / realizar pedido) */
#checkout-payment-step .buttons-wrapper {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

#checkout-payment-step .buttons-wrapper .btn-primary {
  background: #c4736b;
  border-color: #c4736b;
  padding: 12px 28px;
  font-weight: 600;
  letter-spacing: .2px;
  border-radius: 999px;
  transition: background .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(196,115,107,.18);
}
#checkout-payment-step .buttons-wrapper .btn-primary:hover:not(.disabled):not(:disabled) {
  background: #b15e56;
  border-color: #b15e56;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(196,115,107,.28);
}
#checkout-payment-step .buttons-wrapper .btn-primary.disabled,
#checkout-payment-step .buttons-wrapper .btn-primary:disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

#checkout-payment-step .buttons-wrapper .btn-outline-primary {
  border-radius: 999px;
  padding: 11px 22px;
  color: #555;
  border-color: #cfcfcf;
  font-weight: 500;
  background: #fff;
  transition: border-color .15s, color .15s, background .15s;
}
#checkout-payment-step .buttons-wrapper .btn-outline-primary:hover {
  background: #fafafa;
  color: #c4736b;
  border-color: #c4736b;
}

/* Términos y condiciones */
#checkout-payment-step #conditions-to-approve {
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 18px;
}
#checkout-payment-step #conditions-to-approve .form-check {
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#checkout-payment-step #conditions-to-approve .form-check-input {
  margin-top: 3px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid #cfcfcf;
}
#checkout-payment-step #conditions-to-approve .form-check-input:checked {
  background-color: #c4736b;
  border-color: #c4736b;
}
#checkout-payment-step #conditions-to-approve .form-check-label {
  font-size: 14px;
  color: #555;
  margin: 0 !important;
  line-height: 1.5;
}
#checkout-payment-step #conditions-to-approve .form-check-label a {
  color: #c4736b;
  text-decoration: underline;
  font-weight: 500;
}

/* Aviso de error (alert-danger) */
#checkout-payment-step .alert-danger,
#checkout-payment-step .js-alert-payment-conditions {
  background: #fdf2f1;
  border: 1px solid #f1c8c4;
  color: #8a3b34;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
}

/* Móvil: botones apilados full-width */
@media (max-width: 575px) {
  #checkout-payment-step .buttons-wrapper {
    flex-direction: column-reverse;
    gap: 10px;
  }
  #checkout-payment-step .buttons-wrapper .btn-primary,
  #checkout-payment-step .buttons-wrapper .btn-outline-primary,
  #checkout-payment-step #payment-confirmation,
  #checkout-payment-step #payment-confirmation > div {
    width: 100%;
  }
  #checkout-payment-step .buttons-wrapper .btn-primary,
  #checkout-payment-step .buttons-wrapper .btn-outline-primary {
    width: 100%;
    justify-content: center;
  }
  #checkout-payment-step .payment-option {
    padding: 14px 14px;
  }
  #checkout-payment-step .payment-option__label img.img-fluid {
    max-height: 22px;
  }
}