/* Shopper / Closet — Design system from Figma (Shopper Ecommerce UI Kit) — pixel perfect */

:root {
  /* Primary */
  --shopper-dark: #01221D;
  --shopper-green: #07BFA5;
  --shopper-red: #FF6264;
  --shopper-orange: #FF914D;
  --shopper-purple: #7B61FF;
  --shopper-yellow: #FFBD59;
  --shopper-pink: #F5B3A5;
  /* Second */
  --shopper-white: #FFFFFF;
  --shopper-black: #01040D;
  --shopper-grey: #8991A4;
  --shopper-light-grey: #F4F5F6;
  --shopper-bg: #F9FAFB;
  /* Card — Figma Effect: DROP_SHADOW, color #1B19561A, offset (0, 4), radius 30, spread 0 */
  --shopper-shadow: 0px 4px 30px 0px rgba(27, 25, 86, 0.102);
  /* Typography — exact from Figma (Tittle/Body/Caption) */
  --shopper-font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --shopper-fs-caption: 12px;
  --shopper-fs-body: 15px;
  --shopper-fs-body-sm: 14px;
  --shopper-fs-title-15: 15px;
  --shopper-fs-title-sm: 18px;
  --shopper-fs-title: 22px;
  --shopper-fs-title-lg: 28px;
  --shopper-lh-caption: 16px;
  --shopper-lh-body: 24px;
  --shopper-lh-body-sm: 22px;
  --shopper-lh-title-sm: 24px;
  --shopper-lh-title: 28px;
  --shopper-lh-title-lg: 36px;
  --shopper-fw-regular: 400;
  --shopper-fw-medium: 500;
  --shopper-fw-semibold: 600;
  --shopper-fw-bold: 700;
  --shopper-ls-caption: 1px;
  /* Border radius — Figma 8px typical for cards/inputs */
  --shopper-radius-sm: 8px;
  --shopper-radius: 12px;
  --shopper-radius-lg: 16px;
  /* Spacing scale (4px base, match Figma) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
}

.shopper-theme {
  font-family: var(--shopper-font);
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  font-weight: var(--shopper-fw-regular);
  color: var(--shopper-black);
  background: var(--shopper-bg);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Prevenir zoom en doble toque — app móvil nativa */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Permitir selección de texto solo en inputs y textareas */
input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  touch-action: auto;
}

/* Elementos interactivos: prevenir zoom en doble toque */
a,
button,
[role="button"],
[onclick],
[data-add-to-cart],
[data-toggle],
[data-bs-toggle] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Imágenes y videos: no zoom en doble toque */
img,
video,
iframe {
  touch-action: manipulation;
  -webkit-user-drag: none;
  user-select: none;
}

/* Typography — pixel-perfect Figma styles */
.shopper-text-caption {
  font-size: var(--shopper-fs-caption);
  line-height: var(--shopper-lh-caption);
  font-weight: var(--shopper-fw-semibold);
  letter-spacing: var(--shopper-ls-caption);
}
.shopper-text-body {
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  font-weight: var(--shopper-fw-regular);
}
.shopper-text-body-sm {
  font-size: var(--shopper-fs-body-sm);
  line-height: var(--shopper-lh-body-sm);
  font-weight: var(--shopper-fw-regular);
}
.shopper-text-title-15 {
  font-size: var(--shopper-fs-title-15);
  line-height: var(--shopper-lh-body);
  font-weight: var(--shopper-fw-medium);
}
.shopper-text-bold-15 {
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  font-weight: var(--shopper-fw-bold);
}
.shopper-text-title-sm {
  font-size: var(--shopper-fs-title-sm);
  line-height: var(--shopper-lh-title-sm);
  font-weight: var(--shopper-fw-bold);
}
.shopper-text-title {
  font-size: var(--shopper-fs-title);
  line-height: var(--shopper-lh-title);
  font-weight: var(--shopper-fw-bold);
}
.shopper-text-title-lg {
  font-size: var(--shopper-fs-title-lg);
  line-height: var(--shopper-lh-title-lg);
  font-weight: var(--shopper-fw-bold);
}
.shopper-text-title-12 {
  font-size: var(--shopper-fs-caption);
  line-height: var(--shopper-lh-caption);
  font-weight: var(--shopper-fw-semibold);
}

/* Container */
.shopper-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .shopper-container { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* Header */
.shopper-header {
  background: var(--shopper-dark);
  color: var(--shopper-white);
  padding: var(--space-4) 0 0;
}

.shopper-header__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .shopper-header__top { padding-left: var(--space-6); padding-right: var(--space-6); }
}

.shopper-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font-weight: var(--shopper-fw-bold);
  font-size: var(--shopper-fs-title-sm);
  line-height: var(--shopper-lh-title-sm);
}

.shopper-logo__icon { font-size: var(--shopper-fs-title); }
.shopper-logo__icon--img { width: 28px; height: 28px; display: block; object-fit: contain; }

/* SVG icons from sprite (pixel-perfect match to Figma) */
.shopper-icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: -0.35em;
  fill: currentColor;
}
.shopper-icon--lg { width: 1.5em; height: 1.5em; }
.shopper-icon--sm { width: 1em; height: 1em; }

/* Search: wrapper for input + dropdown (Figma 4051-9951) */
.shopper-search-wrap {
  flex: 1;
  min-width: 200px;
  max-width: 560px;
  position: relative;
}

.shopper-search {
  display: flex;
  align-items: center;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-sm);
  padding: var(--space-2) var(--space-4);
  box-shadow: 0px 2px 8px 0px rgba(1, 4, 13, 0.08);
}

.shopper-search__icon {
  margin-right: var(--space-2);
  color: var(--shopper-grey);
  flex-shrink: 0;
}

.shopper-search__icon .shopper-icon { width: 1.25rem; height: 1.25rem; }

.shopper-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--shopper-black);
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  font-weight: var(--shopper-fw-regular);
  outline: none;
  font-family: var(--shopper-font);
}

.shopper-search__input::placeholder { color: var(--shopper-grey); }

/* Dropdown: visible on focus */
.shopper-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  right: 0;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  box-shadow: var(--shopper-shadow);
  padding: var(--space-5);
  z-index: 100;
  max-height: min(80vh, 420px);
  overflow-y: auto;
}

.shopper-search-wrap:focus-within .shopper-search-dropdown { display: block; }

.shopper-search-dropdown__section { margin-bottom: var(--space-5); }
.shopper-search-dropdown__section:last-child { margin-bottom: 0; }

.shopper-search-dropdown__title {
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-3);
}

.shopper-search-dropdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.shopper-search-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--shopper-light-grey);
}

.shopper-search-dropdown__item:last-child { border-bottom: none; }

.shopper-search-dropdown__link {
  flex: 1;
  color: var(--shopper-black);
  text-decoration: none;
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
}

.shopper-search-dropdown__link:hover { color: var(--shopper-green); }

.shopper-search-dropdown__remove {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--shopper-grey);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}

.shopper-search-dropdown__remove:hover { color: var(--shopper-black); background: var(--shopper-light-grey); }

.shopper-search-dropdown__remove .shopper-icon { width: 1rem; height: 1rem; }

/* Trending: 2x3 grid of small cards */
.shopper-search-dropdown__trending {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.shopper-search-dropdown__trend-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--shopper-light-grey);
  border-radius: var(--shopper-radius);
  text-decoration: none;
  color: var(--shopper-black);
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  transition: background 0.15s ease;
}

.shopper-search-dropdown__trend-item:hover {
  background: #e8eaee;
  color: var(--shopper-green);
}

.shopper-search-dropdown__trend-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shopper-white);
}

.shopper-search-dropdown__trend-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shopper-search-dropdown__trend-label { text-align: center; }

.shopper-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  overflow: visible;
}

.shopper-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--shopper-white);
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
  text-decoration: none;
}
.shopper-icon-btn .shopper-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.shopper-header__actions .shopper-btn {
  height: 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  flex-shrink: 0;
}

/* User menu (logged-in): avatar + name, dropdown tipo shadcn */
.shopper-user-menu {
  position: relative;
  overflow: visible;
}
.shopper-user-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-2) 0 0;
  border: none;
  background: transparent;
  color: var(--shopper-white);
  font-family: var(--shopper-font);
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-medium);
  cursor: pointer;
  border-radius: var(--shopper-radius-sm);
  text-decoration: none;
}
.shopper-user-menu__trigger:hover,
.shopper-user-menu__trigger:focus-visible {
  color: var(--shopper-white);
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.shopper-user-menu__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1.5px solid var(--shopper-white);
  background: rgba(255, 255, 255, 0.12);
}
.shopper-user-menu__initials {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-white);
  line-height: 1;
}
.shopper-user-menu__name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 479px) {
  .shopper-user-menu__name { max-width: 80px; }
}
.shopper-user-menu__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 180px;
  padding: var(--space-2);
  margin: var(--space-2) 0 0;
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius);
  box-shadow: var(--shopper-shadow);
  background: var(--shopper-white);
  list-style: none;
  z-index: 1050;
}
.shopper-user-menu--open .shopper-user-menu__dropdown {
  display: block;
}
.shopper-user-menu__dropdown li {
  margin: 0;
}
.shopper-user-menu__dropdown .shopper-user-menu__item {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--shopper-radius-sm);
  font-size: var(--shopper-fs-body);
  color: var(--shopper-black);
  text-decoration: none;
}
.shopper-user-menu__dropdown .shopper-user-menu__item:hover,
.shopper-user-menu__dropdown .shopper-user-menu__item:focus {
  background: var(--shopper-bg);
  color: var(--shopper-black);
}
.shopper-user-menu__divider {
  margin: var(--space-2) 0;
  border: 0;
  border-top: 1px solid var(--shopper-light-grey);
}
.shopper-user-menu__item--logout {
  color: var(--shopper-red);
}
.shopper-user-menu__item--logout:hover,
.shopper-user-menu__item--logout:focus {
  background: rgba(255, 98, 100, 0.08);
  color: var(--shopper-red);
}

.shopper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--shopper-radius-sm);
  font-weight: var(--shopper-fw-semibold);
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  font-family: var(--shopper-font);
}

.shopper-btn--outline {
  background: transparent;
  color: var(--shopper-white);
  border-color: var(--shopper-white);
}

.shopper-btn--outline:hover { background: rgba(255,255,255,0.1); color: var(--shopper-white); }

.shopper-btn--green {
  background: var(--shopper-green);
  color: var(--shopper-white);
  border: none;
}
.shopper-btn--green:hover { opacity: 0.9; color: var(--shopper-white); }

.shopper-btn--outline-dark {
  background: var(--shopper-white);
  color: var(--shopper-black);
  border: 1px solid var(--shopper-grey);
}
.shopper-btn--outline-dark:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }

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

.shopper-btn--dark:hover { opacity: 0.9; color: var(--shopper-white); }

.shopper-nav {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .shopper-nav { padding-left: var(--space-6); padding-right: var(--space-6); }
}

.shopper-nav__link {
  color: var(--shopper-white);
  text-decoration: none;
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  font-weight: var(--shopper-fw-medium);
}

.shopper-nav__link:hover { color: var(--shopper-green); }

/* Sections */
.shopper-section {
  padding: var(--space-10) 0;
}

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

.shopper-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.shopper-section__head-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shopper-section__title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  line-height: var(--shopper-lh-title);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shopper-section__title-icon { font-size: var(--shopper-fs-title-sm); }

.shopper-section__more {
  color: var(--shopper-black);
  text-decoration: none;
  font-size: var(--shopper-fs-title-sm);
}

.shopper-section__more:hover { color: var(--shopper-green); }
.shopper-section__more--light { color: var(--shopper-white); }
.shopper-section__more--light:hover { color: var(--shopper-green); }

.shopper-section__head--light .shopper-section__title { color: var(--shopper-white); }

/* Hero — a todo el ancho del viewport */
.shopper-hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--shopper-dark);
  padding: 0 0 var(--space-6);
  position: relative;
  box-sizing: border-box;
}

.shopper-hero__banner {
  width: 100%;
  min-height: max(260px, 28vw);
  background: var(--shopper-green);
  position: relative;
  overflow: visible;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.shopper-hero__products {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 2rem;
}

.shopper-hero__product {
  font-size: var(--shopper-fs-title-lg);
  line-height: var(--shopper-lh-title-lg);
  filter: drop-shadow(0px 4px 8px rgba(1, 4, 13, 0.15));
}

.shopper-hero__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgba(255,255,255,0.2);
  font-size: var(--shopper-fs-title);
}

.shopper-hero__shape--1 { position: absolute; top: 10%; left: 5%; }
.shopper-hero__shape--2 { position: absolute; top: 20%; right: 10%; }
.shopper-hero__shape--3 { position: absolute; bottom: 15%; left: 15%; }
.shopper-hero__shape--4 { position: absolute; bottom: 20%; right: 20%; }

.shopper-hero__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.shopper-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
}

.shopper-hero__dot--active { background: var(--shopper-white); }

/* Categories */
/* Categories — Figma node 4023-7443: grid 2×3, card = texto izquierda + imagen derecha */
.shopper-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .shopper-categories { gap: var(--space-5); }
}

.shopper-category-card {
  background: var(--shopper-light-grey);
  border: none;
  border-radius: var(--shopper-radius);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: var(--shopper-black);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  box-shadow: var(--shopper-shadow);
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 88px;
}

.shopper-category-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.shopper-category-card__name {
  font-weight: var(--shopper-fw-semibold);
  font-size: var(--shopper-fs-body);
  margin: 0;
}

.shopper-category-card__count {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
}

.shopper-category-card__img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--shopper-radius);
  background: var(--shopper-white);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shopper-category-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shopper-category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shopper-shadow);
  color: var(--shopper-black);
}

/* Timer */
.shopper-timer {
  background: var(--shopper-green);
  color: var(--shopper-white);
  padding: var(--space-1) var(--space-3);
  border-radius: 4px;
  font-weight: var(--shopper-fw-semibold);
  font-size: var(--shopper-fs-body-sm);
}

/* Products */
.shopper-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

@media (min-width: 640px) {
  .shopper-products { grid-template-columns: repeat(4, 1fr); }
}

.shopper-product-card {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  padding: var(--space-4);
  position: relative;
  border: 1px solid var(--shopper-light-grey);
  box-shadow: var(--shopper-shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.shopper-product-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--shopper-red);
  color: var(--shopper-white);
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-semibold);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
}

.shopper-product-card__wish {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  border: none;
  background: transparent;
  color: var(--shopper-grey);
  cursor: pointer;
  font-size: var(--shopper-fs-body);
}

.shopper-product-card__wish--active { color: var(--shopper-red); }
.shopper-product-card__wish .shopper-icon { transition: transform 0.2s ease, color 0.2s ease; }
.shopper-product-card__wish.wish-btn--animate .shopper-icon {
  animation: wish-pop 0.32s ease;
}
@keyframes wish-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.shopper-product-card__wish.wish-toggle--loading { pointer-events: none; opacity: 0.8; }

/* Card link: image + name + price go to product detail; (+) and heart stay on top */
.shopper-product-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 0;
}

.shopper-product-card__link,
.shopper-product-card__link:hover,
.shopper-product-card__link:focus,
.shopper-product-card__link:active {
  text-decoration: none;
  color: inherit;
}

.shopper-product-card__link .shopper-product-card__name,
.shopper-product-card__link .shopper-product-card__price,
.shopper-product-card__link .shopper-product-card__price-current,
.shopper-product-card__link .shopper-product-card__price-old {
  color: inherit;
  text-decoration: none;
}

.shopper-product-card__link .shopper-product-card__price-current { color: var(--shopper-black); }
.shopper-product-card__link .shopper-product-card__price-old { color: var(--shopper-grey); text-decoration: line-through; }

.shopper-product-card__link:hover .shopper-product-card__name { color: var(--shopper-green); }

.shopper-product-card__img {
  font-size: 48px;
  margin: var(--space-4) 0;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopper-product-card__img img { width: 100%; max-height: 140px; object-fit: contain; }

.shopper-product-card__name {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  margin: 0 0 var(--space-2);
}

.shopper-product-card__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.shopper-product-card__price-current { font-weight: var(--shopper-fw-bold); color: var(--shopper-black); }
.shopper-product-card__price-old { font-size: var(--shopper-fs-body-sm); color: var(--shopper-grey); text-decoration: line-through; }

.shopper-product-card__add-wrap {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: var(--space-1);
  min-height: var(--space-8);
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.shopper-product-card__add {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--shopper-green);
  color: var(--shopper-white);
  cursor: pointer;
  font-family: var(--shopper-font);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: -0.875rem;
  box-shadow: 0px 2px 8px 0px rgba(7, 191, 165, 0.35);
}

.shopper-product-card__add .shopper-icon { width: 1.25rem; height: 1.25rem; }

.shopper-product-card__add:hover { opacity: 0.9; }

/* Add to cart: loading state (all add buttons) */
[data-add-to-cart].add-to-cart--loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}
[data-add-to-cart].add-to-cart--loading .shopper-icon {
  opacity: 0;
}
[data-add-to-cart].add-to-cart--loading::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: add-to-cart-spin 0.6s linear infinite;
}
@keyframes add-to-cart-spin {
  to { transform: rotate(360deg); }
}

/* Coupons */
.shopper-coupons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .shopper-coupons { max-width: 600px; margin: 0 auto; }
}

.shopper-coupon {
  border-radius: var(--shopper-radius);
  padding: var(--space-6);
  position: relative;
  box-shadow: var(--shopper-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.shopper-coupon--pink { background: linear-gradient(135deg, var(--shopper-pink), #e8a89a); }
.shopper-coupon--purple { background: linear-gradient(135deg, #a5b4f5, var(--shopper-purple)); color: var(--shopper-white); }

.shopper-coupon__illus { font-size: 2rem; }
.shopper-coupon__illus img { width: 64px; height: 64px; object-fit: contain; }
.shopper-coupon__off { font-weight: var(--shopper-fw-bold); font-size: var(--shopper-fs-title-sm); }
.shopper-coupon__code {
  padding: var(--space-2) var(--space-4);
  border: 2px dashed rgba(0,0,0,0.3);
  border-radius: var(--shopper-radius-sm);
  background: rgba(255,255,255,0.5);
  font-weight: var(--shopper-fw-semibold);
  font-size: var(--shopper-fs-body-sm);
  cursor: pointer;
  font-family: var(--shopper-font);
}

.shopper-coupon--purple .shopper-coupon__code { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.2); color: var(--shopper-white); }

/* Livestream */
.shopper-live-badge {
  background: var(--shopper-purple);
  color: var(--shopper-white);
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-semibold);
}

.shopper-livestreams {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .shopper-livestreams { grid-template-columns: repeat(4, 1fr); }
}

.shopper-livestream-card {
  position: relative;
  border-radius: var(--shopper-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--shopper-white);
  box-shadow: var(--shopper-shadow);
}

.shopper-livestream-card__thumb {
  aspect-ratio: 1;
  background: var(--shopper-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--shopper-fs-title-lg);
}
.shopper-livestream-card__thumb img { width: 100%; height: 100%; object-fit: cover; }

.shopper-livestream-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--shopper-red);
  color: var(--shopper-white);
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-bold);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  z-index: 1;
}

.shopper-livestream-card__views {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  font-size: var(--shopper-fs-caption);
  z-index: 1;
}

.shopper-livestream-card__sale {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  background: rgba(0,0,0,0.6);
  font-size: var(--shopper-fs-caption);
  padding: var(--space-1) var(--space-2);
  border-radius: 4px;
  z-index: 1;
}

/* Newsletter (Figma 4071-12972) */
.shopper-newsletter {
  background: var(--shopper-pink);
  padding: var(--space-6) 0 var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.shopper-newsletter__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
  min-height: 120px;
}
@media (min-width: 768px) {
  .shopper-newsletter__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-10);
    min-height: 140px;
  }
}

/* Ilustración: anclada abajo a la izquierda, base sobre el borde inferior de la franja */
.shopper-newsletter__illus {
  justify-self: start;
  align-self: end;
  order: -1;
  line-height: 0;
}
@media (min-width: 768px) {
  .shopper-newsletter__illus { order: 0; justify-self: start; align-self: end; }
}
.shopper-newsletter__illus-img {
  display: block;
  max-width: 180px;
  height: auto;
  object-fit: contain;
  object-position: bottom left;
}
@media (min-width: 640px) {
  .shopper-newsletter__illus-img { max-width: 220px; }
}
@media (min-width: 768px) {
  .shopper-newsletter__illus-img { max-width: 240px; }
}

.shopper-newsletter__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}
@media (min-width: 768px) {
  .shopper-newsletter__text { justify-self: center; text-align: left; }
}

.shopper-newsletter__text strong {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
}
@media (min-width: 640px) {
  .shopper-newsletter__text strong { font-size: var(--shopper-fs-title-sm); }
}
.shopper-newsletter__text span {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-regular);
  color: var(--shopper-black);
  opacity: 0.9;
}

.shopper-newsletter__form {
  display: flex;
  gap: var(--space-2);
  min-width: 0;
  align-items: center;
}
@media (min-width: 768px) {
  .shopper-newsletter__form { justify-self: start; max-width: 360px; }
}

.shopper-newsletter__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-size: var(--shopper-fs-body);
  font-family: var(--shopper-font);
  background: rgba(255, 255, 255, 0.6);
}
.shopper-newsletter__input::placeholder {
  color: var(--shopper-black);
  opacity: 0.45;
}
.shopper-newsletter__input:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.9);
}

.shopper-newsletter .shopper-btn--dark {
  flex-shrink: 0;
  background: #1B1B1B;
  border-color: #1B1B1B;
  border-radius: 999px;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
.shopper-newsletter .shopper-btn--dark:hover {
  background: #000;
  border-color: #000;
}

/* Category / Product listing (Figma 4051-11385) */
.shopper-listing {
  padding: var(--space-6) 0 var(--space-8);
}

.shopper-breadcrumb { margin-bottom: var(--space-5); }
.shopper-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
}
.shopper-breadcrumb__item { display: flex; align-items: center; gap: var(--space-1); }
.shopper-breadcrumb__link { color: var(--shopper-grey); text-decoration: none; }
.shopper-breadcrumb__link:hover { color: var(--shopper-green); }
.shopper-breadcrumb__sep { color: var(--shopper-grey); }
.shopper-breadcrumb__current { color: var(--shopper-black); font-weight: var(--shopper-fw-medium); }

.shopper-listing__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .shopper-listing__body { flex-direction: row; align-items: flex-start; gap: var(--space-8); }
}

.shopper-listing__sidebar {
  flex-shrink: 0;
  width: 100%;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  padding: var(--space-5);
  border: 1px solid var(--shopper-light-grey);
  box-shadow: var(--shopper-shadow);
}
@media (min-width: 900px) { .shopper-listing__sidebar { width: 260px; } }

.shopper-sidebar__block { margin-bottom: var(--space-6); }
.shopper-sidebar__block:last-of-type { margin-bottom: 0; }

.shopper-sidebar__title {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-3);
}

.shopper-sidebar__list { list-style: none; margin: 0; padding: 0; }
.shopper-sidebar__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.shopper-sidebar__item + .shopper-sidebar__item { margin-top: var(--space-1); }
.shopper-sidebar__link {
  flex: 1;
  color: var(--shopper-black);
  text-decoration: none;
  font-size: var(--shopper-fs-body);
  padding: var(--space-2) 0;
}
.shopper-sidebar__link:hover { color: var(--shopper-green); }
.shopper-sidebar__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--shopper-grey);
  flex-shrink: 0;
}
.shopper-sidebar__show-all {
  margin-top: var(--space-3);
  padding: 0;
  border: none;
  background: transparent;
  color: var(--shopper-green);
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  cursor: pointer;
  font-family: var(--shopper-font);
}
.shopper-sidebar__show-all:hover { text-decoration: underline; }

/* Filters */
.shopper-filter { margin-bottom: var(--space-5); }
.shopper-filter__label {
  display: block;
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-semibold);
  letter-spacing: 0.05em;
  color: var(--shopper-grey);
  margin-bottom: var(--space-2);
}
.shopper-filter__colors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.shopper-filter__swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  box-shadow: 0px 1px 3px 0px rgba(1, 4, 13, 0.1);
}
.shopper-filter__swatch:hover { transform: scale(1.08); }
.shopper-filter__swatch--check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.25rem;
  border-left: 2px solid var(--shopper-white);
  border-bottom: 2px solid var(--shopper-white);
  transform: translate(-50%, -60%) rotate(-45deg);
}
.shopper-filter__swatch[style*="background:#fff"]::after,
.shopper-filter__swatch[style*="background: #fff"]::after { border-color: var(--shopper-black); }

.shopper-filter__price { margin-bottom: var(--space-2); }
.shopper-filter__range {
  width: 100%;
  height: 6px;
  accent-color: var(--shopper-green);
}
.shopper-filter__price-values {
  display: flex;
  justify-content: space-between;
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
  margin-top: var(--space-1);
}
.shopper-filter__rating { list-style: none; margin: 0; padding: 0; }
.shopper-filter__rating li + li { margin-top: var(--space-1); }
.shopper-filter__rating-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
  border: none;
  background: transparent;
  color: var(--shopper-grey);
  font-size: var(--shopper-fs-body-sm);
  cursor: pointer;
  font-family: var(--shopper-font);
  width: 100%;
  text-align: left;
}
.shopper-filter__rating-item:hover { color: var(--shopper-black); }
.shopper-filter__rating-item--active { color: var(--shopper-yellow); }
.shopper-filter__rating-item .shopper-icon { width: 0.875rem; height: 0.875rem; }

.shopper-sidebar__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.shopper-sidebar__actions .shopper-btn { flex: 1; }

/* Listing main */
.shopper-listing__main { flex: 1; min-width: 0; }

.shopper-listing__title {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-4);
}

.shopper-listing__sorts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.shopper-sort-pill {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: 9999px;
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  text-decoration: none;
  color: var(--shopper-black);
  background: var(--shopper-white);
  border: 1px solid var(--shopper-light-grey);
  transition: background 0.15s, color 0.15s;
}
.shopper-sort-pill:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }
.shopper-sort-pill--active {
  background: var(--shopper-green);
  color: var(--shopper-white);
  border-color: var(--shopper-green);
}
.shopper-sort-pill--active:hover { background: var(--shopper-green); color: var(--shopper-white); opacity: 0.95; }

/* Listing grid: 3 columns */
.shopper-products--listing { padding-bottom: var(--space-4); }
@media (min-width: 640px) {
  .shopper-products--listing { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .shopper-products--listing { grid-template-columns: repeat(3, 1fr); }
}

.shopper-product-card__name a { color: inherit; text-decoration: none; }
.shopper-product-card__name a:hover { color: var(--shopper-green); }
.shopper-product-card__img { text-decoration: none; display: block; }
.shopper-products--listing .shopper-product-card__price-current { color: var(--shopper-green); }

/* Pagination */
.shopper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}
.shopper-pagination__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.shopper-pagination__prev,
.shopper-pagination__next,
.shopper-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space-2);
  border-radius: 50%;
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  text-decoration: none;
  color: var(--shopper-black);
  background: var(--shopper-white);
  border: 1px solid var(--shopper-light-grey);
  transition: background 0.15s, color 0.15s;
}
.shopper-pagination__prev:hover,
.shopper-pagination__next:hover,
.shopper-pagination__page:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }
.shopper-pagination__page--current {
  background: var(--shopper-green);
  color: var(--shopper-white);
  border-color: var(--shopper-green);
}
.shopper-pagination__page--current:hover { background: var(--shopper-green); color: var(--shopper-white); }
.shopper-pagination__prev--disabled,
.shopper-pagination__next--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.shopper-pagination__ellipsis {
  padding: 0 var(--space-1);
  color: var(--shopper-grey);
  font-size: var(--shopper-fs-body-sm);
}

/* Product detail page (Figma 4068-12430) */
.shopper-product-detail {
  padding: var(--space-6) 0 var(--space-8);
}

.shopper-pdp {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  background: var(--shopper-light-grey);
  border-radius: var(--shopper-radius);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .shopper-pdp {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
  }
}

.shopper-pdp__gallery {
  position: relative;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.shopper-pdp__gallery-img {
  width: 100%;
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopper-pdp__gallery-img img {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
}

.shopper-pdp__gallery-prev,
.shopper-pdp__gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: var(--shopper-white);
  color: var(--shopper-black);
  box-shadow: var(--shopper-shadow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.shopper-pdp__gallery-prev:hover,
.shopper-pdp__gallery-next:hover { background: var(--shopper-light-grey); }
.shopper-pdp__gallery-prev { left: var(--space-2); }
.shopper-pdp__gallery-next { right: var(--space-2); }
.shopper-pdp__gallery-prev .shopper-icon,
.shopper-pdp__gallery-next .shopper-icon { width: 1.25rem; height: 1.25rem; }

.shopper-pdp__gallery-dots {
  position: absolute;
  bottom: var(--space-4);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.shopper-pdp__gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--shopper-grey);
  opacity: 0.5;
}
.shopper-pdp__gallery-dot--active {
  background: var(--shopper-black);
  opacity: 1;
}

.shopper-pdp__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.shopper-pdp__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.shopper-pdp__title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0;
  line-height: 1.3;
}

.shopper-pdp__try-on { flex-shrink: 0; }

.shopper-pdp__price {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-green);
  margin: 0;
}

.shopper-pdp__desc {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-black);
  line-height: 1.5;
}
.shopper-pdp__desc p { margin: 0 0 var(--space-2); }
.shopper-pdp__more {
  color: var(--shopper-green);
  font-weight: var(--shopper-fw-semibold);
  text-decoration: none;
}
.shopper-pdp__more:hover { text-decoration: underline; }

.shopper-pdp__colors {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shopper-pdp__colors-label {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-black);
}
.shopper-pdp__swatches {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.shopper-pdp__swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  box-shadow: 0px 1px 3px 0px rgba(1, 4, 13, 0.12);
}
.shopper-pdp__swatch:hover { transform: scale(1.08); }
.shopper-pdp__swatch--selected { border-color: var(--shopper-black); }
.shopper-pdp__swatch--selected::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.5rem;
  height: 0.25rem;
  border-left: 2px solid var(--shopper-white);
  border-bottom: 2px solid var(--shopper-white);
  transform: translate(-50%, -60%) rotate(-45deg);
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
}
.shopper-pdp__swatch[style*="background:#1B1B1B"]::after,
.shopper-pdp__swatch[style*="background: #1B1B1B"]::after,
.shopper-pdp__swatch[style*="background:#01040D"]::after { border-color: var(--shopper-white); }

.shopper-pdp__add {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--shopper-fs-body);
  margin-top: var(--space-2);
}

/* PDP Tabs */
.shopper-pdp__tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--shopper-light-grey);
}
.shopper-pdp__tab {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--shopper-light-grey);
  border-bottom: none;
  border-radius: var(--shopper-radius-sm) var(--shopper-radius-sm) 0 0;
  background: var(--shopper-white);
  color: var(--shopper-black);
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  cursor: pointer;
  font-family: var(--shopper-font);
  margin-bottom: -1px;
}
.shopper-pdp__tab:hover { background: var(--shopper-light-grey); }
.shopper-pdp__tab--active {
  background: var(--shopper-dark);
  color: var(--shopper-white);
  border-color: var(--shopper-dark);
}
.shopper-pdp__tab--active:hover { background: var(--shopper-dark); color: var(--shopper-white); }

/* PDP Tab panels */
.shopper-pdp__panels { margin-bottom: var(--space-10); }
.shopper-pdp__panel--hidden { display: none; }
.shopper-pdp__panel-title,
.shopper-pdp__reviews-title {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-6);
}
.shopper-pdp__panel-body {
  color: var(--shopper-black);
  line-height: 1.6;
}
.shopper-pdp__panel-body p { margin: 0 0 var(--space-4); }
.shopper-pdp__panel-body p:last-child { margin-bottom: 0; }
.shopper-pdp__details-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}
.shopper-pdp__details-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-4);
  align-items: baseline;
}
.shopper-pdp__details-term {
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-black);
  margin: 0;
}
.shopper-pdp__details-value {
  margin: 0;
  color: var(--shopper-black);
}

/* PDP Reviews */
.shopper-pdp__reviews { margin-bottom: 0; }
.shopper-pdp__reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .shopper-pdp__reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
.shopper-review-card {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  padding: var(--space-5);
  border: 1px solid var(--shopper-light-grey);
  box-shadow: var(--shopper-shadow);
}
.shopper-review-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.shopper-review-card__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--shopper-green);
  color: var(--shopper-white);
  font-weight: var(--shopper-fw-bold);
  font-size: var(--shopper-fs-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.shopper-review-card__meta { flex: 1; min-width: 0; }
.shopper-review-card__name {
  display: block;
  font-weight: var(--shopper-fw-semibold);
  font-size: var(--shopper-fs-body);
  color: var(--shopper-black);
  margin-bottom: var(--space-1);
}
.shopper-review-card__stars { display: flex; gap: 2px; }
.shopper-review-card__star { width: 0.875rem; height: 0.875rem; color: var(--shopper-yellow); }
.shopper-review-card__date {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
  flex-shrink: 0;
}
.shopper-review-card__text {
  font-size: var(--shopper-fs-body-sm);
  line-height: 1.5;
  color: var(--shopper-black);
  margin: 0 0 var(--space-3);
}
.shopper-review-card__thumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.shopper-review-card__thumbs img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 4px;
  object-fit: cover;
}
.shopper-review-card__thumbs-more {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
  font-weight: var(--shopper-fw-semibold);
}
.shopper-pdp__reviews-show {
  text-align: center;
  margin: var(--space-6) 0 0;
}
.shopper-pdp__reviews-show a {
  color: var(--shopper-green);
  font-weight: var(--shopper-fw-semibold);
  text-decoration: none;
}
.shopper-pdp__reviews-show a:hover { text-decoration: underline; }

/* Checkout / Cart (Figma 4088-11915) */
.shopper-checkout {
  padding: var(--space-6) 0 var(--space-10);
}
.shopper-checkout .shopper-breadcrumb { margin-bottom: var(--space-6); }

.shopper-checkout__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) {
  .shopper-checkout__body {
    grid-template-columns: 1fr 380px;
    gap: var(--space-10);
  }
}

.shopper-cart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.shopper-cart__title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0;
}
.shopper-cart__clear {
  flex-shrink: 0;
}

.shopper-cart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.shopper-cart-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  padding: var(--space-4);
  border: 1px solid var(--shopper-light-grey);
  box-shadow: var(--shopper-shadow);
}
.shopper-cart-item__img {
  width: 5rem;
  height: 5rem;
  border-radius: var(--shopper-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.shopper-cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shopper-cart-item__info {
  min-width: 0;
}
.shopper-cart-item__name {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  margin: 0 0 var(--space-2);
  line-height: 1.3;
}
.shopper-cart-item__name a {
  color: var(--shopper-black);
  text-decoration: none;
}
.shopper-cart-item__name a:hover { color: var(--shopper-green); }
.shopper-cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  background: var(--shopper-white);
}
.shopper-cart-item__qty-btn {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--shopper-black);
  font-size: var(--shopper-fs-body);
  cursor: pointer;
  font-family: var(--shopper-font);
}
.shopper-cart-item__qty-btn:hover { background: var(--shopper-light-grey); }
.shopper-cart-item__qty-value {
  min-width: 2rem;
  text-align: center;
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
}
.shopper-cart-item__price {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0;
  flex-shrink: 0;
}

.shopper-cart__back {
  margin: var(--space-6) 0 0;
}
.shopper-cart__back a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--shopper-green);
  font-weight: var(--shopper-fw-semibold);
  font-size: var(--shopper-fs-body);
  text-decoration: none;
}
.shopper-cart__back a:hover { text-decoration: underline; }
.shopper-cart__back-icon {
  width: 1rem;
  height: 1rem;
}

.shopper-order-summary__card {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  padding: var(--space-6);
  border: 1px solid var(--shopper-light-grey);
  box-shadow: var(--shopper-shadow);
  position: sticky;
  top: var(--space-4);
}
.shopper-order-summary__title {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-5);
}
.shopper-order-summary__rows {
  margin: 0 0 var(--space-5);
  padding: 0;
}
.shopper-order-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.shopper-order-summary__row:last-of-type { margin-bottom: 0; }
.shopper-order-summary__row dt {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-black);
  margin: 0;
  font-weight: var(--shopper-fw-regular);
}
.shopper-order-summary__row dd {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-black);
  margin: 0;
  font-weight: var(--shopper-fw-medium);
}
.shopper-order-summary__row--total {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--shopper-light-grey);
}
.shopper-order-summary__row--total dt,
.shopper-order-summary__row--total dd {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
}
.shopper-order-summary__promo {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.shopper-order-summary__promo-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  font-size: var(--shopper-fs-body);
  font-family: var(--shopper-font);
}
.shopper-order-summary__promo-input:focus {
  outline: none;
  border-color: var(--shopper-green);
}
.shopper-order-summary__promo-btn {
  flex-shrink: 0;
}
.shopper-order-summary__checkout {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  font-weight: var(--shopper-fw-semibold);
  border-radius: var(--shopper-radius-sm);
  background: #1B1B1B;
  color: var(--shopper-white);
  border: 1px solid #1B1B1B;
}
.shopper-order-summary__checkout:hover {
  background: #000;
  border-color: #000;
  color: var(--shopper-white);
}

/* Checkout Shipping & Payment (Figma 4106-10667) */
.shopper-checkout-shipping {
  padding: var(--space-6) 0 var(--space-10);
}
.shopper-checkout-shipping .shopper-breadcrumb { margin-bottom: var(--space-6); }

.shopper-checkout-shipping__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 900px) {
  .shopper-checkout-shipping__body {
    grid-template-columns: 1fr 380px;
    gap: var(--space-10);
  }
}

.shopper-shipping__main-title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-2);
}
.shopper-shipping__subtitle {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-6);
}
.shopper-shipping__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.shopper-shipping__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  background: var(--shopper-white);
  min-height: 3rem;
}
.shopper-shipping__field:focus-within {
  border-color: var(--shopper-green);
  outline: none;
}
.shopper-shipping__field-icon {
  flex-shrink: 0;
  color: var(--shopper-grey);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shopper-shipping__field-icon .shopper-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.shopper-shipping__input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: var(--space-2) 0;
  font-size: var(--shopper-fs-body);
  font-family: var(--shopper-font);
  background: transparent;
}
.shopper-shipping__input::placeholder {
  color: var(--shopper-grey);
}
.shopper-shipping__input:focus {
  outline: none;
}
.shopper-shipping__optional {
  flex-shrink: 0;
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
  margin-left: auto;
}

.shopper-payment__card {
  background: var(--shopper-white);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius);
  padding: var(--space-6);
  box-shadow: var(--shopper-shadow);
  position: sticky;
  top: var(--space-4);
}
.shopper-payment__title {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-5);
}
.shopper-payment__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.shopper-payment__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  cursor: pointer;
  background: var(--shopper-white);
}
.shopper-payment__option:hover {
  border-color: var(--shopper-grey);
}
.shopper-payment__radio {
  margin: 0;
  flex-shrink: 0;
}
.shopper-payment__option:has(.shopper-payment__radio:checked) {
  border-color: var(--shopper-green);
  background: rgba(7, 191, 165, 0.06);
}
.shopper-payment__option-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-grey);
}
.shopper-payment__option-icon .shopper-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.shopper-payment__option-icon--paypal {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-bold);
  color: #003087;
}
.shopper-payment__option-icon--clock {
  color: #7B61FF;
}
.shopper-payment__option-label {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-medium);
  color: var(--shopper-black);
}
.shopper-payment__divider {
  border: none;
  border-top: 1px solid var(--shopper-light-grey);
  margin: 0 0 var(--space-5);
}
.shopper-payment__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-5);
}
.shopper-payment__total-label {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-black);
}
.shopper-payment__total-value {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
}
.shopper-payment__submit {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--shopper-fw-semibold);
  background: #1B1B1B;
  color: var(--shopper-white);
  border: 1px solid #1B1B1B;
  border-radius: var(--shopper-radius-sm);
  cursor: pointer;
  font-family: var(--shopper-font);
  font-size: var(--shopper-fs-body);
}
.shopper-payment__submit:hover {
  background: #000;
  border-color: #000;
  color: var(--shopper-white);
}

/* Footer */
/* Footer: fondo blanco, bloque izquierda = logo teal + nombre (acento teal) + eslogan bold */
.shopper-footer {
  background: var(--shopper-white);
  color: var(--shopper-black);
  padding: var(--space-8) var(--space-4) var(--space-4);
  margin-top: auto;
}

@media (min-width: 768px) {
  .shopper-footer { padding-left: var(--space-6); padding-right: var(--space-6); }
}

.shopper-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-8);
}

.shopper-logo--footer .shopper-logo__text { color: var(--shopper-black); font-weight: var(--shopper-fw-bold); font-size: var(--shopper-fs-title); }
.shopper-logo--footer .shopper-logo__text--accent { color: var(--shopper-green); }
.shopper-logo--footer .shopper-logo__icon--img {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.shopper-logo--light .shopper-logo__text { color: var(--shopper-black); font-weight: var(--shopper-fw-bold); }
.shopper-logo--light .shopper-logo__text--accent { color: var(--shopper-green); }

/* Welcome page (Figma 4018-6890) – standalone white screen, no header/footer */
.welcome-page { background: var(--shopper-white); min-height: 100vh; }
.welcome-page .shopper-theme { background: var(--shopper-white); }
.welcome {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  box-sizing: border-box;
}
.welcome__inner {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.welcome__logo { margin-bottom: var(--space-10); }
.welcome__logo .shopper-logo { justify-content: center; }
.welcome__illus {
  margin-bottom: var(--space-10);
  display: flex;
  justify-content: center;
}
.welcome__illus-img {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}
.welcome__title {
  font-size: var(--shopper-fs-title-lg);
  line-height: var(--shopper-lh-title-lg);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-4);
  font-family: var(--shopper-font);
}
.welcome__title-brand { color: var(--shopper-black); }
.welcome__title-accent { color: var(--shopper-green); }
.welcome__text {
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-10);
}
.welcome__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.welcome__btn {
  min-width: 220px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--shopper-radius-sm);
  font-weight: var(--shopper-fw-semibold);
  font-size: var(--shopper-fs-body);
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}
.welcome__btn--signin {
  background: var(--shopper-black);
  color: var(--shopper-white);
  border: 2px solid var(--shopper-black);
}
.welcome__btn--signin:hover { opacity: 0.9; color: var(--shopper-white); }
.welcome__btn--register {
  background: var(--shopper-white);
  color: var(--shopper-black);
  border: 2px solid var(--shopper-black);
}
.welcome__btn--register:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }

/* Sign In page (Figma 4036-7120) — dark teal bg, white card, tabs, social */
.signin-page { background: var(--shopper-dark); min-height: 100vh; }
.signin {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  box-sizing: border-box;
}
.signin__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.signin__shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
}
.signin__shape--1 { width: 200px; height: 200px; background: #4A90E2; top: 10%; left: 5%; }
.signin__shape--2 { width: 160px; height: 160px; background: var(--shopper-red); top: 60%; right: 10%; }
.signin__shape--3 { width: 180px; height: 180px; background: var(--shopper-orange); bottom: 15%; left: 15%; }
.signin__shape--4 { width: 120px; height: 120px; background: var(--shopper-green); top: 25%; right: 25%; }
.signin__shape--5 { width: 100px; height: 100px; background: var(--shopper-purple); bottom: 30%; right: 20%; }
.signin__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  text-align: center;
}
.signin__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--shopper-green);
  text-decoration: none;
  font-weight: var(--shopper-fw-bold);
  font-size: var(--shopper-fs-title-sm);
  margin-bottom: var(--space-8);
}
.signin__logo:hover { color: var(--shopper-green); opacity: 0.9; }
.signin__logo-icon { width: 28px; height: 28px; display: block; }
.signin__card {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-lg);
  box-shadow: var(--shopper-shadow);
  padding: var(--space-10) var(--space-8);
  text-align: left;
}
.signin__tabs {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  padding-bottom: 0;
  border-bottom: 1px solid var(--shopper-light-grey);
}
.signin__tab {
  padding-bottom: var(--space-4);
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-grey);
  text-decoration: none;
}
.signin__tab--active {
  color: var(--shopper-black);
  border-bottom: 2px solid #e07c6a;
  margin-bottom: -1px;
}
.signin__tab:hover { color: var(--shopper-black); }
.signin__form { margin-bottom: var(--space-8); }
.signin__errors { color: var(--shopper-red); font-size: var(--shopper-fs-body-sm); margin-bottom: var(--space-4); }
.signin__field {
  display: flex;
  align-items: center;
  background: var(--shopper-white);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  padding: var(--space-4) var(--space-4);
  margin-bottom: var(--space-5);
  min-height: 48px;
  box-sizing: border-box;
}
.signin__field:focus-within { border-color: var(--shopper-green); outline: none; box-shadow: 0 0 0 2px rgba(7, 191, 165, 0.2); }
.signin__field-icon { color: var(--shopper-grey); margin-right: var(--space-3); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.signin__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--shopper-fs-body);
  color: var(--shopper-black);
  font-family: var(--shopper-font);
  padding: 0;
}
.signin__input::placeholder { color: var(--shopper-grey); }
.signin__input:focus { outline: none; }
.signin__toggle-pwd {
  margin-left: var(--space-2);
  padding: var(--space-1);
  border: none;
  background: transparent;
  color: var(--shopper-grey);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.signin__toggle-pwd:hover { color: var(--shopper-black); }
.signin__field-error { color: var(--shopper-red); font-size: var(--shopper-fs-body-sm); margin: var(--space-1) 0 var(--space-2); display: block; }
.signin__forgot { text-align: right; margin-bottom: var(--space-6); margin-top: var(--space-2); }
.signin__forgot-link {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  text-decoration: none;
}
.signin__forgot-link:hover { color: var(--shopper-black); }
.signin__btn {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  margin-top: var(--space-2);
  background: var(--shopper-green);
  color: var(--shopper-white);
  border: none;
  border-radius: var(--shopper-radius-sm);
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  font-family: var(--shopper-font);
  cursor: pointer;
  min-height: 48px;
  box-sizing: border-box;
}
.signin__btn:hover { opacity: 0.9; color: var(--shopper-white); }
.signin__or {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  text-align: center;
  margin: var(--space-8) 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.signin__or::before,
.signin__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--shopper-light-grey);
}
.signin__social {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
}
.signin__social-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--shopper-light-grey);
  background: var(--shopper-white);
  color: var(--shopper-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-bold);
  text-decoration: none;
}
.signin__social-btn:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }

/* Logout confirmation (same entrance layout as login/signup) */
.signin__logout {
  text-align: center;
  padding: var(--space-2) 0;
}
.signin__logout-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--shopper-black);
  margin: 0 0 var(--space-4);
  line-height: 1.3;
}
.signin__logout-text {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-8);
  line-height: 1.5;
}
.signin__logout-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}
.signin__btn--logout {
  background: var(--shopper-red);
  margin-top: 0;
}
.signin__btn--logout:hover {
  opacity: 0.9;
  color: var(--shopper-white);
}
.signin__logout-cancel {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-grey);
  text-decoration: none;
  padding: var(--space-2) 0;
  display: inline-block;
}
.signin__logout-cancel:hover {
  color: var(--shopper-black);
}

/* Register page: terms checkbox — más espaciado y buenas prácticas */
.signup__form .signin__field { margin-bottom: var(--space-6); }
.signup__terms {
  margin: var(--space-8) 0 var(--space-8);
  padding-top: var(--space-2);
}
.signup__terms-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--shopper-fs-body);
  color: var(--shopper-black);
  line-height: 1.5;
}
.signup__terms-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--shopper-green);
}
.signup__terms-text { line-height: 1.5; }
.signup__terms-link {
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-green);
  text-decoration: none;
}
.signup__terms-link:hover { text-decoration: underline; }
.signup__form .signin__btn { margin-top: var(--space-4); }

/* Verify Code page (Figma Verify Code — 4-digit code, auto-login) */
.verify-code__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-6);
  color: var(--shopper-black);
  text-decoration: none;
  border-radius: var(--shopper-radius-sm);
  transition: background 0.2s, color 0.2s;
}
.verify-code__back:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }
.verify-code__title {
  font-size: var(--shopper-fs-title-md);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-4);
}
.verify-code__text {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-8);
  line-height: 1.5;
}
.verify-code__email {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-8);
  word-break: break-all;
}
.verify-code__form { margin-top: var(--space-6); }
.verify-code__inputs {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-8);
}
.verify-code__input {
  width: 56px;
  height: 56px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: var(--shopper-fw-bold);
  font-family: var(--shopper-font);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  color: var(--shopper-black);
  box-sizing: border-box;
}
.verify-code__input:focus {
  border-color: var(--shopper-green);
  outline: none;
  box-shadow: 0 0 0 2px rgba(7, 191, 165, 0.2);
}
.verify-code__btn { margin-top: 0; }

.shopper-footer__tagline {
  margin: var(--space-2) 0 0;
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  line-height: 1.4;
  max-width: 14em;
}

.shopper-footer__links {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.shopper-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.shopper-footer__col-title {
  font-weight: var(--shopper-fw-bold);
  font-size: var(--shopper-fs-body-sm);
  margin-bottom: var(--space-1);
  color: var(--shopper-black);
}

.shopper-footer__col a {
  color: var(--shopper-black);
  text-decoration: none;
  font-size: var(--shopper-fs-body-sm);
  opacity: 0.9;
}

.shopper-footer__col a:hover { color: var(--shopper-green); }

.shopper-footer__bottom {
  max-width: 1200px;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--shopper-light-grey);
  text-align: center;
}

.shopper-footer__locale {
  background: transparent;
  border: none;
  color: var(--shopper-black);
  cursor: pointer;
  font-size: var(--shopper-fs-title-sm);
  padding: var(--space-1);
}

/* Legacy alerts (keep for Django messages) */
.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* ==========================================================================
   Account Settings — layout and design (Figma Account Settings)
   ========================================================================== */
.account-settings-page .shopper-container { max-width: 1200px; padding-top: var(--space-6); padding-bottom: var(--space-12); }

.account-settings {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
@media (min-width: 768px) {
  .account-settings { padding-left: var(--space-6); padding-right: var(--space-6); }
}

.account-settings__breadcrumb {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  margin-bottom: var(--space-6);
}
.account-settings__breadcrumb a {
  color: var(--shopper-grey);
  text-decoration: none;
}
.account-settings__breadcrumb a:hover { color: var(--shopper-black); }
.account-settings__breadcrumb-sep { margin: 0 var(--space-2); }
.account-settings__breadcrumb-current { color: var(--shopper-black); font-weight: var(--shopper-fw-medium); }

.account-settings__layout {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 992px) {
  .account-settings__layout {
    grid-template-columns: 260px 1fr;
    align-items: start;
  }
}

/* Sidebar */
.account-settings__sidebar {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-lg);
  box-shadow: var(--shopper-shadow);
  padding: var(--space-4);
}
.account-settings__nav { display: flex; flex-direction: column; gap: var(--space-1); }
.account-settings__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--shopper-radius-sm);
  color: var(--shopper-black);
  text-decoration: none;
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-regular);
  transition: background 0.15s ease, color 0.15s ease;
}
.account-settings__nav-item:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }
.account-settings__nav-item--active {
  background: rgba(7, 191, 165, 0.12);
  color: var(--shopper-dark);
  font-weight: var(--shopper-fw-semibold);
}
.account-settings__nav-item--active .account-settings__nav-icon--user { color: var(--shopper-green); }
.account-settings__nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--shopper-black);
}
.account-settings__nav-icon .shopper-icon { width: 1.25rem; height: 1.25rem; }
.account-settings__nav-item--logout { color: var(--shopper-red); margin-top: var(--space-4); }
.account-settings__nav-item--logout:hover { background: rgba(255, 98, 100, 0.08); color: var(--shopper-red); }
.account-settings__nav-item--logout .account-settings__nav-icon { color: var(--shopper-red); }

/* Main content */
.account-settings__main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

/* Banner */
.account-settings__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  background: var(--shopper-dark);
  color: var(--shopper-white);
  border-radius: var(--shopper-radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shopper-shadow);
}
.account-settings__banner-title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  line-height: var(--shopper-lh-title);
  margin: 0 0 var(--space-2);
}
.account-settings__banner-desc {
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  margin: 0;
  opacity: 0.9;
  max-width: 480px;
}
.account-settings__banner-btn { flex-shrink: 0; }

/* Card (Personal Information) */
.account-settings__card {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-lg);
  box-shadow: var(--shopper-shadow);
  padding: var(--space-6);
}
.account-settings__card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.account-settings__card-title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-1);
}
.account-settings__card-desc {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-grey);
  margin: 0;
}
.account-settings__edit-link {
  color: var(--shopper-green);
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-medium);
  text-decoration: none;
}
.account-settings__edit-link:hover { color: var(--shopper-dark); text-decoration: underline; }

/* Form */
.account-settings__form-grid {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}
@media (min-width: 600px) {
  .account-settings__form-grid { grid-template-columns: 1fr 1fr; }
}
.account-settings__field { display: flex; flex-direction: column; gap: var(--space-1); }
.account-settings__label {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  color: var(--shopper-black);
}
.account-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--shopper-fs-body);
  font-family: var(--shopper-font);
  color: var(--shopper-black);
  background: var(--shopper-light-grey);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--shopper-radius-sm);
  box-sizing: border-box;
}
.account-input:focus {
  outline: none;
  border-color: var(--shopper-green);
  background: var(--shopper-white);
}
.account-input[readonly] { cursor: default; }
.account-input-wrap {
  position: relative;
  display: block;
}
.account-input-wrap--icon .account-input { padding-left: 2.75rem; }
.account-input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--shopper-grey);
  pointer-events: none;
}
.account-input-icon .shopper-icon { width: 1.25rem; height: 1.25rem; }
.account-settings__field-error { font-size: var(--shopper-fs-caption); color: var(--shopper-red); }
.account-settings__errors { list-style: none; margin: 0 0 var(--space-4); padding: 0; color: var(--shopper-red); font-size: var(--shopper-fs-body-sm); }
.account-settings__form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* Stats row */
.account-settings__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.account-settings__stat-card {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-lg);
  box-shadow: var(--shopper-shadow);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.account-settings__stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--shopper-radius-sm);
}
.account-settings__stat-icon .shopper-icon { width: 1.25rem; height: 1.25rem; color: var(--shopper-white); }
.account-settings__stat-icon--blue { background: #3b82f6; }
.account-settings__stat-icon--purple { background: var(--shopper-purple); }
.account-settings__stat-icon--yellow { background: var(--shopper-yellow); }
.account-settings__stat-label {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
}
.account-settings__stat-value {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
}

/* ==========================================================================
   My Account — Figma 3749-5286 (pixel perfect)
   Header: dark green, title + settings + bell. Content: white with curve, 2x3 grid.
   ========================================================================== */
.my-account-page main { max-width: none; }
.my-account-page .mobile-main { padding: 0; }
.my-account {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--shopper-white);
}
.my-account__header {
  background: var(--shopper-dark);
  color: var(--shopper-white);
  padding: 24px 24px 32px;
  position: relative;
  border-radius: 0 0 24px 24px;
}
.my-account__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.my-account__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--shopper-white);
  padding-left: 4px;
}
.my-account__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.my-account__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--shopper-white);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.my-account__icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--shopper-white); }
.my-account__icon-btn .shopper-icon { width: 22px; height: 22px; }
.my-account__icon-btn--bell { position: relative; }
.my-account__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--shopper-red);
  border-radius: 50%;
  border: 2px solid var(--shopper-dark);
}
.my-account__main {
  flex: 1;
  padding: 40px 24px 48px;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  background: var(--shopper-white);
}
.my-account__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 0;
}
.my-account__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 112px;
  padding: 24px 20px;
  background: var(--shopper-white);
  border: 1px solid var(--shopper-black);
  border-radius: 16px;
  text-decoration: none;
  color: var(--shopper-black);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
}
.my-account__tile:hover {
  background: var(--shopper-bg);
}
.my-account__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--shopper-black);
}
.my-account__tile-icon .shopper-icon { width: 24px; height: 24px; stroke: currentColor; }
.my-account__tile-label {
  text-align: center;
  line-height: 1.3;
}
.my-account__logout-wrap {
  margin-top: 80px;
  padding-top: 0;
  text-align: center;
}
.my-account__store {
  margin-bottom: var(--space-8);
}
.my-account__store-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--shopper-white);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-lg);
  text-decoration: none;
  color: inherit;
}
.my-account__store-card--has-store:hover {
  border-color: var(--shopper-green);
  box-shadow: 0 4px 20px rgba(7, 191, 165, 0.1);
}
.my-account__store-text { display: flex; flex-direction: column; gap: var(--space-1); }
.my-account__store-title {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
}
.my-account__store-desc {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
}
.my-account__store-name {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-green);
}
.my-account__store-arrow {
  width: 20px;
  height: 20px;
  color: var(--shopper-grey);
}
.my-account__store-card--has-store:hover .my-account__store-arrow { color: var(--shopper-green); }
.my-account__store-btn { flex-shrink: 0; }
.my-account__logout {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--shopper-red);
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-medium);
  text-decoration: none;
  padding: var(--space-2) 0;
}
.my-account__logout:hover { color: var(--shopper-red); text-decoration: underline; }
.my-account__logout .shopper-icon { width: 1.25rem; height: 1.25rem; }

/* Espacio para que el contenido no quede bajo el bottom nav de base_mobile */
.my-account-page .my-account__main { padding-bottom: 96px; }

/* Personal Info (Figma 3741-4701): view-only screen from "Datos personales" */
.personal-info-page .mobile-main { padding: 0; padding-bottom: 88px; }
.personal-info__header {
  background: var(--shopper-white);
  border-bottom: 1px solid var(--shopper-light-grey);
  padding: var(--space-4) var(--space-4) var(--space-5);
}
.personal-info__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
}
.personal-info__back {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-black);
  text-decoration: none;
  border-radius: 12px;
}
.personal-info__back:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }
.personal-info__back .shopper-icon { width: 1.5rem; height: 1.5rem; }
.personal-info__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--shopper-black);
  margin: 0;
  flex: 1;
  text-align: center;
  line-height: 1.3;
}
.personal-info__edit-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-black);
  text-decoration: none;
  border-radius: 12px;
}
.personal-info__edit-icon:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }
.personal-info__edit-icon .shopper-icon { width: 1.25rem; height: 1.25rem; }
.personal-info__main {
  padding: 0 var(--space-4) var(--space-8);
  max-width: 720px;
  margin: 0 auto;
}
.personal-info__profile {
  position: relative;
  margin-bottom: var(--space-8);
  text-align: center;
}
.personal-info__banner {
  position: relative;
  height: 120px;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, #f8b4c4 0%, #b8e6e0 50%, #01221D 100%);
}
.personal-info__shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
}
.personal-info__shape--1 { width: 120px; height: 120px; background: #f8b4c4; top: -30px; right: -20px; }
.personal-info__shape--2 { width: 80px; height: 80px; background: #b8e6e0; bottom: -20px; left: 10%; }
.personal-info__shape--3 { width: 60px; height: 60px; background: rgba(1, 34, 29, 0.3); top: 40%; left: -10px; }
.personal-info__avatar-wrap {
  position: relative;
  display: inline-block;
  margin-top: -48px;
}
.personal-info__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--shopper-light-grey);
  border: 4px solid var(--shopper-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.personal-info__initials {
  font-size: 2rem;
  font-weight: 700;
  color: var(--shopper-black);
}
.personal-info__avatar-camera {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--shopper-white);
  border: 2px solid var(--shopper-light-grey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-black);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.personal-info__avatar-camera:hover { background: var(--shopper-bg); color: var(--shopper-black); }
.personal-info__avatar-camera .shopper-icon { width: 1rem; height: 1rem; }
.personal-info__name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--shopper-black);
  margin: var(--space-4) 0 0;
  line-height: 1.3;
}
.personal-info__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.personal-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.personal-info__item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--shopper-grey);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.personal-info__item-icon .shopper-icon { width: 20px; height: 20px; stroke: currentColor; }
.personal-info__item-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.personal-info__item-label {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  line-height: 1.3;
}
.personal-info__item-value {
  font-size: var(--shopper-fs-body);
  font-weight: 500;
  color: var(--shopper-black);
  line-height: 1.4;
}
.personal-info__actions {
  padding: var(--space-4) 0 0;
}
.personal-info__btn {
  display: block;
  width: 100%;
  padding: var(--space-4) var(--space-6);
  background: var(--shopper-dark);
  color: var(--shopper-white);
  font-size: var(--shopper-fs-body);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 16px;
  min-height: 52px;
  line-height: 1.3;
  box-sizing: border-box;
}
.personal-info__btn:hover { opacity: 0.9; color: var(--shopper-white); }
.personal-info__edit-icon--placeholder {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  visibility: hidden;
}

/* Wishlist page (Lista de deseos from account) */
.wishlist-page .mobile-main { padding: 0; padding-bottom: 88px; }
.wishlist-header {
  background: var(--shopper-white);
  border-bottom: 1px solid var(--shopper-light-grey);
  padding: var(--space-4);
}
.wishlist-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
}
.wishlist-header__back {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-black);
  text-decoration: none;
  border-radius: 12px;
}
.wishlist-header__back:hover { background: var(--shopper-light-grey); color: var(--shopper-black); }
.wishlist-header__back .shopper-icon { width: 1.5rem; height: 1.5rem; }
.wishlist-header__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--shopper-black);
  margin: 0;
  flex: 1;
  text-align: center;
  line-height: 1.3;
}
.wishlist-header__spacer { width: 40px; height: 40px; flex-shrink: 0; }
.wishlist-main {
  padding: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
}
.wishlist-main__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: 0;
}
.wishlist-main__grid .shopper-product-card {
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--shopper-radius-mobile, 16px);
  overflow: hidden;
}
.wishlist-main__grid .shopper-product-card__img {
  min-height: 100px;
  margin: var(--space-2) 0;
  border-radius: var(--shopper-radius-mobile-sm, 12px);
  overflow: hidden;
  background: var(--shopper-light-grey);
}
.wishlist-main__grid .shopper-product-card__img img {
  width: 100%;
  max-height: 100px;
  object-fit: cover;
}
.wishlist-main__grid .shopper-product-card__name {
  font-size: var(--shopper-fs-body-sm);
}
.wishlist-main__grid .shopper-product-card__add {
  bottom: -0.5rem;
}
.wishlist-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}
.wishlist-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--shopper-grey);
  margin-bottom: var(--space-4);
}
.wishlist-empty__icon .shopper-icon { width: 48px; height: 48px; }
.wishlist-empty__text {
  font-size: var(--shopper-fs-body);
  font-weight: 600;
  color: var(--shopper-black);
  margin: 0 0 var(--space-2);
}
.wishlist-empty__hint {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-6);
}
.wishlist-empty__btn {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background: var(--shopper-dark);
  color: var(--shopper-white);
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
}
.wishlist-empty__btn:hover { opacity: 0.9; color: var(--shopper-white); }

/* Edit form (same header as Personal Info) */
.user-form-page .mobile-main { padding: 0; padding-bottom: 88px; }
.user-form__main { padding-top: var(--space-4); }
.user-form__errors {
  color: var(--shopper-red);
  font-size: var(--shopper-fs-body-sm);
  margin-bottom: var(--space-4);
}
.user-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}
.user-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.user-form__label {
  font-size: var(--shopper-fs-body-sm);
  font-weight: 500;
  color: var(--shopper-grey);
  line-height: 1.3;
}
.user-form__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--shopper-fs-body);
  color: var(--shopper-black);
  background: var(--shopper-white);
  border: 1px solid var(--shopper-light-grey);
  border-radius: 12px;
  font-family: var(--shopper-font);
  box-sizing: border-box;
  min-height: 48px;
}
.user-form__input:focus {
  border-color: var(--shopper-green);
  outline: none;
  box-shadow: 0 0 0 2px rgba(7, 191, 165, 0.2);
}
.user-form__input--readonly {
  background: var(--shopper-bg);
  color: var(--shopper-grey);
  cursor: default;
}
.user-form__error {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-red);
  margin: 0;
}
.user-form__actions { padding-top: 0; }
.user-form__submit { cursor: pointer; }

/* Seller journey — 4 modals (Figma 4117-16741) */
.seller-journey {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.2s ease, opacity 0.2s ease;
}
.seller-journey--open {
  visibility: visible;
  opacity: 1;
}
.seller-journey__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 13, 0.5);
  cursor: pointer;
}
.seller-journey__card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: var(--space-6) var(--space-6) var(--space-8);
}
.seller-journey__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--shopper-black);
  cursor: pointer;
  border-radius: var(--shopper-radius-sm);
}
.seller-journey__close:hover { background: var(--shopper-light-grey); }
.seller-journey__close .shopper-icon { width: 1.25rem; height: 1.25rem; }

.seller-journey__step {
  padding-top: var(--space-2);
}
.seller-journey__step--hidden { display: none !important; }

.seller-journey__illus {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  min-height: 140px;
}
.seller-journey__illus--img {
  min-height: 160px;
}
.seller-journey__img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  display: block;
}
.seller-journey__illus--4 .shopper-icon {
  width: 4rem;
  height: 4rem;
  color: var(--shopper-yellow);
}

.seller-journey__title {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  line-height: var(--shopper-lh-title-sm);
  color: var(--shopper-black);
  margin: 0 0 var(--space-4);
  text-align: center;
}
.seller-journey__desc {
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-6);
  text-align: center;
}
.seller-journey__tips-label {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-2);
}
.seller-journey__tips {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  font-size: var(--shopper-fs-body);
  line-height: 1.6;
  color: var(--shopper-black);
}
.seller-journey__tips li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: var(--space-2);
}
.seller-journey__tips li:last-child { margin-bottom: 0; }
.seller-journey__tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.75rem;
  height: 0.5rem;
  border-left: 2px solid var(--shopper-black);
  border-bottom: 2px solid var(--shopper-black);
  transform: rotate(-45deg);
}

.seller-journey__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
  padding-top: var(--space-4);
  border-top: 1px solid var(--shopper-light-grey);
}
.seller-journey__back { flex-shrink: 0; }
.seller-journey__back[aria-hidden="true"] { display: none; }
.seller-journey__next,
.seller-journey__done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.seller-journey__next--hidden,
.seller-journey__done--hidden { display: none !important; }
.seller-journey__next-arrow { width: 1rem; height: 1rem; }
.seller-journey__done { text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }

/* ==========================================================================
   Start Selling — pantalla inicial crear tienda (Figma 3992-6941)
   ========================================================================== */
.start-selling-page .mobile-main { padding-bottom: 5rem; }
.start-selling {
  padding: var(--space-6) var(--space-4) var(--space-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.start-selling__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--space-4);
  display: flex;
  justify-content: flex-end;
  z-index: 2;
}
.start-selling__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: var(--shopper-black);
  cursor: pointer;
  border-radius: var(--shopper-radius);
}
.start-selling__close:hover { background: var(--shopper-light-grey); }
.start-selling__close .shopper-icon { width: 1.5rem; height: 1.5rem; }
.start-selling__illus { flex-shrink: 0; }
.start-selling__img {
  max-width: 240px;
  height: auto;
  display: block;
}
.start-selling__title {
  font-size: var(--shopper-fs-title-lg);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0;
  line-height: var(--shopper-lh-title-lg);
}
.start-selling__desc {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-grey);
  line-height: 1.5;
  margin: 0;
  max-width: 320px;
}
.start-selling__cta {
  width: 100%;
  max-width: 320px;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.start-selling__link {
  display: block;
  margin-top: 1rem;
  color: var(--shopper-dark, #01221d);
  font-size: 0.9rem;
  text-align: center;
  text-decoration: underline;
}

/* Modal: nombre de la tienda para crear store */
.create-store-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.2s ease;
}
.create-store-modal--open {
  pointer-events: auto;
  visibility: visible;
}
.create-store-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 13, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.create-store-modal--open .create-store-modal__backdrop { opacity: 1; }
.create-store-modal__card {
  position: relative;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-lg) var(--shopper-radius-lg) 0 0;
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.create-store-modal--open .create-store-modal__card { transform: translateY(0); }
.create-store-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: var(--shopper-black);
  cursor: pointer;
  border-radius: var(--shopper-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-store-modal__close:hover { background: var(--shopper-light-grey); }
.create-store-modal__close .shopper-icon { width: 1.25rem; height: 1.25rem; }
.create-store-modal__title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-2);
  padding-right: 2.5rem;
}
.create-store-modal__hint {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-5);
  line-height: 1.5;
}
.create-store-modal__form { display: flex; flex-direction: column; gap: var(--space-4); }
.create-store-modal__field { display: flex; flex-direction: column; gap: var(--space-1); }
.create-store-modal__label {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  color: var(--shopper-black);
}
.create-store-modal__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--shopper-fs-body);
  font-family: var(--shopper-font);
  color: var(--shopper-black);
  background: var(--shopper-white);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  box-sizing: border-box;
}
.create-store-modal__input:focus {
  outline: none;
  border-color: var(--shopper-green);
}
.create-store-modal__error {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-red);
  margin: 0;
}
.create-store-modal__errors {
  padding: var(--space-3);
  background: #fef2f2;
  color: #b91c1c;
  border-radius: var(--shopper-radius-sm);
  font-size: var(--shopper-fs-body-sm);
}
.create-store-modal__errors p { margin: 0; }
.create-store-modal__submit {
  width: 100%;
  justify-content: center;
}
.create-store-modal__arrow { width: 1rem; height: 1rem; }

/* Modal: Creador de Live */
.live-creator-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.2s ease;
}
.live-creator-modal[hidden] {
  display: none;
}
.live-creator-modal--open {
  pointer-events: auto;
  visibility: visible;
}
.live-creator-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(1, 4, 13, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.live-creator-modal--open .live-creator-modal__backdrop {
  opacity: 1;
}
.live-creator-modal__card {
  position: relative;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-lg) var(--shopper-radius-lg) 0 0;
  padding: var(--space-6) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.live-creator-modal--open .live-creator-modal__card {
  transform: translateY(0);
}
.live-creator-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: var(--shopper-black);
  cursor: pointer;
  border-radius: var(--shopper-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.live-creator-modal__close:hover {
  background: var(--shopper-light-grey);
}
.live-creator-modal__close .shopper-icon {
  width: 1.25rem;
  height: 1.25rem;
}
.live-creator-modal__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: var(--space-2);
}
.live-creator-modal__icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.live-creator-modal__title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-2);
}
.live-creator-modal__desc {
  font-size: var(--shopper-fs-body);
  line-height: var(--shopper-lh-body);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-6);
  max-width: 320px;
}
.live-creator-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 320px;
}
.live-creator-modal__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--shopper-radius);
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  font-family: var(--shopper-font);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.live-creator-modal__btn--primary {
  background: #000000;
  color: var(--shopper-white);
}
.live-creator-modal__btn--primary:hover {
  background: #1a1a1a;
}
.live-creator-modal__btn--secondary {
  background: transparent;
  color: var(--shopper-grey);
  border: 1px solid var(--shopper-light-grey);
}
.live-creator-modal__btn--secondary:hover {
  color: var(--shopper-black);
  border-color: var(--shopper-grey);
}

/* ==========================================================================
   Create Your Store — two columns (preview + form) [legacy / no longer used]
   ========================================================================== */
.create-store {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
@media (min-width: 768px) {
  .create-store { padding-left: var(--space-6); padding-right: var(--space-6); }
}
.create-store__layout {
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 992px) {
  .create-store__layout { grid-template-columns: 1fr 1.2fr; align-items: start; }
}

.create-store__preview-col { display: flex; flex-direction: column; gap: var(--space-5); }
.create-store__card {
  position: relative;
  border-radius: var(--shopper-radius-lg);
  padding: var(--space-6);
  overflow: hidden;
  background: linear-gradient(135deg, #0a3d38 0%, #0d4d46 100%);
  color: var(--shopper-white);
}
.create-store__card-bg {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background: radial-gradient(circle at 20% 30%, var(--shopper-green) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--shopper-green) 0%, transparent 40%);
}
.create-store__card-logo {
  position: relative;
  width: 64px;
  height: 64px;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.create-store__card-logo .shopper-icon { width: 2rem; height: 2rem; color: var(--shopper-dark); }
.create-store__card-name {
  position: relative;
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  margin: 0 0 var(--space-1);
}
.create-store__card-url {
  position: relative;
  font-size: var(--shopper-fs-body-sm);
  opacity: 0.9;
  margin: 0 0 var(--space-5);
}
.create-store__card-sales {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--shopper-radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--shopper-fs-body-sm);
}
.create-store__card-sales .shopper-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.create-store__card-sales strong { margin-left: auto; }

.create-store__tip {
  border: 2px dashed var(--shopper-orange);
  border-radius: var(--shopper-radius);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.create-store__tip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--shopper-orange);
  color: var(--shopper-white);
}
.create-store__tip-icon .shopper-icon { width: 1rem; height: 1rem; }
.create-store__tip-title { font-weight: var(--shopper-fw-bold); color: var(--shopper-black); margin: 0; font-size: var(--shopper-fs-body); }
.create-store__tip-text { font-size: var(--shopper-fs-body-sm); color: var(--shopper-grey); margin: 0; line-height: 1.5; }

.create-store__form-col { min-width: 0; }
.create-store__header { margin-bottom: var(--space-6); }
.create-store__title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-1);
}
.create-store__subtitle { font-size: var(--shopper-fs-body); color: var(--shopper-grey); margin: 0; }

.create-store__form { display: flex; flex-direction: column; gap: var(--space-5); }
.create-store__field { display: flex; flex-direction: column; gap: var(--space-1); }
.create-store__label { font-size: var(--shopper-fs-body-sm); font-weight: var(--shopper-fw-medium); color: var(--shopper-black); }
.create-store__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--shopper-fs-body);
  font-family: var(--shopper-font);
  color: var(--shopper-black);
  background: var(--shopper-white);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  box-sizing: border-box;
}
.create-store__input:focus {
  outline: none;
  border-color: var(--shopper-green);
}
.create-store__select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238991A4' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 1rem; padding-right: 2.5rem; }
.create-store__textarea { resize: vertical; min-height: 100px; }

.create-store__field--logo .create-store__label { margin-bottom: var(--space-2); }
.create-store__logo-upload {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px dashed var(--shopper-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--shopper-bg);
  overflow: hidden;
}
.create-store__logo-upload:hover { border-color: var(--shopper-green); background: rgba(7, 191, 165, 0.06); }
.create-store__logo-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.create-store__logo-placeholder .shopper-icon { width: 2.5rem; height: 2.5rem; color: var(--shopper-grey); }
.create-store__logo-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.create-store__logo-preview--hidden { display: none; }
.create-store__logo-edit {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3b82f6;
  color: var(--shopper-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-store__logo-edit .shopper-icon { width: 0.875rem; height: 0.875rem; transform: rotate(-90deg); }
.create-store__hint { font-size: var(--shopper-fs-caption); color: var(--shopper-grey); margin: 0; }
.create-store__errors { margin-bottom: var(--space-4); padding: var(--space-3); background: #fef2f2; color: #b91c1c; border-radius: 8px; font-size: var(--shopper-fs-body-sm); }
.create-store__errors p { margin: 0 0 var(--space-1); }
.create-store__errors p:last-child { margin-bottom: 0; }
.create-store__field-error { margin: var(--space-1) 0 0; font-size: var(--shopper-fs-caption); color: #b91c1c; }
.create-store__link {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--shopper-fs-body);
  color: #3b82f6;
  text-decoration: underline;
  cursor: pointer;
  font-family: var(--shopper-font);
}
.create-store__link:hover { color: #2563eb; }

.create-store__url-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--shopper-light-grey);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  font-size: var(--shopper-fs-body);
  color: var(--shopper-grey);
}
.create-store__url-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--shopper-grey); }

.create-store__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-2);
}
.create-store__btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--shopper-font); cursor: pointer; border: none; }
.create-store__btn--text { background: none; color: var(--shopper-black); font-size: var(--shopper-fs-body); padding: 0; }
.create-store__btn--text:hover { text-decoration: underline; }
.create-store__btn--primary .shopper-icon { width: 1rem; height: 1rem; }

/* Store dashboard (My Store – Figma 3741-4159) */
.store-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  font-family: var(--shopper-font);
}

/* Header oscuro: título + iconos (Figma) */
.store-dashboard__header {
  background: var(--shopper-dark);
  color: var(--shopper-white);
  padding: var(--space-5) var(--space-4) var(--space-4);
  padding-top: calc(var(--space-5) + env(safe-area-inset-top));
}
.store-dashboard__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.store-dashboard__header-title {
  font-size: var(--shopper-fs-title-lg);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-white);
  margin: 0;
  line-height: var(--shopper-lh-title-lg);
}
.store-dashboard__header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.store-dashboard__header-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--shopper-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-white);
  text-decoration: none;
}
.store-dashboard__header-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--shopper-white); }
.store-dashboard__header-btn .shopper-icon { width: 1.25rem; height: 1.25rem; }
.store-dashboard__header-btn--bell { position: relative; }
.store-dashboard__header-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--shopper-red);
}

/* Resumen: 3 tarjetas (Earning | Sales + Chart) + dots */
.store-dashboard__summary { margin-top: 0; }
.store-dashboard__summary-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-3);
}
.store-dashboard__summary-cards .store-dashboard__card--earning { grid-row: span 2; }
.store-dashboard__summary-cards .store-dashboard__card--sales { min-height: 0; }
.store-dashboard__summary-cards .store-dashboard__card--products { min-height: 0; }
.store-dashboard__summary-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.store-dashboard__summary-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.store-dashboard__summary-dot--active { background: var(--shopper-white); }

.store-dashboard__card {
  border-radius: var(--shopper-radius);
  padding: var(--space-4);
  position: relative;
}
.store-dashboard__card--earning {
  background: var(--shopper-green);
  color: var(--shopper-white);
}
.store-dashboard__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}
.store-dashboard__card-icon--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.store-dashboard__card-icon--circle .shopper-icon { width: 1.25rem; height: 1.25rem; }
.store-dashboard__card-icon--dark { background: rgba(0, 0, 0, 0.08); color: var(--shopper-black); }
.store-dashboard__card-label {
  display: block;
  font-size: 11px;
  font-weight: var(--shopper-fw-medium);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.95;
  margin-bottom: var(--space-1);
}
.store-dashboard__card-value {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  line-height: 1.2;
}
.store-dashboard__card-value--white { color: var(--shopper-white); }

.store-dashboard__card--sales {
  background: var(--shopper-pink);
  color: var(--shopper-black);
}
.store-dashboard__card--products {
  background: var(--shopper-light-grey);
  color: var(--shopper-black);
}

/* Contenido blanco: lista de acciones (Figma) */
.store-dashboard--mobile {
  padding: var(--space-4);
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  background: var(--shopper-white);
}
.store-dashboard--mobile .store-dashboard__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.store-dashboard__nav-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  border: 1px solid var(--shopper-light-grey);
  text-decoration: none;
  color: var(--shopper-black);
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-medium);
  transition: background 0.2s, box-shadow 0.2s;
}
.store-dashboard__nav-card:hover {
  background: var(--shopper-bg);
  box-shadow: var(--shopper-shadow);
}
.store-dashboard__nav-card--disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: auto;
}
.store-dashboard__nav-card--disabled:hover {
  background: var(--shopper-white);
  box-shadow: none;
}
.store-dashboard__nav-card--disabled .store-dashboard__nav-icon .shopper-icon,
.store-dashboard__nav-card--disabled .store-dashboard__nav-arrow {
  color: var(--shopper-grey);
  opacity: 0.8;
}
.store-dashboard__nav-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--shopper-radius);
  background: var(--shopper-light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.store-dashboard__nav-icon .shopper-icon { width: 1.25rem; height: 1.25rem; color: var(--shopper-grey); }
.store-dashboard__nav-label { flex: 1; }
.store-dashboard__nav-arrow { width: 1rem; height: 1rem; color: var(--shopper-grey); flex-shrink: 0; }

/* Legacy (listados / otras vistas que usen grid) */
.store-dashboard__title {
  font-size: var(--shopper-fs-title-lg);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-6);
  line-height: var(--shopper-lh-title-lg);
}
.store-dashboard__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 768px) {
  .store-dashboard__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 992px) {
  .store-dashboard__grid { grid-template-columns: 1fr 1fr 280px; }
}
.store-dashboard__col--left,
.store-dashboard__col--center,
.store-dashboard__col--right { display: flex; flex-direction: column; gap: var(--space-4); }
.store-dashboard__recent { display: flex; flex-direction: column; gap: var(--space-3); }
.store-dashboard__recent-title { font-size: var(--shopper-fs-body); font-weight: var(--shopper-fw-semibold); color: var(--shopper-black); margin: 0 0 var(--space-2); }
.store-dashboard__recent-empty { font-size: var(--shopper-fs-body-sm); color: var(--shopper-grey); margin: 0; padding: var(--space-4); background: var(--shopper-light-grey); border-radius: var(--shopper-radius-sm); }
.store-dashboard__sale-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  box-shadow: var(--shopper-shadow);
}
.store-dashboard__sale-img {
  width: 48px;
  height: 48px;
  border-radius: var(--shopper-radius-sm);
  background: var(--shopper-light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.store-dashboard__sale-img .shopper-icon { width: 1.5rem; height: 1.5rem; color: var(--shopper-grey); }
.store-dashboard__sale-img img { width: 100%; height: 100%; object-fit: cover; }
.store-dashboard__sale-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.store-dashboard__sale-id { font-size: var(--shopper-fs-body); font-weight: var(--shopper-fw-semibold); color: var(--shopper-black); }
.store-dashboard__sale-date { font-size: var(--shopper-fs-caption); color: var(--shopper-grey); }
.store-dashboard__sale-price { font-size: var(--shopper-fs-body); font-weight: var(--shopper-fw-semibold); color: var(--shopper-black); flex-shrink: 0; }

/* Modal "Muy pronto" en detalle de tienda */
.store-soon-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  box-sizing: border-box;
}
.store-soon-modal[hidden] { display: none; }
.store-soon-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.store-soon-modal__dialog {
  position: relative;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  padding: var(--space-6);
  max-width: 320px;
  width: 100%;
  box-shadow: var(--shopper-shadow);
  text-align: center;
}
.store-soon-modal__title {
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-3);
}
.store-soon-modal__text {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-5);
}
.store-soon-modal__btn {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  background: var(--shopper-dark);
  color: var(--shopper-white);
  border: none;
  border-radius: var(--shopper-radius-sm);
  font-family: var(--shopper-font);
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  cursor: pointer;
}
.store-soon-modal__btn:hover { background: var(--shopper-green); }

/* Store products (Manage Products – Figma 3808-6199, full width) */
.store-products {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--space-6) var(--space-5);
  font-family: var(--shopper-font);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .store-products { padding-left: var(--space-6); padding-right: var(--space-6); }
}
@media (min-width: 1200px) {
  .store-products { padding-left: var(--space-8); padding-right: var(--space-8); }
}

/* Bar: back (left) | title (center) | add (right) – Figma 3808-6199 */
.store-products__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  background: var(--shopper-white);
  border-bottom: 1px solid var(--shopper-light-grey);
}
.store-products__back {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-black);
  text-decoration: none;
  border-radius: var(--shopper-radius-sm);
}
.store-products__back:hover { color: var(--shopper-dark); background: var(--shopper-light-grey); }
.store-products__back .shopper-icon { width: 1.5rem; height: 1.5rem; }
.store-products__bar-title {
  flex: 1;
  display: block;
  font-size: var(--shopper-fs-title);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  text-align: center;
  line-height: 1.3;
}
.store-products__add {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--shopper-radius-sm);
  background: var(--shopper-black);
  color: var(--shopper-white);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s;
}
.store-products__add:hover { background: var(--shopper-dark); color: var(--shopper-white); }
.store-products__add .shopper-icon { width: 1.25rem; height: 1.25rem; }

.store-products__header--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.store-products__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.store-products__title {
  font-size: var(--shopper-fs-title-lg);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0;
  line-height: var(--shopper-lh-title-lg);
}
.store-products__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.store-products__filter {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--shopper-radius-sm);
  border: 1px solid var(--shopper-grey);
  background: var(--shopper-white);
  color: var(--shopper-black);
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.store-products__filter:hover { border-color: var(--shopper-black); }
.store-products__filter--active {
  background: var(--shopper-dark);
  border-color: var(--shopper-dark);
  color: var(--shopper-white);
}
.store-products__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) {
  .store-products__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .store-products__grid { grid-template-columns: repeat(3, 1fr); }
}
.store-products__card {
  position: relative;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  box-shadow: var(--shopper-shadow);
  overflow: hidden;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
}
.store-products__more-wrap {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
}
.store-products__more {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: var(--shopper-grey);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--shopper-radius-sm);
}
.store-products__more:hover { color: var(--shopper-black); background: var(--shopper-light-grey); }
.store-products__more .shopper-icon { width: 1.25rem; height: 1.25rem; }
.store-products__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--space-1);
  min-width: 160px;
  background: var(--shopper-white);
  border-radius: var(--shopper-radius-sm);
  box-shadow: var(--shopper-shadow);
  border: 1px solid var(--shopper-light-grey);
  padding: var(--space-1);
}
.store-products__dropdown form { display: block; }
.store-products__dropdown-item {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  color: var(--shopper-black);
  font-size: var(--shopper-fs-body-sm);
  font-family: var(--shopper-font);
  text-align: left;
  cursor: pointer;
  border-radius: var(--shopper-radius-sm);
  white-space: nowrap;
}
.store-products__dropdown-item:hover { background: var(--shopper-light-grey); }
.store-products__card-img {
  width: 80px;
  height: 80px;
  border-radius: var(--shopper-radius-sm);
  background: var(--shopper-light-grey);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.store-products__card-img .shopper-icon { width: 2rem; height: 2rem; color: var(--shopper-grey); }
.store-products__card-img img { width: 100%; height: 100%; object-fit: cover; }
.store-products__card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.store-products__card-name {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-black);
  margin: 0;
  line-height: 1.3;
}
.store-products__card-price { font-size: var(--shopper-fs-body); font-weight: var(--shopper-fw-medium); color: var(--shopper-black); margin: 0; }
.store-products__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.store-products__card-stock {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.store-products__card-stock .shopper-icon { width: 0.875rem; height: 0.875rem; }
.store-products__card-stock--out { color: var(--shopper-red); }
.store-products__card-stock--out .shopper-icon { color: var(--shopper-red); }
.store-products__card-edit { flex-shrink: 0; padding: var(--space-1) var(--space-3); font-size: var(--shopper-fs-caption); }
.shopper-btn--dark {
  background: var(--shopper-black);
  color: var(--shopper-white);
  border: none;
}
.shopper-btn--dark:hover { background: var(--shopper-dark); color: var(--shopper-white); }
.store-products__empty {
  grid-column: 1 / -1;
  font-size: var(--shopper-fs-body);
  color: var(--shopper-grey);
  text-align: center;
  padding: var(--space-8);
  margin: 0;
}

/* Product create form (Add product – full width, Shopify-style sections) */
.product-create-page .shopper-main { max-width: none; }
.product-form {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
  font-family: var(--shopper-font);
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .product-form { padding-left: var(--space-6); padding-right: var(--space-6); }
}
.product-form__page-title {
  font-size: var(--shopper-fs-title-lg);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0 0 var(--space-6);
  line-height: var(--shopper-lh-title-lg);
}
.product-form__form { display: flex; flex-direction: column; gap: var(--space-6); }
.product-form__errors {
  padding: var(--space-4);
  background: rgba(255, 98, 100, 0.08);
  border-radius: var(--shopper-radius-sm);
  color: var(--shopper-red);
  font-size: var(--shopper-fs-body-sm);
}
.product-form__errors p { margin: 0 0 var(--space-1); }
.product-form__errors p:last-child { margin-bottom: 0; }
.product-form__section {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  box-shadow: var(--shopper-shadow);
  overflow: hidden;
}
.product-form__section-title {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  margin: 0;
  padding: var(--space-5) var(--space-5) var(--space-2);
  line-height: var(--shopper-lh-title-sm);
}
.product-form__section-desc {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-5);
}
.product-form__section-body {
  padding: 0 var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.product-form__grid-2 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 639px) {
  .product-form__grid-2 { grid-template-columns: 1fr; }
}
.product-form__field { display: flex; flex-direction: column; gap: var(--space-1); }
.product-form__field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}
.product-form__field--checkbox input[type="checkbox"] { margin-top: 4px; }
.product-form__label {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  color: var(--shopper-black);
}
.product-form__required { color: var(--shopper-red); }
.product-form__hint {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
  margin: 0;
}
.product-form__input,
.product-form__select,
.product-form__textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--shopper-grey);
  border-radius: var(--shopper-radius-sm);
  font-family: var(--shopper-font);
  font-size: var(--shopper-fs-body);
  color: var(--shopper-black);
  box-sizing: border-box;
}
.product-form__input:focus,
.product-form__select:focus,
.product-form__textarea:focus {
  outline: none;
  border-color: var(--shopper-dark);
  box-shadow: 0 0 0 2px rgba(1, 34, 29, 0.1);
}
.product-form__textarea { min-height: 100px; resize: vertical; }
.product-form__file {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-black);
}
.product-form__field-error {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-red);
  margin: 0;
}
.product-form__image-formset { display: flex; flex-direction: column; gap: var(--space-4); }
.product-form__image-row {
  display: grid;
  gap: var(--space-3);
  align-items: end;
  grid-template-columns: 1fr 80px 1fr auto;
}
@media (max-width: 767px) {
  .product-form__image-row { grid-template-columns: 1fr auto; }
}
@media (max-width: 479px) {
  .product-form__image-row { grid-template-columns: 1fr; }
}
.product-form__image-cell { display: flex; flex-direction: column; gap: var(--space-1); }
.product-form__image-cell--sm { min-width: 0; }
.product-form__image-cell--del { flex-direction: row; align-items: center; min-width: 0; }
.product-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--shopper-light-grey);
  margin-top: var(--space-2);
}
.product-form__btn-draft { margin-left: auto; }
.product-form__btn-publish { }

/* ==========================================================================
   Product Create v2 — Premium two-step flow
   ========================================================================== */

.pc {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  font-family: var(--shopper-font);
  min-height: 100vh;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .pc {
    padding: var(--space-10) var(--space-6);
  }
}

/* Breadcrumb */
.pc__breadcrumb {
  margin-bottom: var(--space-6);
}

.pc__breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--shopper-grey);
  text-decoration: none;
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  transition: color 0.2s ease;
}

.pc__breadcrumb a:hover {
  color: var(--shopper-dark);
}

.pc__breadcrumb-icon {
  width: 16px;
  height: 16px;
}

/* Header */
.pc__header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.pc__title {
  font-size: var(--shopper-fs-title-lg);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-dark);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
}

.pc__subtitle {
  font-size: var(--shopper-fs-body);
  color: var(--shopper-grey);
  margin: 0;
}

/* Steps indicator */
.pc__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-8);
}

.pc__step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pc__step-num {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  background: var(--shopper-light-grey);
  color: var(--shopper-grey);
  transition: all 0.2s ease;
}

.pc__step-label {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  color: var(--shopper-grey);
  transition: color 0.2s ease;
}

.pc__step--active .pc__step-num {
  background: var(--shopper-dark);
  color: var(--shopper-white);
}

.pc__step--active .pc__step-label {
  color: var(--shopper-dark);
}

.pc__step--completed .pc__step-num {
  background: var(--shopper-green);
  color: var(--shopper-white);
}

.pc__step--completed .pc__step-num::after {
  content: '';
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
}

.pc__step--completed .pc__step-num span {
  display: none;
}

.pc__step-line {
  width: 48px;
  height: 2px;
  background: var(--shopper-light-grey);
}

@media (max-width: 479px) {
  .pc__step-label { display: none; }
  .pc__step-line { width: 32px; }
}

/* Card */
.pc__card {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  box-shadow: var(--shopper-shadow);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.pc__card-title {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-dark);
  margin: 0 0 var(--space-1);
}

.pc__card-desc {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  margin: 0 0 var(--space-5);
}

/* Upload zone */
.pc__upload-zone {
  border: 2px dashed var(--shopper-light-grey);
  border-radius: var(--shopper-radius);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--shopper-bg);
}

.pc__upload-zone:hover,
.pc__upload-zone--dragover {
  border-color: var(--shopper-dark);
  background: var(--shopper-white);
}

.pc__upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.pc__upload-icon {
  width: 48px;
  height: 48px;
  color: var(--shopper-grey);
  transition: color 0.2s ease;
}

.pc__upload-zone:hover .pc__upload-icon,
.pc__upload-zone--dragover .pc__upload-icon {
  color: var(--shopper-dark);
}

.pc__upload-text {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-medium);
  color: var(--shopper-dark);
  margin: 0;
}

.pc__upload-hint {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
  margin: 0;
}

/* Images grid */
.pc__images {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.pc__images--has-items {
  display: grid;
}

@media (min-width: 640px) {
  .pc__images {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

.pc__image {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--shopper-radius-sm);
  overflow: hidden;
  background: var(--shopper-light-grey);
}

.pc__image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc__image--uploading .pc__image-preview {
  opacity: 0.5;
}

.pc__image-main {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px 8px;
  background: var(--shopper-dark);
  color: var(--shopper-white);
  font-size: 10px;
  font-weight: var(--shopper-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
}

.pc__image-remove {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shopper-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pc__image:hover .pc__image-remove {
  opacity: 1;
}

.pc__image-remove svg {
  width: 14px;
  height: 14px;
  color: var(--shopper-grey);
}

.pc__image-remove:hover svg {
  color: var(--shopper-red);
}

/* Progress bar */
.pc__image-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.5);
}

.pc__image-progress-bar {
  height: 100%;
  background: var(--shopper-green);
  transition: width 0.15s ease;
}

/* Media actions */
.pc__media-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--shopper-light-grey);
}

/* Form */
.pc__form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pc__errors {
  padding: var(--space-4);
  background: rgba(255, 98, 100, 0.08);
  border-radius: var(--shopper-radius-sm);
  color: var(--shopper-red);
  font-size: var(--shopper-fs-body-sm);
  margin-bottom: var(--space-5);
}

.pc__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.pc__field:last-child {
  margin-bottom: 0;
}

.pc__label {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  color: var(--shopper-dark);
}

.pc__required {
  color: var(--shopper-red);
  margin-left: 2px;
}

.pc__hint {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
  margin: var(--space-1) 0 0;
}

.pc__error {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-red);
  margin: var(--space-1) 0 0;
}

.pc__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

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

.pc__grid .pc__field {
  margin-bottom: 0;
}

/* Form inputs */
.pc__card input[type="text"],
.pc__card input[type="number"],
.pc__card textarea,
.pc__card select,
.pc .product-form__input,
.pc .product-form__select,
.pc .product-form__textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  font-family: var(--shopper-font);
  font-size: var(--shopper-fs-body);
  color: var(--shopper-dark);
  background: var(--shopper-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.pc__card input:focus,
.pc__card textarea:focus,
.pc__card select:focus,
.pc .product-form__input:focus,
.pc .product-form__select:focus,
.pc .product-form__textarea:focus {
  outline: none;
  border-color: var(--shopper-dark);
  box-shadow: 0 0 0 3px rgba(1, 34, 29, 0.08);
}

.pc__card textarea,
.pc .product-form__textarea {
  min-height: 120px;
  resize: vertical;
}

.pc__categories-search {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1.5px solid var(--shopper-border, #ddd);
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}
.pc__categories-search:focus {
  outline: none;
  border-color: var(--shopper-dark, #01221d);
}

/* Category chips (CheckboxSelectMultiple) */
div.pc__categories-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
div.pc__categories-chips > div {
  margin: 0;
}
div.pc__categories-chips label {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--shopper-border, #ddd);
  background: var(--shopper-white, #fff);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  color: var(--shopper-text, #333);
}
div.pc__categories-chips label:hover {
  border-color: var(--shopper-dark, #222);
}
div.pc__categories-chips input[type="checkbox"] {
  display: none;
}
div.pc__categories-chips label:has(input:checked) {
  background: var(--shopper-dark, #01221D);
  color: var(--shopper-white, #fff);
  border-color: var(--shopper-dark, #01221D);
}
.pc__category-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1.5px dashed var(--shopper-dark, #01221D);
  background: transparent;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--shopper-dark, #01221D);
  cursor: pointer;
  transition: all 0.15s ease;
}
.pc__category-create-btn:hover {
  background: var(--shopper-dark, #01221D);
  color: var(--shopper-white, #fff);
}
.pc__category-create-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.pc__card input::placeholder,
.pc__card textarea::placeholder {
  color: var(--shopper-grey);
}

/* Actions */
.pc__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-5);
}

.pc__actions-right {
  display: flex;
  gap: var(--space-3);
}

@media (max-width: 479px) {
  .pc__actions {
    flex-direction: column;
  }
  .pc__actions-right {
    width: 100%;
    flex-direction: column;
  }
}

/* Buttons */
.pc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--shopper-radius-sm);
  font-family: var(--shopper-font);
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.pc__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pc__btn--primary {
  background: var(--shopper-dark);
  color: var(--shopper-white);
}

.pc__btn--primary:hover:not(:disabled) {
  background: #012d26;
}

.pc__btn--secondary {
  background: var(--shopper-light-grey);
  color: var(--shopper-dark);
}

.pc__btn--secondary:hover:not(:disabled) {
  background: #e8e9eb;
}

.pc__btn--ghost {
  background: transparent;
  color: var(--shopper-grey);
}

.pc__btn--ghost:hover:not(:disabled) {
  color: var(--shopper-dark);
}

.pc__btn-icon {
  width: 16px;
  height: 16px;
}

.pc__btn-icon--left {
  margin-right: var(--space-1);
}

@media (max-width: 479px) {
  .pc__btn {
    width: 100%;
  }
}

/* AI Analysis Status & Preview */
.pc__ai-status {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(7, 191, 165, 0.08) 0%, rgba(123, 97, 255, 0.08) 100%);
  border-radius: var(--shopper-radius-sm);
  border: 1px solid rgba(7, 191, 165, 0.2);
}

.pc__ai-status-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pc__ai-spinner {
  width: 20px;
  height: 20px;
  color: var(--shopper-green);
  animation: pc-spin 1s linear infinite;
}

@keyframes pc-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pc__ai-text {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  color: var(--shopper-dark);
}

/* Product selection grid for livestream */
.pc__product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}

@media (min-width: 640px) {
  .pc__product-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.pc__product-card {
  position: relative;
  cursor: pointer;
  display: block;
}

.pc__product-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pc__product-card-inner {
  display: flex;
  flex-direction: column;
  background: var(--shopper-white);
  border: 2px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius);
  overflow: hidden;
  transition: all 0.2s ease;
  height: 100%;
}

.pc__product-card:hover .pc__product-card-inner {
  border-color: var(--shopper-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pc__product-checkbox:checked + .pc__product-card-inner {
  border-color: var(--shopper-dark);
  background: rgba(1, 34, 29, 0.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pc__product-img {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background: var(--shopper-light-grey);
  overflow: hidden;
}

.pc__product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc__product-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shopper-light-grey);
  color: var(--shopper-grey);
}

.pc__product-img-placeholder .shopper-icon {
  width: 48px;
  height: 48px;
}

.pc__product-checkmark {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shopper-white);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.pc__product-checkbox:checked + .pc__product-card-inner .pc__product-checkmark {
  opacity: 1;
  transform: scale(1);
  background: var(--shopper-dark);
  color: var(--shopper-white);
}

.pc__product-checkmark .shopper-icon {
  width: 14px;
  height: 14px;
}

.pc__product-info {
  padding: var(--space-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pc__product-name {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-dark);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}

.pc__product-price {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-dark);
  margin: 0;
}

.pc__ai-preview {
  margin-top: var(--space-5);
  border: 1px solid rgba(7, 191, 165, 0.3);
  border-radius: var(--shopper-radius);
  overflow: hidden;
  background: var(--shopper-white);
}

.pc__ai-preview-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, rgba(7, 191, 165, 0.1) 0%, rgba(123, 97, 255, 0.1) 100%);
  border-bottom: 1px solid rgba(7, 191, 165, 0.2);
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-dark);
}

.pc__ai-icon {
  width: 18px;
  height: 18px;
  color: var(--shopper-green);
}

.pc__ai-preview-body {
  padding: var(--space-4);
}

.pc__ai-field {
  margin-bottom: var(--space-4);
}

.pc__ai-field:last-child {
  margin-bottom: 0;
}

.pc__ai-field-label {
  display: block;
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-grey);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-1);
}

.pc__ai-field-value {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-dark);
  margin: 0;
  line-height: 1.5;
}

.pc__ai-field-value--desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pc__ai-colors {
  margin-top: var(--space-4);
}

.pc__ai-colors-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.pc__ai-color {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--shopper-light-grey);
  border-radius: 4px;
  font-size: var(--shopper-fs-caption);
}

.pc__ai-color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.pc__ai-color-name {
  color: var(--shopper-dark);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc__ai-color-pct {
  color: var(--shopper-grey);
  font-weight: var(--shopper-fw-medium);
}

/* AI Banner (processing state in step 2) */
.pc__ai-banner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: linear-gradient(135deg, rgba(7, 191, 165, 0.08) 0%, rgba(123, 97, 255, 0.08) 100%);
  border: 1px solid rgba(7, 191, 165, 0.2);
  border-radius: var(--shopper-radius-sm);
  margin-bottom: var(--space-5);
}

.pc__ai-banner-icon {
  flex-shrink: 0;
}

.pc__ai-banner-icon .pc__ai-spinner {
  width: 24px;
  height: 24px;
}

.pc__ai-banner-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pc__ai-banner-title {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-dark);
}

.pc__ai-banner-desc {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
}

/* AI Ready Banner */
.pc__ai-ready {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(7, 191, 165, 0.1);
  border: 1px solid var(--shopper-green);
  border-radius: var(--shopper-radius-sm);
  margin-bottom: var(--space-5);
}

.pc__ai-ready-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--shopper-green);
}

.pc__ai-ready-icon svg {
  width: 100%;
  height: 100%;
}

.pc__ai-ready-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pc__ai-ready-title {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-dark);
}

.pc__ai-ready-desc {
  font-size: var(--shopper-fs-caption);
  color: var(--shopper-grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc__btn--small {
  padding: var(--space-2) var(--space-3);
  font-size: var(--shopper-fs-caption);
}

@media (max-width: 479px) {
  .pc__ai-ready {
    flex-wrap: wrap;
  }
  .pc__ai-ready-content {
    flex-basis: calc(100% - 36px);
  }
}

/* AI Loading Overlay */
.pc__ai-loading {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.pc__ai-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding: var(--space-6);
}

.pc__ai-spinner--lg {
  width: 48px;
  height: 48px;
  color: var(--shopper-green);
}

.pc__ai-loading-text {
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-dark);
}

.pc__ai-loading-hint {
  font-size: var(--shopper-fs-body-sm);
  color: var(--shopper-grey);
}

/* Color Variants Card */
.pc__card--variants {
  background: linear-gradient(135deg, rgba(7, 191, 165, 0.03) 0%, rgba(123, 97, 255, 0.03) 100%);
  border: 1px solid rgba(7, 191, 165, 0.15);
}

.pc__card-icon {
  width: 20px;
  height: 20px;
  color: var(--shopper-green);
  margin-right: var(--space-2);
}

.pc__card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: var(--space-2);
  background: linear-gradient(135deg, var(--shopper-green) 0%, #7b61ff 100%);
  color: white;
  font-size: 10px;
  font-weight: var(--shopper-fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 4px;
}

.pc__card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
}

.pc__card-header-left {
  flex: 1;
}

.pc__card-dismiss {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  color: var(--shopper-grey);
  cursor: pointer;
  transition: all 0.15s ease;
}

.pc__card-dismiss:hover {
  border-color: var(--shopper-grey);
  color: var(--shopper-dark);
  background: var(--shopper-light-grey);
}

.pc__card-dismiss svg {
  width: 16px;
  height: 16px;
}

.pc__variants-table {
  margin-top: var(--space-4);
}

.pc__variants-header {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-grey);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--shopper-light-grey);
}

.pc__variant-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: var(--space-4);
  padding: var(--space-3);
  align-items: center;
  border-bottom: 1px solid var(--shopper-light-grey);
  transition: background 0.15s ease;
}

.pc__variant-row:hover {
  background: rgba(0, 0, 0, 0.02);
}

.pc__variant-row:last-child {
  border-bottom: none;
}

.pc__variant-color {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pc__color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pc__color-name {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  color: var(--shopper-dark);
}

.pc__stock-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--shopper-light-grey);
  border-radius: var(--shopper-radius-sm);
  font-size: var(--shopper-fs-body-sm);
  text-align: center;
  transition: border-color 0.15s ease;
}

.pc__stock-input:focus {
  outline: none;
  border-color: var(--shopper-green);
}

.pc__stock-input::-webkit-inner-spin-button {
  opacity: 1;
}

@media (max-width: 479px) {
  .pc__variants-header,
  .pc__variant-row {
    grid-template-columns: 1fr 80px;
  }
}

/* ==========================================================================
   Mobile Home — Figma Shopper (node 3629-3252) — mobile-first, pixel-perfect
   ========================================================================== */

/* Radios tipo Figma: tarjetas más redondeadas en móvil */
.page-home-mobile {
  --shopper-radius-mobile: 16px;
  --shopper-radius-mobile-sm: 12px;
  --shopper-radius-mobile-lg: 24px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  min-height: 100vh;
  min-height: 100dvh;
}

/* On desktop, constrain to mobile frame width (Figma frame) so design stays pixel-perfect */
@media (min-width: 431px) {
  .page-home-mobile {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 0 1px var(--shopper-light-grey);
  }
}

.page-home-mobile .mobile-main {
  padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
}

/* Mobile header — Figma 3629-3253: Primary/Dark #01221D, avatar + flourish, envelope (red dot) + bag */
.mobile-header {
  background: var(--shopper-dark);
  color: var(--shopper-white);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: var(--space-5);
  position: relative;
}

.mobile-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4) 0;
}

.mobile-header__profile {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.mobile-header__avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.mobile-header__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #e8b4a0;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-header__avatar .shopper-icon {
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.9;
}

.mobile-header__avatar--brand {
  background: var(--shopper-primary, #01221D);
  border-color: var(--shopper-primary, #01221D);
}

.mobile-header__avatar--brand .mobile-header__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.mobile-header__avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.mobile-header__initials {
  font-size: 1.25rem;
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-white);
  line-height: 1;
}

.mobile-header__profile-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mobile-header__name {
  font-size: 16px;
  font-weight: var(--shopper-fw-bold);
  line-height: 1.25;
  color: var(--shopper-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-header__address {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.mobile-header__icon-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--shopper-white);
  cursor: pointer;
  padding: 0;
  position: relative;
  text-decoration: none;
  border-radius: 50%;
}

.mobile-header__icon-btn .shopper-icon {
  width: 1.375rem;
  height: 1.375rem;
}

.mobile-header__icon-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--shopper-white);
}

.mobile-header__icon-btn--dot {
  position: relative;
}

.mobile-header__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: var(--shopper-red);
  border-radius: 50%;
  border: 2px solid var(--shopper-dark);
}

/* Mobile container — horizontal padding only */
.mobile-container {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

/* Mobile hero — fondo oscuro, redondeado abajo (esquinas inferiores del bloque) */
.mobile-hero {
  width: 100%;
  margin: 0;
  padding: 0 var(--space-4) var(--space-6);
  background: var(--shopper-dark);
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}

/* Figma 3629-3252: una sola tarjeta redondeada (24px), sin marcos anidados */
.mobile-hero__banner {
  display: block;
  width: 100%;
  min-height: 200px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  background-color: var(--shopper-dark);
  margin: 0;
  padding: 0;
  contain: layout paint;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.mobile-hero__banner:active {
  transform: scale(0.98);
}

/* Imagen rellena toda la tarjeta y se recorta por overflow → esquinas redondeadas */
.mobile-hero__banner-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
  border: none;
  vertical-align: top;
  pointer-events: none;
}

/* Indicadores del carrusel — primer dot alargado, resto círculos huecos */
.mobile-hero__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-5);
  position: relative;
  z-index: 2;
}

.mobile-hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.5);
  padding: 0;
  transition: background 0.2s, border-color 0.2s, width 0.2s;
}

.mobile-hero__dot--active {
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background: var(--shopper-white);
  border: none;
}

/* Mobile section — title row + arrow (Flash sale, Coupon, Livestream) */
.mobile-section {
  padding: var(--space-6) 0;
  background: var(--shopper-white);
}

.mobile-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding: 0 var(--space-4);
}

.mobile-section__title {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  line-height: 1.25;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--shopper-black);
}

.mobile-section__title .shopper-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.mobile-section__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--shopper-green);
  text-decoration: none;
  flex-shrink: 0;
}

.mobile-section__more .shopper-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Horizontal scroll wrappers */
.mobile-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 var(--space-4);
  margin: 0 calc(-1 * var(--space-4));
}

.mobile-scroll::-webkit-scrollbar {
  display: none;
}

.mobile-scroll__inner {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  width: max-content;
}

/* Categories — 2 rows, horizontal scroll */
.mobile-categories {
  padding: var(--space-5) 0;
  background: var(--shopper-white);
}

.mobile-categories .mobile-section__head {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-4);
}

.mobile-categories__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.mobile-categories__grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: minmax(200px, 220px);
  grid-auto-flow: column;
  gap: 12px;
  width: max-content;
}

.mobile-category-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--shopper-bg, #f3f4f6);
  border-radius: 20px;
  text-decoration: none;
  color: var(--shopper-black);
  min-width: 0;
}

.mobile-category-card__img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shopper-white, #fff);
  flex-shrink: 0;
  padding: 8px;
}

.mobile-category-card__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mobile-category-card__name {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}

/* Flash sale — timer pill + horizontal product cards */
.mobile-section__head-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mobile-timer {
  background: var(--shopper-dark);
  color: var(--shopper-white);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  font-weight: var(--shopper-fw-semibold);
  font-size: var(--shopper-fs-caption);
  line-height: 1.25;
}

/* Flash sale — grid 2 columnas (sin scroll horizontal) */
.mobile-products__scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.mobile-products__grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: minmax(140px, 160px);
  grid-auto-flow: column;
  gap: var(--space-4);
  width: max-content;
  min-height: 240px;
}

.mobile-products .shopper-product-card {
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--shopper-radius-mobile, 16px);
  overflow: hidden;
}

.mobile-products .shopper-product-card__img {
  min-height: 100px;
  margin: var(--space-2) 0;
  border-radius: var(--shopper-radius-mobile-sm, 12px);
  overflow: hidden;
  background: var(--shopper-light-grey);
}

.mobile-products .shopper-product-card__img img {
  max-height: 100px;
  display: block;
  width: 100%;
  object-fit: cover;
}

.mobile-products .shopper-product-card__name {
  font-size: var(--shopper-fs-body-sm);
}

.mobile-products .shopper-product-card__add {
  bottom: -0.5rem;
}

/* Coupon — horizontal scroll ticket-style cards */
.mobile-coupons .mobile-scroll__inner {
  gap: var(--space-4);
}

.mobile-coupon-card {
  flex-shrink: 0;
  width: 280px;
  min-width: 280px;
  border-radius: var(--shopper-radius-mobile, 16px);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: linear-gradient(135deg, var(--shopper-pink) 0%, #e8a89a 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Perforation: vertical dashed line between left content and code (Figma) */
.mobile-coupon-card__sep {
  width: 0;
  align-self: stretch;
  border-left: 2px dashed rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  margin: 0 var(--space-2);
}

.mobile-coupon-card[style*="purple"] .mobile-coupon-card__sep {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.mobile-coupon-card__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.mobile-coupon-card__illus {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-coupon-card__illus img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mobile-coupon-card__body {
  min-width: 0;
}

.mobile-coupon-card__off {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-black);
  display: block;
}

.mobile-coupon-card__code-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border: 2px dashed rgba(0, 0, 0, 0.25);
  border-radius: var(--shopper-radius-mobile-sm, 12px);
  background: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.mobile-coupon-card__code {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  font-family: var(--shopper-font);
  color: var(--shopper-black);
  letter-spacing: 0.05em;
}

/* Livestream — respeta el margen de la app (alineado con el título de sección) */
.mobile-livestreams__scroll {
  margin: 0;
  padding: 0 var(--space-4);
}

.mobile-livestreams__row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding-bottom: var(--space-2);
  width: max-content;
}

/* Todas las tarjetas igual tamaño: 160×200 (Figma 3758-6187) */
.mobile-live-card {
  flex-shrink: 0;
  width: 160px;
  position: relative;
  border-radius: var(--shopper-radius-mobile, 16px);
  overflow: hidden;
  text-decoration: none;
  color: var(--shopper-white);
  display: block;
  box-shadow: var(--shopper-shadow);
}

.mobile-live-card__thumb {
  /* Figma: card ligeramente más alta que ancha → 4:5 */
  aspect-ratio: 4 / 5;
  background: var(--shopper-grey);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--shopper-radius-mobile, 16px) var(--shopper-radius-mobile, 16px) 0 0;
}

.mobile-live-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-live-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background: var(--shopper-red);
  color: var(--shopper-white);
  font-size: 10px;
  font-weight: var(--shopper-fw-bold);
  padding: 2px 6px;
  border-radius: var(--shopper-radius-mobile-sm, 12px);
  z-index: 1;
}

.mobile-live-card__views {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.6);
  color: var(--shopper-white);
  font-size: 10px;
  font-weight: var(--shopper-fw-medium);
  padding: 2px 6px;
  border-radius: var(--shopper-radius-mobile-sm, 12px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
}

.mobile-live-card__views .shopper-icon {
  width: 12px;
  height: 12px;
}

.mobile-live-card__title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-3) var(--space-2);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-semibold);
  line-height: 1.3;
  z-index: 1;
}

/* Tarjeta de crear Live en la sección de livestreams */
.mobile-live-card--create {
  cursor: pointer;
  transition: transform 0.2s ease;
}
.mobile-live-card--create:active {
  transform: scale(0.95);
}
.mobile-live-card--create .mobile-live-card__thumb {
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mobile-live-card__create-icon {
  width: 64px;
  height: 64px;
  color: var(--shopper-white);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
  z-index: 1;
}
.mobile-live-card__create-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--shopper-radius-mobile, 16px) var(--shopper-radius-mobile, 16px) 0 0;
  z-index: 2;
}
.mobile-live-card__create-label {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  right: var(--space-2);
  text-align: center;
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-bold);
  color: var(--shopper-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  z-index: 3;
}
.mobile-live-card--create .mobile-live-card__title {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  color: var(--shopper-white);
}

/* Livestream detail page — Figma Shopper Live (node 3758-7009) */
.page-livestream-detail .mobile-main {
  padding: 0;
  max-width: none;
}
.page-livestream-detail .shopper-theme {
  background: #e8e0f0;
}

.live-view {
  min-height: 100vh;
  background: #e8e0f0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.live-view__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 75vh;
  background: #1a1a2e;
  overflow: hidden;
}

.live-view__iframe,
.live-view__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-view__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  gap: var(--space-3);
  font-size: var(--shopper-fs-body-sm);
}

/* Top overlay */
.live-view__overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
  color: var(--shopper-white);
  z-index: 2;
}

.live-view__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--shopper-white);
  margin-bottom: var(--space-2);
}

.live-view__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.live-view__banner {
  margin: 0;
  font-size: var(--shopper-fs-body);
  font-weight: var(--shopper-fw-semibold);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-view__viewers {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 20px;
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-semibold);
  flex-shrink: 0;
}

.live-view__viewers-icon {
  flex-shrink: 0;
  opacity: 0.9;
}

.live-view__store-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.live-view__store-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--shopper-green);
}

.live-view__store-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--shopper-green);
  color: var(--shopper-white);
  font-size: 14px;
  font-weight: var(--shopper-fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.live-view__store-name {
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-medium);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-view__follow {
  padding: 6px 14px;
  background: var(--shopper-black);
  color: var(--shopper-white);
  border: none;
  border-radius: 20px;
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-semibold);
  cursor: default;
  flex-shrink: 0;
}

/* Bottom overlay: chat + reactions — above input, no overlap */
.live-view__overlay-bottom {
  position: absolute;
  bottom: 70px;
  left: 0;
  right: 0;
  padding: 0 var(--space-4);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-3);
  pointer-events: none;
}

.live-view__overlay-bottom .live-view__chat {
  pointer-events: auto;
}

.live-view__chat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
}

.live-view__chat::-webkit-scrollbar {
  width: 4px;
}

.live-view__chat::-webkit-scrollbar-track {
  background: transparent;
}

.live-view__chat::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.live-view__chat-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.live-view__chat-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--shopper-purple);
  color: var(--shopper-white);
  font-size: 10px;
  font-weight: var(--shopper-fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.live-view__chat-bubble {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-view__chat-user {
  font-size: var(--shopper-fs-caption);
  font-weight: var(--shopper-fw-semibold);
  color: var(--shopper-white);
}

.live-view__chat-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.35;
}

.live-view__reactions {
  position: relative;
  width: 48px;
  height: 80px;
  flex-shrink: 0;
}

.live-view__heart {
  position: absolute;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  animation: live-view-heart-float 3s ease-in forwards;
  opacity: 0;
}

.live-view__heart--1 { left: 8px;  bottom: 0;  animation-delay: 0s; }
.live-view__heart--2 { left: 20px; bottom: 12px; animation-delay: 0.6s; }
.live-view__heart--3 { left: 4px;  bottom: 28px; animation-delay: 1.2s; }
.live-view__heart--4 { left: 24px; bottom: 40px; animation-delay: 1.8s; }
.live-view__heart--5 { left: 12px; bottom: 56px; animation-delay: 2.4s; }

@keyframes live-view-heart-float {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  15% {
    opacity: 0.9;
    transform: translateY(-8px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-120px) scale(0.8);
  }
}

/* Botón sonido: por encima de overlay e input (siempre visible y clicable) */
.live-view__unmute-btn {
  position: absolute;
  bottom: 165px;
  right: var(--space-4);
  z-index: 4;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--shopper-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.live-view__unmute-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.live-view__unmute-btn svg {
  width: 20px;
  height: 20px;
}

.live-view__input-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-2) var(--space-4) var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2) 0%, transparent 100%);
  z-index: 3;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.live-view__input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--shopper-white);
  font-size: var(--shopper-fs-body-sm);
  font-family: var(--shopper-font);
}

.live-view__input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.live-view__send {
  flex-shrink: 0;
  padding: 12px 16px;
  border: none;
  border-radius: 24px;
  background: var(--shopper-green);
  color: var(--shopper-white);
  font-size: var(--shopper-fs-body-sm);
  font-weight: var(--shopper-fw-semibold);
  font-family: var(--shopper-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.live-view__send:hover {
  background: #06a892;
}

.live-view__send:active {
  transform: scale(0.98);
}

/* Products section */
.live-view__products {
  padding: var(--space-5) var(--space-4) var(--space-8);
}

.live-view__products-title {
  font-size: var(--shopper-fs-title-sm);
  font-weight: var(--shopper-fw-bold);
  margin: 0 0 var(--space-4);
  color: var(--shopper-dark);
}

.live-view__products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.live-view__product-card {
  background: var(--shopper-white);
  border-radius: var(--shopper-radius);
  overflow: hidden;
  box-shadow: var(--shopper-shadow);
}

.live-view__products-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--shopper-grey);
  font-size: var(--shopper-fs-body-sm);
  margin: 0;
  padding: var(--space-4);
}

/* Legacy livestream classes (e.g. home cards) */
.mobile-live-card__badge--inline {
  position: static;
}
.mobile-live-card__badge--scheduled {
  background: var(--shopper-orange);
}

/* Bottom navigation — fijo al borde inferior de la ventana */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 64px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-top: var(--space-2);
  background: var(--shopper-white);
  border-top: 1px solid var(--shopper-light-grey);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 200;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

.bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--shopper-grey);
  font-size: 10px;
  font-weight: var(--shopper-fw-medium);
  flex: 1;
  max-width: 80px;
}

.bottom-nav__item:hover,
.bottom-nav__item:focus {
  color: var(--shopper-black);
}

.bottom-nav__item--active {
  color: var(--shopper-green);
}

.bottom-nav__icon-wrap {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
}

.bottom-nav__item--active .bottom-nav__icon-wrap--active {
  background: var(--shopper-green);
  color: var(--shopper-white);
}

.bottom-nav__icon-wrap .shopper-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.bottom-nav__cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--shopper-red);
  color: var(--shopper-white);
  font-size: 10px;
  font-weight: var(--shopper-fw-bold);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cart-badge--bump {
  animation: cart-badge-bump 0.35s ease-out;
}
@keyframes cart-badge-bump {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.cart-plus-one {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--shopper-green);
  color: var(--shopper-white);
  font-size: 10px;
  font-weight: var(--shopper-fw-bold);
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}
.cart-plus-one--animate {
  animation: cart-plus-one-fly 0.55s ease-out forwards;
}
@keyframes cart-plus-one-fly {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  20% {
    opacity: 1;
    transform: scale(1.15);
  }
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

.bottom-nav__label {
  display: block;
}

/* Página Buscar: icono Search activo en bottom nav */
.page-search-mobile .bottom-nav__item:first-child {
  color: var(--shopper-grey);
}
.page-search-mobile .bottom-nav__item:first-child .bottom-nav__icon-wrap {
  background: transparent;
  color: inherit;
}
.page-search-mobile .bottom-nav__item:nth-child(2) {
  color: var(--shopper-green);
}
.page-search-mobile .bottom-nav__item:nth-child(2) .bottom-nav__icon-wrap {
  background: var(--shopper-green);
  color: var(--shopper-white);
}

/* ========== Página Buscar (Figma 3336-2735 — extracción exacta) ========== */
/* Colores: barra/cards #F8F8F8, texto principal #1C1C1C, secundario/placeholder #A8A8A8 */
/* Espaciado horizontal contenido: 24px. Títulos: 20px semibold. Cuerpo: 16px regular. */

.search-page {
  padding: 0 24px calc(64px + env(safe-area-inset-bottom));
}

.search-header {
  padding: 24px 24px 0;
  background: var(--shopper-bg);
}

.search-bar {
  display: flex;
  align-items: center;
  min-height: 48px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 24px;
  padding-left: 16px;
  padding-right: 16px;
  gap: 8px;
}

.search-bar__icon {
  flex-shrink: 0;
  color: #A8A8A8;
}
.search-bar__icon .shopper-icon {
  width: 24px;
  height: 24px;
}

.search-bar__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1C1C1C;
  padding: 0;
}
.search-bar__input::placeholder {
  color: #A8A8A8;
}

.search-bar__camera {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #A8A8A8;
  cursor: pointer;
}
.search-bar__camera .shopper-icon {
  width: 24px;
  height: 24px;
}

.search-section {
  margin-top: 32px;
}

.search-section__title {
  font-family: var(--shopper-font);
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: #1C1C1C;
  margin: 0 0 24px;
}

.search-recent {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-recent__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #EEEEEE;
}
.search-recent__item:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.search-recent__link {
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1C1C1C;
  text-decoration: none;
}
.search-recent__remove {
  padding: 8px;
  margin: 0 -8px 0 0;
  border: 0;
  background: transparent;
  color: #A8A8A8;
  cursor: pointer;
}
.search-recent__remove .shopper-icon {
  width: 16px;
  height: 16px;
}

.search-trending {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.search-trending__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding-left: 16px;
  padding-right: 12px;
  background: #F8F8F8;
  border-radius: 16px;
  text-decoration: none;
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1C1C1C;
}

.search-trending__label {
  flex: 1;
  min-width: 0;
}

.search-trending__img {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  background: #FFFFFF;
}
.search-trending__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Search results (when query) */
.search-results-wrap {
  min-height: 120px;
}
.search-results-wrap--loading {
  min-height: 200px;
}
.search-results__title {
  font-family: var(--shopper-font);
  font-size: 18px;
  font-weight: 600;
  color: #1C1C1C;
  margin: 0 0 16px;
  line-height: 1.3;
}
.search-results__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.search-results__grid .shopper-product-card {
  min-width: 0;
  padding: var(--space-3);
  border-radius: var(--shopper-radius-mobile, 16px);
}
.search-results__grid .shopper-product-card__img {
  min-height: 100px;
  margin: var(--space-2) 0;
  border-radius: var(--shopper-radius-mobile-sm, 12px);
  overflow: hidden;
  background: var(--shopper-light-grey);
}
.search-results__grid .shopper-product-card__img img {
  width: 100%;
  max-height: 100px;
  object-fit: cover;
}
.search-results__grid .shopper-product-card__name { font-size: var(--shopper-fs-body-sm); }
.search-results__empty {
  font-family: var(--shopper-font);
  font-size: 16px;
  color: var(--shopper-grey);
  margin: 0;
  padding: 24px 0;
}

/* Skeleton */
@keyframes search-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    var(--shopper-light-grey) 0%,
    #e8e8e8 40%,
    var(--shopper-light-grey) 80%
  );
  background-size: 200% 100%;
  animation: search-skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--shopper-radius-sm, 8px);
}
.skeleton-text {
  height: 14px;
}
.search-skeleton {
  display: none;
  padding-top: 0;
}
.search-skeleton--visible {
  display: block;
}
.search-skeleton[hidden] {
  display: none !important;
}
.search-skeleton .search-results {
  padding: 0;
}
.search-skeleton__title {
  height: 22px;
  width: 70%;
  max-width: 240px;
  margin-bottom: 16px;
}
.search-skeleton__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.search-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.search-skeleton-card__img {
  height: 100px;
  border-radius: var(--shopper-radius-mobile-sm, 12px);
}
.search-skeleton-card__line {
  height: 12px;
  width: 100%;
}
.search-skeleton-card__line--short {
  width: 50%;
}

.search-section__empty {
  font-family: var(--shopper-font);
  font-size: 14px;
  color: var(--shopper-grey);
  margin: 0 0 16px;
}

/* ========== Product detail — una sola página con scroll (Figma 3507-2127, 3507-2314, 3507-2405, 3704-3728) ========== */
.page-pdp-mobile {
  overflow-x: hidden;
}
.page-pdp-mobile .mobile-main {
  padding-bottom: 0;
}

.pdp-scroll {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.pdp-scroll__spacer {
  height: 1px;
  pointer-events: none;
}

/* Header PDP */
.pdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--shopper-white);
}
.pdp-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-black);
  padding: 8px;
  margin: -8px 0 -8px -8px;
}
.pdp-header__back .shopper-icon {
  width: 24px;
  height: 24px;
}
.pdp-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdp-header__btn {
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--shopper-black);
  cursor: pointer;
}
.pdp-header__btn--wish-active { color: var(--shopper-red); }
.pdp-header__btn[data-wish-toggle] .shopper-icon { transition: transform 0.2s ease, color 0.2s ease; }
.pdp-header__btn[data-wish-toggle].wish-btn--animate .shopper-icon { animation: wish-pop 0.32s ease; }
.pdp-header__btn.wish-toggle--loading { pointer-events: none; opacity: 0.8; }
.pdp-header__btn .shopper-icon {
  width: 24px;
  height: 24px;
}

/* Gallery */
.pdp-gallery {
  background: var(--shopper-white);
  position: relative;
}
.pdp-gallery__wrap {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}
.pdp-gallery__wrap .pdp-gallery__img,
.pdp-gallery__wrap .pdp-gallery__img.pdp-gallery__img--active {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 20px;
}
/* Multiple images: stack in same area, only active visible */
.pdp-gallery__wrap .pdp-gallery__img:not(.pdp-gallery__img--active) {
  position: absolute;
  inset: 24px;
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  object-fit: contain;
}
.pdp-gallery__wrap .pdp-gallery__img--active {
  position: relative;
  z-index: 1;
}
.pdp-gallery__dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.pdp-gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--shopper-grey);
  opacity: 0.5;
}
.pdp-gallery__dot--active {
  background: var(--shopper-black);
  opacity: 1;
}

/* Product info */
.pdp-info {
  padding: 24px 20px 0;
  background: var(--shopper-white);
}
.pdp-info__title {
  font-family: var(--shopper-font);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #1C1C1C;
  margin: 0 0 8px;
}
.pdp-info__price {
  font-family: var(--shopper-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--shopper-green);
  margin: 0 0 12px;
}
.pdp-info__desc {
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #1C1C1C;
  margin: 0 0 12px;
}
.pdp-info__desc p { margin: 0 0 8px; }
.pdp-info__more {
  color: var(--shopper-green);
  font-weight: 600;
  text-decoration: none;
}
.pdp-info__more:hover { text-decoration: underline; }
.pdp-info__rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdp-info__stars {
  display: flex;
  align-items: center;
  gap: 2px;
}
.pdp-info__star {
  width: 18px;
  height: 18px;
  color: var(--shopper-grey);
}
.pdp-info__star--filled {
  color: #E07C4C;
}
.pdp-info__rating-num {
  font-size: 16px;
  font-weight: 400;
  color: #1C1C1C;
}

/* Section titles (Item Description, You might also like, Reviews) */
.pdp-section__title {
  font-family: var(--shopper-font);
  font-size: 20px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
}
.pdp-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.pdp-section__head .pdp-section__title { margin: 0; }
.pdp-section__more {
  display: inline-flex;
  color: var(--shopper-green);
  padding: 8px;
  margin: -8px -8px -8px 0;
}
.pdp-section__more .shopper-icon {
  width: 20px;
  height: 20px;
}

/* Item description */
.pdp-description {
  padding: 32px 20px 0;
  background: var(--shopper-white);
}
.pdp-description__body {
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #1C1C1C;
  margin-top: 16px;
}
.pdp-description__body p { margin: 0 0 12px; }
.pdp-description__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdp-description__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.pdp-description__item:last-child { margin-bottom: 0; }
.pdp-description__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--shopper-green);
  margin-top: 2px;
}

/* You might also like — horizontal scroll */
.pdp-related {
  padding: 32px 0 0;
  background: var(--shopper-white);
}
.pdp-related .pdp-section__head {
  padding: 0 20px;
}
.pdp-related__scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 20px 16px;
  margin: 0 -20px 0 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  width: 100%;
}
.pdp-related__scroll::-webkit-scrollbar { display: none; }
.pdp-related-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
  position: relative;
  background: var(--shopper-white);
  border-radius: 16px;
  padding-bottom: 48px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid #EEE;
}
.pdp-related-card__wish {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border: 0;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-black);
  cursor: pointer;
}
.pdp-related-card__wish .shopper-icon { width: 18px; height: 18px; transition: transform 0.2s ease, color 0.2s ease; }
.pdp-related-card__wish--active { color: var(--shopper-red); }
.pdp-related-card__wish.wish-btn--animate .shopper-icon { animation: wish-pop 0.32s ease; }
.pdp-related-card__wish.wish-toggle--loading { pointer-events: none; opacity: 0.8; }
.pdp-related-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.pdp-related-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdp-related-card__name {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  padding: 12px 12px 0;
  line-height: 1.3;
}
.pdp-related-card__name a {
  color: #1C1C1C;
  text-decoration: none;
}
.pdp-related-card__price {
  padding: 4px 12px 0;
}
.pdp-related-card__price-current {
  font-weight: 700;
  font-size: 14px;
  color: #1C1C1C;
}
.pdp-related-card__price-old {
  font-size: 12px;
  color: var(--shopper-grey);
  text-decoration: line-through;
  margin-left: 6px;
}
.pdp-related-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 0;
  font-size: 12px;
  color: #1C1C1C;
}
.pdp-related-card__rating .shopper-icon {
  width: 12px;
  height: 12px;
  color: #E07C4C;
}
.pdp-related-card__add {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--shopper-green);
  color: var(--shopper-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pdp-related-card__add .shopper-icon { width: 20px; height: 20px; }

/* Reviews */
.pdp-reviews {
  padding: 32px 20px 0;
  background: var(--shopper-white);
}
.pdp-reviews .pdp-section__head { margin-bottom: 12px; }
.pdp-reviews__summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.pdp-reviews__summary .pdp-reviews__stars {
  display: flex;
  gap: 2px;
}
.pdp-reviews__star {
  width: 18px;
  height: 18px;
  color: #E07C4C;
}
.pdp-reviews__avg {
  font-size: 16px;
  font-weight: 700;
  color: #1C1C1C;
}
.pdp-reviews__count {
  font-size: 16px;
  color: var(--shopper-grey);
}
.pdp-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pdp-review-card {
  background: var(--shopper-white);
  border: 1px solid #EEE;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.pdp-review-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.pdp-review-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--shopper-green);
  color: var(--shopper-white);
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pdp-review-card__meta { flex: 1; min-width: 0; }
.pdp-review-card__name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #1C1C1C;
  margin-bottom: 4px;
}
.pdp-review-card__stars {
  display: flex;
  gap: 2px;
}
.pdp-review-card__star {
  width: 14px;
  height: 14px;
  color: #E07C4C;
}
.pdp-review-card__star--outline {
  color: var(--shopper-grey);
}
.pdp-review-card__date {
  font-size: 12px;
  color: var(--shopper-grey);
  flex-shrink: 0;
}
.pdp-review-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: #1C1C1C;
  margin: 0 0 12px;
}
.pdp-review-card__thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pdp-review-card__thumbs img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #EEE;
}
.pdp-review-card__thumbs-more {
  font-size: 12px;
  color: var(--shopper-grey);
  font-weight: 600;
}

/* Sticky bottom bar */
.pdp-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--shopper-white);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
  z-index: 10;
}
.pdp-sticky__add {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--shopper-black);
  color: var(--shopper-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pdp-sticky__add .shopper-icon {
  width: 24px;
  height: 24px;
}
.pdp-sticky__buy {
  flex: 1;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  background: var(--shopper-green);
  color: var(--shopper-white);
  font-family: var(--shopper-font);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

/* ========== Checkout / Cart móvil (Figma 3650-3095) ========== */
.page-checkout-mobile .mobile-main {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* Bottom nav: icono Carrito activo en página checkout */
.page-checkout-mobile .bottom-nav__item:first-child {
  color: var(--shopper-grey);
}
.page-checkout-mobile .bottom-nav__item:first-child .bottom-nav__icon-wrap {
  background: transparent;
  color: inherit;
}
.page-checkout-mobile .bottom-nav__item:nth-child(2) {
  color: var(--shopper-grey);
}
.page-checkout-mobile .bottom-nav__item:nth-child(2) .bottom-nav__icon-wrap {
  background: transparent;
  color: inherit;
}
.page-checkout-mobile .bottom-nav__item:nth-child(3) {
  color: var(--shopper-green);
}
.page-checkout-mobile .bottom-nav__item:nth-child(3) .bottom-nav__icon-wrap {
  background: var(--shopper-green);
  color: var(--shopper-white);
}

.cart-page {
  padding: 0 20px calc(64px + 160px + env(safe-area-inset-bottom));
}

.cart-page__footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(64px + env(safe-area-inset-bottom, 0));
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0));
  background: var(--shopper-bg, #fff);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 10;
}
.cart-page__footer .cart-total {
  margin-top: 0;
  padding-top: 0;
}
.cart-page__footer .cart-checkout-btn {
  margin-top: 16px;
}

.cart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  background: var(--shopper-bg);
}
.cart-header__title {
  font-family: var(--shopper-font);
  font-size: 24px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
}
.cart-header__clear {
  padding: 10px 16px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: var(--shopper-white);
  color: var(--shopper-grey);
  font-family: var(--shopper-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.cart-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--shopper-white);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #EEE;
}
.cart-item__img {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  display: block;
}
.cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item__info {
  min-width: 0;
}
.cart-item__name {
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.3;
}
.cart-item__name a {
  color: #1C1C1C;
  text-decoration: none;
}
.cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid #1C1C1C;
  border-radius: 999px;
  background: transparent;
}
.cart-item__qty-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #1C1C1C;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--shopper-font);
}
.cart-item__qty-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cart-item__qty-value {
  min-width: 32px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: #1C1C1C;
}
.cart-item__price {
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
  flex-shrink: 0;
}

.cart-promo {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.cart-promo__input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  font-family: var(--shopper-font);
  font-size: 16px;
  background: var(--shopper-white);
}
.cart-promo__input::placeholder {
  color: var(--shopper-grey);
}
.cart-promo__btn {
  flex-shrink: 0;
  padding: 14px 20px;
  border: 1px solid #1C1C1C;
  border-radius: 12px;
  background: #1C1C1C;
  color: var(--shopper-white);
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 24px;
  padding-top: 16px;
}
.cart-total__label {
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 400;
  color: #1C1C1C;
}
.cart-total__value {
  font-family: var(--shopper-font);
  font-size: 20px;
  font-weight: 700;
  color: #1C1C1C;
}

.cart-checkout-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 16px 24px;
  border: 0;
  border-radius: 16px;
  background: #1C1C1C;
  color: var(--shopper-white);
  font-family: var(--shopper-font);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.cart-checkout-btn:hover {
  background: #000;
  color: var(--shopper-white);
}
.cart-checkout-btn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Modal limpiar carrito (Figma 3841-6609) */
.cart-clear-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.cart-clear-modal[hidden] {
  display: none;
}
.cart-clear-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.cart-clear-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: var(--shopper-white);
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.cart-clear-modal__img {
  display: block;
  margin: 0 auto 20px;
  width: 120px;
  height: 120px;
}
.cart-clear-modal__title {
  font-family: var(--shopper-font);
  font-size: 20px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0 0 12px;
}
.cart-clear-modal__text {
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--shopper-grey);
  margin: 0 0 24px;
}
.cart-clear-modal__confirm {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 16px;
  background: #1C1C1C;
  color: var(--shopper-white);
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}
.cart-clear-modal__confirm:hover {
  background: #000;
  color: var(--shopper-white);
}
.cart-clear-modal__cancel {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  background: transparent;
  color: var(--shopper-grey);
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.cart-clear-modal__cancel:hover {
  color: #1C1C1C;
}

/* Estado vacío tras limpiar carrito */
.cart-empty {
  padding: 48px 24px;
  text-align: center;
}
.cart-empty__img {
  display: block;
  margin: 0 auto 20px;
  width: 120px;
  height: 120px;
}
.cart-empty__text {
  font-family: var(--shopper-font);
  font-size: 18px;
  font-weight: 600;
  color: #1C1C1C;
  margin: 0 0 24px;
}
.cart-empty__btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 16px;
  background: var(--shopper-green);
  color: var(--shopper-white);
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.cart-empty__btn:hover {
  background: #06a894;
  color: var(--shopper-white);
}

/* ========== Checkout Shipping (Figma 3650-3486, 3659-3408) ========== */
.page-checkout-shipping-mobile .mobile-main {
  padding-bottom: 0;
}

.shipping-scroll {
  padding-top: 8px;
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
.shipping-scroll__spacer {
  height: 1px;
  pointer-events: none;
}

.shipping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--shopper-bg);
}
.shipping-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--shopper-black);
  padding: 8px;
  margin: -8px 0 -8px -8px;
}
.shipping-header__back .shopper-icon {
  width: 24px;
  height: 24px;
}
.shipping-header__title {
  font-family: var(--shopper-font);
  font-size: 18px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
}
.shipping-header__spacer {
  width: 40px;
  height: 1px;
}

.shipping-card {
  background: var(--shopper-white);
  border-radius: 16px;
  padding: 20px;
  margin: 0 20px 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #EEE;
}
.shipping-card__title {
  font-family: var(--shopper-font);
  font-size: 18px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0 0 16px;
}

.shipping-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shipping-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #EEE;
}
.shipping-item:last-child {
  border-bottom: 0;
}
.shipping-item__img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}
.shipping-item__info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}
.shipping-item__name {
  font-size: 14px;
  font-weight: 500;
  color: #1C1C1C;
}
.shipping-item__qty {
  font-size: 14px;
  color: var(--shopper-grey);
}
.shipping-item__price {
  font-size: 14px;
  font-weight: 600;
  color: #1C1C1C;
}

.shipping-price {
  margin: 0;
  padding: 0;
}
.shipping-price__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  margin: 0;
}
.shipping-price__row dt,
.shipping-price__row dd { font-size: 14px; color: #1C1C1C; margin: 0; }
.shipping-price__row dd { font-weight: 500; }
.shipping-price__row--total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #EEE;
}
.shipping-price__row--total dt,
.shipping-price__row--total dd {
  font-size: 16px;
  font-weight: 700;
}

.shipping-detail {
  margin: 0;
  padding: 0;
}
.shipping-detail__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid #EEE;
}
.shipping-detail__row:last-child { border-bottom: 0; }
.shipping-detail__row dt {
  font-size: 12px;
  font-weight: 500;
  color: var(--shopper-grey);
  margin: 0;
}
.shipping-detail__row dd {
  font-size: 14px;
  font-weight: 500;
  color: #1C1C1C;
  margin: 0;
}

.shipping-detail--form .shipping-detail__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--shopper-grey);
  margin: 0 0 4px 0;
  display: block;
}
.shipping-detail--form .shipping-detail__input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--shopper-font);
  border: 1px solid #ddd;
  border-radius: 8px;
  box-sizing: border-box;
}
.shipping-detail--form .shipping-detail__input:focus {
  outline: none;
  border-color: var(--shopper-green);
}
.shipping-detail__input--textarea {
  resize: vertical;
  min-height: 72px;
}
.shipping-detail__hint {
  display: block;
  font-size: 12px;
  color: var(--shopper-grey);
  margin-top: 6px;
}

/* Dropdown custom de sugerencias de dirección (Places API) */
.shipping-address-suggestions {
  margin-top: 6px;
  margin-bottom: 4px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  background: var(--shopper-white);
  max-height: 280px;
  overflow-y: auto;
  font-family: var(--shopper-font);
  z-index: 10;
}
.shipping-address-suggestions__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s ease;
}
.shipping-address-suggestions__item:last-child {
  border-bottom: 0;
}
.shipping-address-suggestions__item:hover,
.shipping-address-suggestions__item.shipping-address-suggestions__item--selected {
  background: #e8f5e9;
}
.shipping-address-suggestions__main {
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1c;
}
.shipping-address-suggestions__secondary {
  font-size: 12px;
  color: var(--shopper-grey);
}
@media (max-width: 768px) {
  .shipping-address-suggestions {
    max-height: 55vh;
    -webkit-overflow-scrolling: touch;
    font-size: 16px;
  }
  .shipping-address-suggestions__item {
    padding: 14px 12px;
    min-height: 56px;
    justify-content: center;
  }
  .shipping-address-suggestions__main {
    font-size: 16px;
  }
  .shipping-address-suggestions__secondary {
    font-size: 13px;
  }
}

.shipping-detail__row-group {
  display: block;
}
.shipping-detail--form .shipping-detail__row--half {
  padding: 8px 0;
}
@media (min-width: 400px) {
  .shipping-detail__row-group {
    display: flex;
    gap: 12px;
  }
  .shipping-detail__row-group .shipping-detail__row--half {
    flex: 1;
  }
}

.shipping-address-summary {
  margin-top: 12px;
  padding: 14px;
  background: #e8f5e9;
  border: 1px solid #c8e6c9;
  border-radius: 8px;
  overflow: visible;
  min-height: 0;
}
.shipping-address-summary__header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2e7d32;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 10px;
}
.shipping-address-summary__header .shopper-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.shipping-address-summary__content {
  font-size: 13px;
  color: #1c1c1c;
  line-height: 1.5;
  overflow: visible;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.shipping-address-summary__content div { margin: 4px 0; }
.shipping-address-summary__full {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shipping-address-summary__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 2px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.shipping-address-summary__row strong { min-width: 4em; flex-shrink: 0; }
/* Mobile: resumen justo debajo de dirección, sin cortes */
@media (max-width: 768px) {
  .shipping-address-summary {
    margin-top: 12px;
    padding: 16px;
    border-radius: var(--shopper-radius-sm);
    margin-bottom: 4px;
  }
  .shipping-address-summary__header {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .shipping-address-summary__content {
    font-size: 14px;
    line-height: 1.6;
  }
  .shipping-address-summary__full {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
  .shipping-address-summary__content div { margin: 6px 0; }
}

/* Google Places dropdown — por encima de todo (incl. Django Debug Toolbar) */
.pac-container {
  z-index: 2147483647 !important;
  position: fixed !important;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border: 1px solid #e0e0e0;
  font-family: var(--shopper-font);
  max-height: 50vh;
  overflow-y: auto;
  box-sizing: border-box;
}
.pac-item {
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.pac-item:hover { background: #f5f5f5; }
.pac-item-selected { background: #e3f2fd; }

/* Mobile: Google Places dropdown — no cortado, tap funcional */
@media (max-width: 768px) {
  .pac-container {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: 55vh;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--shopper-radius-sm);
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .pac-item {
    padding: 14px 12px;
    min-height: 56px;
    font-size: 16px;
    -webkit-tap-highlight-color: rgba(7, 191, 165, 0.15);
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.35;
  }
  .pac-item-query { font-size: 16px; white-space: normal !important; word-wrap: break-word; }
  .pac-item span { white-space: normal !important; word-wrap: break-word; }
  /* Evitar zoom en iOS al enfocar el input de dirección */
  .shipping-detail--form #id_address {
    font-size: 16px;
  }
}

.shipping-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shipping-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
}
.shipping-option__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.shipping-option__mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #CCC;
  background: var(--shopper-white);
}
.shipping-option__input:checked + .shipping-option__mark {
  border-color: var(--shopper-green);
  background: var(--shopper-green);
  box-shadow: inset 0 0 0 3px var(--shopper-white);
}
.shipping-option__label {
  font-size: 14px;
  font-weight: 500;
  color: #1C1C1C;
}

.shipping-payment {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.shipping-payment__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #EEE;
  text-decoration: none;
  color: #1C1C1C;
  font-size: 16px;
  font-weight: 500;
}
.shipping-payment__item:last-child { border-bottom: 0; }
.shipping-payment__item--static {
  cursor: default;
  pointer-events: none;
}
.shipping-payment__arrow {
  width: 20px;
  height: 20px;
  color: var(--shopper-grey);
}

.shipping-sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--shopper-white);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
  z-index: 10;
}
.shipping-sticky__btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  border: 0;
  border-radius: 16px;
  background: #1C1C1C;
  color: var(--shopper-white);
  font-family: var(--shopper-font);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.shipping-sticky__btn:hover {
  background: #000;
  color: var(--shopper-white);
}

/* ========== Checkout thank you ========== */
.thankyou-page {
  padding: 40px 20px 80px;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thankyou-card {
  text-align: center;
  max-width: 320px;
}
.thankyou-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--shopper-green);
  color: var(--shopper-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.thankyou-card__icon .shopper-icon {
  width: 32px;
  height: 32px;
}
.thankyou-card__title {
  font-family: var(--shopper-font);
  font-size: 22px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0 0 12px 0;
}
.thankyou-card__text {
  font-size: 14px;
  color: var(--shopper-grey);
  margin: 0 0 24px 0;
  line-height: 1.5;
}
.thankyou-card__btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 16px;
  background: #1C1C1C;
  color: var(--shopper-white);
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.thankyou-card__btn:hover {
  background: #000;
  color: var(--shopper-white);
}

/* ========== Category listing móvil (Figma 3363-1141) ========== */
.page-category-mobile .mobile-main {
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.page-category-mobile .bottom-nav__item:nth-child(2) {
  color: var(--shopper-green);
}
.page-category-mobile .bottom-nav__item:nth-child(2) .bottom-nav__icon-wrap {
  background: var(--shopper-green);
  color: var(--shopper-white);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--shopper-bg);
}
.category-header__back {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  margin: -8px 0 -8px -8px;
  color: var(--shopper-black);
}
.category-header__back .shopper-icon {
  width: 24px;
  height: 24px;
}
.category-header__search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--shopper-white);
  border-radius: 12px;
  border: 1px solid #E5E5E5;
  text-decoration: none;
  color: var(--shopper-grey);
  font-family: var(--shopper-font);
  font-size: 14px;
}
.category-header__search-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--shopper-grey);
}
.category-header__search-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-header__search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--shopper-black);
  font-family: var(--shopper-font);
  font-size: 14px;
  outline: none;
}
.category-header__search-input::placeholder {
  color: var(--shopper-grey);
}
.category-header__filter {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--shopper-white);
  color: var(--shopper-black);
  cursor: pointer;
  border: 1px solid #E5E5E5;
}
.category-header__filter .shopper-icon {
  width: 24px;
  height: 24px;
}

.category-page {
  padding: 0 20px 24px;
}

.category-sorts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0 16px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-sorts::-webkit-scrollbar {
  display: none;
}
.category-sort-pill {
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--shopper-light-grey);
  color: var(--shopper-grey);
  font-family: var(--shopper-font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.category-sort-pill--active {
  background: var(--shopper-black);
  color: var(--shopper-white);
}
.category-sort-pill:hover {
  color: inherit;
}

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

.category-product-card {
  position: relative;
  background: var(--shopper-white);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #EEE;
}
.category-product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--shopper-red);
  color: var(--shopper-white);
  font-size: 12px;
  font-weight: 600;
}
.category-product-card__wish {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--shopper-white);
  color: var(--shopper-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.category-product-card__wish .shopper-icon {
  width: 20px;
  height: 20px;
}
.category-product-card__wish--active {
  color: var(--shopper-red);
}
.category-product-card__wish .shopper-icon { transition: transform 0.2s ease, color 0.2s ease; }
.category-product-card__wish.wish-btn--animate .shopper-icon { animation: wish-pop 0.32s ease; }
.category-product-card__wish.wish-toggle--loading { pointer-events: none; opacity: 0.8; }
.category-product-card__img {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
  aspect-ratio: 1;
}
.category-product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-product-card__name {
  font-family: var(--shopper-font);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
}
.category-product-card__name a {
  color: var(--shopper-black);
  text-decoration: none;
}
.category-product-card__name a:hover {
  color: var(--shopper-green);
}
.category-product-card__price {
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--shopper-black);
  margin: 0 0 8px;
}
.category-product-card__add {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--shopper-green);
  color: var(--shopper-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.category-product-card__add .shopper-icon {
  width: 20px;
  height: 20px;
}

/* ========== Modal Filter (Figma 3363-2056) ========== */
.category-filter-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  pointer-events: none;
}
.category-filter-modal[hidden] {
  display: none;
  pointer-events: none;
}
.category-filter-modal:not([hidden]) {
  pointer-events: auto;
}
.category-filter-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.category-filter-modal__panel {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--shopper-white);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  overflow: hidden;
}
.category-filter-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #EEE;
  flex-shrink: 0;
}
.category-filter-modal__back,
.category-filter-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--shopper-black);
  cursor: pointer;
}
.category-filter-modal__back .shopper-icon,
.category-filter-modal__close .shopper-icon {
  width: 24px;
  height: 24px;
}
.category-filter-modal__title {
  font-family: var(--shopper-font);
  font-size: 18px;
  font-weight: 700;
  color: #1C1C1C;
  margin: 0;
}
.category-filter-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.category-filter-section {
  margin-bottom: 24px;
}
.category-filter-section:last-child {
  margin-bottom: 0;
}
.category-filter-section__title {
  font-family: var(--shopper-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--shopper-green);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.category-filter-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.category-filter-cat {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #E5E5E5;
  background: var(--shopper-white);
  color: var(--shopper-black);
  font-family: var(--shopper-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.category-filter-cat--active,
.category-filter-cat:hover {
  border-color: var(--shopper-green);
  background: var(--shopper-green);
  color: var(--shopper-white);
}
.category-filter-section__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--shopper-grey);
  font-family: var(--shopper-font);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.category-filter-section__more .shopper-icon {
  width: 16px;
  height: 16px;
}

.category-filter-price {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.category-filter-price__range {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--shopper-light-grey);
  border-radius: 3px;
}
.category-filter-price__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--shopper-green);
  cursor: pointer;
  border: 2px solid var(--shopper-white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.category-filter-price__values {
  display: flex;
  justify-content: space-between;
  font-family: var(--shopper-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--shopper-black);
}

.category-filter-rating {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.category-filter-rating__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--shopper-grey);
  cursor: pointer;
  font-family: var(--shopper-font);
  font-size: 14px;
}
.category-filter-rating__btn .shopper-icon {
  width: 18px;
  height: 18px;
}
.category-filter-rating__btn--active,
.category-filter-rating__btn:hover {
  color: var(--shopper-yellow);
}

.category-filter-modal__actions {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #EEE;
  flex-shrink: 0;
  background: var(--shopper-white);
}
.category-filter-modal__clear {
  flex: 1;
  padding: 14px 20px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: var(--shopper-white);
  color: var(--shopper-black);
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.category-filter-modal__apply {
  flex: 1;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--shopper-black);
  color: var(--shopper-white);
  font-family: var(--shopper-font);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.category-filter-modal__apply:hover {
  background: #000;
  color: var(--shopper-white);
}