/* j-checkout.css — cart + checkout + order success */

/* === from cart.html === */

/* ============================================================
   cart.html — page-specific styles
   ============================================================ */
.j-cart {
  padding-block: var(--cc-space-5) var(--cc-space-8);
}
@media (min-width: 992px) {
  .j-cart { padding-block: var(--cc-space-6) var(--cc-space-10); }
}
/* Header migrou pra .j-cat-header (sessão 19, alinhamento c/ resto do site).
   Wrapper do botão "Continuar comprando" abaixo do header da página. */
.j-cart__continue-wrap {
  margin-bottom: var(--cc-space-4);
  display: flex;
  justify-content: flex-start;
}
.j-cart__continue {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  color: var(--cc-text-secondary);
  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: color var(--cc-duration-fast);
}
.j-cart__continue:hover { color: var(--cc-action-primary); }

/* Linha em estado de update (AJAX em vôo): dim sutil + spinner overlay */
.j-line.is-updating {
  position: relative;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.j-line.is-updating::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 2.5px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--cc-action-primary);
  border-radius: 50%;
  animation: hc-spin 0.7s linear infinite;
  z-index: 2;
}

/* --- Main layout: line items + summary sidebar --- */
.j-cart__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-6);
}
@media (min-width: 992px) {
  .j-cart__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--cc-space-8);
  }
}
@media (min-width: 1200px) {
  .j-cart__grid { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* --- Line items list --- */
/* Hidden on both mobile and desktop: the new line layout puts
   controls on a second row below the body, so table-like column
   headers don't align with the content anymore. Kept in markup
   for accessibility. */
.j-cart__items-head { display: none; }

.j-line {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--cc-space-4);
  padding: var(--cc-space-5);
  background: var(--cc-surface-page);
  border: 1px solid var(--cc-border-subtle);
  border-top: none;
  align-items: start;
}
.j-line:first-of-type { border-top: 1px solid var(--cc-border-subtle); }
@media (min-width: 992px) {
  .j-line {
    /* 2-row layout on desktop:
       Row 1: figure spans both rows vertically, body spans the entire right side
       Row 2: price-unit | qty | subtotal | remove (all inline under the body) */
    grid-template-columns: 100px auto minmax(110px, auto) minmax(120px, 1fr) 40px;
    grid-template-rows: auto auto;
    column-gap: var(--cc-space-4);
    row-gap: var(--cc-space-4);
    align-items: center;
  }
  .j-line__figure {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 100px;
  }
  .j-line__body {
    grid-column: 2 / -1;
    grid-row: 1;
    padding-bottom: var(--cc-space-4);
    border-bottom: 1px dashed var(--cc-border-subtle);
  }
  .j-line__price-unit { grid-column: 2; grid-row: 2; align-self: center; }
  .j-line__qty       { grid-column: 3; grid-row: 2; align-self: center; }
  .j-line__subtotal  { grid-column: 4; grid-row: 2; justify-self: end; text-align: right; align-self: center; }
  .j-line__remove    { grid-column: 5; grid-row: 2; justify-self: end; align-self: center; }
}
.j-line__figure {
  aspect-ratio: 1/1;
  background: var(--cc-surface-sunken);
  overflow: hidden;
  position: relative;
}
.j-line__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.j-line__body { min-width: 0; }
.j-line__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: 4px;
}
.j-line__title {
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
  line-height: var(--cc-lh-snug);
  margin-bottom: var(--cc-space-2);
}
.j-line__title a { color: inherit; }
.j-line__title a:hover { color: var(--cc-text-link); }
.j-line__variants {
  display: flex;
  gap: var(--cc-space-3);
  flex-wrap: wrap;
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
  margin-bottom: var(--cc-space-3);
}
.j-line__variants span strong { color: var(--cc-text-primary); font-weight: var(--cc-font-bold); }
.j-line__meta {
  display: flex;
  gap: var(--cc-space-3);
  flex-wrap: wrap;
  font-size: var(--cc-text-xs);
  color: var(--cc-text-tertiary);
}
.j-line__meta i { color: var(--cc-color-success-500); margin-right: 4px; }
.j-line__price-unit,
.j-line__qty,
.j-line__subtotal,
.j-line__remove {
  display: flex;
  flex-direction: column;
}
@media (max-width: 991.98px) {
  .j-line__price-unit,
  .j-line__qty,
  .j-line__subtotal,
  .j-line__remove {
    margin-top: var(--cc-space-3);
    padding-top: var(--cc-space-3);
    border-top: 1px dashed var(--cc-border-subtle);
  }
  .j-line__remove { border-top: none; padding-top: 0; margin-top: var(--cc-space-2); }
}
.j-line__price-unit-value {
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
  font-variant-numeric: tabular-nums;
}
.j-line__price-unit-hint {
  font-size: var(--cc-text-xs);
  color: var(--cc-text-tertiary);
}
@media (max-width: 991.98px) {
  .j-line__price-unit::before,
  .j-line__subtotal::before {
    content: attr(data-label);
    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: 4px;
  }
}
.j-line__qty-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cc-border-default);
  height: 40px;
}
.j-line__qty-wrap button {
  width: 36px;
  height: 100%;
  background: transparent;
  border: none;
  font-size: 18px;
  font-weight: var(--cc-font-bold);
  cursor: pointer;
}
.j-line__qty-wrap button:hover { background: var(--cc-surface-section); }
.j-line__qty-wrap input {
  width: 50px;
  height: 100%;
  border: none;
  text-align: center;
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.j-line__subtotal-value {
  font-size: var(--cc-text-lg);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
  font-variant-numeric: tabular-nums;
}
.j-line__remove-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--cc-border-default);
  color: var(--cc-text-tertiary);
  font-size: 16px;
  cursor: pointer;
  transition: var(--cc-t-hover);
}
.j-line__remove-btn:hover {
  border-color: var(--cc-action-primary);
  color: var(--cc-action-primary);
}

/* --- Cart actions row --- */
.j-cart__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cc-space-3);
  margin-top: var(--cc-space-5);
  padding: var(--cc-space-4) 0;
  border-top: 1px solid var(--cc-border-subtle);
}
.j-cart__actions-left {
  display: flex;
  gap: var(--cc-space-3);
  flex-wrap: wrap;
}
.j-cart__link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding: 10px 0;
  background: transparent;
  border: none;
  color: var(--cc-text-link);
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  cursor: pointer;
  border-bottom: 1px solid var(--cc-action-primary);
}

/* --- Summary sidebar --- */
.j-summary {
  background: var(--cc-surface-page);
  border: 1px solid var(--cc-border-subtle);
  position: sticky;
  top: 200px;
}
body.header-scrolled .j-summary { top: 90px; }
.j-summary__head {
  padding: var(--cc-space-4) var(--cc-space-5);
  background: var(--cc-color-gray-1000);
  color: #fff;
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
}
.j-summary__head::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cc-action-primary);
}
.j-summary__body {
  padding: var(--cc-space-5);
}

/* CEP block */
.j-summary__cep {
  padding-bottom: var(--cc-space-4);
  margin-bottom: var(--cc-space-4);
  border-bottom: 1px solid var(--cc-border-subtle);
}
.j-summary__cep-label {
  display: 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);
  margin-bottom: var(--cc-space-2);
}
.j-summary__cep-label i { color: var(--cc-action-primary); }
.j-summary__cep-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cc-space-2);
}
.j-summary__cep-row input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--cc-border-default);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
}
.j-summary__cep-row button {
  height: 44px;
  padding: 0 var(--cc-space-4);
  background: var(--cc-color-gray-1000);
  color: #fff;
  border: none;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  cursor: pointer;
}
.j-summary__cep-hint {
  font-size: var(--cc-text-xs);
  color: var(--cc-text-tertiary);
  margin-top: 6px;
}
.j-summary__cep-hint a { color: var(--cc-text-link); }

/* Coupon block */
.j-summary__coupon {
  padding-bottom: var(--cc-space-4);
  margin-bottom: var(--cc-space-4);
  border-bottom: 1px solid var(--cc-border-subtle);
}
.j-summary__coupon summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
}
.j-summary__coupon summary::-webkit-details-marker { display: none; }
.j-summary__coupon summary::after {
  content: '+';
  color: var(--cc-action-primary);
  font-size: 20px;
}
.j-summary__coupon[open] summary::after { content: '−'; }
.j-summary__coupon summary span:first-child {
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
}
.j-summary__coupon summary i { color: var(--cc-action-primary); }
.j-summary__coupon-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--cc-space-2);
  margin-top: var(--cc-space-3);
}
.j-summary__coupon-form input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--cc-border-default);
  font-size: var(--cc-text-sm);
}
.j-summary__coupon-form button {
  height: 44px;
  padding: 0 var(--cc-space-4);
  background: var(--cc-color-gray-1000);
  color: #fff;
  border: none;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
}

/* Totals */
.j-summary__totals {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-2);
  margin-bottom: var(--cc-space-4);
}
.j-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
  font-variant-numeric: tabular-nums;
}
.j-summary__row strong { color: var(--cc-text-primary); font-weight: var(--cc-font-bold); }
.j-summary__row--discount { color: var(--cc-color-success-500); }
.j-summary__row--discount strong { color: var(--cc-color-success-500); }
.j-summary__row--total {
  padding-top: var(--cc-space-3);
  margin-top: var(--cc-space-2);
  border-top: 2px solid var(--cc-color-gray-1000);
  font-size: var(--cc-text-md);
}
.j-summary__row--total span { color: var(--cc-text-primary); font-weight: var(--cc-font-bold); text-transform: uppercase; letter-spacing: var(--cc-tracking-wide); }
.j-summary__row--total strong {
  font-size: var(--cc-text-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.j-summary__installments {
  font-size: var(--cc-text-xs);
  color: var(--cc-text-tertiary);
  text-align: right;
  margin-top: -4px;
}

/* Checkout button */
.j-summary__checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  width: 100%;
  height: 60px;
  background: var(--cc-action-primary);
  color: #fff;
  font-family: var(--cc-font-family);
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  border: none;
  cursor: pointer;
  transition: var(--cc-t-hover);
}
.j-summary__checkout:hover { background: var(--cc-action-primary-hover); }
.j-summary__checkout i { font-size: 20px; }
.j-summary__secure {
  text-align: center;
  font-size: var(--cc-text-xs);
  color: var(--cc-text-tertiary);
  margin-top: var(--cc-space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
}
.j-summary__secure i { color: var(--cc-color-success-500); }

/* Trust bar on summary */
.j-summary__trust {
  padding: var(--cc-space-4) var(--cc-space-5);
  background: var(--cc-surface-section);
  border-top: 1px solid var(--cc-border-subtle);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cc-space-3);
}
.j-summary__trust-item {
  display: 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: var(--cc-text-secondary);
}
.j-summary__trust-item i { color: var(--cc-action-primary); font-size: 18px; flex-shrink: 0; }

/* --- Cross-sell grid --- */
.j-cart-cross {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--cc-space-4);
}
@media (min-width: 768px) { .j-cart-cross { grid-template-columns: repeat(4, 1fr); gap: var(--cc-space-5); } }


/* === from checkout.html === */

/* ============================================================
   checkout.html — simplified flow page
   Header is reduced to logo + "secure checkout" badge.
   ============================================================ */

/* --- Minimal checkout header --- */
.j-co-header {
  background: var(--cc-surface-page);
  border-bottom: 1px solid var(--cc-border-subtle);
  padding-block: var(--cc-space-4);
  position: sticky;
  top: 0;
  z-index: 100;
}
.j-co-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-4);
}
.j-co-header__secure {
  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: var(--cc-text-secondary);
}
.j-co-header__secure i { color: var(--cc-color-success-500); font-size: 18px; }
.j-co-header__back {
  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: var(--cc-text-secondary);
}
.j-co-header__back:hover { color: var(--cc-text-link); }

/* --- Stepper --- */
.j-stepper {
  background: var(--cc-surface-section);
  padding-block: var(--cc-space-5);
  border-bottom: 1px solid var(--cc-border-subtle);
}
.j-stepper__list {
  display: flex;
  justify-content: space-between;
  gap: var(--cc-space-2);
  max-width: 720px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  position: relative;
}
.j-stepper__list::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: var(--cc-border-default);
  z-index: 0;
}
.j-stepper__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cc-space-2);
  flex: 1;
  position: relative;
  z-index: 1;
}
.j-stepper__num {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-surface-page);
  border: 2px solid var(--cc-border-default);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  font-variant-numeric: tabular-nums;
  color: var(--cc-text-tertiary);
  transition: var(--cc-t-hover);
}
.j-stepper__label {
  font-size: 11px;
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-text-tertiary);
  text-align: center;
  line-height: 1.3;
}
@media (max-width: 575.98px) {
  .j-stepper__label { font-size: 9px; }
}
.j-stepper__item--done .j-stepper__num {
  background: var(--cc-color-success-500);
  border-color: var(--cc-color-success-500);
  color: #fff;
}
.j-stepper__item--done .j-stepper__num::before {
  content: '✓';
  font-size: 18px;
}
.j-stepper__item--done .j-stepper__num-text { display: none; }
.j-stepper__item--done .j-stepper__label { color: var(--cc-text-primary); }
.j-stepper__item--current .j-stepper__num {
  background: var(--cc-action-primary);
  border-color: var(--cc-action-primary);
  color: #fff;
}
.j-stepper__item--current .j-stepper__label {
  color: var(--cc-text-primary);
  font-weight: var(--cc-font-bold);
}

/* --- Main grid: steps + summary --- */
.j-co {
  padding-block: var(--cc-space-7) var(--cc-space-9);
}
.j-co__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-6);
}
@media (min-width: 992px) {
  .j-co__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--cc-space-8);
  }
}
@media (min-width: 1200px) {
  .j-co__grid { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* --- Step card (collapsed vs expanded) --- */
.j-step {
  background: var(--cc-surface-page);
  border: 1px solid var(--cc-border-subtle);
  margin-bottom: var(--cc-space-4);
  overflow: hidden;
}
.j-step__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4) var(--cc-space-5);
  background: var(--cc-surface-page);
  cursor: default;
}
.j-step--done .j-step__head {
  background: var(--cc-surface-section);
  cursor: pointer;
}
.j-step--current .j-step__head {
  background: var(--cc-color-gray-1000);
  color: #fff;
}
.j-step__title {
  display: flex;
  align-items: center;
  gap: var(--cc-space-3);
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
}
.j-step__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 2px solid currentColor;
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  font-variant-numeric: tabular-nums;
}
.j-step--done .j-step__badge {
  background: var(--cc-color-success-500);
  border-color: var(--cc-color-success-500);
  color: #fff;
}
.j-step--done .j-step__badge::before { content: '✓'; }
.j-step--done .j-step__badge span { display: none; }
.j-step--current .j-step__badge {
  background: var(--cc-action-primary);
  border-color: var(--cc-action-primary);
  color: #fff;
}
.j-step--pending .j-step__badge { color: var(--cc-text-tertiary); }
.j-step__edit {
  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-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.j-step--pending .j-step__head { opacity: 0.5; }
.j-step--pending .j-step__title { color: var(--cc-text-tertiary); }

.j-step__body {
  padding: var(--cc-space-5) var(--cc-space-5) var(--cc-space-6);
  display: none;
}
.j-step--current .j-step__body { display: block; }
.j-step--done .j-step__recap {
  padding: 0 var(--cc-space-5) var(--cc-space-4);
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
  line-height: var(--cc-lh-base);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cc-space-3);
}
.j-step--done .j-step__recap strong { color: var(--cc-text-primary); font-weight: var(--cc-font-bold); }

/* --- Step 2 (shipping) form --- */
.j-addr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-4);
}
@media (min-width: 576px) {
  .j-addr-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .j-addr-grid > [data-span="full"] { grid-column: 1 / -1; }
  .j-addr-grid > [data-span="2"] { grid-column: span 2; }
}

/* --- Shipping option cards --- */
.j-ship-options {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  margin-top: var(--cc-space-5);
}
.j-ship-option {
  display: flex;
  align-items: center;
  gap: var(--cc-space-4);
  padding: var(--cc-space-4);
  background: var(--cc-surface-page);
  border: 2px solid var(--cc-border-default);
  cursor: pointer;
  transition: var(--cc-t-hover);
}
.j-ship-option:hover { border-color: var(--cc-color-gray-1000); }
.j-ship-option--active {
  border-color: var(--cc-action-primary);
  background: var(--cc-color-red-50);
}
.j-ship-option input[type="radio"] {
  width: 22px;
  height: 22px;
  accent-color: var(--cc-action-primary);
  flex-shrink: 0;
}
.j-ship-option__body { flex: 1; }
.j-ship-option__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cc-space-3);
  margin-bottom: 4px;
}
.j-ship-option__name {
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
}
.j-ship-option__price {
  font-size: var(--cc-text-lg);
  font-weight: var(--cc-font-bold);
  font-variant-numeric: tabular-nums;
}
.j-ship-option__price--free {
  color: var(--cc-color-success-500);
  text-transform: uppercase;
  font-size: var(--cc-text-md);
  letter-spacing: var(--cc-tracking-wide);
}
.j-ship-option__hint {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
}

/* --- Step foot (action buttons) --- */
.j-step__foot {
  display: flex;
  gap: var(--cc-space-3);
  padding-top: var(--cc-space-5);
  margin-top: var(--cc-space-5);
  border-top: 1px solid var(--cc-border-subtle);
  flex-wrap: wrap;
}
.j-step__btn-primary {
  flex: 1;
  min-height: 56px;
  padding: 0 var(--cc-space-6);
  background: var(--cc-action-primary);
  color: #fff;
  border: none;
  font-family: var(--cc-font-family);
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  transition: var(--cc-t-hover);
}
.j-step__btn-primary:hover { background: var(--cc-action-primary-hover); }
.j-step__btn-secondary {
  min-height: 56px;
  padding: 0 var(--cc-space-5);
  background: transparent;
  color: var(--cc-text-primary);
  border: 1px solid var(--cc-border-default);
  font-family: var(--cc-font-family);
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  cursor: pointer;
}

/* --- Order summary (same as cart) --- */
.j-co-summary {
  background: var(--cc-surface-page);
  border: 1px solid var(--cc-border-subtle);
  position: sticky;
  top: 100px;
}
.j-co-summary__head {
  padding: var(--cc-space-4) var(--cc-space-5);
  background: var(--cc-color-gray-1000);
  color: #fff;
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
}
.j-co-summary__head::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cc-action-primary);
}
.j-co-summary__items {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  padding: var(--cc-space-5);
  border-bottom: 1px solid var(--cc-border-subtle);
}
.j-co-mini {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--cc-space-3);
  align-items: center;
  font-size: var(--cc-text-sm);
}
.j-co-mini__img {
  aspect-ratio: 1/1;
  background: var(--cc-surface-sunken);
  overflow: hidden;
  position: relative;
}
.j-co-mini__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.j-co-mini__qty {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--cc-action-primary);
  color: #fff;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--cc-font-bold);
  font-variant-numeric: tabular-nums;
}
.j-co-mini__body { min-width: 0; }
.j-co-mini__name {
  font-weight: var(--cc-font-bold);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.j-co-mini__meta {
  font-size: var(--cc-text-xs);
  color: var(--cc-text-tertiary);
  margin-top: 2px;
}
.j-co-mini__total {
  font-weight: var(--cc-font-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.j-co-summary__body { padding: var(--cc-space-5); }
.j-co-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
  margin-bottom: var(--cc-space-2);
  font-variant-numeric: tabular-nums;
}
.j-co-summary__row strong { color: var(--cc-text-primary); font-weight: var(--cc-font-bold); }
.j-co-summary__row--discount { color: var(--cc-color-success-500); }
.j-co-summary__row--discount strong { color: var(--cc-color-success-500); }
.j-co-summary__row--total {
  padding-top: var(--cc-space-3);
  margin-top: var(--cc-space-3);
  border-top: 2px solid var(--cc-color-gray-1000);
  font-size: var(--cc-text-md);
}
.j-co-summary__row--total span {
  color: var(--cc-text-primary);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
}
.j-co-summary__row--total strong {
  font-size: var(--cc-text-2xl);
  letter-spacing: -0.01em;
}

/* --- Compact footer --- */
.j-co-footer {
  background: var(--cc-color-gray-900);
  color: var(--cc-color-gray-400);
  padding: var(--cc-space-5) 0;
  font-size: var(--cc-text-xs);
}
.j-co-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .j-co-footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
.j-co-footer a { color: var(--cc-color-gray-400); margin-inline: var(--cc-space-2); }
.j-co-footer a:hover { color: #fff; }
.j-co-footer__payment { display: flex; gap: var(--cc-space-2); }
.j-co-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);
}


/* === from success.html === */

/* ============================================================
   success.html — order confirmation
   ============================================================ */

/* Minimal checkout header (same as checkout.html) — scoped to checkout routes only */
body.is-checkout .cc-main-header { padding: var(--cc-space-4) 0; }
body.is-checkout .cc-header__collapsible,
body.is-checkout .cc-mega-nav { display: none; }
.j-checkout-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--cc-space-5);
}
.j-checkout-head__badge {
  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: var(--cc-text-secondary);
}
.j-checkout-head__badge i { color: var(--cc-color-success-500); font-size: 18px; }

/* Success hero */
.j-success {
  padding-block: var(--cc-space-8) var(--cc-space-9);
  background: var(--cc-surface-section);
}
@media (min-width: 768px) {
  .j-success { padding-block: var(--cc-space-10); }
}

.j-success__hero {
  background: var(--cc-surface-page);
  border: 1px solid var(--cc-border-subtle);
  border-top: 4px solid var(--cc-color-success-500);
  padding: var(--cc-space-8) var(--cc-space-6);
  text-align: center;
  max-width: 900px;
  margin: 0 auto var(--cc-space-6);
}
@media (min-width: 768px) {
  .j-success__hero { padding: var(--cc-space-10) var(--cc-space-9); }
}

.j-success__icon {
  width: 88px;
  height: 88px;
  background: var(--cc-color-success-500);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin: 0 auto var(--cc-space-5);
  position: relative;
  animation: j-success-pulse 1.8s ease-out;
}
.j-success__icon::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid var(--cc-color-success-500);
  border-radius: 50%;
  opacity: 0.3;
}
@keyframes j-success-pulse {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

.j-success__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: var(--cc-color-success-500);
  margin-bottom: var(--cc-space-2);
}
.j-success__title {
  font-size: var(--cc-text-3xl);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  line-height: var(--cc-lh-tight);
  margin-bottom: var(--cc-space-3);
}
@media (min-width: 768px) {
  .j-success__title { font-size: var(--cc-text-4xl); }
}
.j-success__subtitle {
  font-size: var(--cc-text-md);
  color: var(--cc-text-secondary);
  max-width: 56ch;
  margin: 0 auto var(--cc-space-6);
  line-height: var(--cc-lh-base);
}

.j-success__ref {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-3) var(--cc-space-6);
  padding: var(--cc-space-4) var(--cc-space-6);
  background: var(--cc-surface-section);
  border: 1px dashed var(--cc-border-default);
}
.j-success__ref-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.j-success__ref-label {
  font-size: 10px;
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-text-tertiary);
}
.j-success__ref-value {
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
}

/* Timeline */
.j-success__panel {
  max-width: 900px;
  margin: 0 auto var(--cc-space-6);
  background: var(--cc-surface-page);
  border: 1px solid var(--cc-border-subtle);
  padding: var(--cc-space-6);
}
@media (min-width: 768px) {
  .j-success__panel { padding: var(--cc-space-7) var(--cc-space-8); }
}

.j-success__panel-title {
  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-secondary);
  margin-bottom: var(--cc-space-5);
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
}
.j-success__panel-title::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cc-action-primary);
}

.j-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--cc-space-2);
  position: relative;
}
.j-timeline__step {
  text-align: center;
  position: relative;
}
.j-timeline__dot {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--cc-space-2);
  background: var(--cc-surface-section);
  border: 2px solid var(--cc-border-default);
  color: var(--cc-text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  position: relative;
  z-index: 1;
}
.j-timeline__step--done .j-timeline__dot {
  background: var(--cc-color-success-500);
  border-color: var(--cc-color-success-500);
  color: #fff;
}
.j-timeline__step--current .j-timeline__dot {
  background: var(--cc-action-primary);
  border-color: var(--cc-action-primary);
  color: #fff;
  animation: j-pulse-sm 2s ease-in-out infinite;
}
@keyframes j-pulse-sm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,23,34, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(234,23,34, 0); }
}

.j-timeline__label {
  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);
  line-height: 1.3;
}
.j-timeline__step--done .j-timeline__label,
.j-timeline__step--current .j-timeline__label {
  color: var(--cc-text-primary);
}
.j-timeline__date {
  font-size: 10px;
  color: var(--cc-text-tertiary);
  margin-top: 2px;
}

.j-timeline__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 19px;
  left: calc(50% + 24px);
  right: calc(-50% + 24px);
  height: 2px;
  background: var(--cc-border-default);
  z-index: 0;
}
.j-timeline__step--done:not(:last-child)::after {
  background: var(--cc-color-success-500);
}

@media (max-width: 575.98px) {
  .j-timeline { grid-template-columns: 1fr; gap: var(--cc-space-3); }
  .j-timeline__step {
    display: grid;
    grid-template-columns: 40px 1fr;
    text-align: left;
    align-items: center;
    gap: var(--cc-space-3);
  }
  .j-timeline__dot { margin: 0; }
  .j-timeline__step:not(:last-child)::after {
    left: 19px; right: auto; top: 40px; bottom: -8px; width: 2px; height: auto;
  }
}

/* Details grid */
.j-success__details {
  max-width: 900px;
  margin: 0 auto var(--cc-space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-5);
}
@media (min-width: 768px) {
  .j-success__details { grid-template-columns: 1.5fr 1fr; }
}

.j-success__card {
  background: var(--cc-surface-page);
  border: 1px solid var(--cc-border-subtle);
  padding: var(--cc-space-6);
}
.j-success__card h2 {
  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-secondary);
  margin-bottom: var(--cc-space-5);
  display: flex;
  align-items: center;
  gap: var(--cc-space-2);
}
.j-success__card h2::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cc-action-primary);
}

/* Items list (mini) */
.j-success__items { display: grid; gap: var(--cc-space-3); }
.j-success__item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--cc-space-3);
  align-items: center;
  padding-bottom: var(--cc-space-3);
  border-bottom: 1px dashed var(--cc-border-subtle);
}
.j-success__item:last-child { border-bottom: 0; padding-bottom: 0; }
.j-success__item img { width: 56px; height: 56px; object-fit: cover; }
.j-success__item-name {
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-medium);
  margin-bottom: 2px;
}
.j-success__item-meta {
  font-size: var(--cc-text-xs);
  color: var(--cc-text-tertiary);
}
.j-success__item-price {
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  text-align: right;
}

.j-success__totals {
  margin-top: var(--cc-space-5);
  padding-top: var(--cc-space-4);
  border-top: 2px solid var(--cc-color-gray-1000);
  display: grid;
  gap: var(--cc-space-2);
}
.j-success__totals-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
}
.j-success__totals-row--grand {
  padding-top: var(--cc-space-3);
  margin-top: var(--cc-space-2);
  border-top: 1px solid var(--cc-border-subtle);
  font-size: var(--cc-text-lg);
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
}
.j-success__totals-row--discount { color: var(--cc-color-success-500); font-weight: var(--cc-font-bold); }

/* Info blocks (side) */
.j-success__info-block {
  padding-bottom: var(--cc-space-5);
  margin-bottom: var(--cc-space-5);
  border-bottom: 1px dashed var(--cc-border-subtle);
}
.j-success__info-block:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.j-success__info-label {
  font-size: 10px;
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-text-tertiary);
  margin-bottom: 4px;
}
.j-success__info-value {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-primary);
  line-height: 1.4;
}
.j-success__info-value strong { font-weight: var(--cc-font-bold); }

/* PIX alert box */
.j-success__pix {
  max-width: 900px;
  margin: 0 auto var(--cc-space-6);
  background: #FFF9E6;
  border: 1px solid #F0D966;
  border-left: 4px solid #C9A227;
  padding: var(--cc-space-5) var(--cc-space-6);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--cc-space-4);
  align-items: center;
}
.j-success__pix i {
  font-size: 32px;
  color: #C9A227;
}
.j-success__pix-title {
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  color: var(--cc-color-gray-1000);
  margin-bottom: 2px;
}
.j-success__pix-text {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
}
.j-success__pix-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  padding: var(--cc-space-3) var(--cc-space-5);
  background: var(--cc-color-gray-1000);
  color: #fff;
  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);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.j-success__pix-btn:hover { background: #000; }
@media (max-width: 575.98px) {
  .j-success__pix { grid-template-columns: 1fr; text-align: center; }
  .j-success__pix i { margin: 0 auto; }
}

/* Next steps */
.j-success__next {
  max-width: 900px;
  margin: 0 auto var(--cc-space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--cc-space-4);
}
@media (min-width: 768px) {
  .j-success__next { grid-template-columns: repeat(3, 1fr); }
}

.j-next-card {
  background: var(--cc-surface-page);
  border: 1px solid var(--cc-border-subtle);
  padding: var(--cc-space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--cc-space-3);
}
.j-next-card i {
  font-size: 32px;
  color: var(--cc-action-primary);
}
.j-next-card h3 {
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  margin: 0;
}
.j-next-card p {
  font-size: var(--cc-text-sm);
  color: var(--cc-text-secondary);
  line-height: var(--cc-lh-base);
  margin: 0;
}

/* Main CTAs */
.j-success__ctas {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: var(--cc-space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 576px) {
  .j-success__ctas { grid-template-columns: 1fr 1fr; }
}

.j-success__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  height: 56px;
  font-family: var(--cc-font-family);
  font-size: var(--cc-text-md);
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  text-decoration: none;
  cursor: pointer;
  transition: var(--cc-t-hover);
  border: 1.5px solid transparent;
}
.j-success__cta--primary {
  background: var(--cc-action-primary);
  color: #fff;
}
.j-success__cta--primary:hover { background: var(--cc-action-primary-hover); }
.j-success__cta--ghost {
  background: transparent;
  color: var(--cc-text-primary);
  border-color: var(--cc-border-default);
}
.j-success__cta--ghost:hover { border-color: var(--cc-color-gray-1000); }

/* ================================================================
   Cart tools — cupom, frete, vale-presente (substitui módulos legacy
   do OC). Cards collapsibles com header de ícone+título+chevron e body
   expansível com input + botão. Grid 3-col em desktop, stack mobile.
   ================================================================ */
.j-cart__tools {
  margin-top: var(--cc-space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .j-cart__tools { grid-template-columns: repeat(3, 1fr); }
}

/* [hc_freight_calculator] Layout 2-col verdadeiramente independente:
   .j-cart-left-col (col 1): cupom + vale stacked em flex-col — altura fixa, não afetada pelo frete.
   .j-cart-freight-col (col 2): frete — cresce livremente quando expande sem mover col 1.
   align-items:start garante que col 1 fique no topo da célula mesmo quando col 2 é maior. */
@media (min-width: 768px) {
  .j-cart__tools--shipping-first { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
.j-cart-left-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.j-cart-tool {
  background: #fff;
  border: 1px solid var(--cc-border-subtle);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.j-cart-tool:hover {
  border-color: var(--cc-border-default);
  box-shadow: 0 4px 12px -6px rgba(0,0,0,0.08);
}
.j-cart-tool[open] {
  border-color: var(--cc-action-primary);
  box-shadow: 0 8px 20px -8px rgba(220, 38, 38, 0.15);
}

.j-cart-tool > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  /* min-height comporta 2 linhas do título (CUPOM DE DESCONTO quebra) — assim
     a linha divisória fica alinhada entre os 3 cards independente do texto. */
  min-height: 60px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: var(--cc-font-bold);
  font-size: 13px;
  color: var(--cc-text-primary);
  transition: background 150ms ease;
}
.j-cart-tool > summary::-webkit-details-marker { display: none; }
.j-cart-tool > summary:hover { background: var(--cc-surface-section); }

.j-cart-tool__head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.j-cart-tool__head .bi {
  font-size: 18px;
  color: var(--cc-action-primary);
  width: 24px;
  text-align: center;
}
.j-cart-tool__title {
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  font-size: 12px;
}

.j-cart-tool__chevron {
  font-size: 14px;
  color: var(--cc-text-tertiary);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.j-cart-tool[open] .j-cart-tool__chevron { transform: rotate(180deg); color: var(--cc-action-primary); }

.j-cart-tool__body {
  padding: 8px 16px 16px;
  border-top: 1px solid var(--cc-border-subtle);
  animation: hc-cart-tool-in 250ms ease-out;
}
@keyframes hc-cart-tool-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Form: stack vertical (cada card é estreito quando lado-a-lado em grid 3-col).
   Botão sempre full-width na última linha. Visual respira melhor que apertar
   input+botão na mesma linha em ~190px de largura. */
.j-cart-tool__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.j-cart-tool__form--shipping {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.j-cart-tool__form--shipping > button {
  grid-column: 1 / -1;
}

.j-cart-tool__form input,
.j-cart-tool__form select {
  height: 40px;
  padding: 0 12px;
  font-family: var(--cc-font-family);
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--cc-border-default);
  color: var(--cc-text-primary);
  outline: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  min-width: 0;
}
.j-cart-tool__form input:focus,
.j-cart-tool__form select:focus {
  border-color: var(--cc-action-primary);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.j-cart-tool__form input::placeholder { color: var(--cc-text-tertiary); }

.j-cart-tool__form button {
  height: 40px;
  padding: 0 18px;
  background: var(--cc-color-gray-1000);
  color: #fff;
  border: 0;
  font-family: var(--cc-font-family);
  font-size: 11px;
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  cursor: pointer;
  transition: background 150ms ease;
  position: relative;
  white-space: nowrap;
}
.j-cart-tool__form button:hover { background: var(--cc-action-primary); }
.j-cart-tool__form button:active { transform: translateY(1px); }
.j-cart-tool__form button:disabled { opacity: 0.6; cursor: not-allowed; }
.j-cart-tool__form button.is-loading { color: transparent; }
.j-cart-tool__form button.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hc-spin 0.7s linear infinite;
}

/* Resultado de cálculo de frete */
.j-cart-tool__shipping-results {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: hc-cart-tool-in 250ms ease-out;
}
.j-cart-tool__shipping-option {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--cc-surface-section);
  border: 1px solid var(--cc-border-subtle);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.j-cart-tool__shipping-option:hover {
  border-color: var(--cc-action-primary);
  background: #fff;
}
.j-cart-tool__shipping-option:has(input:checked) {
  border-color: var(--cc-action-primary);
  background: #fff;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.08);
}
.j-cart-tool__shipping-option input[type="radio"] { accent-color: var(--cc-action-primary); }
.j-cart-tool__shipping-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.j-cart-tool__shipping-title {
  font-size: 13px;
  font-weight: var(--cc-font-bold);
  color: var(--cc-text-primary);
  line-height: 1.2;
}
.j-cart-tool__shipping-meta {
  font-size: 11px;
  color: var(--cc-text-tertiary);
  margin-top: 1px;
}
.j-cart-tool__shipping-price {
  font-size: 14px;
  font-weight: var(--cc-font-bold);
  color: var(--cc-action-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.j-cart-tool__shipping-confirm {
  margin-top: 4px;
  height: 44px;
  border: 0;
  background: var(--cc-action-primary);
  color: #fff;
  font-family: var(--cc-font-family);
  font-size: 12px;
  font-weight: var(--cc-font-bold);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  cursor: pointer;
  transition: background 150ms ease, opacity 150ms ease;
  position: relative;
}
.j-cart-tool__shipping-confirm:hover { background: var(--cc-action-primary-hover, #c41e1e); }
.j-cart-tool__shipping-confirm:disabled { opacity: 0.4; cursor: not-allowed; }
.j-cart-tool__shipping-confirm.is-loading { color: transparent; }
.j-cart-tool__shipping-confirm.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2.5px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hc-spin 0.7s linear infinite;
}

.j-cart-tool__shipping-error,
.j-cart-tool__shipping-empty {
  padding: 10px 12px;
  background: var(--cc-surface-section);
  border-left: 3px solid var(--cc-text-tertiary);
  font-size: 12px;
  color: var(--cc-text-secondary);
}
.j-cart-tool__shipping-error {
  border-left-color: var(--cc-action-primary);
  color: var(--cc-action-primary);
}

@media (prefers-reduced-motion: reduce) {
  .j-cart-tool, .j-cart-tool__chevron, .j-cart-tool__body, .j-cart-tool__shipping-results { animation: none; transition: none; }
}

/* ----------------------------------------------------------------
   Mobile: cart totals + checkout text readability  (M-7, M-9, M-10, M-11)
   ---------------------------------------------------------------- */
@media (max-width: 767px) {
  /* M-7 + M-11: cart/checkout summary sidebar totals */
  .j-summary__row { font-size: var(--cc-text-body); }
  .j-summary__row--total strong { font-size: var(--cc-text-xl); }   /* 31px → 25px */

  /* M-9/M-10: address form labels + shipping hints + completed-step recap */
  .j-step--done .j-step__recap { font-size: var(--cc-text-body); }
  .j-ship-option__hint { font-size: var(--cc-text-body); }
  .j-addr-grid input, .j-addr-grid select { font-size: var(--cc-text-body); }
  .j-addr-grid label { font-size: var(--cc-text-body); }
}