/* ============================================================
   j-theme.css
   Component-layer styles for the "j" family of cchomedecor pages.
   Extends assets/theme.css (tokens + reset) with header, footer,
   module system, tiles, breadcrumbs, page hero, forms, etc.

   Load order inside each page:
     1. assets/theme.css      (tokens, reset, base utilities)
     2. assets/j-theme.css    (this file — shared components)
     3. inline <style>        (page-specific components)
   ============================================================ */


/* ============================================================
   1. SKIP LINK
   ============================================================ */
.cc-skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 8px 16px;
  background: var(--cc-color-gray-1000);
  color: #fff;
  z-index: 9999;
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  font-weight: 700;
  font-size: var(--cc-text-sm);
}
.cc-skip-link:focus { left: 8px; }


/* ============================================================
   2. HEADER (sticky with collapse on scroll)
   ============================================================ */
.cc-header {
  position: sticky;
  top: 0;
  z-index: var(--cc-z-sticky);
  background: var(--cc-surface-page);
  transition: box-shadow 250ms var(--cc-ease-out);
}
body.header-scrolled .cc-header {
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
}

.cc-header__collapsible {
  overflow: hidden;
  max-height: 120px;
  transition: max-height 350ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.header-scrolled .cc-header__collapsible { max-height: 0; }
@media (max-width: 991.98px) {
  .cc-header__collapsible { max-height: 60px; }
}

/* --- Row 1: Promo bar --- */
.cc-promo-bar {
  background: var(--cc-color-gray-1000);
  color: #fff;
  font-size: var(--cc-text-body);
  text-align: center;
  padding: var(--cc-space-2) var(--cc-space-4);
  position: relative;
}
.cc-promo-bar strong {
  color: var(--cc-color-red-500);
  font-weight: 700;
  letter-spacing: var(--cc-tracking-wide);
}
.cc-promo-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-promo-bar__close {
  position: absolute;
  right: var(--cc-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.cc-promo-bar__close:hover { background: rgba(255, 255, 255, 0.1); }
@media (max-width: 767.98px) {
  .cc-promo-bar { font-size: var(--cc-text-sm); padding: var(--cc-space-2) 40px; }
}

/* --- Row 2: Utility nav --- */
.cc-utility-nav {
  background: var(--cc-surface-page);
  border-bottom: 1px solid var(--cc-border-subtle);
  display: none;
}
@media (min-width: 992px) { .cc-utility-nav { display: block; } }
.cc-utility-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  gap: var(--cc-space-4);
}
.cc-utility-nav__list {
  display: flex;
  gap: var(--cc-space-6);
  align-items: center;
}
.cc-utility-nav__link {
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-text-primary);
  padding: 8px 0;
  transition: var(--cc-t-hover);
}
.cc-utility-nav__link:hover { color: var(--cc-text-link); }
.cc-utility-nav__link--accessibility {
  color: var(--cc-text-secondary);
  font-weight: var(--cc-font-regular);
  text-transform: none;
  letter-spacing: 0;
}

/* --- Row 3: Main header --- */
.cc-main-header {
  background: var(--cc-surface-page);
  padding-block: var(--cc-space-4);
  transition: padding 250ms var(--cc-ease-out);
}
body.header-scrolled .cc-main-header { padding-block: 10px; }

.cc-main-header__grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--cc-space-5);
}
@media (min-width: 992px) {
  .cc-main-header__grid {
    grid-template-columns: auto minmax(320px, 1fr) auto auto auto auto;
  }
}

.cc-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-family: var(--cc-font-family);
  font-weight: var(--cc-font-bold);
  font-size: var(--cc-text-xl);
  line-height: 1;
  color: var(--cc-text-primary);
  letter-spacing: var(--cc-tracking-tight);
  text-transform: uppercase;
}
.cc-logo__mark {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: var(--cc-action-primary);
  position: relative;
  flex-shrink: 0;
  transition: transform 350ms var(--cc-ease-out);
}
.cc-logo__mark::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px solid #fff;
}
body.header-scrolled .cc-logo__mark { transform: scale(0.85); }
.cc-logo__text { font-size: var(--cc-text-lg); }
.cc-logo__text strong { color: var(--cc-action-primary); }
@media (min-width: 992px) { .cc-logo__text { font-size: var(--cc-text-xl); } }

.cc-search {
  position: relative;
  grid-column: 1 / -1;
  order: 10;
}
@media (min-width: 992px) { .cc-search { grid-column: auto; order: initial; } }
.cc-search__input {
  height: 48px;
  width: 100%;
  padding: 12px 56px 12px 20px;
  border: none;
  background: var(--cc-surface-sunken);
  font-size: var(--cc-text-md);
  border-radius: var(--cc-radius-none);
  transition: height 250ms var(--cc-ease-out);
}
body.header-scrolled .cc-search__input { height: 42px; }
.cc-search__input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(234, 23, 34, 0.2);
}
.cc-search__submit {
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-action-primary);
  font-size: 20px;
}
body.header-scrolled .cc-search__submit { height: 42px; }
.cc-search__submit:hover { color: var(--cc-action-primary-hover); }

.cc-header-action {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding: 8px 12px;
  color: var(--cc-text-primary);
  transition: var(--cc-t-hover);
  min-height: 48px;
}
.cc-header-action:hover { color: var(--cc-text-link); }
.cc-header-action__icon {
  font-size: 22px;
  color: var(--cc-action-primary);
  flex-shrink: 0;
}
.cc-header-action__text {
  display: none;
  line-height: 1.2;
  font-size: var(--cc-text-sm);
}
.cc-header-action__text strong {
  display: block;
  font-weight: var(--cc-font-bold);
  font-size: var(--cc-text-body);
}
.cc-header-action__text span {
  color: var(--cc-text-tertiary);
  font-size: var(--cc-text-xs);
}
@media (min-width: 1200px) { .cc-header-action__text { display: block; } }
.cc-header-action--cart { position: relative; }
.cc-header-action__cart-badge {
  position: absolute;
  top: 6px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--cc-color-gray-1000);
  color: #fff;
  font-size: 10px;
  font-weight: var(--cc-font-bold);
  border-radius: var(--cc-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cc-hamburger {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: var(--cc-text-primary);
  font-size: 24px;
}
@media (min-width: 992px) { .cc-hamburger { display: none; } }

/* --- Row 4: Mega nav --- */
.cc-mega-nav {
  background: var(--cc-action-primary);
  display: none;
  position: relative;
}
@media (min-width: 992px) { .cc-mega-nav { display: block; } }

/* Wrapper: full-width flex with highlight on left and centered nav */
.cc-mega-nav__wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

/* Highlight pill (Coleção Outono) — black bg, flush to left */
.cc-mega-nav__highlight {
  display: flex;
  align-items: center;
  background: var(--cc-color-gray-1000);
  color: var(--cc-color-red-500);
  padding: 18px var(--cc-space-5);
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--cc-duration-fast) var(--cc-ease-out), padding 250ms var(--cc-ease-out);
}
.cc-mega-nav__highlight::before {
  content: '◆';
  margin-right: 8px;
  font-size: 10px;
}
.cc-mega-nav__highlight:hover { background: #000; color: var(--cc-color-red-500); }
body.header-scrolled .cc-mega-nav__highlight { padding-block: 14px; }

/* Main list — centered in the remaining space */
.cc-mega-nav__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
}
.cc-mega-nav__item {
  position: static; /* so dropdown can span full width of nav */
  list-style: none;
}
.cc-mega-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px var(--cc-space-4);
  color: #fff;
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: background var(--cc-duration-fast) var(--cc-ease-out), padding 250ms var(--cc-ease-out);
}
body.header-scrolled .cc-mega-nav__link { padding-block: 14px; }
.cc-mega-nav__link:hover,
.cc-mega-nav__item--has-dropdown:hover > .cc-mega-nav__link,
.cc-mega-nav__item--has-dropdown:focus-within > .cc-mega-nav__link {
  background: var(--cc-action-primary-hover);
}
.cc-mega-nav__caret {
  font-size: 10px;
  opacity: 0.8;
  transition: transform 200ms var(--cc-ease-out);
}
.cc-mega-nav__item--has-dropdown:hover .cc-mega-nav__caret { transform: rotate(180deg); }

/* Mega dropdown panel — full width of the page, opens below mega nav */
.cc-mega-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--cc-surface-page);
  color: var(--cc-text-primary);
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.18);
  border-top: 1px solid var(--cc-border-subtle);
  z-index: 150;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms var(--cc-ease-out), transform 180ms var(--cc-ease-out);
}
.cc-mega-nav__item--has-dropdown:hover > .cc-mega-nav__dropdown,
.cc-mega-nav__item--has-dropdown:focus-within > .cc-mega-nav__dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
.cc-mega-nav__dropdown-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--cc-space-6) var(--cc-space-5);
}

/* Bloco PRIMARY: filhos com netos — colunas largas com hierarquia clara */
.cc-mega-nav__primary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--cc-space-5) var(--cc-space-7);
}
.cc-mega-nav__column {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  min-width: 0;
}
.cc-mega-nav__sublink {
  display: block;
  padding: 5px 0;
  color: var(--cc-text-secondary);
  font-size: var(--cc-text-body);
  font-weight: var(--cc-font-medium);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  transition: color var(--cc-duration-fast) var(--cc-ease-out);
}
.cc-mega-nav__sublink:hover { color: var(--cc-color-red-500); }

/* Filho COM netos: vira título de coluna (uppercase + barra vermelha) */
.cc-mega-nav__sublink--parent {
  color: var(--cc-text-primary);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  padding-bottom: var(--cc-space-2);
  margin-bottom: var(--cc-space-2);
  border-bottom: 2px solid var(--cc-color-red-500);
}
.cc-mega-nav__sublink--parent:hover { color: var(--cc-color-red-500); }

/* Lista de netos abaixo do filho-com-netos */
.cc-mega-nav__sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.cc-mega-nav__sublist li { list-style: none; }
.cc-mega-nav__sublist .cc-mega-nav__sublink {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
}

/* Separador entre blocos PRIMARY e SIMPLE */
.cc-mega-nav__separator {
  border: 0;
  border-top: 1px solid var(--cc-border-subtle);
  margin: var(--cc-space-6) 0 var(--cc-space-5);
}

/* Bloco SIMPLE: filhos sem netos — grid compacto sem barra vermelha */
.cc-mega-nav__simple-label {
  display: block;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-text-tertiary);
  margin-bottom: var(--cc-space-3);
}
.cc-mega-nav__simple-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 4px var(--cc-space-5);
}
.cc-mega-nav__simple-link {
  display: block;
  padding: 6px 0;
  color: var(--cc-text-primary);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-medium);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all var(--cc-duration-fast) var(--cc-ease-out);
}
.cc-mega-nav__simple-link:hover {
  color: var(--cc-color-red-500);
  border-bottom-color: var(--cc-color-red-500);
}

/* Link "Ver todos" no rodapé do dropdown */
.cc-mega-nav__see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--cc-space-6);
  padding-top: var(--cc-space-4);
  border-top: 1px solid var(--cc-border-subtle);
  width: 100%;
  color: var(--cc-color-red-500);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  text-decoration: none;
  transition: gap var(--cc-duration-fast) var(--cc-ease-out);
}
.cc-mega-nav__see-all:hover { gap: 12px; color: var(--cc-color-red-700); }
.cc-mega-nav__see-all i { font-size: 16px; }


/* ============================================================
   3. BREADCRUMBS
   ============================================================ */
.j-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  padding-block: var(--cc-space-4);
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
}
.j-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-2);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.j-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
}
.j-breadcrumbs li + li::before {
  content: '›';
  color: var(--cc-text-tertiary);
}
.j-breadcrumbs a {
  color: var(--cc-text-secondary);
  transition: color var(--cc-duration-fast);
}
.j-breadcrumbs a:hover { color: var(--cc-text-link); }
.j-breadcrumbs [aria-current="page"] {
  color: var(--cc-text-primary);
  font-weight: var(--cc-font-bold);
}


/* ============================================================
   4. PAGE HERO (smaller than home hero)
   ============================================================ */
.j-page-hero {
  background: var(--cc-surface-page);
  border-bottom: 1px solid var(--cc-border-subtle);
  padding-block: var(--cc-space-5) var(--cc-space-6);
}
.j-page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-link);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  margin-bottom: var(--cc-space-2);
}
.j-page-hero__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cc-action-primary);
}
.j-page-hero__title {
  font-size: var(--cc-text-2xl);
  font-weight: var(--cc-font-bold);
  line-height: var(--cc-lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-text-primary);
  position: relative;
  padding-bottom: var(--cc-space-3);
}
@media (min-width: 768px) { .j-page-hero__title { font-size: var(--cc-text-3xl); } }
.j-page-hero__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  background: var(--cc-action-primary);
}
.j-page-hero__lead {
  margin-top: var(--cc-space-3);
  max-width: 68ch;
  color: var(--cc-text-secondary);
  font-size: var(--cc-text-md);
  line-height: var(--cc-lh-base);
}


/* ============================================================
   5. MODULE SYSTEM (section wrapper, divider, head)
   ============================================================ */
.j-module { padding-block: var(--cc-space-7) var(--cc-space-9); }
@media (min-width: 992px) { .j-module { padding-block: var(--cc-space-8) var(--cc-space-10); } }
.j-module--alt { background: var(--cc-surface-section); }
.j-module--tight { padding-block: var(--cc-space-6); }

.j-module-divider {
  background: var(--cc-surface-page);
  padding-block: var(--cc-space-7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.j-module-divider__inner {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  max-width: 520px;
  width: 100%;
  padding-inline: var(--cc-space-5);
}
.j-module-divider__line {
  flex: 1;
  height: 1px;
  background: var(--cc-border-default);
  position: relative;
}
.j-module-divider__line::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--cc-action-primary);
}
.j-module-divider__line:first-child::after {
  right: auto;
  left: 0;
}
.j-module-divider__label {
  font-family: var(--cc-font-family);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-text-tertiary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding-inline: var(--cc-space-3);
}
.j-module-divider__num {
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  color: var(--cc-action-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.j-module-divider__dot {
  width: 4px;
  height: 4px;
  background: var(--cc-text-tertiary);
  border-radius: 50%;
}
@media (max-width: 575.98px) {
  .j-module-divider { padding-block: var(--cc-space-6); }
  .j-module-divider__inner { max-width: 360px; padding-inline: var(--cc-space-4); }
  .j-module-divider__label { font-size: 10px; }
}

.j-module-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cc-space-5);
  margin-bottom: var(--cc-space-7);
  flex-wrap: wrap;
}
.j-module-head__left { flex: 1; min-width: 280px; }
.j-module-head__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--cc-action-primary);
  color: #fff;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-bottom: var(--cc-space-3);
}
.j-module-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-link);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  margin-bottom: var(--cc-space-2);
}
.j-module-head__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cc-action-primary);
  display: inline-block;
}
.j-module-head__title {
  font-size: var(--cc-text-2xl);
  font-weight: var(--cc-font-bold);
  line-height: var(--cc-lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-text-primary);
  position: relative;
  padding-bottom: var(--cc-space-3);
}
@media (min-width: 768px) { .j-module-head__title { font-size: var(--cc-text-3xl); } }
.j-module-head__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  background: var(--cc-action-primary);
}
.j-module-head__subtitle {
  margin-top: var(--cc-space-3);
  max-width: 60ch;
  color: var(--cc-text-secondary);
  font-size: var(--cc-text-md);
  line-height: var(--cc-lh-base);
}
.j-module-head__link {
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-link);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  white-space: nowrap;
  padding: 12px 18px;
  border: 1px solid var(--cc-border-default);
  transition: var(--cc-t-hover);
}
.j-module-head__link:hover {
  background: var(--cc-action-primary);
  border-color: var(--cc-action-primary);
  color: #fff;
}
.j-module-head__link::after {
  content: ' →';
  display: inline-block;
  transition: transform 180ms;
}
.j-module-head__link:hover::after { transform: translateX(3px); }


/* ============================================================
   6. BUTTONS (extended over theme.css base)
   ============================================================ */
.cc-btn--outline-dark {
  background: transparent;
  border-color: var(--cc-color-gray-1000);
  color: var(--cc-color-gray-1000);
}
.cc-btn--outline-dark:hover {
  background: var(--cc-color-gray-1000);
  color: #fff;
}
.cc-btn--outline-red {
  background: transparent;
  border-color: var(--cc-color-red-500);
  color: var(--cc-color-red-500);
}
.cc-btn--outline-red:hover {
  background: var(--cc-color-red-500);
  color: #fff;
}
.cc-btn--link {
  background: transparent;
  border: none;
  color: var(--cc-text-link);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: none;
  letter-spacing: 0;
  min-height: auto;
  padding: 8px 0;
}


/* ============================================================
   7. FORM (fields, select, checkbox, radio — extended)
   ============================================================ */
.cc-field { display: block; }
.cc-field + .cc-field { margin-top: var(--cc-space-4); }
.cc-field__label {
  display: block;
  font-family: var(--cc-font-family);
  font-weight: var(--cc-font-bold);
  font-size: var(--cc-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  margin-bottom: var(--cc-space-2);
  color: var(--cc-text-primary);
}
.cc-field__label--required::after {
  content: ' *';
  color: var(--cc-action-primary);
}
.cc-field__hint {
  display: block;
  margin-top: var(--cc-space-2);
  font-size: var(--cc-text-sm);
  color: var(--cc-text-tertiary);
}
.cc-field__error {
  display: block;
  margin-top: var(--cc-space-2);
  font-size: var(--cc-text-sm);
  color: var(--cc-color-error-500);
  font-weight: var(--cc-font-bold);
}
.cc-field__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-4);
}
@media (min-width: 576px) {
  .cc-field__row--2 { grid-template-columns: 1fr 1fr; }
  .cc-field__row--3 { grid-template-columns: 1fr 1fr 1fr; }
  .cc-field__row--cep { grid-template-columns: 2fr 3fr; }
}

.cc-select {
  appearance: none;
  display: block;
  width: 100%;
  height: 48px;
  padding: 12px 44px 12px 16px;
  font-family: var(--cc-font-family);
  font-size: var(--cc-text-md);
  color: var(--cc-text-primary);
  background: var(--cc-surface-page)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='12' height='12'%3E%3Cpath d='M2 4l6 6 6-6' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E") right 16px center/12px no-repeat;
  border: 1px solid var(--cc-border-default);
  border-radius: var(--cc-radius-none);
}
.cc-select:focus-visible {
  outline: none;
  border-color: var(--cc-border-focus);
  box-shadow: 0 0 0 3px rgba(234, 23, 34, 0.2);
}

.cc-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  cursor: pointer;
  user-select: none;
}
.cc-radio input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid var(--cc-border-strong);
  border-radius: 50%;
  background: var(--cc-surface-page);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.cc-radio input[type="radio"]::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cc-action-primary);
  transform: scale(0);
  transition: transform var(--cc-duration-fast) var(--cc-ease-out);
}
.cc-radio input[type="radio"]:checked::before { transform: scale(1); }
.cc-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--cc-border-focus);
  outline-offset: 2px;
}


/* ============================================================
   8. CHIPS / BADGES (extended)
   ============================================================ */
.cc-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-medium);
  line-height: 1.4;
  color: var(--cc-text-secondary);
  background: var(--cc-surface-sunken);
  border-radius: var(--cc-radius-none);
}
.cc-chip--strong { background: var(--cc-color-gray-1000); color: #fff; }
.cc-chip--red { background: var(--cc-color-red-500); color: #fff; }


/* ============================================================
   9. PRODUCT TILE
   ============================================================ */
.cc-tile {
  display: flex;
  flex-direction: column;
  background: var(--cc-surface-raised);
  position: relative;
  height: 100%;
  transition: var(--cc-t-hover);
}
.cc-tile:hover { box-shadow: var(--cc-shadow-md); }
.cc-tile__figure {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--cc-surface-sunken);
  overflow: hidden;
}
.cc-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--cc-duration-slow) var(--cc-ease-out);
}
.cc-tile:hover .cc-tile__img { transform: scale(1.04); }
.cc-tile__wishlist {
  position: absolute;
  top: var(--cc-space-3);
  right: var(--cc-space-3);
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--cc-action-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 2;
  transition: var(--cc-t-hover);
}
.cc-tile__wishlist:hover { background: #fff; transform: scale(1.05); }
.cc-tile__badge {
  position: absolute;
  top: var(--cc-space-3);
  left: var(--cc-space-3);
  padding: 4px 10px;
  background: var(--cc-color-gray-1000);
  color: #fff;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  z-index: 2;
}
.cc-tile__badge--sale { background: var(--cc-action-primary); }
.cc-tile__badge--new  { background: var(--cc-color-navy-500); }
.cc-tile__body {
  padding: var(--cc-space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--cc-space-2);
}
.cc-tile__brand {
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  margin-bottom: var(--cc-space-1);
}
.cc-tile__title {
  font-size: var(--cc-text-body);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
  line-height: var(--cc-lh-snug);
  min-height: calc(var(--cc-text-body) * var(--cc-lh-snug) * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cc-tile__price {
  display: flex;
  align-items: baseline;
  gap: var(--cc-space-1);
  font-size: var(--cc-text-md);
}
.cc-tile__price strong {
  font-size: var(--cc-text-lg);
  font-weight: var(--cc-font-bold);
}
.cc-tile__price-unit {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-tertiary);
}
.cc-tile__price-was {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-tertiary);
  text-decoration: line-through;
}
.cc-tile__size-row {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
}
.cc-tile__swatches {
  display: flex;
  gap: 4px;
  margin-top: auto;
  padding-top: var(--cc-space-2);
}
.cc-tile__swatch {
  width: 20px;
  height: 20px;
  border: 1px solid var(--cc-border-default);
  background: var(--cc-surface-sunken);
}
.cc-tile__swatch--more {
  background: transparent;
  color: var(--cc-text-tertiary);
  font-size: var(--cc-text-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}


/* ============================================================
   10. RIBBON
   ============================================================ */
.cc-ribbon {
  background: var(--cc-action-primary);
  color: #fff;
  padding: var(--cc-space-4);
  text-align: center;
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-font-bold);
  letter-spacing: var(--cc-tracking-wide);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.cc-ribbon sup { font-size: 0.5em; vertical-align: super; }
.cc-ribbon::before,
.cc-ribbon::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(255, 255, 255, 0.08) 8px 16px);
  pointer-events: none;
}
.cc-ribbon::before { left: 0; }
.cc-ribbon::after { right: 0; }


/* ============================================================
   11. NEWSLETTER
   ============================================================ */
.cc-newsletter {
  background: var(--cc-action-primary);
  color: #fff;
  padding: var(--cc-space-10) 0;
  position: relative;
  overflow: hidden;
}
.cc-newsletter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.cc-newsletter__wrap {
  display: grid;
  gap: var(--cc-space-6);
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
}
@media (min-width: 768px) { .cc-newsletter__wrap { grid-template-columns: 1fr auto; } }
.cc-newsletter__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--cc-space-2);
}
.cc-newsletter__eyebrow::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #fff;
}
.cc-newsletter__title {
  font-size: var(--cc-text-2xl);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  line-height: 1.15;
}
@media (min-width: 768px) { .cc-newsletter__title { font-size: var(--cc-text-3xl); } }
.cc-newsletter__subtitle {
  margin-top: var(--cc-space-3);
  opacity: 0.92;
  font-size: var(--cc-text-md);
  max-width: 58ch;
  line-height: var(--cc-lh-base);
}
.cc-newsletter__form {
  display: flex;
  gap: var(--cc-space-2);
  min-width: 0;
  flex-wrap: wrap;
}
.cc-newsletter__input {
  height: 56px;
  min-width: 280px;
  flex: 1;
  background: #fff;
  border: none;
  padding: 0 var(--cc-space-5);
  font-size: var(--cc-text-md);
  color: var(--cc-text-primary);
}
.cc-newsletter__input::placeholder { color: var(--cc-text-tertiary); }
.cc-newsletter__btn {
  height: 56px;
  padding: 0 var(--cc-space-7);
  background: var(--cc-color-gray-1000);
  color: #fff;
  font-weight: var(--cc-font-bold);
  font-size: var(--cc-text-body);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  border: none;
  cursor: pointer;
  transition: var(--cc-t-hover);
}
.cc-newsletter__btn:hover { background: var(--cc-color-gray-800); }


/* ============================================================
   12. FOOTER
   ============================================================ */
.cc-footer {
  background: var(--cc-color-gray-900);
  color: var(--cc-color-gray-300);
  padding-top: var(--cc-space-10);
}
.cc-footer__cols {
  display: grid;
  gap: var(--cc-space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 576px) { .cc-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) {
  .cc-footer__cols {
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: var(--cc-space-8);
  }
}
.cc-footer__col-title {
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  margin-bottom: var(--cc-space-4);
  padding-bottom: var(--cc-space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.cc-footer__col-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 24px;
  height: 1px;
  background: var(--cc-action-primary);
}
.cc-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
}
.cc-footer__link {
  color: var(--cc-color-gray-400);
  font-size: var(--cc-text-body);
  padding-block: 2px;
  transition: color var(--cc-duration-fast) var(--cc-ease-out);
}
.cc-footer__link:hover { color: #fff; }
.cc-footer__brand-col { max-width: 360px; }
.cc-footer__logo-text {
  color: #fff;
  font-size: var(--cc-text-xl);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-tight);
  margin-bottom: var(--cc-space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
}
.cc-footer__logo-text strong { color: var(--cc-action-primary); }
.cc-footer__logo-mark {
  width: 28px;
  height: 28px;
  background: var(--cc-action-primary);
  position: relative;
  display: inline-block;
}
.cc-footer__logo-mark::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 2px solid #fff;
}
.cc-footer__tagline {
  font-size: var(--cc-text-sm);
  line-height: var(--cc-lh-base);
}
.cc-footer__social {
  display: flex;
  gap: var(--cc-space-2);
  margin-top: var(--cc-space-5);
}
.cc-footer__social-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-color-gray-800);
  color: #fff;
  font-size: 18px;
  transition: var(--cc-t-hover);
}
.cc-footer__social-btn:hover {
  background: var(--cc-action-primary);
  transform: translateY(-2px);
}
.cc-footer__bottom {
  margin-top: var(--cc-space-9);
  padding: var(--cc-space-5) 0;
  border-top: 1px solid var(--cc-color-gray-800);
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  justify-content: space-between;
  font-size: var(--cc-text-sm);
  color: var(--cc-color-gray-500);
}
@media (min-width: 768px) { .cc-footer__bottom { flex-direction: row; align-items: center; } }
.cc-footer__bottom-links {
  display: flex;
  gap: var(--cc-space-5);
  flex-wrap: wrap;
}
.cc-footer__bottom-links a { color: var(--cc-color-gray-400); }
.cc-footer__bottom-links a:hover { color: #fff; }
.cc-footer__payment {
  display: flex;
  gap: var(--cc-space-2);
}
.cc-footer__payment span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  background: var(--cc-color-gray-0);
  color: var(--cc-color-gray-900);
  font-size: 10px;
  font-weight: var(--cc-font-bold);
  letter-spacing: 0;
}


/* ============================================================
   13. REVEAL ANIMATION (scroll into view)
   ============================================================ */
.j-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--cc-ease-out), transform 600ms var(--cc-ease-out);
}
.j-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .j-reveal { opacity: 1; transform: none; }
}

/* ================================================================
   Toast notifications (hc.toast em homecenter.js)
   Card branco com borda lateral colorida, ícone circular, título +
   mensagem em duas linhas, botão de ação opcional, close + barra de
   progresso animada de 4.5s. Stack múltiplos toasts no canto inferior
   direito; hover pausa o auto-dismiss.
   ================================================================ */

.hc-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: calc(100vw - 48px);
}

.hc-toast {
  --toast-accent: var(--cc-color-success-500, #16a34a);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 420px;
  max-width: 100%;
  padding: 12px 12px 12px 14px;
  background: #fff;
  color: var(--cc-text-primary);
  border-radius: 8px;
  border-left: 4px solid var(--toast-accent);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.18), 0 4px 12px -4px rgba(0, 0, 0, 0.08);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 250ms ease-out;
}
.hc-toast.is-visible {
  transform: translateX(0);
  opacity: 1;
}
.hc-toast.is-leaving {
  transform: translateX(120%);
  opacity: 0;
  transition: transform 250ms ease-in, opacity 200ms ease-in;
}

.hc-toast--success { --toast-accent: var(--cc-color-success-500, #16a34a); }
.hc-toast--error   { --toast-accent: var(--cc-color-error-500, #dc2626); }
.hc-toast--warning { --toast-accent: #f59e0b; }
.hc-toast--info    { --toast-accent: #2563eb; }

.hc-toast__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--toast-accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.hc-toast__body { min-width: 0; }
.hc-toast__title {
  font-size: 13px;
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
  line-height: 1.25;
  margin-bottom: 2px;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-toast__msg {
  font-size: 13px;
  color: var(--cc-text-secondary);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hc-toast__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--toast-accent);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 4px;
  background: transparent;
  transition: background 150ms ease;
  white-space: nowrap;
}
.hc-toast__action:hover {
  background: rgba(22, 163, 74, 0.08);
  color: var(--toast-accent);
}
.hc-toast--error .hc-toast__action:hover { background: rgba(220, 38, 38, 0.08); }

.hc-toast__close {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--cc-text-tertiary);
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 150ms ease, color 150ms ease;
}
.hc-toast__close:hover {
  background: var(--cc-surface-section);
  color: var(--cc-text-primary);
}

.hc-toast__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: var(--toast-accent);
  opacity: 0.35;
  transform-origin: left center;
  transform: scaleX(1);
}
@keyframes hc-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (max-width: 640px) {
  .hc-toast-container { bottom: 16px; right: 16px; left: 16px; max-width: none; }
  .hc-toast { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-toast { transition: opacity 200ms ease; transform: none; }
  .hc-toast.is-visible, .hc-toast.is-leaving { transform: none; }
  .hc-toast__progress { display: none; }
}

/* ================================================================
   Lightbox image gallery (hc.lightbox em homecenter.js)
   Modal full-screen elegante. Backdrop preto 95%, imagem centrada
   max 90vw × 80vh, botões prev/next nas laterais, counter no topo,
   close no canto, thumbnails clicáveis embaixo. Suporte a teclado
   (ESC/←/→) e swipe mobile.
   ================================================================ */

.hc-no-scroll { overflow: hidden; }

.hc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "counter counter close"
    "prev    stage   next"
    "thumbs  thumbs  thumbs";
  align-items: center;
  opacity: 0;
  transition: opacity 250ms ease-out;
}
.hc-lightbox.is-visible { opacity: 1; }
.hc-lightbox.is-leaving { opacity: 0; }

.hc-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  cursor: zoom-out;
}
/* Garante que TODOS os controles fiquem ACIMA do backdrop (que vem antes no DOM) */
.hc-lightbox__counter,
.hc-lightbox__close,
.hc-lightbox__nav,
.hc-lightbox__stage,
.hc-lightbox__thumbs {
  position: relative;
  z-index: 1;
}

.hc-lightbox__counter {
  grid-area: counter;
  padding: 18px 24px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: var(--cc-font-bold);
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.hc-lightbox__close,
.hc-lightbox__nav {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 200ms ease, transform 200ms ease;
}

.hc-lightbox__close {
  grid-area: close;
  justify-self: end;
  margin: 12px 18px;
  width: 44px;
  height: 44px;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.1);
}
.hc-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: rotate(90deg);
}

.hc-lightbox__nav {
  width: 56px;
  height: 56px;
  font-size: 28px;
  background: rgba(255, 255, 255, 0.08);
}
.hc-lightbox__nav--prev { grid-area: prev; justify-self: start; margin-left: 12px; }
.hc-lightbox__nav--next { grid-area: next; justify-self: end;   margin-right: 12px; }
.hc-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: scale(1.08);
}
.hc-lightbox__nav:active { transform: scale(0.96); }

.hc-lightbox__stage {
  grid-area: stage;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  user-select: none;
}
.hc-lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 220px);
  object-fit: contain;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.6);
  background: #fff;
  animation: hc-lightbox-zoom-in 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes hc-lightbox-zoom-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.hc-lightbox__thumbs {
  grid-area: thumbs;
  display: flex;
  gap: 8px;
  padding: 12px 24px 20px;
  overflow-x: auto;
  scrollbar-width: thin;
  justify-content: center;
}
.hc-lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.hc-lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

.hc-lightbox__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.hc-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hc-lightbox__thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.hc-lightbox__thumb.is-active {
  border-color: var(--cc-action-primary);
  opacity: 1;
}

@media (max-width: 768px) {
  .hc-lightbox {
    grid-template-columns: 48px 1fr 48px;
  }
  .hc-lightbox__nav { width: 44px; height: 44px; font-size: 22px; }
  .hc-lightbox__nav--prev { margin-left: 6px; }
  .hc-lightbox__nav--next { margin-right: 6px; }
  .hc-lightbox__close { width: 40px; height: 40px; font-size: 16px; margin: 8px 12px; }
  .hc-lightbox__counter { padding: 12px 16px; font-size: 12px; }
  .hc-lightbox__img { max-height: calc(100vh - 200px); }
  .hc-lightbox__thumb { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-lightbox, .hc-lightbox__img { transition: none; animation: none; }
  .hc-lightbox__close:hover { transform: none; }
  .hc-lightbox__nav:hover { transform: none; }
}

/* ================================================================
   Mini-cart dropdown (header) — popover ancorado ao ícone do carrinho.
   Desktop: dropdown abaixo-direita do ícone, 380px width.
   Mobile (<640px): JS deixa o link navegar direto pra /checkout/cart
   em vez de abrir o dropdown (UX padrão de e-commerce mobile).
   ================================================================ */
.hc-cart-wrap {
  position: relative;
  display: inline-block;
}

.hc-mini-cart-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.22), 0 6px 16px -6px rgba(0, 0, 0, 0.10);
  z-index: 9000;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 200ms ease-out, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.hc-mini-cart-popover.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hc-mini-cart-popover.is-leaving {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity 150ms ease-in, transform 150ms ease-in;
}
/* Seta apontando pro ícone do carrinho */
.hc-mini-cart-popover::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 18px;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 5px -2px rgba(0,0,0,0.06);
}

.hc-mini-cart-popover__content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.hc-mini-cart__loading {
  padding: 40px;
  text-align: center;
  color: var(--cc-text-tertiary);
  font-size: 24px;
}
.hc-mini-cart__loading .bi { animation: hc-spin 0.8s linear infinite; display: inline-block; }

/* Lista de items */
.hc-mini-cart__items {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  max-height: 360px;
}
.hc-mini-cart__item {
  display: grid;
  grid-template-columns: 60px 1fr 28px;
  gap: 12px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid var(--cc-border-subtle);
  position: relative;
}
.hc-mini-cart__item:last-child { border-bottom: 0; }

.hc-mini-cart__thumb {
  width: 60px;
  height: 60px;
  background: var(--cc-surface-sunken);
  display: block;
  overflow: hidden;
  flex-shrink: 0;
}
.hc-mini-cart__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hc-mini-cart__thumb--voucher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--cc-action-primary);
}

.hc-mini-cart__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hc-mini-cart__name {
  font-size: 13px;
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hc-mini-cart__name:hover { color: var(--cc-action-primary); }

.hc-mini-cart__opts {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  font-size: 11px;
  color: var(--cc-text-tertiary);
}

.hc-mini-cart__qty-price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--cc-text-secondary);
  margin-top: 2px;
}
.hc-mini-cart__total {
  font-size: 13px;
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
}

.hc-mini-cart__remove {
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--cc-text-tertiary);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}
.hc-mini-cart__remove:hover {
  background: var(--cc-action-primary);
  color: #fff;
}

/* Totais */
.hc-mini-cart__totals {
  padding: 12px 16px;
  background: var(--cc-surface-section);
  border-top: 1px solid var(--cc-border-subtle);
  flex-shrink: 0;
}
.hc-mini-cart__total-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--cc-text-secondary);
  padding: 2px 0;
}
.hc-mini-cart__total-row strong { font-weight: var(--cc-font-bold); }
.hc-mini-cart__total-row--final {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--cc-border-subtle);
  font-size: 14px;
  color: var(--cc-text-primary);
}

/* Botões de ação */
.hc-mini-cart__actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 8px;
  padding: 12px 16px 16px;
  flex-shrink: 0;
}
.hc-mini-cart__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: var(--cc-t-hover);
}
.hc-mini-cart__btn--ghost {
  background: transparent;
  color: var(--cc-text-primary);
  border: 1px solid var(--cc-border-default);
}
.hc-mini-cart__btn--ghost:hover {
  background: var(--cc-color-gray-1000);
  color: #fff;
  border-color: var(--cc-color-gray-1000);
}
.hc-mini-cart__btn--primary {
  background: var(--cc-action-primary);
  color: #fff;
}
.hc-mini-cart__btn--primary:hover { background: var(--cc-action-primary-hover, #c41e1e); }

/* Empty state */
.hc-mini-cart__empty {
  padding: 36px 24px;
  text-align: center;
}
.hc-mini-cart__empty .bi {
  font-size: 40px;
  color: var(--cc-border-default);
  display: block;
  margin-bottom: 12px;
}
.hc-mini-cart__empty-title {
  font-size: 14px;
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  margin: 0 0 6px;
}
.hc-mini-cart__empty-msg {
  font-size: 12px;
  color: var(--cc-text-tertiary);
  margin: 0;
}

/* Mobile: esconde o popover (link do cart navega direto pra /checkout/cart) */
@media (max-width: 640px) {
  .hc-mini-cart-popover {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hc-mini-cart-popover { transition: opacity 150ms ease; transform: none; }
  .hc-mini-cart-popover.is-visible { transform: none; }
  .hc-mini-cart__loading .bi { animation: none; }
}

/* ============================================================
   OC Pagination — componente compartilhado (catalog, account, PRO)
   pagination.php gera Bootstrap 5 markup: .page-item / .page-link
   Temática HC: vermelho #EA1722 como cor ativa.
   ============================================================ */
.hc-pagination-nav .pagination {
  /* Tokens de cor HC mapeados aos custom properties do Bootstrap 5 */
  --bs-pagination-color:               var(--cc-text-primary);
  --bs-pagination-bg:                  var(--cc-surface-page);
  --bs-pagination-border-color:        var(--cc-border-subtle);
  --bs-pagination-hover-color:         var(--cc-action-primary);
  --bs-pagination-hover-bg:            rgba(234, 23, 34, .05);
  --bs-pagination-hover-border-color:  var(--cc-action-primary);
  --bs-pagination-active-color:        #fff;
  --bs-pagination-active-bg:           var(--cc-action-primary);
  --bs-pagination-active-border-color: var(--cc-action-primary);
  --bs-pagination-focus-color:         var(--cc-action-primary);
  --bs-pagination-focus-bg:            rgba(234, 23, 34, .05);
  --bs-pagination-focus-box-shadow:    0 0 0 .2rem rgba(234, 23, 34, .2);
  /* Layout */
  flex-wrap: wrap;
  gap: 4px;
}
.hc-pagination-nav .page-link {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--cc-font-medium);
  font-size: 0.875rem;
  line-height: 1;
  padding: 0 var(--cc-space-3);
  border-radius: 6px !important;   /* uniform; override BS5 first/last-child rounding */
}
.hc-pagination-nav .page-link .bi {
  font-size: 0.8125rem;
  line-height: 1;
}

/* Mobile: alvos ligeiramente menores, gap compacto */
@media (max-width: 480px) {
  .hc-pagination-nav .page-link {
    min-width: 40px;
    min-height: 40px;
    padding: 0 var(--cc-space-2);
  }
  .hc-pagination-nav .pagination { gap: 3px; }
}