/* Identidad de demostración inspirada en la referencia de Importadora Peralta Jr. */
:root {
  --primary: #073493;
  --accent: #efbd06;
  --color-primary: #073493;
  --color-primary-hover: #092873;
  --color-accent: #f6cf19;
  --color-success: #078345;
}
.store.theme-habitual {
  --theme-primary: #073493;
  --theme-accent: #b78000;
  --theme-soft: #e9effb;
  --theme-paper: #fbfbf7;
}
.store.theme-habitual .announcement {
  background: #092e85;
  color: white;
}
.store.theme-habitual .announcement span {
  color: #ffdc28;
}
.store.theme-habitual .hero h1 em {
  color: #bb8500;
}
.store.theme-habitual .hero-note-icon,
.store.theme-habitual .benefit svg {
  color: #d9a600;
}
.store.theme-habitual .brand strong,
.store.theme-habitual .iconbutton {
  color: #08328c;
}
.store.theme-habitual .footer {
  background: #072d80;
}
.store.theme-habitual .branch-strip {
  background: #ebf0fa;
}
.store.theme-habitual .branch-chips button {
  color: #073493;
  border-color: #d8e1f6;
}
.store.theme-habitual .btn,
.store.theme-habitual .add {
  background: #073493;
  color: white;
}
.store.theme-habitual .add {
  background: #e9effc;
  color: #073493;
}
.store.theme-habitual .badge {
  color: #073493;
}
.store.theme-habitual .nav .season {
  color: #ba8300;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-symbol {
  width: 53px;
  height: 53px;
  object-fit: contain;
  flex: none;
}
.brand-wordmark {
  display: block;
}
.brand-wordmark strong {
  display: block;
  white-space: nowrap;
}
.brand-wordmark small {
  white-space: nowrap;
}
.store .header .brand {
  min-width: 230px;
}
.store .footer .brand strong,
.store .footer .brand small {
  color: white;
}
.admin .sidebar {
  background: #082d82;
}
.admin .side-btn.active,
.admin .side-btn:hover {
  background: #254a9a;
}
.admin .admin-brand {
  gap: 9px;
}
.admin .admin-brand .brand-symbol {
  width: 43px;
  height: 43px;
}
.admin .admin-brand strong {
  font-size: 21px;
}
.admin .admin-brand small {
  font-size: 8px;
  letter-spacing: 0.08em;
}
.admin .stat strong,
.admin .btn.light {
  color: #073493;
}
.admin .btn:not(.light) {
  background: #073493;
  border-color: #073493;
}
.admin .text-link {
  color: #073493;
}
.store .categories {
  grid-template-columns: repeat(4, 1fr);
}
.store .category-img {
  height: 190px;
}
.store .image-reference {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: #ffffffed;
  color: #596b61;
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 9px;
  pointer-events: none;
}
.store .product:hover .quick-view {
  bottom: 35px;
}
.reference-note {
  font-size: 10px;
  color: #7b8780;
  margin: 8px 0;
}
.load-more {
  text-align: center;
  margin: 35px 0;
}
.load-more .btn.light {
  background: white;
  color: #073493;
  border: 1px solid #c8d5f1;
}
.load-more .btn span {
  font-size: 10px;
  opacity: 0.65;
}
.store .category-img {
  background-color: #eef2f7;
}
.store .search {
  max-width: 440px;
}
@media (max-width: 900px) {
  .store .categories {
    grid-template-columns: repeat(4, 1fr);
  }
  .store .category-img {
    height: 135px;
  }
  .store .header .brand {
    min-width: 195px;
  }
  .brand-symbol {
    width: 46px;
    height: 46px;
  }
}
@media (max-width: 640px) {
  .store .header .brand {
    min-width: 0;
  }
  .brand-symbol {
    width: 42px;
    height: 42px;
  }
  .brand {
    gap: 7px;
  }
  .store .brand strong {
    font-size: 22px;
  }
  .store .categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .store .category-img {
    height: 145px;
  }
  .admin .admin-brand .brand-symbol {
    width: 44px;
    height: 44px;
  }
  .admin .admin-brand .brand-wordmark {
    display: none;
  }
  .store .image-reference {
    font-size: 8px;
    padding: 4px;
  }
}
/* El archivo original tiene márgenes transparentes; el marco los compensa sin modificarlo. */
.brand-symbol-frame {
  display: grid;
  place-items: center;
  flex: none;
  width: 53px;
  height: 53px;
  overflow: hidden;
}
.brand-symbol-frame .brand-symbol {
  width: 100%;
  height: 100%;
  transform: scale(1.7);
}
.admin .admin-brand .brand-symbol-frame {
  width: 43px;
  height: 43px;
}
@media (max-width: 900px) {
  .brand-symbol-frame {
    width: 46px;
    height: 46px;
  }
}
@media (max-width: 640px) {
  .brand-symbol-frame {
    width: 42px;
    height: 42px;
  }
  .admin .admin-brand .brand-symbol-frame {
    width: 44px;
    height: 44px;
  }
}