/* ==============================
   LOJA.CSS
   Estilos específicos do e-commerce: vitrine, cards de produto,
   filtros, carrinho, checkout e confirmação de pedido.

   PARA LLMs: Este arquivo contém todos os estilos visuais da loja
   online da MP Tintas Epóxi. Segue o mesmo design system do site
   institucional: BEM naming, Custom Properties de variables.css,
   mobile-first com breakpoints em 480px, 768px e 1024px.
   ============================== */

/* ================================================================
   STORE HERO: Banner leve no topo da vitrine
   ================================================================ */

.store-hero {
  background: linear-gradient(135deg, var(--color-brand-navy), var(--color-brand-dark-navy));
  padding: var(--spacing-3xl) 0;
  text-align: center;
  color: var(--color-text-white);
}

.store-hero__heading {
  font-size: var(--font-size-3xlarge);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-white);
  margin-bottom: var(--spacing-sm);
}

.store-hero__description {
  font-size: var(--font-size-medium);
  color: var(--color-text-on-dark);
  max-width: 640px;
  margin: 0 auto;
  line-height: var(--line-height-normal);
}

/* ================================================================
   STORE BREADCRUMB: Navegação de contexto
   ================================================================ */

.store-breadcrumb {
  padding: var(--spacing-md) 0;
  background-color: var(--color-background-light-gray);
  border-bottom: 1px solid var(--color-border-light);
}

.store-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-small);
}

.store-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.store-breadcrumb__link {
  color: var(--color-brand-navy);
  transition: color var(--transition-fast);
}

.store-breadcrumb__link:hover {
  color: var(--color-brand-gold);
}

.store-breadcrumb__separator {
  color: var(--color-text-disabled);
  font-size: var(--font-size-xsmall);
}

.store-breadcrumb__current {
  color: var(--color-text-muted);
}

/* ================================================================
   STORE CATEGORIES: Grid de 3 cards de categoria
   ================================================================ */

.store-categories {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-background-white);
}

.store-categories__heading {
  text-align: center;
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-2xl);
}

.store-categories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

.store-category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl);
  background-color: var(--color-background-light-gray);
  border-radius: var(--border-radius-large);
  border: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: box-shadow var(--transition-default), transform var(--transition-default), border-color var(--transition-default);
}

.store-category-card:hover,
.store-category-card--active {
  box-shadow: var(--shadow-medium);
  transform: translateY(-4px);
  border-color: var(--color-brand-gold);
}

.store-category-card__icon {
  font-size: 2.5rem;
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-md);
}

.store-category-card__name {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-xs);
}

.store-category-card__count {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ================================================================
   STORE FILTERS: Barra de filtros acima do grid de produtos
   ================================================================ */

.store-filters {
  padding: var(--spacing-lg) 0;
  background-color: var(--color-background-light-gray);
  border-bottom: 1px solid var(--color-border-light);
}

.store-filters__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.store-filters__group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.store-filters__label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-navy);
  white-space: nowrap;
}

.store-filters__select {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-small);
  font-family: var(--font-family-primary);
  color: var(--color-text-primary);
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.store-filters__select:focus {
  border-color: var(--color-brand-gold);
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 2px;
}

.store-filters__results-count {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* ================================================================
   STORE PRODUCT GRID: Grid de cards de produto
   4 colunas desktop → 2 tablet → 1 mobile
   ================================================================ */

.store-products {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-background-white);
}

.store-products__heading {
  text-align: center;
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-2xl);
}

.store-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
}

.store-products__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-3xl);
  color: var(--color-text-muted);
  font-size: var(--font-size-medium);
}

/* ================================================================
   STORE PRODUCT CARD: Card individual de produto
   ================================================================ */

.store-product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-large);
  overflow: hidden;
  transition: box-shadow var(--transition-default), transform var(--transition-default);
}

.store-product-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-4px);
}

/* ---- Imagem do produto ---- */
.store-product-card__image-wrapper {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-background-light-gray);
}

.store-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--spacing-md);
  transition: transform var(--transition-default);
}

.store-product-card:hover .store-product-card__image {
  transform: scale(1.05);
}

/* Badges (promoção, fora de estoque) */
.store-product-card__badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  padding: 4px var(--spacing-sm);
  font-size: var(--font-size-xsmall);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-small);
  z-index: 1;
}

.store-product-card__badge--sale {
  background-color: var(--color-error-red);
  color: var(--color-text-white);
}

.store-product-card__badge--outofstock {
  background-color: var(--color-badge-outofstock);
  color: var(--color-text-white);
}

.store-product-card__badge--bottom {
  top: auto;
  bottom: var(--spacing-sm);
}

/* ---- Conteúdo do card ---- */
.store-product-card__content {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  flex-grow: 1;
}

.store-product-card__category {
  font-size: var(--font-size-xsmall);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-brand-gold);
  margin-bottom: var(--spacing-xs);
}

.store-product-card__name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-xs);
}

.store-product-card__description {
  font-size: var(--font-size-small);
  color: var(--color-text-body);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-md);
  flex-grow: 1;
}

/* ---- Preço ---- */
.store-product-card__price-wrapper {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.store-product-card__price {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-black);
  color: var(--color-brand-navy);
}

.store-product-card__price--from {
  font-size: var(--font-size-xsmall);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.store-product-card__price--original {
  font-size: var(--font-size-small);
  color: var(--color-text-disabled);
  text-decoration: line-through;
}

.store-product-card__price--unavailable {
  font-size: var(--font-size-small);
  color: var(--color-text-disabled);
  font-style: italic;
}

/* ---- Botão de ação ---- */
.store-product-card__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.store-product-card__action--add-to-cart {
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
}

.store-product-card__action--add-to-cart:hover {
  background-color: var(--color-brand-gold-hover);
  transform: translateY(-1px);
}

.store-product-card__action--view-options {
  background-color: var(--color-brand-navy);
  color: var(--color-text-white);
}

.store-product-card__action--view-options:hover {
  background-color: var(--color-brand-dark-navy);
  transform: translateY(-1px);
}

.store-product-card__action--disabled {
  background-color: var(--color-background-disabled);
  color: var(--color-text-disabled-button);
  cursor: not-allowed;
}

.store-product-card__action--disabled:hover {
  transform: none;
}

/* ================================================================
   STORE COLOR SWATCHES: Mini paleta de cores no card de produto
   ================================================================ */

.store-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: var(--spacing-sm);
}

.store-color-swatch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-border-light);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.store-color-swatch:hover,
.store-color-swatch--active {
  border-color: var(--color-brand-navy);
  transform: scale(1.15);
}

.store-color-swatches__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-background-light-gray);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}

/* ================================================================
   CART PAGE: Tabela de itens no carrinho
   ================================================================ */

.cart-section {
  padding: var(--spacing-3xl) 0;
}

.cart-section__heading {
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-2xl);
}

/* ---- Tabela do carrinho (desktop) ---- */
.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-2xl);
}

.cart-table__header {
  background-color: var(--color-background-light-gray);
}

.cart-table__header-cell {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-navy);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--color-border-light);
}

.cart-table__header-cell--right {
  text-align: right;
}

.cart-table__header-cell--center {
  text-align: center;
}

.cart-table__row {
  border-bottom: 1px solid var(--color-border-light);
  transition: background-color var(--transition-fast);
}

.cart-table__row:hover {
  background-color: rgba(0, 0, 0, 0.02);
}

.cart-table__cell {
  padding: var(--spacing-lg);
  vertical-align: middle;
}

/* Item do carrinho dentro da célula */
.cart-item__product {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.cart-item__thumbnail {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--border-radius-small);
  background-color: var(--color-background-light-gray);
  padding: var(--spacing-xs);
}

.cart-item__info {
  display: flex;
  flex-direction: column;
}

.cart-item__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-navy);
  margin-bottom: 4px;
}

.cart-item__variant {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.cart-item__price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.cart-item__subtotal {
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  text-align: right;
  white-space: nowrap;
}

/* ---- Controle de quantidade ---- */
.cart-quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.cart-quantity__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  font-size: var(--font-size-medium);
  color: var(--color-brand-navy);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  font-family: var(--font-family-primary);
}

.cart-quantity__button:hover {
  background-color: var(--color-background-light-gray);
}

.cart-quantity__value {
  width: 44px;
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border: none;
  border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
  font-family: var(--font-family-primary);
  -moz-appearance: textfield;
}

.cart-quantity__value::-webkit-outer-spin-button,
.cart-quantity__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- Botão remover ---- */
.cart-item__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  color: var(--color-text-disabled);
  font-size: var(--font-size-base);
  cursor: pointer;
  border-radius: var(--border-radius-small);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.cart-item__remove:hover {
  color: var(--color-error-red);
  background-color: rgba(229, 62, 62, 0.08);
}

/* ---- Resumo do carrinho ---- */
.cart-summary {
  display: flex;
  justify-content: flex-end;
}

.cart-summary__box {
  width: 100%;
  max-width: 400px;
  padding: var(--spacing-xl);
  background-color: var(--color-background-light-gray);
  border-radius: var(--border-radius-large);
  border: 1px solid var(--color-border-light);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-base);
}

.cart-summary__row--total {
  border-top: 2px solid var(--color-brand-navy);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
}

.cart-summary__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xl);
}

.cart-summary__checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.cart-summary__checkout-button:hover {
  background-color: var(--color-brand-gold-hover);
  transform: translateY(-1px);
}

.cart-summary__continue-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: transparent;
  color: var(--color-brand-navy);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.cart-summary__continue-link:hover {
  border-color: var(--color-brand-navy);
  color: var(--color-brand-navy);
}

/* ---- Estado vazio do carrinho ---- */
.cart-empty {
  text-align: center;
  padding: var(--spacing-3xl);
}

.cart-empty__icon {
  font-size: 4rem;
  color: var(--color-border-light);
  margin-bottom: var(--spacing-lg);
}

.cart-empty__heading {
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-sm);
}

.cart-empty__text {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xl);
}

.cart-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-round);
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.cart-empty__cta:hover {
  background-color: var(--color-brand-gold-hover);
  color: var(--color-brand-dark-navy);
  transform: translateY(-2px);
}

/* ================================================================
   CHECKOUT PAGE: Formulário + Resumo do pedido
   ================================================================ */

.checkout-section {
  padding: var(--spacing-3xl) 0;
}

.checkout-section__heading {
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-2xl);
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--spacing-2xl);
  align-items: start;
}

/* ---- Fieldsets do formulário ---- */
.checkout-fieldset {
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-large);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.checkout-fieldset__legend {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  padding: 0 var(--spacing-sm);
}

.checkout-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.checkout-form__row--single {
  grid-template-columns: 1fr;
}

.checkout-form__row--triple {
  grid-template-columns: 1fr 2fr 1fr;
}

.checkout-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-form__field--wide {
  flex: 2;
}

.checkout-form__label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-navy);
}

.checkout-form__label--required::after {
  content: ' *';
  color: var(--color-error-red);
}

.checkout-form__input,
.checkout-form__select {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family-primary);
  color: var(--color-text-primary);
  background-color: var(--color-background-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
  transition: border-color var(--transition-fast);
}

.checkout-form__input:focus,
.checkout-form__select:focus {
  border-color: var(--color-brand-gold);
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 2px;
}

.checkout-form__input--error {
  border-color: var(--color-error-red);
}

.checkout-form__error {
  font-size: var(--font-size-xsmall);
  color: var(--color-error-red);
}

/* ---- Opções de frete (placeholder) ---- */
.checkout-shipping {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.checkout-shipping__cep-row {
  display: flex;
  gap: var(--spacing-sm);
}

.checkout-shipping__cep-input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-family: var(--font-family-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
}

.checkout-shipping__cep-button {
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: var(--color-brand-navy);
  color: var(--color-text-white);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-primary);
  border: none;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.checkout-shipping__cep-button:hover {
  background-color: var(--color-brand-dark-navy);
}

.checkout-shipping__options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.checkout-shipping__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkout-shipping__option:hover,
.checkout-shipping__option--selected {
  border-color: var(--color-brand-gold);
  background-color: rgba(196, 175, 107, 0.05);
}

/* ---- Opções de pagamento (placeholder) ---- */
.checkout-payment__options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.checkout-payment__option {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.checkout-payment__option:hover,
.checkout-payment__option--selected {
  border-color: var(--color-brand-gold);
  background-color: rgba(196, 175, 107, 0.05);
}

.checkout-payment__option-icon {
  font-size: 1.5rem;
  color: var(--color-brand-navy);
  width: 40px;
  text-align: center;
}

.checkout-payment__option-info {
  display: flex;
  flex-direction: column;
}

.checkout-payment__option-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.checkout-payment__option-description {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.checkout-payment__placeholder {
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  background-color: var(--color-background-light-gray);
  border-radius: var(--border-radius-small);
  border: 1px dashed var(--color-border-light);
}

.checkout-payment__placeholder--spaced {
  margin-top: var(--spacing-md);
}

/* ---- Resumo do pedido (sidebar checkout) ---- */
.checkout-order-summary {
  position: sticky;
  top: calc(var(--header-height-desktop) + var(--spacing-xl));
  padding: var(--spacing-xl);
  background-color: var(--color-background-light-gray);
  border-radius: var(--border-radius-large);
  border: 1px solid var(--color-border-light);
}

.checkout-order-summary__heading {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
}

.checkout-order-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.checkout-order-summary__item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  font-size: var(--font-size-small);
}

.checkout-order-summary__item-name {
  flex: 1;
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}

.checkout-order-summary__item-price {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  white-space: nowrap;
  margin-left: var(--spacing-md);
}

.checkout-order-summary__totals {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--spacing-md);
}

.checkout-order-summary__total-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
}

.checkout-order-summary__total-row--final {
  border-top: 2px solid var(--color-brand-navy);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-md);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-large);
  color: var(--color-brand-navy);
}

.checkout-order-summary__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  margin-top: var(--spacing-xl);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.checkout-order-summary__submit:hover {
  background-color: var(--color-brand-gold-hover);
  transform: translateY(-1px);
}

/* ================================================================
   ORDER CONFIRMATION PAGE
   ================================================================ */

.order-confirmation {
  padding: var(--spacing-3xl) 0;
}

.order-confirmation__header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.order-confirmation__icon {
  font-size: 4rem;
  color: var(--color-whatsapp-green);
  margin-bottom: var(--spacing-lg);
}

.order-confirmation__heading {
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-sm);
}

.order-confirmation__message {
  font-size: var(--font-size-medium);
  color: var(--color-text-body);
  max-width: 500px;
  margin: 0 auto;
}

.order-confirmation__details {
  max-width: 700px;
  margin: 0 auto var(--spacing-2xl);
}

.order-confirmation__order-number {
  text-align: center;
  font-size: var(--font-size-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md);
  background-color: var(--color-background-light-gray);
  border-radius: var(--border-radius-default);
}

.order-confirmation__order-number .order-confirmation__value {
  color: var(--color-brand-navy);
  font-size: var(--font-size-large);
}

.order-confirmation__section {
  padding: var(--spacing-xl);
  background-color: var(--color-background-light-gray);
  border-radius: var(--border-radius-large);
  border: 1px solid var(--color-border-light);
  margin-bottom: var(--spacing-lg);
}

.order-confirmation__section--contact {
  text-align: center;
}

.order-confirmation__section--contact p {
  color: var(--color-text-body);
  margin-bottom: var(--spacing-lg);
}

.order-confirmation__section-heading {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-md);
}

.order-confirmation__items {
  margin-bottom: var(--spacing-md);
}

.order-confirmation__item {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
  border-bottom: 1px solid var(--color-border-light);
}

.order-confirmation__item:last-child {
  border-bottom: none;
}

.order-confirmation__totals {
  border-top: 2px solid var(--color-border-light);
  padding-top: var(--spacing-sm);
}

.order-confirmation__total-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-base);
}

.order-confirmation__total-row--final {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-medium);
  color: var(--color-brand-navy);
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.order-confirmation__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.order-confirmation__step {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.order-confirmation__step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.order-confirmation__step > i {
  font-size: 1.5rem;
  color: var(--color-brand-navy);
  flex-shrink: 0;
  margin-top: 2px;
}

.order-confirmation__step strong {
  display: block;
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-2xs);
}

.order-confirmation__step p {
  font-size: var(--font-size-small);
  color: var(--color-text-body);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.order-confirmation__contact-actions {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.order-confirmation__action {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-round);
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.order-confirmation__action--whatsapp {
  background-color: var(--color-whatsapp-green);
  color: var(--color-text-white);
}

.order-confirmation__action--whatsapp:hover {
  background-color: var(--color-whatsapp-green-hover);
  color: var(--color-text-white);
  transform: translateY(-2px);
}

.order-confirmation__action--email {
  background-color: var(--color-brand-navy);
  color: var(--color-text-white);
}

.order-confirmation__action--email:hover {
  background-color: var(--color-brand-dark-navy);
  color: var(--color-text-white);
  transform: translateY(-2px);
}

.order-confirmation__cta {
  text-align: center;
}

.order-confirmation__back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-round);
  transition: background-color var(--transition-default), transform var(--transition-default);
}

.order-confirmation__back-link:hover {
  background-color: var(--color-brand-gold-hover);
  color: var(--color-brand-dark-navy);
  transform: translateY(-2px);
}

/* ================================================================
   CART BADGE: Contador de itens no ícone do carrinho (header)
   ================================================================ */

.carrinho-de-compras-da-loja_icone-clicavel-no-cabecalho {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text-white);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
}

.carrinho-de-compras-da-loja_icone-clicavel-no-cabecalho:hover {
  color: var(--color-brand-gold);
}

.quantidade-de-itens-no-carrinho_numero-sobre-o-icone-do-carrinho {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 18px;
  text-align: center;
  border-radius: var(--border-radius-round);
  display: none;
}

.quantidade-de-itens-no-carrinho_numero-sobre-o-icone-do-carrinho--visivel {
  display: block;
}

/* ================================================================
   PRODUCT DETAIL LAYOUT
   ================================================================ */

.product-detail {
  padding: var(--spacing-3xl) 0;
}

.product-detail__layout {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: var(--spacing-2xl);
}

/* ================================================================
   PRODUCT DETAIL GALLERY
   ================================================================ */

.product-detail__main-image-wrapper {
  aspect-ratio: 1 / 1;
  background-color: var(--color-background-light-gray);
  border-radius: var(--border-radius-large);
  overflow: hidden;
}

.product-detail__main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--spacing-lg);
}

.product-detail__thumbnails {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.product-detail__thumbnail {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border: 2px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
  cursor: pointer;
  padding: 4px;
  background-color: var(--color-background-light-gray);
  transition: border-color var(--transition-fast);
}

.product-detail__thumbnail:hover,
.product-detail__thumbnail--selected {
  border-color: var(--color-brand-gold);
}

/* ================================================================
   PRODUCT DETAIL INFO
   ================================================================ */

.product-detail__category {
  font-size: var(--font-size-xsmall);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-brand-gold);
  font-weight: var(--font-weight-semibold);
}

.product-detail__name {
  font-size: var(--font-size-2xlarge);
  font-weight: var(--font-weight-bold);
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-md);
}

.product-detail__price-wrapper {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.product-detail__price-current {
  font-size: var(--font-size-xlarge);
  font-weight: var(--font-weight-black);
  color: var(--color-brand-navy);
}

.product-detail__price-from {
  font-size: var(--font-size-xsmall);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-muted);
}

.product-detail__price-original {
  font-size: var(--font-size-small);
  color: var(--color-text-disabled);
  text-decoration: line-through;
}

.product-detail__short-description {
  font-size: var(--font-size-base);
  color: var(--color-text-body);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-xl);
}

.product-detail__meta {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

/* ================================================================
   VARIANT SELECTORS
   ================================================================ */

.product-detail__variants {
  margin-bottom: var(--spacing-lg);
}

.product-detail__variant-group {
  margin-bottom: var(--spacing-lg);
}

.product-detail__variant-label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-sm);
  display: block;
}

/* ---- Color swatches ---- */
.product-detail__color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.product-detail__color-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--color-border-light);
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.product-detail__color-swatch:hover,
.product-detail__color-swatch:active {
  border-color: var(--color-brand-navy);
  transform: scale(1.1);
}

.product-detail__color-swatch--selected {
  border-color: var(--color-brand-navy);
  box-shadow: 0 0 0 2px white inset;
}

/* ---- Size buttons ---- */
.product-detail__size-options {
  display: flex;
  gap: var(--spacing-sm);
}

.product-detail__size-button {
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 2px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
  background-color: var(--color-background-white);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-small);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.product-detail__size-button:hover {
  border-color: var(--color-brand-navy);
}

.product-detail__size-button--selected {
  border-color: var(--color-brand-navy);
  background-color: var(--color-brand-navy);
  color: var(--color-text-white);
}

/* ================================================================
   ADD TO CART SECTION
   ================================================================ */

.product-detail__add-to-cart {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

/* ---- Quantity control ---- */
.product-detail__quantity {
  display: inline-flex;
  border: 1px solid var(--color-border-light);
  border-radius: var(--border-radius-small);
}

.product-detail__quantity-minus,
.product-detail__quantity-plus {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  font-size: var(--font-size-medium);
  color: var(--color-brand-navy);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.product-detail__quantity-minus:hover,
.product-detail__quantity-plus:hover {
  background-color: var(--color-background-light-gray);
}

.product-detail__quantity-input {
  width: 56px;
  text-align: center;
  font-weight: var(--font-weight-semibold);
  border: none;
  border-left: 1px solid var(--color-border-light);
  border-right: 1px solid var(--color-border-light);
  font-family: var(--font-family-primary);
  -moz-appearance: textfield;
}

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

/* ---- Add button ---- */
.product-detail__add-button {
  flex-grow: 1;
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--color-brand-gold);
  color: var(--color-brand-dark-navy);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--border-radius-small);
  font-size: var(--font-size-base);
  font-family: var(--font-family-primary);
  cursor: pointer;
  border: none;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.product-detail__add-button:hover {
  background-color: var(--color-brand-gold-hover);
  transform: translateY(-1px);
}

.product-detail__add-button--success {
  background-color: var(--color-whatsapp-green);
  color: var(--color-text-white);
}

.product-detail__add-button--disabled {
  background-color: var(--color-text-disabled);
  color: var(--color-text-white);
  cursor: not-allowed;
  opacity: 0.7;
}

.product-detail__add-button--disabled:hover {
  background-color: var(--color-text-disabled);
  transform: none;
}

.product-detail__add-button--quote {
  background-color: var(--color-whatsapp-green);
  color: var(--color-text-white);
}

.product-detail__add-button--quote:hover {
  background-color: var(--color-whatsapp-green-hover);
}

/* ================================================================
   PRODUCT DETAIL TABS
   ================================================================ */

.product-detail__tabs {
  margin-top: var(--spacing-3xl);
  border-top: 1px solid var(--color-border-light);
}

.product-detail__tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border-light);
}

.product-detail__tab-button {
  padding: var(--spacing-md) var(--spacing-xl);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-primary);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.product-detail__tab-button:hover {
  color: var(--color-brand-navy);
}

.product-detail__tab-button--active {
  color: var(--color-brand-navy);
  border-bottom-color: var(--color-brand-gold);
}

.product-detail__tab-content {
  padding: var(--spacing-xl) 0;
  display: none;
}

.product-detail__tab-content--active {
  display: block;
}

.product-detail__tab-content p {
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

/* ---- Technical data table ---- */
.product-detail__specs-table {
  width: 100%;
  border-collapse: collapse;
}

.product-detail__specs-table tr {
  border-bottom: 1px solid var(--color-border-light);
}

.product-detail__specs-table th {
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand-navy);
  width: 40%;
  font-size: var(--font-size-small);
}

.product-detail__specs-table td {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-small);
  color: var(--color-text-body);
}

/* ================================================================
   RELATED PRODUCTS
   ================================================================ */

.product-detail__related {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--color-border-light);
}

.product-detail__related-heading {
  color: var(--color-brand-navy);
  margin-bottom: var(--spacing-xl);
}

.product-detail__related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
}

/* ================================================================
   RESPONSIVIDADE
   ================================================================ */

/* ---- Tablet: 1024px ---- */
@media (max-width: 1024px) {
  .store-hero__heading {
    font-size: var(--font-size-2xlarge);
  }

  .store-categories__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }

  .store-products__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-order-summary {
    position: static;
  }

  /* Carrinho: esconde tabela, mostra cards mobile */
  .cart-table__header {
    display: none;
  }

  .cart-table__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
  }

  .cart-table__cell {
    padding: 0;
  }

  /* Product detail responsive 1024px */
  .product-detail__layout {
    grid-template-columns: 1fr;
  }

  .product-detail__gallery {
    margin-bottom: var(--spacing-xl);
  }

  .product-detail__related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Tablet small: 768px ---- */
@media (max-width: 768px) {
  .store-categories__grid {
    grid-template-columns: 1fr 1fr;
  }

  .store-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .store-filters__bar {
    flex-direction: column;
    align-items: stretch;
  }

  .checkout-form__row {
    grid-template-columns: 1fr;
  }

  .checkout-form__row--triple {
    grid-template-columns: 1fr;
  }

  /* Product detail responsive 768px */
  .product-detail__related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-detail__thumbnail {
    width: 60px;
    height: 60px;
  }
}

/* ---- Mobile: 480px ---- */
@media (max-width: 480px) {
  .store-hero {
    padding: var(--spacing-2xl) 0;
  }

  .store-hero__heading {
    font-size: var(--font-size-xlarge);
  }

  .store-hero__description {
    font-size: var(--font-size-base);
  }

  .store-categories__grid {
    grid-template-columns: 1fr;
  }

  .store-products__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .store-product-card__content {
    padding: var(--spacing-md);
  }

  .cart-section {
    padding: var(--spacing-2xl) 0;
  }

  .cart-summary {
    justify-content: center;
  }

  .cart-summary__box {
    max-width: 100%;
  }

  .checkout-section {
    padding: var(--spacing-2xl) 0;
  }

  .checkout-fieldset {
    padding: var(--spacing-md);
  }

  .order-confirmation {
    padding: var(--spacing-2xl) 0;
  }

  .order-confirmation__section {
    padding: var(--spacing-md);
  }

  .order-confirmation__contact-actions {
    flex-direction: column;
    align-items: center;
  }

  /* Product detail responsive 480px */
  .product-detail {
    padding: var(--spacing-2xl) 0;
  }

  .product-detail__tab-button {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .product-detail__related-grid {
    grid-template-columns: 1fr;
  }

  .product-detail__size-options {
    flex-wrap: wrap;
  }

  .product-detail__quantity-minus,
  .product-detail__quantity-plus {
    width: 36px;
    height: 36px;
  }

  .product-detail__quantity-input {
    width: 44px;
  }
}