/* storefront.css — estilos base del área pública */

/* Accent de marca del storefront (azul cielo, distinto del navy del
   backoffice). Vive en :root para estar disponible en TODO el árbol público
   (header, home, footer, área de cuenta, …); el header lo redefine local por
   compatibilidad histórica con el mismo valor. */
:root {
  --header-accent: #2b9cf0;
}

/* Header del storefront. La composición replica la referencia en dos filas:
   logo/buscador/acciones arriba y navegación de categorías debajo. */
.storefront__header {
  --header-accent: #2b9cf0;
  --header-bg: #091720;
  --header-bg-deep: #07131b;
  --header-line: rgba(255, 255, 255, .12);
  --header-text: #eef3f6;
  --header-muted: #aeb9c1;
  position: relative;
  z-index: 50;
  background: var(--header-bg-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 8px 24px rgba(7, 19, 27, .12);
  color: var(--header-text);
}
.storefront__sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.storefront__topbar {
  background: radial-gradient(circle at 75% 0, #10212d 0, var(--header-bg) 46%, var(--header-bg-deep) 100%);
}
.storefront__topbar-inner {
  display: grid;
  grid-template-columns: 190px minmax(390px, 662px) minmax(310px, 1fr);
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1340px;
  min-height: 68px;
  margin: 0 auto;
}
.storefront__logo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  line-height: 0;
}
.storefront__logo:hover { text-decoration: none; }
.storefront__logo img { display: block; width: 130px; height: auto; }

.storefront__search {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px 52px;
  align-items: stretch;
  width: 100%;
  height: 43px;
}
.storefront__search-field {
  position: relative;
  min-width: 0;
  border: 1px solid #d7dee6;
  border-radius: 6px 0 0 6px;
  background: #fff;
}
.storefront__search-field:focus-within,
.storefront__category-select:focus-within {
  z-index: 1;
  border-color: var(--header-accent);
  box-shadow: 0 0 0 1px var(--header-accent);
}
.storefront__search-input {
  width: 100%; height: 100%; min-width: 0; padding: 0 14px;
  border: 0; outline: 0; border-radius: inherit; background: transparent;
  color: #1f2937; font-size: 12.5px;
}
.storefront__search-input::placeholder { color: #748091; opacity: 1; }
.storefront__search-input::-webkit-search-cancel-button { cursor: pointer; }
.storefront__category-select {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: -1px;
  border: 1px solid #d7dee6;
  background: #fff;
}
.storefront__category-select select {
  width: 100%; height: 100%; padding: 0 32px 0 14px;
  appearance: none; border: 0; outline: 0; background: transparent;
  color: #1f2937; cursor: pointer; font-size: 11.5px;
}
.storefront__category-select > svg {
  position: absolute; right: 10px; width: 14px; height: 14px;
  fill: none; stroke: #596579; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.storefront__search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; padding: 0; border: 1px solid var(--header-accent);
  border-radius: 0 6px 6px 0; background: var(--header-accent); color: #fff;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.storefront__search-btn:hover { background: #168de2; border-color: #168de2; }
.storefront__search-btn svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.storefront__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  min-width: 0;
}
.storefront__action-icon {
  flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: currentColor;
  stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.storefront__account-menu { position: relative; flex: 0 1 auto; min-width: 0; }
.storefront__account-trigger,
.storefront__login-link {
  display: inline-flex; align-items: center; gap: 10px; min-width: 0;
  color: var(--header-text); text-decoration: none;
}
.storefront__account-trigger:hover,
.storefront__login-link:hover { color: #fff; text-decoration: none; }
.storefront__account-copy {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.25;
}
.storefront__user-name {
  display: block; max-width: 112px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11.5px; font-weight: 500;
}
.storefront__account-label {
  display: inline-flex; align-items: center; gap: 3px; color: var(--header-muted); font-size: 10.5px;
}
.storefront__account-label svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .15s ease;
}
.storefront__account-menu.is-open .storefront__account-label svg { transform: rotate(180deg); }
.storefront__login-link > span { display: flex; flex-direction: column; font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.storefront__login-link small { color: var(--header-muted); font-size: 10.5px; font-weight: 400; }
.storefront__account-dropdown {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 60;
  display: flex; flex-direction: column; width: 190px; padding: 6px;
  border: 1px solid #e2e7ed; border-radius: 8px; background: #fff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
  opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none;
  transition: opacity .14s ease, visibility .14s ease, transform .14s ease;
}
.storefront__account-menu.is-open .storefront__account-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.storefront__account-dropdown a,
.storefront__logout {
  display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 5px;
  background: transparent; color: #273244; text-align: left; font-size: 12px;
}
.storefront__account-dropdown a:hover,
.storefront__logout:hover { background: #f3f7fa; color: var(--header-accent); text-decoration: none; }
.storefront__logout-form { margin: 0; }
.storefront__account-dropdown .storefront__logout-form {
  margin-top: 4px; padding-top: 4px; border-top: 1px solid #edf0f3;
}
.storefront__wishlist-badge,
.storefront__cart-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 0;
  border: 0; border-radius: 0; background: transparent; color: var(--header-text);
  white-space: nowrap; text-decoration: none;
}
.storefront__wishlist-badge:hover,
.storefront__cart-badge:hover { color: #42b5fb; text-decoration: none; }
.storefront__badge-label { font-size: 11.5px; font-weight: 600; }
.storefront__count-bubble {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--header-accent); color: #fff; font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1;
}

.storefront__nav-toggle {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.storefront__burger { display: none; }
.storefront__nav {
  width: 100%;
  border-top: 1px solid var(--header-line);
  background: rgba(5, 17, 25, .98);
}
.storefront__nav-inner {
  display: flex; align-items: stretch; gap: 39px;
  width: 100%; max-width: 1340px; height: 38px; margin: 0 auto;
}
.storefront__nav-item {
  position: relative; display: inline-flex; align-items: center; padding: 0 1px;
  color: #d3d9dd; font-size: 11px; font-weight: 500; white-space: nowrap;
  text-decoration: none;
}
.storefront__nav-item:hover { color: #42b5fb; text-decoration: none; }
.storefront__nav-item::after {
  content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px;
  border-radius: 2px 2px 0 0; background: var(--header-accent);
  opacity: 0; transform: scaleX(.4); transition: opacity .15s ease, transform .15s ease;
}
.storefront__nav-item.is-active { color: #54b1ed; font-weight: 600; }
.storefront__nav-item.is-active::after { opacity: 1; transform: scaleX(1); }
.storefront__nav-category { color: #d3d9dd; font-size: 11px; }
.storefront__mobile-user { display: none; }

@media (max-width: 1399px) {
  .storefront__topbar-inner,
  .storefront__nav-inner { max-width: none; padding-right: 32px; padding-left: 32px; }
  .storefront__topbar-inner { grid-template-columns: 180px minmax(380px, 662px) minmax(300px, 1fr); gap: 32px; }
  .storefront__actions { gap: 23px; }
}

@media (max-width: 1120px) {
  .storefront__topbar-inner { grid-template-columns: 150px minmax(350px, 1fr) auto; gap: 24px; }
  .storefront__logo img { width: 122px; }
  .storefront__actions { gap: 18px; }
  .storefront__badge-label { display: none; }
  .storefront__nav-inner { gap: 30px; }
}

@media (max-width: 900px) {
  .storefront__topbar-inner {
    grid-template-columns: 130px minmax(260px, 1fr) auto;
    padding-right: 20px; padding-left: 20px;
  }
  .storefront__logo img { width: 110px; }
  .storefront__actions { gap: 14px; }
  .storefront__user-name { max-width: 82px; }
  .storefront__account-trigger { gap: 7px; }
  .storefront__category-select { width: 142px; }
  .storefront__search { grid-template-columns: minmax(0, 1fr) 142px 48px; }
  .storefront__nav-inner { gap: 24px; padding-right: 20px; padding-left: 20px; overflow-x: auto; }
}

@media (max-width: 768px) {
  .storefront__topbar-inner {
    display: flex; flex-wrap: wrap; min-height: 0; padding: 11px 16px 10px; gap: 10px 12px;
  }
  .storefront__logo { order: 1; flex: 1 1 auto; }
  .storefront__logo img { width: 116px; }
  .storefront__actions { order: 2; flex: 0 0 auto; gap: 14px; }
  .storefront__account-menu,
  .storefront__wishlist-badge { display: none; }
  .storefront__search { order: 3; flex: 1 1 100%; height: 42px; }
  .storefront__burger {
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 38px; padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
  }
  .storefront__burger-bar {
    display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--header-text);
    transition: transform .16s ease, opacity .16s ease;
  }
  .storefront__nav-toggle:checked ~ .storefront__topbar .storefront__burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .storefront__nav-toggle:checked ~ .storefront__topbar .storefront__burger-bar:nth-child(2) { opacity: 0; }
  .storefront__nav-toggle:checked ~ .storefront__topbar .storefront__burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .storefront__nav { display: none; }
  .storefront__nav-toggle:checked ~ .storefront__nav { display: block; }
  .storefront__nav-inner {
    flex-direction: column; align-items: stretch; gap: 0; height: auto;
    padding: 7px 16px 14px; overflow: visible;
  }
  .storefront__nav-item { min-height: 38px; padding: 8px 4px; font-size: 12px; }
  .storefront__nav-item::after { top: 8px; right: auto; bottom: 8px; left: -4px; width: 2px; height: auto; transform: scaleY(.4); }
  .storefront__nav-item.is-active::after { transform: scaleY(1); }
  .storefront__mobile-user {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--header-line);
  }
  .storefront__mobile-user > span { padding: 8px 4px 4px; color: var(--header-muted); font-size: 11px; }
  .storefront__mobile-user > a,
  .storefront__mobile-user .storefront__logout {
    display: block; width: 100%; padding: 8px 4px; border: 0; background: transparent;
    color: var(--header-text); text-align: left; font-size: 12px;
  }
  .storefront__mobile-user > a:hover,
  .storefront__mobile-user .storefront__logout:hover {
    background: rgba(255, 255, 255, .08); color: #42b5fb; text-decoration: none;
  }
}

@media (max-width: 430px) {
  .storefront__search { grid-template-columns: minmax(0, 1fr) 126px 44px; }
  .storefront__category-select select { padding-right: 25px; padding-left: 9px; font-size: 10.5px; }
  .storefront__category-select > svg { right: 7px; }
  .storefront__search-input { padding: 0 10px; font-size: 11.5px; }
}

/* Sticky footer: el body en columna a viewport completo y el main que crece
   empujan el footer al fondo. Sin esto, en páginas cortas (p.ej. /auth/login)
   el footer queda a media altura y se ve espacio en blanco por debajo. */
body.storefront { display: flex; flex-direction: column; min-height: 100vh; }
.storefront__main { flex: 1 0 auto; width: 100%; max-width: 1024px; margin: 2rem auto; padding: 0 1.5rem; }
.storefront__footer {
  margin-top: 4rem; background: radial-gradient(circle at 75% 0, #10212d 0, #091720 42%, #07131b 100%);
  color: #aeb9c1; text-align: left;
}
.storefront__footer-main {
  display: grid; grid-template-columns: 230px 125px 125px 160px minmax(280px, 1fr);
  gap: 64px; width: 100%; max-width: 1270px; min-height: 168px;
  margin: 0 auto; padding: 16px 0 13px;
}
.storefront__footer h2 {
  margin: 0 0 10px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.25;
}
.storefront__footer-brand { min-width: 0; }
.storefront__footer-logo { display: inline-flex; line-height: 0; }
.storefront__footer-logo:hover { text-decoration: none; }
.storefront__footer-logo img { display: block; width: 126px; height: auto; }
.storefront__footer-brand p { margin: 6px 0 0; color: #aab5bd; font-size: 10.5px; line-height: 1.5; }
.storefront__footer-social { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.storefront__footer-social > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 999px; background: rgba(255, 255, 255, .13); color: #f3f7f9;
}
.storefront__footer-social svg {
  width: 13px; height: 13px; fill: currentColor; stroke: none;
}
.storefront__footer-social svg rect,
.storefront__footer-social svg circle,
.storefront__footer-social svg path:not(.storefront__footer-social-play) {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.storefront__footer-social .storefront__footer-social-play { fill: currentColor; stroke: none; }
.storefront__footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.storefront__footer-column a,
.storefront__footer-column span {
  color: #acb7bf; font-size: 10.5px; line-height: 1.3; text-decoration: none;
}
.storefront__footer-column a:hover { color: #42b5fb; text-decoration: none; }
.storefront__footer-newsletter {
  min-width: 0; padding-left: 42px; border-left: 1px solid rgba(255, 255, 255, .16);
}
.storefront__footer-newsletter p { margin: 0 0 9px; color: #d3d9dd; font-size: 10.5px; }
.storefront__footer-subscribe { display: grid; grid-template-columns: minmax(0, 1fr) 110px; height: 35px; }
.storefront__footer-subscribe input {
  min-width: 0; padding: 0 12px; border: 0; border-radius: 5px 0 0 5px;
  outline: 0; background: #fff; color: #4b5563; font-size: 10.5px; opacity: 1;
}
.storefront__footer-subscribe input::placeholder { color: #9aa4ae; opacity: 1; }
.storefront__footer-subscribe button {
  padding: 0 14px; border: 0; border-radius: 0 5px 5px 0;
  background: #54b1ed; color: #fff; font-size: 10.5px; font-weight: 650; opacity: 1; cursor: not-allowed;
}
.storefront__footer-newsletter > small {
  display: block; margin-top: 4px; color: #71808b; font-size: 8.5px;
}
.storefront__footer-payments { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 17px; margin-top: 12px; }
.storefront__footer-payments span {
  color: #eef3f6; font-size: 10px; font-weight: 700; font-style: italic; letter-spacing: -.015em;
}
.storefront__footer-bottom { border-top: 1px solid rgba(255, 255, 255, .13); }
.storefront__footer-bottom > div {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1270px; min-height: 30px; margin: 0 auto;
}
.storefront__footer-bottom small { color: #8f9ca5; font-size: 9.5px; }
.storefront__footer-bottom p { display: flex; align-items: center; gap: 0; margin: 0; }
.storefront__footer-bottom p span { color: #9eabb4; font-size: 9.5px; }
.storefront__footer-bottom p span + span {
  margin-left: 26px; padding-left: 26px; border-left: 1px solid rgba(255, 255, 255, .3);
}

@media (max-width: 1320px) {
  .storefront__footer-main,
  .storefront__footer-bottom > div { max-width: none; margin: 0; padding-right: 25px; padding-left: 25px; }
  .storefront__footer-main { grid-template-columns: 210px 110px 120px 145px minmax(250px, 1fr); gap: 34px; }
  .storefront__footer-newsletter { padding-left: 28px; }
}

@media (max-width: 980px) {
  .storefront__footer-main {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 34px; padding-top: 28px; padding-bottom: 24px;
  }
  .storefront__footer-brand { grid-column: 1 / -1; }
  .storefront__footer-newsletter {
    grid-column: 1 / -1; padding: 20px 0 0; border-top: 1px solid rgba(255, 255, 255, .13); border-left: 0;
  }
  .storefront__footer-subscribe { max-width: 520px; }
}

@media (max-width: 600px) {
  .storefront__footer { margin-top: 3rem; }
  .storefront__footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 20px; padding: 26px 18px 22px; }
  .storefront__footer-brand { grid-column: 1 / -1; }
  .storefront__footer-column:last-of-type { grid-column: 1 / -1; }
  .storefront__footer-newsletter { grid-column: 1 / -1; }
  .storefront__footer-subscribe { grid-template-columns: minmax(0, 1fr) 100px; }
  .storefront__footer-bottom > div { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 18px; }
  .storefront__footer-bottom p span + span { margin-left: 14px; padding-left: 14px; }
}

.home-placeholder h1 { margin-top: 0; }
.home-placeholder__hx-demo {
  margin-top: 2rem; padding: 1rem; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: .5rem;
}
.home-placeholder__hx-demo pre {
  margin-top: .75rem; padding: .75rem; background: var(--c-ink); color: var(--c-bg); border-radius: .375rem;
  overflow-x: auto;
}

/* ───────────────────────── Storefront — Sprint 3 ───────────────────────── */

/* Header y navegación se definen en el bloque superior. */

/* Home */
.storefront[data-page="home"] .storefront__main {
  width: 100%; max-width: 1418px; margin: 1rem auto 2rem; padding: 0 24px;
}
.home__hero {
  position: relative; isolation: isolate; width: 100%; min-height: 328px; aspect-ratio: 25 / 6;
  overflow: hidden; border: 1px solid #213444; border-radius: 11px;
  background: #020812; color: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
}
.home__hero-track { position: absolute; inset: 0; }
.home__hero-slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s ease, visibility .6s ease;
}
.home__hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.home__hero-image {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.home__hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(1, 7, 15, .34) 0%, rgba(1, 7, 15, .14) 45%, transparent 72%);
}
.home__hero-content {
  position: absolute; top: 9.5%; left: 4.35%; z-index: 2; width: min(47%, 620px);
  text-align: left;
}
.home__hero-kicker {
  display: inline-flex; align-items: center; min-height: 26px; padding: 5px 18px;
  border: 1px solid rgba(133, 211, 255, .75); border-radius: 999px;
  background: linear-gradient(180deg, #43b7ff, #278de1); color: #fff;
  box-shadow: inset 0 1px rgba(255, 255, 255, .3), 0 3px 12px rgba(17, 148, 235, .22);
  font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .045em; text-transform: uppercase;
}
.home__hero h1,
.home__hero h2 {
  margin: 13px 0 4px; color: #fff; font-size: clamp(2rem, 3.5vw, 2.25rem);
  font-weight: 750; line-height: 1.05; letter-spacing: -.025em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}
.home__hero p {
  max-width: 520px; margin: 0 0 14px; color: rgba(255, 255, 255, .92);
  font-size: clamp(.82rem, 1.1vw, 1rem); line-height: 1.45;
}
.home__hero-actions { display: flex; align-items: center; gap: 18px; }
.home__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 44px; padding: 10px 20px; border: 1px solid transparent;
  border-radius: 6px; color: #fff; font-size: 12.5px; font-weight: 650;
  line-height: 1; text-decoration: none; transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.home__cta svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.home__cta--primary {
  background: linear-gradient(180deg, #43b7ff, #2997e9); border-color: #66c5ff;
  box-shadow: 0 5px 14px rgba(13, 139, 224, .24);
}
.home__cta--secondary { background: rgba(2, 10, 20, .48); border-color: rgba(218, 232, 241, .65); }
.home__cta:hover { color: #fff; text-decoration: none; transform: translateY(-1px); }
.home__cta--primary:hover { background: linear-gradient(180deg, #53c0ff, #248edc); }
.home__cta--secondary:hover { background: rgba(22, 43, 60, .72); border-color: #fff; }

.home__hero-benefits {
  position: absolute; bottom: 7.4%; left: 4.35%; z-index: 4;
  display: flex; align-items: center; color: #fff;
}
.home__hero-benefit {
  display: flex; align-items: center; gap: 12px; min-width: 174px; padding: 0 20px;
  border-right: 1px solid rgba(255, 255, 255, .42);
}
.home__hero-benefit:first-child { padding-left: 0; }
.home__hero-benefit:last-child { border-right: 0; }
.home__hero-benefit > svg {
  flex: 0 0 auto; width: 28px; height: 28px; fill: none; stroke: currentColor;
  stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round;
}
.home__hero-benefit > span { display: flex; flex-direction: column; line-height: 1.25; }
.home__hero-benefit strong { font-size: 11.5px; font-weight: 650; }
.home__hero-benefit small { margin-top: 2px; color: rgba(255, 255, 255, .78); font-size: 10.5px; }

.home__hero-arrow {
  position: absolute; top: 50%; z-index: 6; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 999px; background: rgba(2, 10, 20, .48); color: #fff;
  opacity: 0; transform: translateY(-50%); transition: opacity .15s ease, background-color .15s ease;
}
.home__hero:hover .home__hero-arrow,
.home__hero:focus-within .home__hero-arrow { opacity: 1; }
.home__hero-arrow:hover { background: rgba(39, 157, 235, .88); }
.home__hero-arrow svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.home__hero-arrow--prev { left: 12px; }
.home__hero-arrow--next { right: 12px; }
.home__hero-dots {
  position: absolute; bottom: 4.4%; left: 50%; z-index: 6;
  display: flex; align-items: center; gap: 10px; transform: translateX(-50%);
}
.home__hero-dots button {
  width: 11px; height: 11px; padding: 0; border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px; background: rgba(255, 255, 255, .56);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: background-color .15s ease, transform .15s ease;
}
.home__hero-dots button.is-active { background: #2aa8fb; border-color: #2aa8fb; transform: scale(1.08); }
.home__hero-dots .home__hero-pause {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 1px; border-color: rgba(255, 255, 255, .3);
  background: rgba(1, 9, 18, .46); color: #fff; opacity: 0;
  transition: opacity .15s ease, background-color .15s ease;
}
.home__hero:hover .home__hero-pause,
.home__hero:focus-within .home__hero-pause { opacity: 1; }
.home__hero-pause svg {
  width: 11px; height: 11px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.home__hero-play-icon { display: none; }
.home__hero-pause.is-paused .home__hero-pause-icon { display: none; }
.home__hero-pause.is-paused .home__hero-play-icon { display: block; }

@media (max-width: 1100px) {
  .home__hero { aspect-ratio: auto; }
  .home__hero-image { object-position: 64% center; }
  .home__hero-content { top: 28px; left: 38px; width: 52%; }
  .home__hero h1,
  .home__hero h2 { font-size: clamp(2rem, 4.2vw, 2.75rem); }
  .home__hero-benefits { bottom: 22px; left: 38px; }
  .home__hero-benefit { min-width: 158px; padding: 0 14px; }
  .home__hero-benefit strong { font-size: 10.5px; }
  .home__hero-benefit small { font-size: 9.5px; }
  .home__hero-dots { bottom: 14px; }
}

@media (max-width: 900px) and (min-width: 721px) {
  .home__hero { min-height: 410px; }
}

@media (max-width: 720px) {
  .storefront[data-page="home"] .storefront__main { margin-top: .75rem; padding: 0 14px; }
  .home__hero { min-height: 650px; border-radius: 9px; }
  .home__hero-image {
    inset: auto -120px 122px auto; width: 900px; height: 216px;
    object-fit: fill; object-position: center;
  }
  .home__hero-shade {
    background: linear-gradient(180deg, rgba(1, 7, 15, .08), rgba(1, 7, 15, .18) 54%, rgba(1, 7, 15, .78) 80%, #020812 100%);
  }
  .home__hero-content { top: 27px; left: 22px; width: calc(100% - 44px); }
  .home__hero-kicker { min-height: 24px; padding: 5px 14px; font-size: 10px; }
  .home__hero h1,
  .home__hero h2 { max-width: 95%; margin-top: 11px; font-size: clamp(2rem, 10vw, 2.75rem); }
  .home__hero p { max-width: 94%; margin-bottom: 15px; font-size: .88rem; }
  .home__hero-actions { flex-wrap: wrap; gap: 10px; }
  .home__cta { min-height: 42px; padding: 9px 15px; font-size: 11.5px; }
  .home__hero-benefits {
    right: 20px; bottom: 18px; left: 20px; display: grid; grid-template-columns: 1fr; gap: 0;
  }
  .home__hero-benefit {
    min-width: 0; min-height: 39px; padding: 5px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .17);
  }
  .home__hero-benefit:last-child { border-bottom: 0; }
  .home__hero-benefit > svg { width: 23px; height: 23px; }
  .home__hero-benefit strong { font-size: 10.5px; }
  .home__hero-benefit small { font-size: 9.5px; }
  .home__hero-dots { bottom: 145px; }
  .home__hero-dots .home__hero-pause { opacity: 1; }
  .home__hero-arrow { top: auto; bottom: 208px; opacity: .86; }
  .home__hero-arrow--prev { left: 10px; }
  .home__hero-arrow--next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .home__hero-slide,
  .home__hero-arrow,
  .home__hero-dots button,
  .home__cta { transition: none; }
}
.home section { margin-top: 2rem; }
.home__section-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 9px; padding: 0 3px;
}
.home__section-heading h2 {
  margin: 0; color: #151b25; font-size: 17px; font-weight: 700; line-height: 1.25;
}
.home__section-heading > a {
  display: inline-flex; align-items: center; gap: 8px; color: #168fe4;
  font-size: 11px; font-weight: 600; text-decoration: none;
}
.home__section-heading > a:hover { color: #087bc7; text-decoration: none; }
.home__section-heading svg,
.home__category-copy svg,
.product-card__home-action svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.home__category-list {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;
  margin: 0; padding: 0; list-style: none;
}
.home__category-list li { min-width: 0; }
.home__category-link {
  display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 8px 17px;
  overflow: hidden; border: 1px solid #dce3e9; border-radius: 7px;
  background: #fff; color: #151b25; box-shadow: 0 1px 3px rgba(15, 23, 42, .025);
  text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.home__category-link:hover {
  border-color: #9dd7fb; color: #151b25; box-shadow: 0 4px 12px rgba(26, 145, 224, .09);
  text-decoration: none; transform: translateY(-1px);
}
.home__category-media {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 61px; height: 61px; border-radius: 999px; background: #f3f5f8 center / cover no-repeat;
  color: #9aa5b2;
}
.home__category-media > svg {
  width: 28px; height: 28px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.home__category-media--calzado { background-image: url("/img/home/categories/category-calzado.webp"); }
.home__category-media--indumentaria { background-image: url("/img/home/categories/category-indumentaria.webp"); }
.home__category-media--hogar,
.home__category-media--electrodomesticos { background-image: url("/img/home/categories/category-hogar.webp"); }
.home__category-media--electronica,
.home__category-media--televisores { background-image: url("/img/home/categories/category-electronica.webp"); }
.home__category-media--accesorios { background-image: url("/img/home/categories/category-accesorios.webp"); }
.home__category-media--calzado > svg,
.home__category-media--indumentaria > svg,
.home__category-media--hogar > svg,
.home__category-media--electrodomesticos > svg,
.home__category-media--electronica > svg,
.home__category-media--televisores > svg,
.home__category-media--accesorios > svg { display: none; }
.home__category-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.home__category-copy strong {
  overflow: hidden; color: #171d27; font-size: 13px; font-weight: 650;
  text-overflow: ellipsis; white-space: nowrap;
}
.home__category-copy > span {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  color: #168fe4; font-size: 10.5px; font-weight: 600; white-space: nowrap;
}

.home__featured { margin-top: 14px !important; }
.home__featured .product-grid__items {
  grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px;
}
.home__featured .product-card {
  min-width: 0; padding-bottom: 7px; border-color: #dfe5ea; border-radius: 8px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .035);
}
.home__featured .product-card:hover {
  border-color: #a9d9f6; box-shadow: 0 5px 16px rgba(17, 111, 174, .1);
}
.home__featured .product-card__link { order: 1; color: inherit; text-decoration: none; }
.home__featured .product-card__img {
  width: 100%; aspect-ratio: 1.5 / 1; padding: 7px; object-fit: contain;
  background: #fff;
}
.home__featured .product-card__name {
  display: block; min-height: 0; margin: 6px 10px 1px; overflow: hidden; color: #202733;
  font-size: 10px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
}
.home__featured .product-card__brand {
  order: 2; min-height: 1.2em; margin: 0 10px; overflow: hidden;
  color: #7b8795; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
}
.home__featured .product-card__rating {
  order: 3; min-height: 12px; margin: 2px 10px 0; gap: 3px; line-height: 1;
}
.home__featured .product-card__rating .rating-stars { font-size: 10px; letter-spacing: 0; }
.home__featured .product-card__rating-count,
.home__featured .product-card__rating-none { font-size: 8.5px; }
.home__featured .product-card__price {
  order: 4; margin: 3px 10px 6px; color: #111827; font-size: 12px; font-weight: 750; line-height: 1.2;
}
.home__featured .product-card__home-action {
  order: 5; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 25px; margin: auto 8px 0; padding: 4px 8px; border: 1px solid #2aa3f2;
  border-radius: 5px; background: #fff; color: #168fe4; font-size: 9.5px;
  font-weight: 650; line-height: 1; text-decoration: none;
}
.home__featured .product-card__home-action:hover { background: #eff8ff; color: #087bc7; text-decoration: none; }
.home__featured .wishlist-toggle {
  top: 7px; right: 7px; width: 25px; height: 25px; border-color: #e1e6eb;
  color: #7d8995; box-shadow: 0 1px 4px rgba(15, 23, 42, .06);
}
.home__featured .wishlist-toggle__icon { font-size: 14px; }

@media (max-width: 1200px) {
  .home__category-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home__featured .product-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .home section { margin-top: 1.5rem; }
  .home__section-heading { align-items: flex-end; }
  .home__section-heading h2 { font-size: 16px; }
  .home__section-heading > a { font-size: 10px; }
  .home__category-list { grid-template-columns: 1fr; gap: 9px; }
  .home__category-link { min-height: 70px; }
  .home__category-media { width: 54px; height: 54px; }
  .home__featured { margin-top: 24px !important; }
  .home__featured .product-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home__featured .product-card__name { font-size: 11px; }
}

/* Catálogo — layout */
.catalog__header h1 { margin: 0; }
.catalog__query { color: var(--c-text-subtle); margin: .25rem 0 0; }
.catalog__layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; margin-top: 1.5rem;
  align-items: start;
}
@media (max-width: 720px) { .catalog__layout { grid-template-columns: 1fr; } }

/* Panel de filtros */
.catalog-filters {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: .625rem; padding: 1rem;
  display: flex; flex-direction: column; gap: .875rem;
}
.catalog-filters__title { margin: 0; font-size: 1rem; }
.catalog-filters__group { display: flex; flex-direction: column; gap: .25rem; }
.catalog-filters__group label { font-size: .8rem; font-weight: 600; color: var(--c-text-muted); }
.catalog-filters__group select,
.catalog-filters__group input {
  padding: .4rem .5rem; border: 1px solid var(--c-border-strong); border-radius: .375rem; font-size: .9rem;
}
.catalog-filters__actions { display: flex; align-items: center; gap: .75rem; margin-top: .25rem; }
.catalog-filters__apply {
  padding: .45rem .9rem; background: var(--c-primary); color: var(--c-surface); border: none;
  border-radius: .375rem; cursor: pointer; font-size: .9rem;
}
.catalog-filters__apply:hover { background: var(--c-primary-hover); }
.catalog-filters__clear { font-size: .85rem; color: var(--c-text-subtle); }

/* Grilla de productos */
.product-grid__count { color: var(--c-text-subtle); font-size: .9rem; margin: 0 0 1rem; }
.product-grid__items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem;
}
.product-grid__empty {
  background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: .625rem;
  padding: 2.5rem 1.5rem; text-align: center; color: var(--c-text-subtle);
}

/* Tarjeta de producto */
.product-card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: .625rem; overflow: hidden;
  display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--c-primary-border); box-shadow: var(--shadow-md); }
.product-card__link { display: block; color: inherit; }
.product-card__img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--c-surface-sunken);
}
.product-card__img--placeholder {
  display: flex; align-items: center; justify-content: center; color: var(--c-text-faint); font-size: .8rem;
}
.product-card__name { margin: .625rem .75rem .25rem; font-size: .95rem; line-height: 1.3; }
.product-card__brand { margin: 0 .75rem; font-size: .8rem; color: var(--c-text-faint); }
.product-card__price {
  margin: .375rem .75rem .875rem; font-weight: 700; color: var(--c-ink); font-size: 1.05rem;
}

/* Paginación */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.75rem;
}
.pager__btn {
  padding: .4rem .85rem; border: 1px solid var(--c-border-strong); border-radius: .375rem;
  color: var(--c-text); background: var(--c-surface);
}
.pager__btn:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pager__btn--disabled { color: var(--c-border-strong); cursor: not-allowed; }
.pager__btn--disabled:hover { border-color: var(--c-border-strong); color: var(--c-border-strong); }
.pager__status { font-size: .9rem; color: var(--c-text-subtle); }

/* Ficha de producto */
.product-detail__breadcrumb { font-size: .85rem; color: var(--c-text-subtle); display: flex; gap: .375rem; flex-wrap: wrap; }
.product-detail__breadcrumb a { color: var(--c-text-subtle); }
.product-detail__breadcrumb a:hover { color: var(--c-primary); }
.product-detail__layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1rem;
}
@media (max-width: 720px) { .product-detail__layout { grid-template-columns: 1fr; } }
.product-gallery__main {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: .625rem;
  background: var(--c-surface-sunken); border: 1px solid var(--c-border);
}
.product-gallery__main--placeholder {
  display: flex; align-items: center; justify-content: center; color: var(--c-text-faint);
}
.product-gallery__thumbs { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.product-gallery__thumb {
  width: 64px; height: 64px; object-fit: cover; border-radius: .375rem;
  border: 1px solid var(--c-border);
}
.product-detail__title { margin: 0 0 .25rem; }
.product-detail__brand { margin: 0 0 1rem; color: var(--c-text-subtle); }
.product-detail__price { font-size: 1.6rem; font-weight: 700; color: var(--c-ink); margin: .5rem 0; }
.product-detail__availability { font-weight: 600; margin: .25rem 0 1rem; color: var(--c-text-subtle); }
.product-detail__availability.is-in-stock { color: var(--c-success); }
.product-detail__availability.is-out-of-stock { color: var(--c-danger); }
.variant-group { margin-bottom: 1rem; }
.variant-group__label { display: block; font-size: .8rem; font-weight: 600; color: var(--c-text-muted); margin-bottom: .375rem; }
.variant-group__options { display: flex; gap: .5rem; flex-wrap: wrap; }
.variant-option {
  padding: .4rem .8rem; border: 1px solid var(--c-border-strong); border-radius: .375rem;
  background: var(--c-surface); cursor: pointer; font-size: .9rem; text-transform: capitalize;
}
.variant-option:hover:not(:disabled) { border-color: var(--c-primary); }
.variant-option.is-selected { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-surface); }
.variant-option:disabled {
  opacity: .4; cursor: not-allowed; text-decoration: line-through;
}
/* P6.2.C — swatch de color (dimensión kind=swatch con hex). El color de fondo
   lo setea Alpine por `:style` (CSP-safe). El borde de selección lo da
   `.is-selected`; acá solo la forma del chip. */
.variant-option--swatch {
  width: 2rem; height: 2rem; padding: 0; border-radius: 50%;
  text-indent: -9999px; overflow: hidden;
}
.variant-option--swatch.is-selected {
  outline: 2px solid var(--c-primary); outline-offset: 2px;
}
.product-detail__cart { margin-top: 1.25rem; display: flex; align-items: center; gap: .75rem; }
.add-to-cart {
  padding: .7rem 1.5rem; background: var(--c-ink); color: var(--c-surface); border: none;
  border-radius: .5rem; font-weight: 600; font-size: 1rem; cursor: pointer;
}
.add-to-cart:hover { background: var(--c-text); }
.add-to-cart__hint { color: var(--c-text-faint); font-size: .8rem; }
.product-detail__description { margin-top: 1.75rem; }
.product-detail__description h2 { font-size: 1.05rem; }
.product-detail__attributes { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.product-detail__attribute {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: .375rem; padding: .375rem .625rem;
}
.product-detail__attribute dt { font-size: .7rem; color: var(--c-text-faint); text-transform: uppercase; }
.product-detail__attribute dd { margin: 0; font-weight: 600; }
.related-products { margin-top: 3rem; }
.related-products h2 { font-size: 1.15rem; }

/* 404 amable */
.not-found { text-align: center; padding: 3rem 1.5rem; }
.not-found__code { font-size: 4rem; font-weight: 800; color: var(--c-border); margin: 0; }
.not-found h1 { margin: .25rem 0; }
.not-found__msg { color: var(--c-text-subtle); }
.not-found__actions { margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: center; }
.not-found__btn {
  padding: .6rem 1.4rem; background: var(--c-primary); color: var(--c-surface); border-radius: .5rem; font-weight: 600;
}
.not-found__btn:hover { background: var(--c-primary-hover); }
.not-found__link { padding: .6rem 0; color: var(--c-text-subtle); }

/* ─────────────────────────── Carrito (Sprint 4) ─────────────────────────── */

/* Agregar al carrito — ficha de producto */
.product-detail__cart { flex-wrap: wrap; }
.add-to-cart[disabled] { background: var(--c-border-strong); cursor: not-allowed; }
.add-to-cart[disabled]:hover { background: var(--c-border-strong); }
.add-to-cart__qty-label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--c-text-subtle); }
.add-to-cart__qty { width: 4.5rem; padding: .4rem .5rem; border: 1px solid var(--c-border-strong); border-radius: .375rem; }
.add-to-cart__feedback { font-size: .9rem; font-weight: 600; color: var(--c-success); }
.add-to-cart__feedback--error { color: var(--c-danger); }

/* Página del carrito */
.cart-page { max-width: 60rem; margin: 0 auto; padding: 1.5rem; }
.cart-page__header h1 { margin: 0 0 1.25rem; }
.cart-summary { display: flex; flex-direction: column; gap: 1rem; }
.cart-lines { display: flex; flex-direction: column; gap: .75rem; }

.cart-line {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto 5rem auto auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: .5rem;
}
.cart-line--unavailable { opacity: .7; background: var(--c-bg); }
.cart-line__img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .375rem; }
.cart-line__img--placeholder { background: var(--c-surface-sunken); }
.cart-line__info { display: flex; flex-direction: column; gap: .15rem; }
.cart-line__name { font-weight: 600; color: var(--c-ink); }
.cart-line__variant { font-size: .8rem; color: var(--c-text-subtle); }
.cart-line__unavailable { margin: .15rem 0 0; font-size: .8rem; color: var(--c-danger); font-weight: 600; }
.cart-line__unit-price { color: var(--c-text-subtle); font-size: .9rem; }
.cart-line__qty { width: 4rem; padding: .4rem .5rem; border: 1px solid var(--c-border-strong); border-radius: .375rem; }
.cart-line__subtotal { font-weight: 700; }
.cart-line__remove {
  padding: .4rem .75rem; background: var(--c-surface); color: var(--c-danger);
  border: 1px solid var(--c-danger-border); border-radius: .375rem; cursor: pointer;
}
.cart-line__remove:hover { background: var(--c-danger-soft); }

.cart-summary__footer {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; padding: 1rem .75rem 0; border-top: 1px solid var(--c-border);
}
.cart-summary__total { display: flex; gap: .75rem; align-items: baseline; font-size: 1.1rem; }
.cart-summary__total strong { font-size: 1.35rem; }
.checkout-button {
  padding: .7rem 1.5rem; background: var(--c-primary); color: var(--c-surface);
  border: none; border-radius: .5rem; font-weight: 600; cursor: pointer;
}
.checkout-button[disabled] { background: var(--c-primary-disabled); cursor: not-allowed; }

.cart-empty { text-align: center; padding: 3rem 1.5rem; color: var(--c-text-subtle); }
.cart-empty__msg { font-size: 1.1rem; margin-bottom: 1rem; }
.cart-empty__link {
  display: inline-block; padding: .6rem 1.4rem;
  background: var(--c-primary); color: var(--c-surface); border-radius: .5rem; font-weight: 600;
}
.cart-empty__link:hover { background: var(--c-primary-hover); }

@media (max-width: 640px) {
  .cart-line { grid-template-columns: 3.5rem 1fr auto; grid-auto-rows: auto; }
  .cart-line__img { width: 3.5rem; height: 3.5rem; }
}

/* ───────────────────────── Checkout — Sprint 5 ───────────────────────── */

.cart-notice {
  margin: 0 0 1.25rem; padding: .75rem 1rem;
  background: var(--c-warning-bg); border: 1px solid var(--c-warning-border); border-radius: .5rem;
  color: var(--c-warning-fg);
}

.checkout__header h1 { margin-top: 0; }
.checkout__error {
  margin: 0 0 1.25rem; padding: .75rem 1rem;
  background: var(--c-danger-soft); border: 1px solid var(--c-danger-border); border-radius: .5rem;
  color: var(--c-danger);
}
/* Indicador de pasos (stepper) — el número lo aporta un counter CSS, no el texto */
.checkout__steps {
  list-style: none; counter-reset: step;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin: 0 0 1.5rem; padding: 0;
}
.checkout__step {
  counter-increment: step;
  display: flex; align-items: center; gap: .5rem;
  color: var(--c-text-subtle); font-size: .95rem;
}
.checkout__step:not(:last-child)::after {
  content: ""; width: 1.5rem; height: 1px; background: var(--c-border); margin-left: .5rem;
}
.checkout__step::before {
  content: counter(step);
  display: grid; place-items: center; flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--c-surface-sunken); color: var(--c-text-subtle);
  border: 1px solid var(--c-border); font-size: .85rem; font-weight: 700;
}
.checkout__step.is-active { color: var(--c-primary); font-weight: 600; }
.checkout__step.is-active::before {
  background: var(--c-primary); color: var(--c-surface); border-color: var(--c-primary);
}
.checkout__layout {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem; align-items: start;
}
.checkout__summary, .checkout__form {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: .5rem; padding: 1.25rem;
}
.checkout__summary h2, .checkout__form legend { font-size: 1rem; }
.checkout__lines { list-style: none; margin: .75rem 0; padding: 0; }
.checkout__line {
  display: flex; gap: .5rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--c-surface-sunken);
}
.checkout__line-name { font-weight: 600; }
.checkout__line-variant {
  font-size: .8rem; color: var(--c-text-subtle);
  padding: .1rem .4rem; background: var(--c-surface-sunken); border-radius: .25rem;
}
.checkout__line-qty { color: var(--c-text-subtle); }
.checkout__line-total { margin-left: auto; font-variant-numeric: tabular-nums; }

.checkout__totals { margin: 1rem 0 0; }
.checkout__total-row, .order-success__total-row {
  display: flex; justify-content: space-between; padding: .35rem 0;
}
.checkout__total-row dt, .checkout__total-row dd,
.order-success__total-row dt, .order-success__total-row dd { margin: 0; }
.checkout__total-row--grand, .order-success__total-row--grand {
  border-top: 1px solid var(--c-border); margin-top: .35rem; padding-top: .6rem;
  font-size: 1.2rem; font-weight: 700;
}

.checkout__fieldset {
  border: 1px solid var(--c-border); border-radius: .5rem; padding: 1rem; margin-bottom: 1rem;
}
.checkout__fieldset legend { font-weight: 600; padding: 0 .4rem; }
.checkout__field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .75rem; }
.checkout__field span { font-size: .85rem; color: var(--c-text); }
.checkout__field input {
  padding: .5rem .625rem; border: 1px solid var(--c-border-strong); border-radius: .375rem; font-size: .95rem;
}
.checkout__shipping-option {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .5rem; border-bottom: 1px solid var(--c-surface-sunken); cursor: pointer;
}
.checkout__shipping-option:last-child { border-bottom: none; }
.checkout__shipping-cost { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--c-text); }
.checkout__payment-info { margin: 0; color: var(--c-text); line-height: 1.5; }
.checkout__submit {
  width: 100%; padding: .8rem 1.5rem; background: var(--c-primary); color: var(--c-surface);
  border: none; border-radius: .5rem; font-weight: 600; font-size: 1rem; cursor: pointer;
}
.checkout__submit:hover { background: var(--c-primary-hover); }
.checkout__submit:disabled { background: var(--c-primary-disabled); cursor: not-allowed; }

/* Confirmación */
.order-success { max-width: 640px; margin: 0 auto; }
.order-success__header { text-align: center; margin-bottom: 1.5rem; }
.order-success__header h1 { margin-bottom: .5rem; }
.order-success__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--c-success-soft); color: var(--c-success-fg); padding: .15rem .5rem; border-radius: .375rem;
}
.order-success__panel {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: .5rem;
  padding: 1.25rem; margin-bottom: 1rem;
}
.order-success__panel h2 { margin-top: 0; font-size: 1.05rem; }
.order-success__lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.order-success__line {
  display: flex; gap: .5rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--c-surface-sunken);
}
.order-success__line-name { font-weight: 600; }
.order-success__line-variant {
  font-size: .8rem; color: var(--c-text-subtle);
  padding: .1rem .4rem; background: var(--c-surface-sunken); border-radius: .25rem;
}
.order-success__line-qty { color: var(--c-text-subtle); }
.order-success__line-total { margin-left: auto; font-variant-numeric: tabular-nums; }
.order-success__address { font-style: normal; color: var(--c-text); line-height: 1.6; }
.order-success__continue {
  display: inline-block; padding: .7rem 1.5rem;
  background: var(--c-primary); color: var(--c-surface); border-radius: .5rem; font-weight: 600;
}
.order-success__continue:hover { background: var(--c-primary-hover); }

@media (max-width: 720px) {
  .checkout__layout { grid-template-columns: 1fr; }
}

/* ============================================================
   Sprint 6 — Mi cuenta / Mis compras
   ============================================================ */

/* ============================================================
   Área de cuenta — "Mi perfil" + sidebar (renovación storefront)
   Layout sidebar + main compartido por /account, /account/orders,
   /account/orders/:code y /account/wishlist.
   ============================================================ */
.account-layout {
  display: grid;
  grid-template-columns: 267px minmax(0, 1fr);
  gap: 28px;
  max-width: 1320px;
  margin: 0 auto;
  align-items: start;
}
.account-main { min-width: 0; }

/* El área de cuenta usa la misma línea de 1320 px del header/footer. El main
   global es más angosto porque las páginas históricas trabajan a 1024 px. */
.storefront[data-page^="account"] .storefront__main {
  max-width: 1368px;
  margin-top: 29px;
  margin-bottom: 22px;
  padding-right: 24px;
  padding-left: 24px;
}
.storefront[data-page^="account"] .storefront__footer { margin-top: 0; }
.storefront[data-page="account"] .account-main {
  min-height: 513px;
  padding: 23px 38px 22px;
  border: 1px solid #edf0f3;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 5px rgba(15, 23, 42, .035);
}

/* — Sidebar — */
.account-sidebar {
  min-height: 338px;
  background: var(--c-surface);
  border: 1px solid #edf0f3;
  border-radius: 7px;
  padding: 25px 0 26px;
  box-shadow: 0 1px 5px rgba(15, 23, 42, .035);
  position: sticky; top: 24px;
}
.account-sidebar__title {
  margin: 0 0 21px; padding: 0 28px;
  font-size: 18px; font-weight: 700; color: #0d1521;
}
.account-sidebar__nav { display: flex; flex-direction: column; gap: 0; padding-right: 20px; }
.account-sidebar__item {
  display: flex; align-items: center; gap: .75rem;
  min-height: 56px; padding: 0 25px; border-radius: 0 7px 7px 0;
  color: #182233; font-weight: 500; font-size: 14px;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
}
.account-sidebar__item:hover { background: var(--c-surface-sunken); text-decoration: none; }
.account-sidebar__item.is-active {
  background: linear-gradient(90deg, rgba(43, 156, 240, .12), rgba(43, 156, 240, .07));
  color: #147ee2;
  border-left-color: var(--header-accent);
  font-weight: 700;
}
.account-sidebar__icon {
  flex: 0 0 auto; width: 25px; height: 25px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.account-sidebar__item--disabled { color: #667281; cursor: default; }
.account-sidebar__item--disabled:hover { background: transparent; }

/* — Main — */
.account-main__title {
  margin: 0 0 22px; font-size: 27px; line-height: 1.2; font-weight: 700;
  color: #0d1521; letter-spacing: -.025em;
}
.account-breadcrumb { margin-bottom: .75rem; font-size: .85rem; }
.account-breadcrumb a { color: var(--c-text-subtle); }
.account-breadcrumb a:hover { color: var(--header-accent); }

/* Cabecera de perfil (avatar + nombre + email) */
.account-profile { display: flex; align-items: center; gap: 27px; margin-bottom: 19px; }
.account-profile__avatar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: #eef5ff; color: #1689f2;
}
.account-profile__avatar svg {
  width: 40px; height: 40px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.account-profile__name { margin: 0; font-size: 25px; line-height: 1.25; font-weight: 700; color: #0d1521; }
.account-profile__email { margin: 9px 0 0; color: #687588; font-size: 16px; }

/* Grilla de cards (Datos personales | Correo + Seguridad) */
.account-cards {
  display: grid; grid-template-columns: 1.06fr 1fr; gap: 14px; align-items: start;
  margin-right: -15px; margin-left: -17px;
}
.account-cards__col { display: flex; flex-direction: column; gap: 14px; }
.account-cards__col .account-card:first-child { min-height: 135px; }
.account-card {
  background: var(--c-surface); border: 1px solid #e4e9ef;
  border-radius: 7px; padding: 20px; box-shadow: 0 1px 4px rgba(15, 23, 42, .025);
}
.account-card__head { display: flex; align-items: center; gap: 13px; min-height: 24px; margin-bottom: 13px; }
.account-card__head h2 { margin: 0; font-size: 14px; font-weight: 700; color: #0d1521; }
.account-card__icon {
  width: 22px; height: 22px; flex: 0 0 auto;
  fill: none; stroke: #1689f2; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.account-card__action { margin-left: auto; font-size: 12px; font-weight: 600; color: #147ee2; }
.account-card__action:hover { text-decoration: underline; }

.account-card__rows { margin: 0; }
.account-card__row {
  display: grid; grid-template-columns: minmax(130px, 43%) minmax(0, 1fr); gap: 10px;
  min-height: 32px; align-items: center; padding: 5px 0; border-bottom: 1px solid #edf0f3;
}
.account-card__row:last-child { border-bottom: none; }
.account-card__row dt { margin: 0; color: #657181; font-size: 13px; }
.account-card__row dd { margin: 0; color: #172132; font-size: 13px; font-weight: 500; text-align: left; overflow-wrap: anywhere; }
.account-card__empty { color: #98a2af; font-weight: 400; font-style: italic; }

.account-card__body { min-width: 0; }
.account-card__body--action { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; }
.account-card__value { margin: 0; color: #172132; font-size: 13px; word-break: break-word; }
.account-card__value--muted { color: var(--c-text-subtle); font-weight: 400; }
.account-card__field-label { display: inline-block; margin-right: 27px; font-size: 13px; color: #374151; }
.account-card__mask { letter-spacing: .15em; color: var(--c-text); }
.account-card__btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-height: 39px; padding: 7px 16px;
  border: 1px solid #1689f2; border-radius: 6px;
  background: var(--c-surface); color: #147ee2;
  font-weight: 600; font-size: 12px; cursor: pointer;
}
.account-card__btn:hover:not(:disabled) { background: rgba(43, 156, 240, .08); text-decoration: none; }
.account-card__btn--pending:disabled { opacity: 1; cursor: not-allowed; }

/* Cerrar sesión */
.account-logout { margin: 10px -15px 0 -17px; text-align: right; }
.account-logout button {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 5px 2px; background: none; border: none; cursor: pointer;
  color: #5f6b7a; font-weight: 500; font-size: 13px;
}
.account-logout button:hover { color: var(--c-danger, #b91c1c); }
.account-logout svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Form de edición de perfil */
.account-form__field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.account-form__field label { font-size: .85rem; font-weight: 600; color: var(--c-text-muted); }
.account-form__field input {
  padding: .58rem .8rem; border: 1px solid var(--c-border-strong);
  border-radius: .45rem; font-size: .95rem; font-family: inherit; background: var(--c-surface);
}
.account-form__field input:focus {
  outline: none; border-color: var(--header-accent);
  box-shadow: 0 0 0 3px rgba(43, 156, 240, .15);
}
.account-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.account-form__actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.account-form__cancel { align-self: center; font-weight: 600; color: var(--c-text-subtle); }
.account-form__cancel:hover { color: var(--c-ink); }
.account-form__submit {
  padding: .58rem 1.4rem; border: none; border-radius: .5rem;
  background: var(--header-accent); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer;
}
.account-form__submit:hover { filter: brightness(.95); }

@media (max-width: 1120px) {
  .account-cards { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .account-layout { grid-template-columns: 1fr; }
  .account-sidebar { min-height: 0; position: static; }
  .account-sidebar__nav { flex-direction: row; flex-wrap: wrap; padding-right: 0; }
  .account-sidebar__title { margin-bottom: 14px; }
  .account-sidebar__item { flex: 1 1 180px; border-left: none; border-bottom: 3px solid transparent; border-radius: 6px; }
  .account-sidebar__item.is-active { border-left: none; border-bottom-color: var(--header-accent); }
  .account-form__grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .storefront[data-page^="account"] .storefront__main { margin-top: 14px; padding-right: 14px; padding-left: 14px; }
  .storefront[data-page="account"] .account-main { min-height: 0; padding: 22px 18px 18px; }
  .account-sidebar { padding-top: 20px; padding-bottom: 18px; }
  .account-sidebar__title { padding: 0 20px; }
  .account-sidebar__item { flex-basis: 50%; min-width: 0; min-height: 50px; padding: 0 17px; }
  .account-main__title { font-size: 24px; }
  .account-profile { gap: 17px; }
  .account-profile__avatar { width: 70px; height: 70px; }
  .account-profile__name { font-size: 20px; }
  .account-profile__email { margin-top: 5px; font-size: 13px; overflow-wrap: anywhere; }
  .account-cards { margin-right: 0; margin-left: 0; }
  .account-logout { margin-right: 0; margin-left: 0; }
  .account-card__body--action { align-items: flex-start; flex-direction: column; gap: 13px; }
  .account-card__btn { width: 100%; }
  .account-card__field-label { margin-right: 15px; }
}

/* Badge de estado — compartido por listado y detalle */
.order-status {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; background: var(--c-surface-sunken); color: var(--c-text);
}
.order-status--pending   { background: var(--c-warning-bg); color: var(--c-warning-fg); }
.order-status--preparing { background: var(--c-info-bg); color: var(--c-info-fg); }
.order-status--shipped   { background: var(--c-accent-bg); color: var(--c-accent-fg); }
.order-status--delivered { background: var(--c-success-bg); color: var(--c-success-fg); }
.order-status--cancelled { background: var(--c-danger-bg); color: var(--c-danger-hover); }

/* Listado de compras — cards (renovación storefront, armonizado a .account-card) */
.orders-page { min-width: 0; }
.orders-page__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.orders-page__head .account-main__title { margin: 0; }
.orders-page__count { color: #6b7280; font-size: 14px; }

.orders-list { display: flex; flex-direction: column; gap: 14px; }
.orders-card {
  background: var(--c-surface); border: 1px solid #e4e9ef;
  border-radius: 7px; box-shadow: 0 1px 4px rgba(15, 23, 42, .025); overflow: hidden;
}
.orders-card__date {
  padding: 13px 20px; border-bottom: 1px solid #eef1f5;
  font-size: 13px; font-weight: 600; color: #374151;
}
.orders-card__body { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; }

.orders-card__media { flex: 0 0 auto; }
.orders-card__img {
  width: 64px; height: 64px; object-fit: contain;
  border: 1px solid #e4e9ef; border-radius: 6px; background: #fff;
}
.orders-card__img--placeholder { display: grid; place-items: center; color: #c2c9d4; }
.orders-card__img--placeholder svg {
  width: 30px; height: 30px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.orders-card__info { flex: 1 1 auto; min-width: 0; }
.orders-card__status { margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--c-text-subtle); }
.orders-card__status--delivered { color: #15803d; }
.orders-card__status--shipped, .orders-card__status--preparing { color: #1e40af; }
.orders-card__status--pending { color: #92400e; }
.orders-card__status--cancelled { color: #b91c1c; }
.orders-card__headline { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #172132; }
.orders-card__product { margin: 0; font-size: 13px; color: #6b7280; overflow-wrap: anywhere; }
.orders-card__variant { margin: 2px 0 0; font-size: 12.5px; color: #98a2af; }
.orders-card__more { margin: 4px 0 0; font-size: 12.5px; color: #6b7280; }

.orders-card__actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.orders-card__btn {
  display: inline-block; padding: 9px 18px; border-radius: 6px;
  background: var(--header-accent); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.orders-card__btn:hover { filter: brightness(.96); text-decoration: none; }
.orders-card__total { margin: 0; font-size: 13px; color: #687588; white-space: nowrap; }
.orders-card__total strong { color: #172132; font-weight: 600; }

/* Detalle de orden */
[x-cloak] { display: none !important; }

.orders-empty {
  background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: .5rem;
  padding: 2.5rem 1.5rem; text-align: center; color: var(--c-text-subtle);
}
.orders-empty__link {
  display: inline-block; margin-top: .75rem; padding: .6rem 1.25rem;
  background: var(--c-primary); color: var(--c-surface); border-radius: .5rem; font-weight: 600;
}

.order-detail { max-width: none; margin: 0; color: #172132; }
.order-detail__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-bottom: 18px;
}
.order-detail__heading { flex: 1 1 auto; min-width: 0; }
.order-detail__title-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; min-width: 0;
}
.order-detail__header h1 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 0; color: #142033; font-size: 22px; line-height: 1.15;
  font-weight: 800; letter-spacing: 0;
}
.order-detail__header h1 [data-testid="order-detail-code"] { font-family: var(--font-mono); }
.order-detail__back {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  margin-top: 9px; color: #1689f2; font-size: 14px; font-weight: 700;
  white-space: nowrap;
}
.order-detail__back:hover { color: #0d74d6; text-decoration: none; }
.order-detail__meta {
  display: flex; align-items: center; gap: 17px; flex-wrap: wrap;
  margin: 15px 0 0; color: #667281; font-size: 14px;
}
.order-detail__meta-item { display: inline-flex; align-items: center; gap: 7px; }
.order-detail__meta svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.order-detail__error {
  margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--c-danger-border);
  border-radius: 8px; background: var(--c-danger-soft); color: var(--c-danger);
  font-size: 14px; font-weight: 700;
}
.order-detail__panel-icon {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  background: #edf6ff; color: #1689f2;
}
.order-detail__panel-icon svg {
  width: 25px; height: 25px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.order-detail__content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas:
    "main side"
    "delivery delivery";
  gap: 20px;
  align-items: stretch;
}
.order-detail__main-card { grid-area: main; }
.order-detail__side-stack {
  grid-area: side; display: flex; flex-direction: column; gap: 20px;
  height: 100%;
}
.order-detail__shipping-payment {
  grid-area: delivery; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.order-detail__panel {
  min-width: 0; background: #fff; border: 1px solid #dfe5ec; border-radius: 8px;
  padding: 20px; box-shadow: 0 1px 5px rgba(15, 23, 42, .025);
}
.order-detail__tracking { flex: 1 1 auto; }
.order-detail__panel h2 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 17px; color: #172132; font-size: 16px; line-height: 1.3;
  font-weight: 800; letter-spacing: 0;
}
.order-detail__panel-icon { width: 36px; height: 36px; border-radius: 8px; }
.order-detail__panel-icon svg { width: 21px; height: 21px; }
.order-detail__table-wrap { overflow-x: auto; margin: 0 -2px 15px; }
.order-detail__items {
  width: 100%; min-width: 590px; border-collapse: collapse; border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.order-detail__items th,
.order-detail__items td {
  padding: 10px 0; text-align: left; border-bottom: 1px solid #edf0f3;
}
.order-detail__items th {
  color: #647086; font-size: 12px; font-weight: 700;
}
.order-detail__items th:not(:first-child),
.order-detail__items td:not(:first-child) {
  padding-left: 18px; text-align: right; white-space: nowrap;
}
.order-detail__product-line {
  display: flex; align-items: center; gap: 14px; min-width: 0;
}
.order-detail__product-media {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 76px; height: 56px; border: 1px solid #dfe5ec; border-radius: 7px;
  background: #fff; color: #b9c2ce; overflow: hidden;
}
.order-detail__product-media img {
  display: block; width: 100%; height: 100%; object-fit: contain;
}
.order-detail__product-media svg {
  width: 28px; height: 28px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.order-detail__product-copy { display: block; min-width: 0; }
.order-detail__item-name {
  display: block; color: #172132; font-size: 14px; font-weight: 800;
  overflow-wrap: anywhere;
}
a.order-detail__item-name:hover { color: #1689f2; text-decoration: none; }
.order-detail__variants {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px;
}
.order-detail__item-variant {
  display: inline-flex; align-items: center; min-height: 22px;
  padding: 2px 7px; border-radius: 999px; background: #f2f5f8;
  color: #687588; font-size: 12px; font-weight: 700;
}
.order-detail__totals {
  margin: 11px 0 0; padding-top: 4px;
  border-top: 1px solid #edf0f3;
}
.order-detail__total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 7px 0; color: #4b5563; font-size: 14px;
}
.order-detail__total-row dt,
.order-detail__total-row dd { margin: 0; }
.order-detail__total-row dd { color: #172132; font-weight: 700; }
.order-detail__total-row--grand {
  margin-top: 4px; padding-top: 12px; border-top: 1px solid #dfe5ec;
  color: #172132; font-size: 18px; font-weight: 800;
}
.order-detail__panel-value {
  margin: 0 0 9px; color: #172132; font-size: 15px; line-height: 1.45;
}
.order-detail__address,
.order-detail__side-note {
  margin: 0; color: #667281; font-size: 14px; line-height: 1.55;
}
.order-detail__address { font-style: normal; }
.order-detail__side-note + .order-detail__side-note { margin-top: 8px; }
.order-detail__side-section + .order-detail__side-section {
  margin-top: 18px; padding-top: 18px; border-top: 1px solid #edf0f3;
}
.order-detail__shipping-payment .order-detail__side-section + .order-detail__side-section {
  margin-top: 0; padding-top: 0; padding-left: 20px;
  border-top: none; border-left: 1px solid #edf0f3;
}
.order-detail__tracking-steps { list-style: none; margin: 0; padding: 0; }
.order-detail__tracking-step {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px; position: relative; min-height: 43px; color: #687588;
}
.order-detail__tracking-step:not(:last-child)::before {
  content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px;
  width: 2px; background: #dbeafe;
}
.order-detail__tracking-marker {
  position: relative; z-index: 1; width: 16px; height: 16px; margin-top: 2px;
  border: 2px solid #cfe2ff; border-radius: 50%; background: #fff;
}
.order-detail__tracking-step--done:not(:last-child)::before {
  background: #1689f2;
}
.order-detail__tracking-step--done .order-detail__tracking-marker {
  border-color: #1689f2; background: #1689f2;
}
.order-detail__tracking-step--done .order-detail__tracking-marker::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 5px; height: 8px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.order-detail__tracking-step--current .order-detail__tracking-marker {
  border-color: #1689f2; background: #fff; box-shadow: 0 0 0 4px #e8f4ff;
}
.order-detail__tracking-step--cancelled .order-detail__tracking-marker {
  border-color: #cbd5e1; background: #f1f5f9;
}
.order-detail__tracking-step--done,
.order-detail__tracking-step--current { color: #172132; }
.order-detail__tracking-step--current .order-detail__tracking-label { font-weight: 800; }
.order-detail__tracking-step--cancelled { color: #8b95a1; text-decoration: line-through; }
.order-detail__tracking-copy { display: flex; flex-direction: column; gap: 1px; padding-bottom: 10px; }
.order-detail__tracking-label { font-size: 14px; font-weight: 700; }
.order-detail__tracking-date,
.order-detail__history-date {
  color: #687588; font-size: 13px; font-weight: 500;
}
.order-detail__tracking-cancelled {
  margin: 9px 0 0; color: var(--c-danger); font-size: 14px; font-weight: 700;
}
.order-detail__tracking-code {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 7px;
  background: #f3f8ff; color: #1e3a8a; font-size: 13px;
}
.order-detail__cancel-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 15px; border: 1px solid var(--c-danger-border);
  border-radius: 7px; background: #fff; color: var(--c-danger);
  font-size: 13px; font-weight: 800;
}
.order-detail__cancel-btn:hover { background: var(--c-danger-soft); }
.order-detail__cancel {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  padding: 18px;
}
.order-detail__cancel-backdrop {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .46);
}
.order-detail__cancel-form {
  position: relative; z-index: 1; width: min(100%, 430px);
  padding: 22px; border: 1px solid #dfe5ec; border-radius: 8px;
  background: #fff; box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}
.order-detail__cancel-form h2 {
  margin: 0 0 9px; color: #172132; font-size: 20px; line-height: 1.25;
}
.order-detail__cancel-warn {
  margin: 0; color: #4b5563; font-size: 14px; line-height: 1.55;
}
.order-detail__cancel-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
}
.order-detail__cancel-abort,
.order-detail__cancel-confirm {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 800;
}
.order-detail__cancel-abort {
  border: 1px solid #d1d8e0; background: #fff; color: #374151;
}
.order-detail__cancel-confirm {
  border: 1px solid var(--c-danger); background: var(--c-danger); color: #fff;
}
.order-detail__cancel-abort:hover { background: #f8fafc; }
.order-detail__cancel-confirm:hover { background: var(--c-danger-hover); }

@media (max-width: 1120px) {
  .order-detail__content-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "side"
      "delivery";
  }
  .order-detail__side-stack { display: flex; }
  .order-detail__shipping-payment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .order-detail__header { flex-direction: column; align-items: stretch; gap: 14px; }
  .order-detail__title-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .order-detail__header h1 { font-size: 28px; }
  .order-detail__back { margin-top: 0; }
  .order-detail__cancel-btn { width: 100%; }
  .order-detail__shipping-payment { grid-template-columns: 1fr; }
  .order-detail__shipping-payment .order-detail__side-section + .order-detail__side-section {
    margin-top: 18px; padding-top: 18px; padding-left: 0;
    border-top: 1px solid #edf0f3; border-left: none;
  }
  .order-detail__panel { padding: 16px; }
  .order-detail__panel h2 { margin-bottom: 14px; }
  .order-detail__table-wrap { overflow: visible; margin-bottom: 12px; }
  .order-detail__items { display: block; min-width: 0; }
  .order-detail__items thead { display: none; }
  .order-detail__items tbody,
  .order-detail__items tr,
  .order-detail__items td { display: block; width: 100%; }
  .order-detail__items tr {
    padding: 10px 0; border-bottom: 1px solid #edf0f3;
  }
  .order-detail__items td,
  .order-detail__items td:not(:first-child) {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 6px 0; border-bottom: none; text-align: right;
    white-space: normal;
  }
  .order-detail__items td:first-child {
    display: block; padding-top: 0; padding-bottom: 10px; text-align: left;
  }
  .order-detail__items td:not(:first-child)::before {
    content: attr(data-label); color: #647086; font-size: 12px;
    font-weight: 700; text-align: left;
  }
  .order-detail__product-media { width: 66px; height: 52px; }
  .order-detail__total-row { gap: 12px; }
  .order-detail__cancel-actions { flex-direction: column-reverse; }
  .order-detail__cancel-abort,
  .order-detail__cancel-confirm { width: 100%; }
}

/* Acciones de la confirmación de compra */
.order-success__actions {
  display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center;
}
.order-success__orders {
  display: inline-block; padding: .7rem 1.5rem;
  background: var(--c-surface); color: var(--c-primary); border: 1px solid var(--c-primary);
  border-radius: .5rem; font-weight: 600;
}
.order-success__orders:hover { background: var(--c-primary-soft); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
  /* La card de compra envuelve: imagen + info arriba, acciones full-width abajo. */
  .orders-card__body { flex-wrap: wrap; }
  .orders-card__actions {
    flex-basis: 100%; flex-direction: row-reverse;
    justify-content: space-between; align-items: center;
  }
  .orders-card__btn { flex: 0 0 auto; }
}

/* ============================================================
   Sprint U — pulido de UI/UX (WI-2 / WI-4 / WI-5 / WI-6)
   ============================================================ */

/* — V-1: feedback de stock insuficiente (rechazo + ofrecer el máximo) — */
.add-to-cart__feedback--rejected { color: var(--c-warning-fg); }
.add-to-cart__max-btn {
  margin-left: .4rem; padding: .15rem .6rem;
  background: var(--c-primary); color: var(--c-surface);
  border: none; border-radius: .375rem;
  font-size: .85rem; font-weight: 600; cursor: pointer;
}
.add-to-cart__max-btn:hover { background: var(--c-primary-hover); }
.cart-notice--cap {
  background: var(--c-warning-bg);
  border-color: var(--c-warning-border);
  color: var(--c-warning-fg);
}

/* — WI-6: estado vacío del carrito — */
.cart-empty__icon {
  font-size: 2.75rem;
  margin: 0 0 .25rem;
  line-height: 1;
}
.cart-empty__hint {
  margin: 0 0 1.25rem;
  font-size: .9rem;
  color: var(--c-text-faint);
}

/* — WI-6: estados vacíos de catálogo y "mis compras" — */
.product-grid__empty,
.orders-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.product-grid__empty .empty-state__icon,
.orders-empty .empty-state__icon {
  font-size: 2.75rem;
  line-height: 1;
  margin: 0;
}
.product-grid__empty p,
.orders-empty p {
  margin: 0;
}
.empty-state__hint {
  font-size: .9rem;
  color: var(--c-text-faint);
}
.product-grid__empty a:not(.empty-state__btn),
.orders-empty a:not(.empty-state__btn) {
  margin-top: .35rem;
}
.empty-state__btn {
  display: inline-block;
  margin-top: .5rem;
  padding: .6rem 1.4rem;
  background: var(--c-primary);
  color: var(--c-surface);
  border-radius: var(--r-lg);
  font-weight: 600;
}
.empty-state__btn:hover {
  background: var(--c-primary-hover);
  text-decoration: none;
}

/* Las tarjetas de auth usan el celeste del header (--header-accent), no el
   azul índigo global. Re-scopeamos la paleta primary localmente para que todos
   los `var(--c-primary*)` internos (botones, links, foco) hereden ese tono sin
   tocar el token global ni el resto del storefront/backoffice. */
.storefront-login,
.storefront-register,
.storefront-forgot,
.storefront-reset {
  --c-primary: #2b9cf0;
  --c-primary-hover: #168de2;
  --c-primary-soft: #e8f4fd;
}

/* — Login del storefront — tarjeta de acceso. Comparte campos y botón de
     submit con el registro; los detalles propios (toggle de contraseña, link
     de forgot, botón de Google bordeado) son login-only. — */
.storefront-login {
  max-width: 25rem;
  margin: 1.5rem auto;
  padding: 1.6rem 1.9rem 1.8rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 32px -16px rgba(17, 24, 39, .12);
  text-align: left;
}
.storefront-login h1 {
  margin: 0 0 1.25rem;
  color: var(--c-ink);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}
.storefront-login__error {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-border);
  border-radius: var(--r-lg);
  color: var(--c-danger);
  text-align: left;
}

/* — Campos y submit compartidos con el registro — */
.storefront-login__form,
.storefront-register__form {
  display: flex;
  flex-direction: column;
  gap: .95rem;
  text-align: left;
  margin: 0;
}
.storefront-login__field,
.storefront-register__field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.storefront-login__label,
.storefront-register__label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text);
}
.storefront-login__form input[type="email"],
.storefront-login__form input[type="text"],
.storefront-login__form input[type="password"],
.storefront-register__form input[type="email"],
.storefront-register__form input[type="text"],
.storefront-register__form input[type="password"] {
  width: 100%;
  padding: .58rem .8rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  font: inherit;
  font-size: .875rem;
  color: var(--c-ink-soft);
}
.storefront-login__form input::placeholder,
.storefront-register__form input::placeholder {
  color: var(--c-text-faint);
}
.storefront-login__form input:focus,
.storefront-register__form input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
  outline: none;
}
.storefront-register__hint {
  color: var(--c-text-subtle);
  font-size: .8rem;
}

/* Campo de contraseña con botón para mostrar/ocultar (toggle vía JS) */
.storefront-login__input-wrap {
  position: relative;
  display: flex;
}
.storefront-login__input-wrap input[type] {
  padding-right: 2.4rem;
}
.storefront-login__pw-toggle {
  position: absolute;
  top: 50%;
  right: .5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  background: none;
  border: 0;
  border-radius: var(--r-md);
  color: var(--c-text-faint);
  line-height: 0;
  cursor: pointer;
}
.storefront-login__pw-toggle:hover { color: var(--c-text-subtle); }
.storefront-login__pw-toggle.is-visible { color: var(--c-primary); }

.storefront-login__submit,
.storefront-register__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: .5rem;
  margin-bottom: 1rem;
  padding: .65rem 1rem;
  background: var(--c-primary);
  color: var(--c-surface);
  border: 0;
  border-radius: var(--r-lg);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.storefront-login__submit:hover,
.storefront-register__submit:hover {
  background: var(--c-primary-hover);
}
.storefront-login__submit svg,
.storefront-register__submit svg { flex: none; }

/* Link "olvidé contraseña" debajo del botón */
.storefront-login__forgot {
  margin: .95rem 0 0;
  text-align: center;
  font-size: .825rem;
}
.storefront-login__forgot a {
  color: var(--c-primary);
  font-weight: 600;
}

/* "¿No tenés cuenta?" al pie de la tarjeta */
.storefront-login__signup {
  margin: 1.05rem 0 0;
  text-align: center;
  font-size: .825rem;
  color: var(--c-text-subtle);
}
.storefront-login__signup a {
  color: var(--c-primary);
  font-weight: 600;
}

.storefront-register__alt {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: .825rem;
  color: var(--c-text-subtle);
}
.storefront-register__alt a {
  color: var(--c-primary);
  font-weight: 600;
}

.storefront-login__divider {
  margin: 1.1rem 0;
  color: var(--c-text-subtle);
  font-size: .825rem;
  text-align: center;
  position: relative;
}
.storefront-login__divider::before,
.storefront-login__divider::after {
  content: "";
  display: inline-block;
  width: 30%;
  border-top: 1px solid var(--c-border);
  vertical-align: middle;
  margin: 0 .5rem;
}

/* Botón de Google: blanco bordeado con el logo a color */
.storefront-login__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  margin: 0;
  padding: .64rem 1rem;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  font-size: .9rem;
  font-weight: 600;
}
.storefront-login__google:hover {
  background: var(--c-surface-sunken);
  text-decoration: none;
}
.storefront-login__google-icon { flex: none; }

.storefront-register {
  max-width: 25rem;
  margin: 1.5rem auto;
  padding: 1.6rem 1.9rem 1.8rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 32px -16px rgba(17, 24, 39, .12);
}
.storefront-register h1 {
  margin: 0 0 .3rem;
  color: var(--c-ink);
  font-size: 1.2rem;
  font-weight: 700;
}
.storefront-register > p {
  margin: 0 0 1rem;
  font-size: .85rem;
  color: var(--c-text-subtle);
}
.storefront-register__error {
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-border);
  border-radius: var(--r-lg);
  color: var(--c-danger);
}

.storefront-verify-result {
  max-width: 30rem;
  margin: 2rem auto;
  padding: 2rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  text-align: center;
}
.storefront-verify-result h1 {
  margin-top: 0;
  font-size: 1.4rem;
}
.storefront-verify-result__cta {
  margin-top: 1.25rem;
}
.storefront-verify-result__link {
  display: inline-block;
  padding: .55rem 1.25rem;
  background: var(--c-primary);
  color: var(--c-surface);
  border-radius: var(--r-lg);
  font-weight: 600;
}
.storefront-verify-result__link:hover {
  background: var(--c-primary-hover);
  text-decoration: none;
}
.storefront-verify-result__resend button {
  margin-top: 1.25rem;
  padding: .55rem 1.25rem;
  background: var(--c-primary);
  color: var(--c-surface);
  border: 0;
  border-radius: var(--r-lg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.storefront-verify-result__resend button:hover {
  background: var(--c-primary-hover);
}

/* Banner no bloqueante "Verificá tu email" en /account */
.storefront-account__unverified {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--c-warning-bg, #fff7ed);
  border: 1px solid var(--c-warning-border, #fdba74);
  border-radius: var(--r-lg);
}
.storefront-account__unverified-text {
  margin: 0;
  color: var(--c-text);
  flex: 1 1 16rem;
}
.storefront-account__unverified-form button {
  padding: .5rem 1rem;
  background: var(--c-primary);
  color: var(--c-surface);
  border: 0;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.storefront-account__unverified-form button:hover {
  background: var(--c-primary-hover);
}
.storefront-account__flash {
  margin: 0 0 1rem 0;
  padding: .75rem 1rem;
  border-radius: var(--r-md);
}
.storefront-account__flash--info {
  background: var(--c-info-bg, #eff6ff);
  border: 1px solid var(--c-info-border, #bfdbfe);
  color: var(--c-text);
}

/* — WI-5: ajustes responsive ~390px — */
@media (max-width: 480px) {
  .storefront__main { margin: 1.25rem auto; }
  .product-detail__price { font-size: 1.35rem; }
  .product-detail__cart { gap: .5rem; }
  .add-to-cart { flex: 1; }
  .order-success__actions { flex-direction: column; }
  .order-success__continue,
  .order-success__orders { text-align: center; }
  .cart-summary__footer { flex-direction: column; align-items: stretch; }
  .checkout-button { text-align: center; }
}

/* ───────────────────────── Wishlist / favoritos — Sprint 11 ─────────────── */

/* El badge del header se define junto al shell superior. */
.storefront__wishlist-icon { color: inherit; }
.storefront__wishlist-count { font-variant-numeric: tabular-nums; }

/* Corazón de favorito sobre la card / ficha. */
.product-card { position: relative; }
.wishlist-toggle {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; line-height: 1;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: 999px; cursor: pointer; color: var(--c-text-subtle);
  box-shadow: var(--shadow-sm);
}
.wishlist-toggle:hover { border-color: var(--c-danger); color: var(--c-danger); text-decoration: none; }
.wishlist-toggle.is-active { color: var(--c-danger); border-color: var(--c-danger); }
.wishlist-toggle__icon { font-size: 1.1rem; }

/* En la ficha el corazón va junto al título, sin posición absoluta. */
.product-detail__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.product-detail__title-row .wishlist-toggle { position: static; flex: 0 0 auto; }

/* Página de favoritos — "Mis favoritos" (renovación storefront).
   Todos los azules con #2b9cf0 (var(--header-accent)); estrellas siguen
   doradas (reusa product-card, consistente con catálogo/ficha). */
.wishlist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.wishlist-head .account-main__title { margin: 0 0 6px; }
.wishlist-head__subtitle { margin: 0; color: #687588; font-size: 15px; }
.wishlist-head__explore { flex: 0 0 auto; color: var(--header-accent); font-size: 14px; font-weight: 600; }
.wishlist-head__explore:hover { text-decoration: underline; }

.wishlist-panel {
  background: var(--c-surface); border: 1px solid #e4e9ef;
  border-radius: 12px; box-shadow: 0 1px 4px rgba(15, 23, 42, .025); padding: 22px;
}
.wishlist-panel__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.wishlist-panel__count { font-size: 14px; font-weight: 600; color: #374151; }

.wishlist-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wishlist-item { position: relative; display: flex; flex-direction: column; }

/* Corazón lleno arriba-derecha — QUITA de favoritos (#2b9cf0). */
.wishlist-item__heart {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--c-surface); border: 1px solid #e4e9ef; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12); cursor: pointer; padding: 0;
}
.wishlist-item__heart svg { width: 18px; height: 18px; fill: var(--header-accent); }
.wishlist-item__heart:hover { border-color: var(--header-accent); }

.wishlist-item__actions { display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: auto; }
.wishlist-item__add {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; background: var(--header-accent); color: #fff; border: none;
  border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.wishlist-item__add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wishlist-item__add:hover { filter: brightness(.96); text-decoration: none; }
.wishlist-item__add--out { background: var(--c-surface-sunken); color: var(--c-text-faint); cursor: not-allowed; }
.wishlist-item__add--out:hover { filter: none; }
.wishlist-item__view { flex: 0 0 auto; color: var(--header-accent); font-size: 13px; font-weight: 600; white-space: nowrap; }
.wishlist-item__view:hover { text-decoration: underline; }

/* Estado vacío — panel centrado con ilustración. */
.wishlist-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 56px 24px; }
.wishlist-empty__art { width: 130px; height: 130px; margin-bottom: 8px; }
.wishlist-empty__title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #0d1521; }
.wishlist-empty__text { margin: 0 0 22px; max-width: 30rem; color: #687588; font-size: 14.5px; line-height: 1.5; }
.wishlist-empty__cta {
  display: inline-block; padding: 11px 26px; background: var(--header-accent);
  color: #fff; border-radius: 7px; font-size: 14px; font-weight: 600;
}
.wishlist-empty__cta:hover { filter: brightness(.96); text-decoration: none; }
.wishlist-empty__explore { margin-top: 14px; color: var(--header-accent); font-size: 14px; font-weight: 600; }
.wishlist-empty__explore:hover { text-decoration: underline; }

@media (max-width: 900px) { .wishlist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wishlist-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Reviews y rating — Sprint 12
   ============================================================ */

/* Lectura accesible solo para lectores de pantalla. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Estrellas (color ámbar para llenas, gris para vacías). */
.rating-stars { color: #f5a623; letter-spacing: .05em; }

/* --- Resumen junto al título --- */
.product-detail__rating-link { text-decoration: none; color: inherit; display: inline-block; }
.rating-summary {
  display: inline-flex; align-items: baseline; gap: .4rem; margin: .35rem 0 .25rem;
  font-size: .95rem;
}
.rating-summary__stars { font-size: 1.05rem; }
.rating-summary__avg { font-weight: 700; color: var(--c-ink); }
.rating-summary__count { color: var(--c-text-muted); font-size: .85rem; }
.rating-summary__avg--empty { display: none; }
.rating-summary__count--empty { color: var(--c-text-faint); }

/* --- Rating en la card --- */
.product-card__rating {
  margin: .25rem 0 0; display: flex; align-items: center; gap: .35rem; font-size: .85rem;
}
.product-card__rating .rating-stars { font-size: .95rem; }
.product-card__rating-count { color: var(--c-text-muted); }
.product-card__rating-none { color: var(--c-text-faint); font-size: .8rem; }

/* --- Sección de reseñas --- */
.product-reviews { margin-top: 3rem; border-top: 1px solid var(--c-border); padding-top: 1.5rem; }
.product-reviews__heading { font-size: 1.25rem; margin-bottom: 1rem; }

.reviews-yours {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 1.5rem;
}
.reviews-yours__heading, .review-mine__heading { font-size: 1.05rem; margin: 0 0 .75rem; }
.reviews-yours__prompt { margin: 0; color: var(--c-text-muted); }
.reviews-yours__prompt a { color: var(--c-primary); font-weight: 600; }
.reviews-yours__ineligible { margin: 0; color: var(--c-text-muted); font-style: italic; }

/* --- Formulario de reseña --- */
.review-form { display: flex; flex-direction: column; gap: .85rem; }
.review-form__legend, .review-form__label { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .3rem; }
.review-form__rating { border: none; padding: 0; margin: 0; }
.star-rating__options { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.star-rating__option { cursor: pointer; font-size: 1.6rem; color: var(--c-border-strong); line-height: 1; }
.star-rating__option input { position: absolute; opacity: 0; width: 0; height: 0; }
/* Hover/checked: pintar la estrella y todas las anteriores (row-reverse). */
.star-rating__option:hover,
.star-rating__option:hover ~ .star-rating__option,
.star-rating__option:has(input:checked),
.star-rating__option:has(input:checked) ~ .star-rating__option { color: #f5a623; }
.star-rating__option input:focus-visible + span { outline: 2px solid var(--c-primary); border-radius: 3px; }
.review-form__input, .review-form__textarea {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md); font: inherit; box-sizing: border-box;
}
.review-form__textarea { resize: vertical; }
.review-submit {
  align-self: flex-start; padding: .6rem 1.4rem; background: var(--c-ink); color: var(--c-surface);
  border: none; border-radius: var(--r-md); font-weight: 600; cursor: pointer;
}
.review-submit:hover { background: var(--c-text); }

/* --- Mi reseña (estado con reseña existente) --- */
.review-mine__stars { font-size: 1.1rem; }
.review-mine__title { font-weight: 600; margin: .4rem 0 .2rem; }
.review-mine__comment { margin: .2rem 0; color: var(--c-text); }
.review-mine__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-top: .9rem; }
.review-edit { flex: 1 1 auto; }
.review-edit__summary {
  cursor: pointer; font-weight: 600; color: var(--c-primary); font-size: .9rem;
  list-style: none; display: inline-block;
}
.review-edit__summary::-webkit-details-marker { display: none; }
.review-edit__body { margin-top: .75rem; }
.review-delete {
  padding: .5rem 1rem; background: var(--c-surface); color: var(--c-danger);
  border: 1px solid var(--c-danger-border); border-radius: var(--r-md); cursor: pointer; font-weight: 600;
}
.review-delete:hover { background: var(--c-danger-soft); }

/* --- Lista de reseñas --- */
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.review-item { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 1rem; }
.review-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.review-item__author { font-weight: 600; }
.review-item__rating { font-size: 1rem; }
.review-item__date { color: var(--c-text-faint); font-size: .8rem; margin-left: auto; }
.review-item__title { font-weight: 600; margin: .5rem 0 .2rem; }
.review-item__comment { margin: .2rem 0 0; color: var(--c-text); }
.review-list__empty { color: var(--c-text-muted); }

/* --- Paginador de reseñas --- */
.reviews-pager { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.reviews-pager__btn {
  padding: .45rem .9rem; background: var(--c-surface); border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md); cursor: pointer; font: inherit;
}
.reviews-pager__btn:hover:not(.is-disabled) { background: var(--c-surface-sunken); }
.reviews-pager__btn.is-disabled { color: var(--c-text-faint); cursor: default; border-color: var(--c-border); }
.reviews-pager__page { color: var(--c-text-muted); font-size: .9rem; }

/* --- Autocomplete del buscador (Sprint 13) --- */
.storefront__search { position: relative; }
.search-suggest {
  position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 30;
}
.search-suggest__list {
  list-style: none; margin: 0; padding: .25rem; background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.search-suggest__item {
  display: block; padding: .4rem .6rem; border-radius: .375rem;
  color: var(--c-text); text-decoration: none; font-size: .9rem;
}
.search-suggest__item:hover { background: var(--c-surface-sunken); color: var(--c-primary); }

/* --- Facetas con conteo (Sprint 13) --- */
.catalog-facets-panel { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; }
.catalog-facets__title {
  margin: 0 0 .4rem; font-size: .8rem; font-weight: 600; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: .03em;
}
.catalog-facets__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.catalog-facets__option {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .3rem .5rem; border-radius: .375rem; color: var(--c-text);
  text-decoration: none; font-size: .9rem;
}
a.catalog-facets__option:hover { background: var(--c-surface-sunken); color: var(--c-primary); }
.catalog-facets__option.is-active { background: var(--c-primary); color: var(--c-surface); font-weight: 600; }
.catalog-facets__option--static { cursor: default; }
.catalog-facets__count {
  flex: 0 0 auto; min-width: 1.5rem; text-align: center; padding: 0 .35rem;
  border-radius: 1rem; background: var(--c-surface-sunken); color: var(--c-text-muted);
  font-size: .78rem; font-weight: 600;
}
.catalog-facets__option.is-active .catalog-facets__count { background: rgba(255, 255, 255, .25); color: var(--c-surface); }
/* P6.2.C.2 — swatch (kind=swatch con hex) en la faceta de Color. El color de
   fondo se setea por estilo inline (CSP `style-src 'unsafe-inline'`). */
.catalog-facets__label { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.catalog-facets__swatch {
  flex: 0 0 auto; width: .9rem; height: .9rem; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* ── Sprint 17 — reset de contraseña self-service (customer) ─────────── */
.storefront-forgot,
.storefront-reset {
  max-width: 25rem;
  margin: 1.5rem auto;
  padding: 1.6rem 1.9rem 1.8rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 32px -16px rgba(17, 24, 39, .12);
}
.storefront-forgot h1,
.storefront-reset h1 {
  margin-top: 0;
  color: var(--c-ink);
  font-size: 1.2rem;
  font-weight: 700;
}
.storefront-forgot__error,
.storefront-reset__error {
  margin: 1rem 0;
  padding: .75rem 1rem;
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-border);
  border-radius: var(--r-lg);
  color: var(--c-danger);
}
.storefront-forgot__form,
.storefront-reset__form {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}
.storefront-forgot__field,
.storefront-reset__field {
  display: grid;
  gap: .35rem;
}
.storefront-forgot__form input[type="email"],
.storefront-reset__form input[type="password"] {
  width: 100%;
  padding: .58rem .8rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  font: inherit;
  font-size: .875rem;
  color: var(--c-ink-soft);
}
.storefront-forgot__form input::placeholder,
.storefront-reset__form input::placeholder {
  color: var(--c-text-faint);
}
.storefront-forgot__form input:focus,
.storefront-reset__form input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
  outline: none;
}
.storefront-reset__hint {
  color: var(--c-text-muted);
  font-size: .85rem;
}
.storefront-forgot__submit,
.storefront-reset__submit {
  width: 100%;
  margin-top: .5rem;
  padding: .65rem 1rem;
  background: var(--c-primary);
  color: var(--c-surface);
  border: 0;
  border-radius: var(--r-lg);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.storefront-forgot__submit:hover,
.storefront-reset__submit:hover {
  background: var(--c-primary-hover);
}
.storefront-forgot__alt,
.storefront-reset__cta {
  margin-top: 1rem;
  color: var(--c-text-muted);
}
.storefront-forgot__hint {
  color: var(--c-text-muted);
  font-size: .9rem;
}
.storefront-forgot__link,
.storefront-reset__link {
  display: inline-block;
  padding: .5rem 1.1rem;
  background: var(--c-primary);
  color: var(--c-surface);
  border-radius: var(--r-lg);
  font-weight: 600;
}
.storefront-forgot__link:hover,
.storefront-reset__link:hover {
  background: var(--c-primary-hover);
  text-decoration: none;
}

/* ── Catálogo público — actualización visual ─────────────────────────── */
.storefront[data-page="catalog"] .storefront__main {
  width: 100%; max-width: 1100px; margin: 26px auto 8px; padding: 0 24px;
}
.storefront[data-page="catalog"] .storefront__footer { margin-top: 0; }
.catalog { --catalog-accent: #259bf0; color: #131c2b; }
.catalog__top {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center;
  gap: 24px; min-height: 45px;
}
.catalog__header h1 {
  margin: 0; color: #132033; font-size: 29px; font-weight: 750; line-height: 1.1;
  letter-spacing: -.025em;
}
.catalog__query { margin: 4px 0 0; color: #748091; font-size: 11px; }
.catalog__layout {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px;
  align-items: start; margin-top: 14px;
}
.catalog__sidebar { min-width: 0; }
.catalog__results { min-width: 0; }

/* Fila superior: cantidad, orden y modos de visualización. */
.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0;
}
.catalog-toolbar .product-grid__count {
  flex: 0 0 auto; margin: 0; color: #596678; font-size: 11px; white-space: nowrap;
}
.catalog-toolbar__controls { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.catalog-toolbar__sort { display: inline-flex; align-items: center; gap: 10px; color: #273244; font-size: 10.5px; white-space: nowrap; }
.catalog-toolbar__sort select {
  width: 132px; height: 35px; padding: 0 31px 0 11px; appearance: none;
  border: 1px solid #dce3e9; border-radius: 6px; outline: 0; background:
    linear-gradient(45deg, transparent 50%, #667487 50%) calc(100% - 14px) 15px / 4px 4px no-repeat,
    linear-gradient(135deg, #667487 50%, transparent 50%) calc(100% - 10px) 15px / 4px 4px no-repeat,
    #fff;
  color: #263142; cursor: pointer; font: inherit;
}
.catalog-toolbar__sort select:focus { border-color: var(--catalog-accent); box-shadow: 0 0 0 2px rgba(37, 155, 240, .12); }
.catalog-toolbar__filter-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 35px; padding: 0 12px; border: 1px solid #dce3e9; border-radius: 6px;
  background: #fff; color: #168ee3; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 600;
}
.catalog-toolbar__filter-toggle:hover,
.catalog-toolbar__filter-toggle.is-active { border-color: #a9d8f6; background: #f6fbff; }
.catalog-toolbar__filter-toggle svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.catalog-toolbar__filter-toggle strong {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--catalog-accent); color: #fff;
  font-size: 9px; line-height: 1;
}
.catalog-toolbar__views { display: inline-flex; height: 35px; border: 1px solid #dce3e9; border-radius: 6px; overflow: hidden; background: #fff; }
.catalog-toolbar__view {
  display: inline-flex; align-items: center; justify-content: center; width: 35px; padding: 0;
  border: 0; border-left: 1px solid #e4e9ee; background: #fff; color: #7b8795; cursor: pointer;
}
.catalog-toolbar__view:first-child { border-left: 0; }
.catalog-toolbar__view:hover,
.catalog-toolbar__view.is-active { background: #f5fbff; color: #168ee3; }
.catalog-toolbar__view svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Filtros laterales. */
.catalog .catalog-filters,
.catalog .catalog-facets {
  background: #fff; border: 1px solid #e0e6eb; border-radius: 8px;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .025);
}
.catalog .catalog-filters { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.catalog .catalog-filters__title,
.catalog .catalog-facets__title {
  margin: 0; color: #1c2737; font-size: 12px; font-weight: 700; line-height: 1.25;
  letter-spacing: 0; text-transform: none;
}
.catalog .catalog-filters__group { display: flex; flex-direction: column; gap: 6px; }
.catalog .catalog-filters__group > label,
.catalog .catalog-filters__label { color: #4d5a6d; font-size: 10px; font-weight: 650; }
.catalog .catalog-filters__group select,
.catalog .catalog-filters__group input {
  width: 100%; height: 31px; padding: 0 9px; border: 1px solid #dce3e9;
  border-radius: 5px; outline: 0; background: #fff; color: #283446; font-size: 10px;
}
.catalog .catalog-filters__group select:focus,
.catalog .catalog-filters__group input:focus { border-color: var(--catalog-accent); box-shadow: 0 0 0 2px rgba(37, 155, 240, .1); }
.catalog-filters__price-range { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.catalog-filters__price-range label { display: flex; flex-direction: column; gap: 4px; color: #657286; font-size: 9px; font-weight: 500; }
.catalog-filters__price-input { position: relative; display: block; }
.catalog-filters__price-input > span {
  position: absolute; top: 50%; left: 9px; z-index: 1; transform: translateY(-50%);
  color: #8b96a5; font-size: 10px; pointer-events: none;
}
.catalog .catalog-filters__price-input input { padding-left: 20px; }
.catalog .catalog-filters__actions { display: grid; grid-template-columns: 1fr 70px; gap: 9px; margin-top: 1px; }
.catalog .catalog-filters__apply,
.catalog .catalog-filters__clear {
  display: inline-flex; align-items: center; justify-content: center; min-height: 31px; padding: 5px 9px;
  border-radius: 5px; font-size: 9.5px; font-weight: 600; text-decoration: none;
}
.catalog .catalog-filters__apply { border: 1px solid var(--catalog-accent); background: var(--catalog-accent); color: #fff; cursor: pointer; }
.catalog .catalog-filters__apply:hover { border-color: #168de2; background: #168de2; }
.catalog .catalog-filters__clear { border: 1px solid #dce3e9; background: #fff; color: #4d5a6d; }
.catalog .catalog-filters__clear:hover { border-color: #bfc9d2; color: #1f2a39; }

.catalog .catalog-facets-panel { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.catalog .catalog-facets { padding: 15px 16px; }
.catalog .catalog-facets__title { margin-bottom: 10px; }
.catalog .catalog-facets__list { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; list-style: none; }
.catalog .catalog-facets__option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px;
  padding: 2px 0; border-radius: 0; background: transparent; color: #4c596b;
  font-size: 9.5px; text-decoration: none;
}
.catalog a.catalog-facets__option:hover,
.catalog .catalog-facets__option.is-active { background: transparent; color: #168ee3; font-weight: 600; }
.catalog .catalog-facets__label { display: flex; align-items: center; gap: 7px; min-width: 0; }
.catalog .catalog-facets__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog .catalog-facets__check {
  position: relative; flex: 0 0 auto; width: 11px; height: 11px; border: 1px solid #cfd7df;
  border-radius: 2px; background: #fff;
}
.catalog .catalog-facets__option.is-active .catalog-facets__check { border-color: var(--catalog-accent); background: var(--catalog-accent); }
.catalog .catalog-facets__option.is-active .catalog-facets__check::after {
  content: ""; position: absolute; top: 1px; left: 3px; width: 3px; height: 6px;
  border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.catalog .catalog-facets__count {
  flex: 0 0 auto; min-width: 20px; padding: 1px 5px; border-radius: 999px;
  background: #f1f4f7; color: #748091; font-size: 8.5px; font-weight: 600; text-align: center;
}
.catalog .catalog-facets__option.is-active .catalog-facets__count { background: #e7f5ff; color: #168ee3; }
.catalog .catalog-facets__swatch { width: 10px; height: 10px; }
.catalog-facets__more {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 0;
  border: 0; background: transparent; color: #168ee3; cursor: pointer; font: inherit; font-size: 9.5px; font-weight: 600;
}
.catalog-facets__more svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease;
}
.catalog-facets--brand.is-expanded .catalog-facets__more svg { transform: rotate(180deg); }
.catalog-facets--brand:not(.is-expanded) [data-brand-list] > li:nth-child(n+11) { display: none; }

/* Cuadrícula y tarjetas de catálogo. */
.catalog .product-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.catalog .product-card {
  min-width: 0; padding-bottom: 9px; border: 1px solid #e0e6eb; border-radius: 8px;
  background: #fff; box-shadow: 0 2px 7px rgba(15, 23, 42, .035); overflow: hidden;
}
.catalog .product-card:hover { border-color: #a9d8f6; box-shadow: 0 6px 17px rgba(17, 111, 174, .09); }
.catalog .product-card__link { order: 1; color: inherit; text-decoration: none; }
.catalog .product-card__img {
  width: 100%; aspect-ratio: 1.48 / 1; padding: 12px 14px 5px; object-fit: contain; background: #fff;
}
.catalog .product-card__name {
  min-height: 1.25em; margin: 7px 10px 2px; overflow: hidden; color: #1e2938;
  font-size: 10.5px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
}
.catalog .product-card__brand {
  order: 2; min-height: 1.2em; margin: 0 10px; overflow: hidden; color: #8792a0;
  font-size: 8.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
}
.catalog .product-card__rating { order: 3; min-height: 12px; margin: 3px 10px 0; gap: 3px; line-height: 1; }
.catalog .product-card__rating .rating-stars { font-size: 10px; letter-spacing: 0; }
.catalog .product-card__rating-count,
.catalog .product-card__rating-none { color: #7d8998; font-size: 8px; }
.catalog .product-card__price { order: 4; margin: 4px 10px 7px; color: #111827; font-size: 12.5px; font-weight: 750; line-height: 1.15; }
.catalog .product-card__catalog-action {
  order: 5; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 28px; margin: auto 9px 0; padding: 5px 9px; border: 1px solid var(--catalog-accent);
  border-radius: 5px; background: #fff; color: #168ee3; font-size: 9.5px; font-weight: 650; text-decoration: none;
}
.catalog .product-card__catalog-action:hover { background: #eff8ff; color: #087bc7; text-decoration: none; }
.catalog .product-card__catalog-action svg {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.catalog .wishlist-toggle {
  top: 7px; right: 7px; width: 24px; height: 24px; border-color: #e1e6eb;
  color: #7d8995; box-shadow: 0 1px 4px rgba(15, 23, 42, .05);
}
.catalog .wishlist-toggle__icon { font-size: 13px; }
.catalog .product-grid__empty { min-height: 300px; padding: 65px 24px; }
.catalog .pager { gap: 12px; margin-top: 10px; }
.catalog .pager__btn {
  min-width: 74px; padding: 6px 11px; border-color: #dce3e9; border-radius: 5px;
  color: #168ee3; font-size: 9.5px; text-align: center; text-decoration: none;
}
.catalog .pager__btn--disabled { color: #b5bec8; }
.catalog .pager__status { color: #687588; font-size: 9.5px; }

/* La vista lista reutiliza la misma tarjeta sin duplicar markup. */
.catalog.is-list-view .product-grid__items { grid-template-columns: 1fr; }
.catalog.is-list-view .product-card {
  display: grid; grid-template-columns: 165px minmax(0, 1fr) 140px;
  grid-template-rows: auto auto auto 1fr; min-height: 138px; padding: 0;
}
.catalog.is-list-view .product-card__link { display: contents; }
.catalog.is-list-view .product-card__img { grid-column: 1; grid-row: 1 / 5; width: 165px; height: 136px; aspect-ratio: auto; padding: 12px; }
.catalog.is-list-view .product-card__name { grid-column: 2; grid-row: 1; margin: 21px 16px 2px; font-size: 13px; }
.catalog.is-list-view .product-card__brand { grid-column: 2; grid-row: 2; margin: 0 16px; font-size: 10px; }
.catalog.is-list-view .product-card__rating { grid-column: 2; grid-row: 3; margin: 7px 16px 0; }
.catalog.is-list-view .product-card__price { grid-column: 2; grid-row: 4; margin: 7px 16px 18px; align-self: end; font-size: 15px; }
.catalog.is-list-view .product-card__catalog-action {
  grid-column: 3; grid-row: 1 / 5; width: 116px; margin: 0 17px; align-self: center; justify-self: end;
}

.catalog.catalog--filters-hidden .catalog__sidebar { display: none; }
.catalog.catalog--filters-hidden .catalog__layout { grid-template-columns: 1fr; }
.catalog.catalog--filters-hidden .product-grid__items { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.catalog.catalog--filters-hidden.is-list-view .product-grid__items { grid-template-columns: 1fr; }

@media (max-width: 980px) {
  .storefront[data-page="catalog"] .storefront__main { padding-right: 18px; padding-left: 18px; }
  .catalog__top,
  .catalog__layout { grid-template-columns: 205px minmax(0, 1fr); gap: 18px; }
  .catalog .product-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog.catalog--filters-hidden .product-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog-toolbar__sort > span { display: none; }
}

@media (max-width: 780px) {
  .storefront[data-page="catalog"] .storefront__main { margin-top: 18px; padding-right: 14px; padding-left: 14px; }
  .catalog__top { grid-template-columns: 1fr; gap: 13px; }
  .catalog__header h1 { font-size: 25px; }
  .catalog-toolbar { align-items: flex-start; }
  .catalog-toolbar__controls { flex-wrap: wrap; gap: 7px; }
  .catalog-toolbar__filter-toggle { order: -1; }
  .catalog__layout { grid-template-columns: 1fr; margin-top: 12px; }
  .catalog.is-enhanced:not(.catalog--filters-open) .catalog__sidebar { display: none; }
  .catalog.catalog--filters-open .catalog__sidebar { display: block; }
  .catalog .catalog-filters__price-range { grid-template-columns: 1fr 1fr; }
  .catalog .product-grid__items,
  .catalog.catalog--filters-hidden .product-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog.is-list-view .product-card { grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; min-height: 124px; }
  .catalog.is-list-view .product-card__img { grid-row: 1 / 6; width: 120px; height: 122px; }
  .catalog.is-list-view .product-card__name { margin-top: 14px; }
  .catalog.is-list-view .product-card__catalog-action { grid-column: 2; grid-row: 5; width: auto; margin: 4px 14px 12px; justify-self: stretch; }
  .catalog.is-list-view .product-card__price { grid-row: 4; margin-bottom: 3px; }
}

@media (max-width: 480px) {
  .catalog-toolbar { flex-direction: column; gap: 9px; }
  .catalog-toolbar__controls { width: 100%; justify-content: flex-start; }
  .catalog-toolbar__sort { flex: 1 1 auto; }
  .catalog-toolbar__sort select { width: 100%; }
  .catalog-toolbar__filter-toggle span { display: none; }
  .catalog .product-grid__items,
  .catalog.catalog--filters-hidden .product-grid__items { gap: 9px; }
  .catalog .product-card__img { padding-right: 8px; padding-left: 8px; }
  .catalog .product-card__name { font-size: 10px; }
  .catalog .product-card__catalog-action { margin-right: 7px; margin-left: 7px; font-size: 9px; }
}

/* ── Ficha de producto — bloque principal ────────────────────────────── */
.storefront[data-page="product"] .storefront__main {
  width: 100%; max-width: 1240px; margin: 20px auto 32px; padding: 0 20px;
}
.storefront[data-page="product"] .product-detail {
  padding: 20px 24px 28px; border: 1px solid #e0e5e9; border-radius: 7px;
  background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .025);
}
.storefront[data-page="product"] .product-detail__breadcrumb {
  margin-bottom: 16px; color: #7b8795; font-size: 10.5px;
}
.storefront[data-page="product"] .product-detail__breadcrumb a { color: #687588; text-decoration: none; }
.storefront[data-page="product"] .product-detail__breadcrumb a:hover { color: #168ee3; }
.storefront[data-page="product"] .product-detail__layout {
  display: grid; grid-template-columns: minmax(410px, 1.35fr) minmax(250px, .82fr) 310px;
  gap: 24px; align-items: start; margin-top: 0;
}

/* Galería: miniaturas verticales + escenario principal. */
.storefront[data-page="product"] .product-gallery__stage {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: start;
}
.storefront[data-page="product"] .product-gallery__thumbs {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0;
}
.storefront[data-page="product"] .product-gallery__thumb-button {
  display: flex; align-items: center; justify-content: center; width: 58px; height: 66px;
  padding: 3px; border: 1px solid #d7dde3; border-radius: 5px; background: #fff;
  cursor: pointer; overflow: hidden;
}
.storefront[data-page="product"] .product-gallery__thumb-button:hover { border-color: #7cc6f4; }
.storefront[data-page="product"] .product-gallery__thumb-button.is-active {
  border: 2px solid #2b76ff; padding: 2px; box-shadow: 0 0 0 1px rgba(43, 118, 255, .08);
}
.storefront[data-page="product"] .product-gallery__thumb {
  width: 100%; height: 100%; border: 0; border-radius: 3px; object-fit: contain; background: #fff;
}
.storefront[data-page="product"] .product-gallery__main-wrap {
  display: flex; align-items: center; justify-content: center; min-height: 480px;
  border-radius: 6px; background: #f7f8f8; overflow: hidden;
}
.storefront[data-page="product"] .product-gallery__main {
  width: 100%; height: 480px; aspect-ratio: auto; padding: 12px; border: 0; border-radius: 0;
  object-fit: contain; background: transparent;
}
.storefront[data-page="product"] .product-detail__gallery > .product-gallery__main--placeholder {
  min-height: 480px; border: 1px solid #e0e5e9; border-radius: 6px;
}

/* Información central. */
.storefront[data-page="product"] .product-detail__info { min-width: 0; padding-top: 2px; }
.storefront[data-page="product"] .product-detail__brand {
  display: inline-block; margin: 0 0 14px; color: #2864ff; font-size: 11px; text-decoration: none;
}
.storefront[data-page="product"] .product-detail__brand:hover { text-decoration: underline; }
.storefront[data-page="product"] .product-detail__title-row { align-items: flex-start; gap: 12px; }
.storefront[data-page="product"] .product-detail__title {
  margin: 0; color: #20242a; font-size: 22px; font-weight: 650; line-height: 1.18; letter-spacing: -.015em;
}
.storefront[data-page="product"] .product-detail__title-row .wishlist-toggle {
  width: 34px; height: 34px; margin-top: -4px; border: 0; box-shadow: none; color: #2864ff;
}
.storefront[data-page="product"] .product-detail__title-row .wishlist-toggle__icon { font-size: 25px; }
.storefront[data-page="product"] .product-detail__rating-link { margin-top: 7px; }
.storefront[data-page="product"] .rating-summary { gap: 5px; margin: 0; }
.storefront[data-page="product"] .rating-summary__stars { color: #3565f5; font-size: 15px; letter-spacing: 1px; }
.storefront[data-page="product"] .rating-summary__avg,
.storefront[data-page="product"] .rating-summary__count { font-size: 10px; }
.storefront[data-page="product"] .product-detail__price {
  margin: 14px 0 22px; color: #161a20; font-size: 28px; font-weight: 700; line-height: 1.1;
}
.storefront[data-page="product"] .variant-group { margin-bottom: 16px; }
.storefront[data-page="product"] .variant-group__label {
  margin-bottom: 8px; color: #313740; font-size: 12px; font-weight: 550;
}
.storefront[data-page="product"] .variant-group__options { gap: 7px; }
.storefront[data-page="product"] .variant-option {
  min-width: 43px; min-height: 39px; padding: 8px 11px; border-color: #cfd6dd;
  border-radius: 5px; background: #fff; color: #29313c; font-size: 11px;
}
.storefront[data-page="product"] .variant-option:hover:not(:disabled) { border-color: #2864ff; }
.storefront[data-page="product"] .variant-option.is-selected {
  border-color: #2864ff; background: #fff; color: #2864ff; box-shadow: inset 0 0 0 1px #2864ff;
}
.storefront[data-page="product"] .variant-option--swatch { width: 39px; min-width: 39px; height: 39px; min-height: 39px; border-radius: 5px; }
.storefront[data-page="product"] .variant-option--swatch.is-selected { outline: 1px solid #2864ff; outline-offset: 2px; }

/* Tarjeta de compra: solo información respaldada por config y stock real. */
.storefront[data-page="product"] .product-detail__purchase {
  min-width: 0; padding: 20px 17px; border: 1px solid #dce2e7; border-radius: 7px;
  background: #fff; color: #272d36;
}
.storefront[data-page="product"] .product-detail__purchase h2 {
  margin: 0; color: #272d36; font-size: 12px; font-weight: 700; line-height: 1.3;
}
.storefront[data-page="product"] .product-purchase__shipping {
  padding-bottom: 18px; border-bottom: 1px solid #edf0f2;
}
.storefront[data-page="product"] .product-purchase__shipping > h2 { color: #00a650; font-size: 13px; }
.storefront[data-page="product"] .product-purchase__shipping ul {
  display: flex; flex-direction: column; gap: 12px; margin: 13px 0 0; padding: 0; list-style: none;
}
.storefront[data-page="product"] .product-purchase__shipping li,
.storefront[data-page="product"] .product-purchase__payments {
  display: flex; align-items: flex-start; gap: 9px;
}
.storefront[data-page="product"] .product-purchase__shipping svg,
.storefront[data-page="product"] .product-purchase__payments > svg {
  flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: #00a650;
  stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round;
}
.storefront[data-page="product"] .product-purchase__shipping li > span,
.storefront[data-page="product"] .product-purchase__payments > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.storefront[data-page="product"] .product-purchase__shipping strong,
.storefront[data-page="product"] .product-purchase__payments strong { font-size: 10.5px; font-weight: 600; }
.storefront[data-page="product"] .product-purchase__shipping small,
.storefront[data-page="product"] .product-purchase__payments small { color: #7a8491; font-size: 9.5px; line-height: 1.35; }
.storefront[data-page="product"] .product-purchase__stock { margin-top: 18px; }
.storefront[data-page="product"] .product-detail__availability {
  margin: 8px 0 2px; color: #5e6977; font-size: 11px; font-weight: 600;
}
.storefront[data-page="product"] .product-detail__availability.is-in-stock { color: #00a650; }
.storefront[data-page="product"] .product-detail__availability.is-out-of-stock { color: #dc3545; }
.storefront[data-page="product"] .product-purchase__stock-detail {
  min-height: 1.35em; margin: 0; color: #818b98; font-size: 9.5px; line-height: 1.35;
}
.storefront[data-page="product"] .product-detail__cart {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin-top: 16px;
}
.storefront[data-page="product"] .add-to-cart__qty-label {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 10px; color: #303742; font-size: 10.5px; font-weight: 600;
}
.storefront[data-page="product"] .add-to-cart__qty {
  width: 78px; height: 34px; padding: 0 8px; border-color: #d4dbe2; border-radius: 5px; font-size: 11px;
}
.storefront[data-page="product"] .add-to-cart {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: 46px; padding: 9px 14px; border: 1px solid #315efb; border-radius: 6px;
  background: #e8edff; color: #315efb; font-size: 13px; font-weight: 650;
}
.storefront[data-page="product"] .buy-now {
  width: 100%; min-height: 46px; padding: 9px 14px; border: 1px solid #315efb;
  border-radius: 6px; background: #315efb; color: #fff; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 650;
}
.storefront[data-page="product"] .buy-now:hover { border-color: #244de0; background: #244de0; }
.storefront[data-page="product"] .buy-now[disabled],
.storefront[data-page="product"] .buy-now[disabled]:hover {
  border-color: #e2e6ea; background: #dfe4e8; color: #99a2ac; cursor: not-allowed;
}
.storefront[data-page="product"] .buy-now__feedback { color: #dc3545; font-size: 9.5px; text-align: center; }
.storefront[data-page="product"] .add-to-cart:hover { background: #dce4ff; }
.storefront[data-page="product"] .add-to-cart[disabled],
.storefront[data-page="product"] .add-to-cart[disabled]:hover {
  border-color: #e2e6ea; background: #edf0f2; color: #9aa3ad;
}
.storefront[data-page="product"] .add-to-cart svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.storefront[data-page="product"] .add-to-cart__feedback { min-height: 16px; font-size: 9.5px; text-align: center; }
.storefront[data-page="product"] .product-purchase__payments {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #edf0f2;
}
.storefront[data-page="product"] .product-purchase__payments > svg { stroke: #315efb; }
.storefront[data-page="product"] .product-purchase__payments strong { color: #315efb; }

/* Secciones inferiores de la ficha: descripción, reseñas y relacionados. */
.storefront[data-page="product"] .product-detail__description {
  margin-top: 28px; padding: 20px 22px; border: 1px solid #e2e8ee; border-radius: 7px;
  background: #fbfcfe; box-shadow: 0 1px 5px rgba(15, 23, 42, .025);
}
.storefront[data-page="product"] .product-detail__description h2,
.storefront[data-page="product"] .product-reviews__heading,
.storefront[data-page="product"] .related-products h2 {
  margin: 0; color: #202733; font-size: 14px; font-weight: 700; line-height: 1.25;
  letter-spacing: 0;
}
.storefront[data-page="product"] .product-detail__description p {
  max-width: 880px; margin: 12px 0 0; color: #4e5a69; font-size: 12px; line-height: 1.65;
}
.storefront[data-page="product"] .product-detail__attributes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px;
  margin-top: 12px;
}
.storefront[data-page="product"] .product-detail__attribute {
  min-width: 0; padding: 12px 14px; border-color: #e2e8ee; border-radius: 7px;
  background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .025);
}
.storefront[data-page="product"] .product-detail__attribute dt {
  margin-bottom: 4px; color: #7b8795; font-size: 9px; font-weight: 700;
  letter-spacing: .03em;
}
.storefront[data-page="product"] .product-detail__attribute dd {
  color: #222936; font-size: 12px; font-weight: 650; line-height: 1.35;
}
.storefront[data-page="product"] .product-reviews,
.storefront[data-page="product"] .related-products {
  margin-top: 22px; padding: 20px 22px 22px; border: 1px solid #e2e8ee;
  border-radius: 7px; background: #fff; box-shadow: 0 1px 5px rgba(15, 23, 42, .025);
}
.storefront[data-page="product"] .product-reviews {
  border-top: 1px solid #e2e8ee;
}
.storefront[data-page="product"] .reviews-yours {
  margin: 14px 0 16px; padding: 15px 16px; border-color: #e5ebf0; border-radius: 7px;
  background: #f8fbfe; box-shadow: none;
}
.storefront[data-page="product"] .reviews-yours__heading,
.storefront[data-page="product"] .review-mine__heading {
  margin: 0 0 9px; color: #222936; font-size: 12px; font-weight: 700;
}
.storefront[data-page="product"] .reviews-yours__prompt,
.storefront[data-page="product"] .reviews-yours__ineligible {
  color: #5f6b7a; font-size: 11px; line-height: 1.45;
}
.storefront[data-page="product"] .reviews-yours__prompt a {
  color: #168ee3; text-decoration: none;
}
.storefront[data-page="product"] .reviews-yours__prompt a:hover { text-decoration: underline; }
.storefront[data-page="product"] .review-form { gap: 10px; }
.storefront[data-page="product"] .review-form__legend,
.storefront[data-page="product"] .review-form__label {
  margin-bottom: 5px; color: #394554; font-size: 10.5px; font-weight: 650;
}
.storefront[data-page="product"] .star-rating__option {
  color: #cfd7df; font-size: 21px;
}
.storefront[data-page="product"] .review-form__input,
.storefront[data-page="product"] .review-form__textarea {
  padding: 8px 10px; border-color: #d7dfe7; border-radius: 5px; color: #273140;
  font-size: 11px; line-height: 1.45;
}
.storefront[data-page="product"] .review-form__input:focus,
.storefront[data-page="product"] .review-form__textarea:focus {
  outline: 0; border-color: #168ee3; box-shadow: 0 0 0 2px rgba(22, 142, 227, .1);
}
.storefront[data-page="product"] .review-submit {
  min-height: 34px; padding: 7px 14px; border-radius: 5px; background: #315efb;
  font-size: 11px; font-weight: 650;
}
.storefront[data-page="product"] .review-submit:hover { background: #244de0; }
.storefront[data-page="product"] .review-mine__stars,
.storefront[data-page="product"] .review-item__rating {
  color: #3565f5; letter-spacing: 1px;
}
.storefront[data-page="product"] .review-mine__title,
.storefront[data-page="product"] .review-item__title {
  margin: 7px 0 3px; color: #222936; font-size: 12px; font-weight: 700;
}
.storefront[data-page="product"] .review-mine__comment,
.storefront[data-page="product"] .review-item__comment {
  margin: 3px 0 0; color: #53606f; font-size: 11px; line-height: 1.55;
}
.storefront[data-page="product"] .review-mine__actions {
  gap: 10px; margin-top: 12px;
}
.storefront[data-page="product"] .review-edit__summary {
  color: #168ee3; font-size: 10.5px; font-weight: 650;
}
.storefront[data-page="product"] .review-edit__body { margin-top: 10px; }
.storefront[data-page="product"] .review-delete {
  min-height: 31px; padding: 6px 11px; border-color: #f1b8bd; border-radius: 5px;
  background: #fff; color: #c92d3a; font-size: 10.5px; font-weight: 650;
}
.storefront[data-page="product"] .review-delete:hover { background: #fff5f6; }
.storefront[data-page="product"] .review-list { gap: 10px; }
.storefront[data-page="product"] .review-item {
  padding: 14px 16px; border-color: #e5ebf0; border-radius: 7px; background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .02);
}
.storefront[data-page="product"] .review-item__head { gap: 7px 10px; }
.storefront[data-page="product"] .review-item__author {
  color: #1f2937; font-size: 11.5px; font-weight: 700;
}
.storefront[data-page="product"] .review-item__rating { font-size: 12px; }
.storefront[data-page="product"] .review-item__date {
  color: #8390a0; font-size: 9.5px;
}
.storefront[data-page="product"] .review-list__empty {
  margin: 0; padding: 18px 16px; border: 1px dashed #d6dee6; border-radius: 7px;
  background: #f9fbfd; color: #667282; font-size: 11px; text-align: center;
}
.storefront[data-page="product"] .reviews-pager {
  justify-content: flex-end; gap: 10px; margin-top: 14px;
}
.storefront[data-page="product"] .reviews-pager__btn {
  min-height: 31px; padding: 6px 11px; border-color: #dce3e9; border-radius: 5px;
  background: #fff; color: #168ee3; font-size: 10px; font-weight: 650;
}
.storefront[data-page="product"] .reviews-pager__btn:hover:not(.is-disabled) {
  border-color: #a9d8f6; background: #eff8ff;
}
.storefront[data-page="product"] .reviews-pager__btn.is-disabled {
  color: #b5bec8; background: #fff;
}
.storefront[data-page="product"] .reviews-pager__page {
  color: #687588; font-size: 10px;
}
.storefront[data-page="product"] .related-products .product-grid__items {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px;
}
.storefront[data-page="product"] .related-products .product-card {
  min-width: 0; padding-bottom: 9px; border: 1px solid #e0e6eb; border-radius: 8px;
  background: #fff; box-shadow: 0 2px 7px rgba(15, 23, 42, .035); overflow: hidden;
}
.storefront[data-page="product"] .related-products .product-card:hover {
  border-color: #a9d8f6; box-shadow: 0 6px 17px rgba(17, 111, 174, .09);
}
.storefront[data-page="product"] .related-products .product-card__link {
  order: 1; color: inherit; text-decoration: none;
}
.storefront[data-page="product"] .related-products .product-card__img {
  width: 100%; aspect-ratio: 1.48 / 1; padding: 12px 14px 5px;
  object-fit: contain; background: #fff;
}
.storefront[data-page="product"] .related-products .product-card__name {
  min-height: 1.25em; margin: 7px 10px 2px; overflow: hidden; color: #1e2938;
  font-size: 10.5px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis;
  white-space: nowrap;
}
.storefront[data-page="product"] .related-products .product-card__brand {
  order: 2; min-height: 1.2em; margin: 0 10px; overflow: hidden; color: #8792a0;
  font-size: 8.5px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
}
.storefront[data-page="product"] .related-products .product-card__rating {
  order: 3; min-height: 12px; margin: 3px 10px 0; gap: 3px; line-height: 1;
}
.storefront[data-page="product"] .related-products .product-card__rating .rating-stars {
  color: #3565f5; font-size: 10px; letter-spacing: 0;
}
.storefront[data-page="product"] .related-products .product-card__rating-count,
.storefront[data-page="product"] .related-products .product-card__rating-none {
  color: #7d8998; font-size: 8px;
}
.storefront[data-page="product"] .related-products .product-card__price {
  order: 4; margin: 4px 10px 0; color: #111827; font-size: 12.5px;
  font-weight: 750; line-height: 1.15;
}

@media (max-width: 1080px) {
  .storefront[data-page="product"] .product-detail__layout {
    grid-template-columns: minmax(390px, 1.2fr) minmax(260px, .8fr);
  }
  .storefront[data-page="product"] .product-detail__purchase { grid-column: 1 / -1; }
  .storefront[data-page="product"] .product-detail__purchase {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px;
  }
  .storefront[data-page="product"] .product-purchase__shipping { grid-row: 1 / 3; border-bottom: 0; border-right: 1px solid #edf0f2; }
  .storefront[data-page="product"] .product-purchase__stock { margin-top: 0; }
  .storefront[data-page="product"] .product-purchase__payments { margin-top: 0; }
  .storefront[data-page="product"] .related-products .product-grid__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .storefront[data-page="product"] .storefront__main { margin-top: 12px; padding: 0 12px; }
  .storefront[data-page="product"] .product-detail { padding: 14px; }
  .storefront[data-page="product"] .product-detail__layout { grid-template-columns: 1fr; gap: 22px; }
  .storefront[data-page="product"] .product-gallery__stage { grid-template-columns: 1fr; }
  .storefront[data-page="product"] .product-gallery__main-wrap { grid-row: 1; min-height: 390px; }
  .storefront[data-page="product"] .product-gallery__main { height: 390px; }
  .storefront[data-page="product"] .product-gallery__thumbs {
    grid-row: 2; flex-direction: row; overflow-x: auto; padding-bottom: 2px;
  }
  .storefront[data-page="product"] .product-gallery__thumb-button { flex: 0 0 58px; }
  .storefront[data-page="product"] .product-detail__purchase { grid-column: auto; display: block; }
  .storefront[data-page="product"] .product-purchase__shipping { padding-bottom: 18px; border-right: 0; border-bottom: 1px solid #edf0f2; }
  .storefront[data-page="product"] .product-purchase__stock { margin-top: 18px; }
  .storefront[data-page="product"] .product-purchase__payments { margin-top: 18px; }
  .storefront[data-page="product"] .product-detail__description,
  .storefront[data-page="product"] .product-reviews,
  .storefront[data-page="product"] .related-products {
    padding: 16px 14px;
  }
  .storefront[data-page="product"] .product-detail__attributes,
  .storefront[data-page="product"] .related-products .product-grid__items {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  .storefront[data-page="product"] .review-item__date {
    width: 100%; margin-left: 0;
  }
  .storefront[data-page="product"] .reviews-pager {
    justify-content: center; flex-wrap: wrap;
  }
}

@media (max-width: 430px) {
  .storefront[data-page="product"] .product-gallery__main-wrap { min-height: 320px; }
  .storefront[data-page="product"] .product-gallery__main { height: 320px; }
  .storefront[data-page="product"] .product-detail__title { font-size: 20px; }
  .storefront[data-page="product"] .product-detail__attributes,
  .storefront[data-page="product"] .related-products .product-grid__items {
    gap: 9px;
  }
  .storefront[data-page="product"] .related-products .product-card__img {
    padding-right: 8px; padding-left: 8px;
  }
  .storefront[data-page="product"] .related-products .product-card__name {
    font-size: 10px;
  }
}

/* ── Carrito + checkout — rediseño storefront ─────────────────────────── */
.storefront[data-page="cart"] .storefront__main,
.storefront[data-page="checkout"] .storefront__main,
.storefront[data-page="checkout-success"] .storefront__main {
  width: 100%; max-width: 1240px; margin: 22px auto 34px; padding: 0 20px;
}

/* Carrito */
.cart-page {
  max-width: none; margin: 0; padding: 0; color: #172132;
}
.cart-page__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: 18px;
}
.cart-page__eyebrow,
.checkout__eyebrow {
  margin: 0 0 6px; color: #168ee3; font-size: 11px; font-weight: 750;
  letter-spacing: .02em; text-transform: uppercase;
}
.cart-page__header h1,
.checkout__header h1 {
  margin: 0; color: #111827; font-size: 30px; line-height: 1.15;
  font-weight: 800; letter-spacing: 0;
}
.cart-page__continue {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 8px 13px; border: 1px solid #cfe6f7;
  border-radius: 6px; background: #fff; color: #168ee3;
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.cart-page__continue:hover {
  border-color: #9bd1f4; background: #eff8ff; text-decoration: none;
}
.cart-summary { display: block; }
.cart-summary__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px;
  align-items: start;
}
.cart-summary__items,
.cart-summary__footer,
.cart-empty {
  border: 1px solid #e0e6eb; border-radius: 8px; background: #fff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .035);
}
.cart-summary__items { min-width: 0; padding: 18px; }
.cart-summary__items-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 13px;
}
.cart-summary__items-head h2,
.cart-summary__footer h2 {
  margin: 0; color: #172132; font-size: 16px; line-height: 1.25; font-weight: 800;
}
.cart-summary__items-head span {
  color: #687588; font-size: 12px; font-weight: 650;
}
.cart-lines { gap: 11px; }
.cart-line {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 104px 78px 112px 70px;
  gap: 14px; align-items: center; min-height: 104px; padding: 13px;
  border: 1px solid #e5ebf0; border-radius: 8px; background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .02);
}
.cart-line--unavailable {
  opacity: 1; background: #fbfcfd; border-color: #f0d7da;
}
.cart-line__media { min-width: 0; }
.cart-line__img {
  width: 86px; height: 76px; padding: 7px; object-fit: contain;
  border: 1px solid #e5ebf0; border-radius: 7px; background: #fff;
}
.cart-line__img--placeholder {
  display: grid; place-items: center; background: #f6f8fa;
}
.cart-line__info { min-width: 0; gap: 4px; }
.cart-line__name {
  color: #172132; font-size: 13px; font-weight: 750; line-height: 1.3;
  text-decoration: none;
}
a.cart-line__name:hover { color: #168ee3; text-decoration: none; }
.cart-line__variant {
  display: inline-flex; align-self: flex-start; max-width: 100%;
  color: #687588; font-size: 10px; font-weight: 600;
}
.cart-line__unavailable {
  margin: 4px 0 0; color: #c92d3a; font-size: 10.5px; font-weight: 700;
}
.cart-line__unit-price,
.cart-line__subtotal {
  margin: 0; color: #1f2937; font-size: 12px; font-weight: 750;
  text-align: right; font-variant-numeric: tabular-nums;
}
.cart-line__unit-price { color: #657181; font-weight: 650; }
.cart-line__qty {
  width: 72px; height: 36px; padding: 0 9px; border: 1px solid #d4dbe2;
  border-radius: 6px; background: #fff; color: #1f2937; font-size: 12px;
  font-weight: 650; text-align: center;
}
.cart-line__qty:focus {
  outline: 0; border-color: #168ee3; box-shadow: 0 0 0 2px rgba(22, 142, 227, .1);
}
.cart-line__qty:disabled { background: #edf0f2; color: #98a2af; }
.cart-line__remove {
  min-height: 34px; padding: 7px 10px; border: 1px solid #f1b8bd;
  border-radius: 6px; background: #fff; color: #c92d3a; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700;
}
.cart-line__remove:hover { background: #fff5f6; }
.cart-summary__footer {
  position: sticky; top: 18px; display: flex; flex-direction: column;
  gap: 13px; padding: 18px;
}
.cart-summary__total,
.cart-summary__shipping {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin: 0; padding: 0 0 12px; border-bottom: 1px solid #edf0f3;
}
.cart-summary__total span,
.cart-summary__shipping span {
  color: #687588; font-size: 12px; font-weight: 650;
}
.cart-summary__total strong {
  color: #111827; font-size: 24px; line-height: 1; font-weight: 800;
}
.cart-summary__shipping strong {
  color: #374151; font-size: 11px; font-weight: 700; text-align: right;
}
.cart-summary__note {
  margin: 0; color: #7b8795; font-size: 10.5px; line-height: 1.45;
}
.checkout-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid #315efb;
  border-radius: 6px; background: #315efb; color: #fff; cursor: pointer;
  font-size: 13px; font-weight: 750; text-decoration: none;
}
.checkout-button svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.checkout-button:hover {
  border-color: #244de0; background: #244de0; text-decoration: none;
}
.cart-notice {
  margin: 0 0 14px; padding: 12px 14px; border: 1px solid #f3d08a;
  border-radius: 8px; background: #fff8e9; color: #805900;
  font-size: 12px; font-weight: 650;
}
.cart-empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 58px 24px; color: #687588; text-align: center;
}
.cart-empty__icon {
  display: grid; place-items: center; width: 76px; height: 76px; margin: 0 0 13px;
  border-radius: 50%; background: #edf6ff; color: #168ee3;
}
.cart-empty__icon svg {
  width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.cart-empty__msg {
  margin: 0 0 7px; color: #111827; font-size: 20px; font-weight: 800;
}
.cart-empty__hint {
  max-width: 360px; margin: 0 0 20px; color: #687588; font-size: 13px;
  line-height: 1.45;
}
.cart-empty__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 18px; border-radius: 6px;
  background: #315efb; color: #fff; font-size: 13px; font-weight: 750;
}
.cart-empty__link:hover { background: #244de0; text-decoration: none; }

/* Checkout */
.checkout {
  max-width: none; margin: 0; color: #172132;
}
.checkout__header {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 20px;
}
.checkout__title { min-width: 0; }
.checkout__steps {
  --checkout-step-accent: #168ee3;
  --checkout-step-accent-soft: #e8f5ff;
  --checkout-step-line: #cdd9e5;
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start; gap: 0; width: 100%; max-width: 760px;
  margin: 2px auto 0; padding: 16px 28px 14px; list-style: none;
  border: 1px solid #e4ebf2; border-radius: 8px; background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .04);
  counter-reset: step;
}
.checkout__steps::before {
  content: ""; position: absolute; top: 32px;
  right: calc(16.6667% + 24px); left: calc(16.6667% + 24px);
  z-index: 0; height: 3px; border-radius: 999px; background: var(--checkout-step-line);
}
.checkout__step {
  position: relative; counter-increment: step;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 34px auto; justify-items: center; gap: 9px;
  min-height: 0; padding: 0 8px; border: 0; border-radius: 0;
  background: transparent; color: #667281; font-size: 12px; font-weight: 700;
  text-align: center; box-shadow: none;
}
.checkout__step:not(:last-child)::after {
  content: ""; position: absolute; top: 16px; right: auto;
  left: calc(50% + 25px); z-index: 1; width: calc(100% - 50px);
  height: 3px; border-radius: 999px; background: var(--checkout-step-line);
}
.checkout__step::before {
  content: none; display: none;
}
.checkout__step-marker {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 34px; height: 34px; border: 2px solid #d6dee6; border-radius: 50%;
  background: #fff; color: #7b8795; font-size: 11px; font-weight: 850;
  box-shadow: 0 0 0 5px #fff;
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}
.checkout__step-marker::before { content: counter(step); }
.checkout__step-title {
  position: relative; z-index: 2; min-width: 0; max-width: 100%;
  color: #667281; font-size: 12px; font-weight: 800; line-height: 1.25;
  overflow-wrap: anywhere;
}
.checkout__step.is-complete:not(:last-child)::after {
  background: linear-gradient(90deg, var(--checkout-step-accent), #54b1ed);
}
.checkout__step.is-complete .checkout__step-marker {
  border-color: var(--checkout-step-accent); background: var(--checkout-step-accent); color: #fff;
  box-shadow: 0 0 0 5px #fff, 0 3px 8px rgba(22, 142, 227, .16);
}
.checkout__step.is-complete .checkout__step-marker::before {
  content: "✓"; font-size: 14px; line-height: 1;
}
.checkout__step.is-complete .checkout__step-title { color: #172132; }
.checkout__step.is-active .checkout__step-marker {
  border-color: var(--checkout-step-accent); background: #fff; color: var(--checkout-step-accent);
  box-shadow: 0 0 0 5px var(--checkout-step-accent-soft), 0 3px 10px rgba(22, 142, 227, .2);
}
.checkout__step.is-active .checkout__step-marker::after {
  content: none;
}
.checkout__step.is-active .checkout__step-title {
  color: var(--checkout-step-accent);
}
.checkout__step.is-pending .checkout__step-marker {
  border-color: #d6dee6; background: #f6f8fa; color: #8a96a5;
}
.checkout__step.is-pending .checkout__step-title {
  color: #667281;
}
.checkout__error {
  margin: 0 0 14px; padding: 12px 14px; border: 1px solid #f1b8bd;
  border-radius: 8px; background: #fff5f6; color: #c92d3a;
  font-size: 12px; font-weight: 700;
}
.checkout__restart {
  display: flex; justify-content: flex-end; margin: -4px 0 14px;
}
.checkout__restart-btn {
  min-height: 33px; padding: 7px 12px; border: 1px solid #dce3e9;
  border-radius: 6px; background: #fff; color: #4d5a6d; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700;
}
.checkout__restart-btn:hover { border-color: #bfc9d2; color: #111827; }
.checkout__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px;
  align-items: start;
}
.checkout__summary {
  grid-column: 2; grid-row: 1; position: sticky; top: 18px;
}
.checkout__main { grid-column: 1; grid-row: 1; min-width: 0; }
.checkout__summary,
.checkout__form,
.checkout__review {
  border: 1px solid #e0e6eb; border-radius: 8px; background: #fff;
  box-shadow: 0 2px 7px rgba(15, 23, 42, .035);
}
.checkout__summary {
  padding: 18px;
}
.checkout__summary h2,
.checkout__form legend,
.checkout__review-block h2 {
  margin: 0; color: #172132; font-size: 15px; line-height: 1.25; font-weight: 800;
}
.checkout__lines {
  display: flex; flex-direction: column; gap: 9px; margin: 14px 0; padding: 0; list-style: none;
}
.checkout__line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px;
  align-items: start; padding: 0 0 10px; border-bottom: 1px solid #edf0f3;
}
.checkout__line-name {
  grid-column: 1; color: #172132; font-size: 12px; font-weight: 750; line-height: 1.3;
}
.checkout__line-variant {
  justify-self: start; padding: 2px 6px; border-radius: 999px; background: #f3f6f9;
  color: #687588; font-size: 9.5px; font-weight: 650;
}
.checkout__line-qty {
  color: #687588; font-size: 10.5px; font-weight: 650;
}
.checkout__line-total {
  grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-left: 0;
  color: #111827; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.checkout__totals { margin: 0; }
.checkout__total-row,
.order-success__total-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 8px 0;
}
.checkout__total-row dt,
.order-success__total-row dt {
  color: #687588; font-size: 12px; font-weight: 650;
}
.checkout__total-row dd,
.order-success__total-row dd {
  color: #111827; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.checkout__total-row--grand,
.order-success__total-row--grand {
  margin-top: 6px; padding-top: 14px; border-top: 1px solid #edf0f3;
}
.checkout__total-row--grand dt,
.order-success__total-row--grand dt {
  color: #111827; font-size: 14px; font-weight: 800;
}
.checkout__total-row--grand dd,
.order-success__total-row--grand dd {
  color: #111827; font-size: 24px; line-height: 1; font-weight: 850;
}
.checkout__form {
  padding: 18px;
}
.checkout__fieldset {
  margin: 0 0 16px; padding: 0; border: 0;
}
.checkout__fieldset legend {
  padding: 0; margin-bottom: 13px;
}
.checkout__field {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px;
}
.checkout__field span {
  color: #394554; font-size: 11px; font-weight: 700;
}
.checkout__field input {
  width: 100%; height: 40px; padding: 0 11px; border: 1px solid #d7dfe7;
  border-radius: 6px; background: #fff; color: #1f2937; font-size: 12px;
}
.checkout__field input:focus {
  outline: 0; border-color: #168ee3; box-shadow: 0 0 0 2px rgba(22, 142, 227, .1);
}
.checkout__pickup-note,
.checkout__payment-info,
.checkout__review-note {
  margin: 0 0 13px; color: #5f6b7a; font-size: 11px; line-height: 1.5;
}
.checkout__shipping-option,
.checkout__payment-option {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px; align-items: center; min-height: 46px; padding: 10px 12px;
  border: 1px solid #e2e8ee; border-radius: 7px; background: #fff;
  color: #253041; cursor: pointer;
}
.checkout__shipping-option + .checkout__shipping-option,
.checkout__payment-option + .checkout__payment-option {
  margin-top: 9px;
}
.checkout__shipping-option:has(input:checked),
.checkout__payment-option:has(input:checked) {
  border-color: #9bd1f4; background: #f5fbff; box-shadow: inset 0 0 0 1px #cbeafb;
}
.checkout__shipping-option input,
.checkout__payment-option input {
  width: 16px; height: 16px; accent-color: #168ee3;
}
.checkout__shipping-label,
.checkout__payment-label {
  min-width: 0; color: #172132; font-size: 12px; font-weight: 750;
}
.checkout__shipping-cost {
  margin-left: 0; color: #111827; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.checkout__payment { margin-top: 18px; padding-top: 18px; border-top: 1px solid #edf0f3; }
.checkout__nav,
.checkout__review-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px;
}
.checkout__back,
.checkout__next,
.checkout__submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 9px 16px; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 750;
}
.checkout__back {
  border: 1px solid #dce3e9; background: #fff; color: #4d5a6d;
}
.checkout__back:hover { border-color: #bfc9d2; color: #111827; }
.checkout__next,
.checkout__submit {
  border: 1px solid #315efb; background: #315efb; color: #fff;
}
.checkout__next:hover,
.checkout__submit:hover { border-color: #244de0; background: #244de0; }
.checkout__submit {
  width: auto; min-width: 180px;
}
.checkout__submit:disabled {
  border-color: #e2e6ea; background: #dfe4e8; color: #99a2ac; cursor: not-allowed;
}
.checkout__review {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  padding: 18px;
}
.checkout__review-block {
  min-width: 0; padding: 15px; border: 1px solid #e5ebf0; border-radius: 7px;
  background: #fbfcfe;
}
.checkout__review-block:first-child { grid-column: 1 / -1; }
.checkout__review-block p,
.checkout__review-address {
  margin: 10px 0 0; color: #4e5a69; font-size: 12px; line-height: 1.55;
}
.checkout__review-address { font-style: normal; }
.checkout__bank {
  display: grid; gap: 8px; margin: 12px 0 0;
}
.checkout__bank div {
  display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px;
  align-items: baseline; padding: 8px 0; border-top: 1px solid #edf0f3;
}
.checkout__bank dt {
  color: #687588; font-size: 10px; font-weight: 800; text-transform: uppercase;
}
.checkout__bank dd {
  margin: 0; color: #172132; font-size: 12px; font-weight: 750; overflow-wrap: anywhere;
}
.checkout__review-actions {
  grid-column: 1 / -1; margin-top: 2px;
}

/* Confirmación de compra */
.storefront[data-page="checkout-success"] .order-success {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  max-width: 1040px; margin: 0 auto; color: #172132;
}
.storefront[data-page="checkout-success"] .order-success__header {
  grid-column: 1 / -1; margin: 0; padding: 28px 24px;
  border: 1px solid #d7eadc; border-radius: 9px; background: #f5fbf7;
  text-align: center; box-shadow: 0 2px 7px rgba(15, 23, 42, .03);
}
.storefront[data-page="checkout-success"] .order-success__header h1 {
  margin: 0 0 9px; color: #0f5132; font-size: 28px; font-weight: 850; letter-spacing: 0;
}
.storefront[data-page="checkout-success"] .order-success__lead {
  margin: 0; color: #4c5f56; font-size: 13px; line-height: 1.5;
}
.storefront[data-page="checkout-success"] .order-success__code {
  display: inline-flex; padding: 3px 8px; border-radius: 5px;
  background: #d8f3df; color: #087235; font-size: 12px; font-weight: 800;
}
.storefront[data-page="checkout-success"] .order-success__panel {
  margin: 0; padding: 18px; border: 1px solid #e0e6eb; border-radius: 8px;
  background: #fff; box-shadow: 0 2px 7px rgba(15, 23, 42, .035);
}
.storefront[data-page="checkout-success"] .order-success__panel:first-of-type {
  grid-column: 1 / -1;
}
.storefront[data-page="checkout-success"] .order-success__panel h2 {
  margin: 0 0 13px; color: #172132; font-size: 15px; font-weight: 800;
}
.storefront[data-page="checkout-success"] .order-success__lines {
  display: flex; flex-direction: column; gap: 9px; margin: 0 0 14px; padding: 0; list-style: none;
}
.storefront[data-page="checkout-success"] .order-success__line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px 10px; align-items: baseline; padding: 0 0 10px;
  border-bottom: 1px solid #edf0f3;
}
.storefront[data-page="checkout-success"] .order-success__line-name {
  color: #172132; font-size: 12px; font-weight: 750;
}
.storefront[data-page="checkout-success"] .order-success__line-variant {
  justify-self: start; padding: 2px 6px; border-radius: 999px; background: #f3f6f9;
  color: #687588; font-size: 9.5px; font-weight: 650;
}
.storefront[data-page="checkout-success"] .order-success__line-qty {
  color: #687588; font-size: 10.5px; font-weight: 650;
}
.storefront[data-page="checkout-success"] .order-success__line-total {
  margin-left: 0; color: #111827; font-size: 12px; font-weight: 800;
}
.storefront[data-page="checkout-success"] .order-success__address,
.storefront[data-page="checkout-success"] .order-success__panel p {
  margin: 0; color: #4e5a69; font-size: 12px; line-height: 1.55;
}
.storefront[data-page="checkout-success"] .order-success__actions {
  grid-column: 1 / -1; display: flex; justify-content: center; gap: 10px;
  margin-top: 4px;
}
.storefront[data-page="checkout-success"] .order-success__continue,
.storefront[data-page="checkout-success"] .order-success__orders {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 17px; border-radius: 6px;
  font-size: 12px; font-weight: 750; text-decoration: none;
}
.storefront[data-page="checkout-success"] .order-success__continue {
  border: 1px solid #315efb; background: #315efb; color: #fff;
}
.storefront[data-page="checkout-success"] .order-success__continue:hover {
  border-color: #244de0; background: #244de0; text-decoration: none;
}
.storefront[data-page="checkout-success"] .order-success__orders {
  border: 1px solid #cfe6f7; background: #fff; color: #168ee3;
}
.storefront[data-page="checkout-success"] .order-success__orders:hover {
  border-color: #9bd1f4; background: #eff8ff; text-decoration: none;
}

@media (max-width: 980px) {
  .cart-summary__layout,
  .checkout__layout {
    grid-template-columns: 1fr;
  }
  .cart-summary__footer,
  .checkout__summary {
    position: static;
  }
  .checkout__summary,
  .checkout__main {
    grid-column: auto; grid-row: auto;
  }
  .checkout__summary { order: 2; }
  .checkout__main { order: 1; }
  .cart-line {
    grid-template-columns: 76px minmax(0, 1fr) 92px 72px;
    grid-template-areas:
      "media info subtotal remove"
      "media info unit qty";
  }
  .cart-line__media { grid-area: media; }
  .cart-line__info { grid-area: info; }
  .cart-line__unit-price { grid-area: unit; }
  .cart-line__qty { grid-area: qty; }
  .cart-line__subtotal { grid-area: subtotal; }
  .cart-line__remove { grid-area: remove; }
  .cart-line__img { width: 76px; height: 68px; }
}

@media (max-width: 680px) {
  .storefront[data-page="cart"] .storefront__main,
  .storefront[data-page="checkout"] .storefront__main,
  .storefront[data-page="checkout-success"] .storefront__main {
    margin-top: 14px; padding: 0 12px;
  }
  .cart-page__header {
    align-items: flex-start; flex-direction: column; gap: 12px;
  }
  .cart-page__header h1,
  .checkout__header h1 {
    font-size: 25px;
  }
  .cart-page__continue { width: 100%; }
  .cart-summary__items,
  .cart-summary__footer,
  .checkout__summary,
  .checkout__form,
  .checkout__review,
  .storefront[data-page="checkout-success"] .order-success__panel {
    padding: 14px;
  }
  .cart-line {
    grid-template-columns: 68px minmax(0, 1fr) auto;
    grid-template-areas:
      "media info remove"
      "media unit unit"
      "qty subtotal subtotal";
    gap: 9px 12px; min-height: 0; padding: 11px;
  }
  .cart-line__img { width: 68px; height: 62px; }
  .cart-line__unit-price,
  .cart-line__subtotal {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; text-align: right;
  }
  .cart-line__unit-price::before {
    content: "Precio"; color: #687588; font-size: 10px; font-weight: 700;
  }
  .cart-line__subtotal::before {
    content: "Subtotal"; color: #687588; font-size: 10px; font-weight: 700;
  }
  .cart-line__qty { width: 68px; }
  .cart-line__remove { min-width: 36px; padding-right: 8px; padding-left: 8px; }
  .checkout__steps {
    grid-template-columns: 1fr; gap: 0; max-width: none;
    padding: 14px 14px 4px;
  }
  .checkout__steps::before {
    content: none;
  }
  .checkout__step {
    grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto;
    justify-items: start; align-items: start; gap: 10px;
    min-height: 54px; padding: 0 0 14px; text-align: left;
  }
  .checkout__step:not(:last-child)::after {
    top: 34px; bottom: 5px; left: 16px; right: auto;
    width: 3px; height: auto;
  }
  .checkout__step.is-complete:not(:last-child)::after {
    background: linear-gradient(180deg, var(--checkout-step-accent), #54b1ed);
  }
  .checkout__step-title {
    padding-top: 8px; text-align: left;
  }
  .checkout__shipping-option,
  .checkout__payment-option {
    grid-template-columns: auto minmax(0, 1fr); gap: 9px;
  }
  .checkout__shipping-cost {
    grid-column: 2; justify-self: start;
  }
  .checkout__nav,
  .checkout__review-actions {
    align-items: stretch; flex-direction: column-reverse;
  }
  .checkout__back,
  .checkout__next,
  .checkout__submit,
  .checkout__back-form,
  .checkout__place-order {
    width: 100%;
  }
  .checkout__review {
    grid-template-columns: 1fr; gap: 10px;
  }
  .checkout__review-block:first-child { grid-column: auto; }
  .storefront[data-page="checkout-success"] .order-success {
    grid-template-columns: 1fr; gap: 12px;
  }
  .storefront[data-page="checkout-success"] .order-success__header,
  .storefront[data-page="checkout-success"] .order-success__panel:first-of-type,
  .storefront[data-page="checkout-success"] .order-success__actions {
    grid-column: auto;
  }
  .storefront[data-page="checkout-success"] .order-success__header {
    padding: 22px 16px;
  }
  .storefront[data-page="checkout-success"] .order-success__actions {
    flex-direction: column;
  }
}