/* ═══════════════════════════════════════════════════════════════════════════
   FÁBRICA DE CORREDOR — DS Components (overrides nas classes legadas)
   Aplica forma/anatomia do DS sobre componentes existentes (rr-*, etc.) que
   já consomem tokens via tokens.css. Carregar APÓS style.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ BASE ═══════════════════════════════════════════════════════════════ */

body {
  font-family: var(--ff-body);
  background: var(--surface-canvas);
  color: var(--text-secondary);
  line-height: 1.6;
  font-feature-settings: "ss01", "ss02";
}

::selection { background: var(--blue-600); color: #fff; }

/* Headings consomem família do DS (Archivo) com pesos da spec */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  color: var(--text-primary);
  letter-spacing: -.01em;
}
h1 { font-weight: 900; letter-spacing: -.02em; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }


/* ═══ FOCUS-VISIBLE GLOBAL ═══════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}


/* ═══ BUTTONS ═════════════════════════════════════════════════════════════
   Spec DS: pill (--r-full), uppercase, tracking .08em, peso 800,
   família Archivo. Cor via variantes.
   ═══════════════════════════════════════════════════════════════════════ */

.rr-btn,
.rr-btn-primary,
.rr-btn-secondary,
.rr-btn-outline,
.rr-btn-ghost,
.rr-btn-gold,
.rr-btn-dark,
.rr-btn-white,
.fdc-btn {
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: var(--fs-body-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  border-radius: var(--r-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

.rr-btn-primary,
.rr-btn-gold,
.fdc-btn-primary {
  background: var(--interactive-primary-default);
  color: var(--text-on-brand);
  box-shadow: var(--sh-blue);
}
.rr-btn-primary:hover:not([disabled]),
.rr-btn-gold:hover:not([disabled]),
.fdc-btn-primary:hover:not([disabled]) {
  background: var(--interactive-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 20px 48px -12px rgba(29, 63, 168, .6);
}
.rr-btn-primary:active,
.rr-btn-gold:active,
.fdc-btn-primary:active {
  background: var(--interactive-primary-active);
  transform: translateY(0);
  box-shadow: var(--sh-sm);
}

.rr-btn-secondary,
.fdc-btn-secondary {
  background: var(--green-500);
  color: var(--text-on-brand);
  box-shadow: var(--sh-green);
}
.rr-btn-secondary:hover:not([disabled]),
.fdc-btn-secondary:hover:not([disabled]) {
  background: var(--green-600);
  transform: translateY(-2px);
}
.rr-btn-secondary:active,
.fdc-btn-secondary:active {
  background: var(--green-700);
  transform: translateY(0);
  box-shadow: var(--sh-sm);
}

.rr-btn-outline,
.fdc-btn-outline {
  background: transparent;
  color: var(--text-brand);
  border: 2px solid var(--blue-700);
  padding: 12px 26px; /* compensa a borda 2px */
}
.rr-btn-outline:hover:not([disabled]),
.fdc-btn-outline:hover:not([disabled]) {
  background: var(--blue-700);
  color: var(--text-on-brand);
}

.rr-btn-ghost,
.fdc-btn-ghost {
  background: transparent;
  color: var(--text-brand);
  box-shadow: none;
}
.rr-btn-ghost:hover:not([disabled]),
.fdc-btn-ghost:hover:not([disabled]) {
  background: var(--surface-brand-soft);
}

.rr-btn-dark,
.fdc-btn-dark {
  background: var(--surface-inverse);
  color: var(--text-on-brand);
}
.rr-btn-dark:hover:not([disabled]),
.fdc-btn-dark:hover:not([disabled]) {
  background: var(--blue-800);
}

.rr-btn-white,
.fdc-btn-white {
  background: var(--surface-default);
  color: var(--text-primary);
  box-shadow: var(--sh-md);
}

.rr-btn-sm, .fdc-btn-sm { padding: 8px 18px; font-size: 12px; }
.rr-btn-lg, .fdc-btn-lg { padding: 18px 36px; font-size: var(--fs-body); }

.rr-btn[disabled],
.rr-btn.is-disabled,
.fdc-btn[disabled],
.fdc-btn.is-disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.rr-btn.is-loading::after,
.fdc-btn.is-loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin var(--motion-base) linear infinite;
}
.rr-btn.is-loading,
.fdc-btn.is-loading {
  pointer-events: none;
}
.rr-btn.is-loading > *:not(:last-child),
.fdc-btn.is-loading > *:not(:last-child) {
  opacity: .7;
}

.rr-btn-full, .fdc-btn-block { width: 100%; }


/* ═══ BADGES / TAGS ═══════════════════════════════════════════════════════
   Spec DS: pill, mono 11px, peso 600, .1em tracking, uppercase.
   ═══════════════════════════════════════════════════════════════════════ */

.rr-badge,
.fdc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.rr-badge-blue,        .fdc-badge-blue        { background: var(--blue-100);  color: var(--blue-700); }
.rr-badge-green,       .fdc-badge-green       { background: var(--green-100); color: var(--green-700); }
.rr-badge-solid-blue,  .fdc-badge-solid-blue  { background: var(--blue-600);  color: var(--text-on-brand); }
.rr-badge-solid-green, .fdc-badge-solid-green { background: var(--green-500); color: var(--text-on-brand); }
.rr-badge-outline,     .fdc-badge-outline     { background: transparent; border: 1px solid var(--blue-300); color: var(--blue-700); }
.fdc-badge-warning { background: #FBEFD8; color: #8C5E08; }
.fdc-badge-danger  { background: #FDECEA; color: var(--danger); }
.rr-badge-dot::before,
.fdc-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }


/* ═══ INPUTS / FORMS ═════════════════════════════════════════════════════
   Spec DS: padding 14/18, border 2px stone-200, raio --r-md, focus blue-600
   + ring. Estados error/success/disabled (do prompt).
   ═══════════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select,
.rr-input,
.fdc-input {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  padding: 14px 18px;
  border: 2px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--surface-default);
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
  box-sizing: border-box;
  line-height: 1.4;
}
input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible,
.rr-input:focus,
.fdc-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
input::placeholder,
textarea::placeholder { color: var(--stone-400); }

.rr-input.is-invalid, .fdc-input.is-invalid,
.rr-input[aria-invalid="true"], .fdc-input[aria-invalid="true"] {
  border-color: var(--danger);
}
.rr-input.is-invalid:focus, .fdc-input.is-invalid:focus,
.rr-input[aria-invalid="true"]:focus, .fdc-input[aria-invalid="true"]:focus {
  box-shadow: var(--ring-danger);
}
.rr-input.is-valid, .fdc-input.is-valid {
  border-color: var(--success);
}
.rr-input.is-valid:focus, .fdc-input.is-valid:focus {
  box-shadow: var(--ring-success);
}
input[disabled],
textarea[disabled],
select[disabled],
.rr-input[disabled],
.fdc-input[disabled] {
  background: var(--stone-100);
  color: var(--stone-500);
  border-color: var(--stone-200);
  cursor: not-allowed;
  opacity: 1;
}

.rr-form-label,
.fdc-input-label,
.input-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--s-2);
}

.fdc-input-error,
.rr-form-error {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-danger);
  margin-top: var(--s-1);
}

.fdc-input-help,
.rr-form-help {
  font-family: var(--ff-body);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  margin-top: var(--s-1);
}


/* ═══ CARDS ═══════════════════════════════════════════════════════════════
   Spec DS: white surface, border stone-200, --r-xl, hover translateY(-4) + sh-lg
   ═══════════════════════════════════════════════════════════════════════ */

.rr-card,
.rr-product-card,
.fdc-card {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.rr-card:hover,
.rr-product-card:hover,
.fdc-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
}


/* ═══ HEADER / NAV ═══════════════════════════════════════════════════════ */

.rr-header {
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-subtle);
}
.rr-announcement,
#rr-topbar {
  background: var(--surface-inverse);
  color: var(--text-on-brand);
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Nav horizontal — espaçamento e tipografia clean (alvo: respiração visual,
   peso médio, cor cinza, uppercase com tracking aberto). */
.rr-header-nav {
  gap: var(--s-10);
}
@media (max-width: 1200px) {
  .rr-header-nav { gap: var(--s-8); }
}
.rr-nav-link,
.rr-header-nav a,
.rr-header-nav .rr-nav-more-btn {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
}
.rr-nav-link:hover,
.rr-nav-link.is-open,
.rr-header-nav a:hover {
  color: var(--text-primary);
}
.rr-nav-dropdown {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}


/* ═══ FOOTER ═════════════════════════════════════════════════════════════ */

.rr-footer {
  background: var(--surface-inverse);
  color: var(--text-on-brand);
}
.rr-footer h3, .rr-footer h4 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  color: var(--text-on-brand);
  letter-spacing: -.01em;
}
.rr-footer a { color: var(--stone-300); transition: color var(--motion-fast) var(--ease-out); }
.rr-footer a:hover { color: var(--green-400); }


/* ═══ MINI-CART (drawer) ═════════════════════════════════════════════════ */

.rr-minicart {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
}
.rr-minicart-header h3 {
  font-family: var(--ff-heading);
  font-weight: 800;
  color: var(--text-primary);
}
.rr-cart-badge {
  background: var(--blue-600);
  color: var(--text-on-brand);
  font-family: var(--ff-mono);
  font-weight: 700;
  border-radius: var(--r-full);
}


/* ═══ SEARCH PANEL ═══════════════════════════════════════════════════════
   O input do search-panel é "lean" (sem border full). A regra global de
   input em components.css aplicaria padding/border próprios — aqui usamos
   especificidade .rr-search-input para preservar o look e dar espaço pro
   ícone (lupinha à esquerda + clear à direita).
   ═══════════════════════════════════════════════════════════════════════ */

.rr-search-panel {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
}

.rr-search-input-wrap { position: relative; }

.rr-search-input-wrap .fdc-icon.rr-search-input-icon,
.rr-search-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  stroke: currentColor;
  fill: none;
  pointer-events: none;
  z-index: 1;
}

input.rr-search-input,
.rr-search-input {
  width: 100%;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: var(--text-primary);
  padding: 16px 48px;          /* espaço pra ícone à esquerda + clear à direita */
  border: none;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  background: var(--surface-canvas);
  outline: none;
  box-shadow: none;
  transition: border-color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
}
input.rr-search-input:focus,
.rr-search-input:focus,
input.rr-search-input:focus-visible,
.rr-search-input:focus-visible {
  border-color: var(--border-focus);
  background: var(--surface-default);
  box-shadow: none;            /* sem ring full — só o border-bottom muda */
}
.rr-search-input::placeholder { color: var(--text-muted); }

.rr-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out);
}
.rr-search-clear:hover {
  color: var(--text-primary);
  background: var(--stone-100);
}

.rr-search-categories-title {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}

.rr-search-tag {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  color: var(--text-secondary);
  transition: border-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              background var(--motion-fast) var(--ease-out);
}
.rr-search-tag:hover {
  border-color: var(--border-brand);
  color: var(--text-brand);
  background: var(--surface-brand-soft);
}


/* ═══ PRODUCT (price) ════════════════════════════════════════════════════ */

.rr-product-price,
.rr-card-price {
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.rr-product-price-compare,
.rr-card-price-compare {
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--text-muted);
  text-decoration: line-through;
}
.rr-product-installments,
.rr-card-installments {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}


/* ═══ TOAST ═════════════════════════════════════════════════════════════ */

.rr-toast,
.fdc-toast {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  background: var(--surface-inverse);
  color: var(--text-on-brand);
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-full);
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: var(--sh-xl);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.rr-toast::before,
.fdc-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-400); }
.rr-toast.is-success::before, .fdc-toast.is-success::before { background: var(--green-400); }
.rr-toast.is-danger::before,  .fdc-toast.is-danger::before  { background: var(--danger); }
.rr-toast.is-warning::before, .fdc-toast.is-warning::before { background: var(--warning); }


/* ═══ HERO institucional (DS) ═══════════════════════════════════════════ */

.fdc-hero {
  background: var(--surface-inverse);
  color: var(--text-on-brand);
  padding: var(--s-24) var(--s-20);
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.fdc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(111, 168, 90, .18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(29, 63, 168, .4) 0%, transparent 60%);
  pointer-events: none;
}
.fdc-hero-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.fdc-hero-inner { position: relative; z-index: 2; max-width: 900px; }
.fdc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-full);
  margin-bottom: var(--s-8);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--green-400);
}
.fdc-hero-eyebrow .fdc-pulse {
  width: 6px;
  height: 6px;
  background: var(--green-500);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--green-500);
  animation: fdc-pulse var(--motion-pulse) var(--ease-pulse) infinite;
}
@keyframes fdc-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.3); }
}
.fdc-hero h1 {
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(56px, 10vw, 160px);
  line-height: .85;
  letter-spacing: -.02em;
  margin-bottom: var(--s-6);
  text-transform: uppercase;
  color: inherit;
}
.fdc-hero h1 em { color: var(--green-500); font-style: italic; display: block; }
.fdc-hero-sub {
  font-size: 22px;
  color: var(--stone-200);
  max-width: 620px;
  font-weight: 400;
  line-height: 1.55;
  margin-bottom: var(--s-10);
}


/* ═══ ÍCONES ═════════════════════════════════════════════════════════════ */

.fdc-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  flex-shrink: 0;
}


/* ═══ STAT CARDS (DS) ════════════════════════════════════════════════════ */

.fdc-stat {
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
}
.fdc-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--green-500);
}
.fdc-stat.is-blue::before { background: var(--blue-600); }
.fdc-stat-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.fdc-stat-value {
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -.02em;
}
.fdc-stat-value em { color: var(--green-500); font-style: normal; }
.fdc-stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--s-3);
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-success);
}
.fdc-stat-delta.is-down { color: var(--text-danger); }


/* ═══ STEPPER (gap — refator de includes/checkout/sidebar.php) ═══════════ */

.fdc-stepper {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.fdc-stepper-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  background: var(--surface-subtle);
  color: var(--text-muted);
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.fdc-stepper-item .num {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: var(--fs-caption);
}
.fdc-stepper-item .label {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-body-sm);
}
.fdc-stepper-item.is-active {
  background: var(--surface-brand);
  color: var(--text-on-brand);
}
.fdc-stepper-item.is-complete {
  background: var(--green-100);
  color: var(--text-success);
}
.fdc-stepper-item.is-complete .num { display: none; }
.fdc-stepper-connector {
  width: var(--s-6);
  height: 2px;
  background: var(--border-default);
}
.fdc-stepper-connector.is-complete { background: var(--surface-brand); }


/* ═══ PADRÕES GRÁFICOS (DS) ══════════════════════════════════════════════ */

.fdc-pattern-stripes {
  background: repeating-linear-gradient(
    -45deg,
    var(--blue-700) 0 20px,
    var(--blue-800) 20px 22px,
    var(--blue-700) 22px 40px,
    var(--green-500) 40px 42px
  );
}
.fdc-pattern-curves { background: var(--surface-inverse); position: relative; overflow: hidden; }
.fdc-pattern-curves::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 30% 40%, var(--green-500) 0%, transparent 35%),
    radial-gradient(ellipse at 70% 60%, var(--blue-500) 0%, transparent 40%);
}
.fdc-pattern-dots {
  background: var(--blue-600);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .25) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}
.fdc-pattern-speck {
  background: var(--surface-canvas);
  background-image: radial-gradient(circle, var(--stone-300) 1px, transparent 1px);
  background-size: 18px 18px;
}
.fdc-pattern-diag-thin {
  background-color: var(--surface-canvas);
  background-image: repeating-linear-gradient(-45deg, var(--green-500) 0 4px, transparent 4px 12px);
}
.fdc-pattern-duotone { background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-900) 50%, var(--green-700) 100%); }


/* ═══ CART · CÁLCULO DE FRETE & CUPOM ═══════════════════════════════════
   O input + botão "Calcular"/"Aplicar" formam um par. Padroniza altura
   (align-items: stretch) e tipografia consistente do DS.
   ═══════════════════════════════════════════════════════════════════════ */

.rr-cart-shipping-row,
.rr-coupon-row {
  display: flex;
  align-items: stretch;        /* botão e input com mesma altura */
  gap: var(--s-2);
}
.rr-cart-shipping-input-wrap { flex: 1; min-width: 0; }

input.rr-coupon-input,
.rr-coupon-input {
  width: 100%;
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--text-primary);
  padding: 12px 16px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--surface-default);
  outline: none;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
}
input.rr-coupon-input:focus,
.rr-coupon-input:focus,
input.rr-coupon-input:focus-visible,
.rr-coupon-input:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
.rr-coupon-input::placeholder {
  color: var(--text-muted);
  letter-spacing: .12em;
}

/* Botão "Calcular"/"Aplicar" alinhado à altura do input.
   Desativa o padding vertical fixo do .rr-btn-sm dentro deste contexto. */
.rr-cart-shipping-row .rr-btn,
.rr-coupon-row .rr-btn {
  padding: 0 var(--s-5);
  min-width: 96px;
  font-size: 12px;
  letter-spacing: .1em;
  align-self: stretch;
}

.rr-cart-shipping-header {
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-2);
}

.rr-cart-shipping-city {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--text-success);
  margin-top: var(--s-1);
}


/* ═══ FREE SHIPPING BADGE ═══════════════════════════════════════════════
   Não pode cortar texto. flex-wrap:nowrap + white-space:nowrap +
   tokens DS. SVG inline mantido (não é do sprite — sem refator de markup).
   ═══════════════════════════════════════════════════════════════════════ */

.rr-free-shipping-badge {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-2);
  background: var(--green-100);
  color: var(--text-success);
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--green-200);
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}
.rr-free-shipping-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
}

/* Recalc hint (sacola alterada) — mesmo padrão visual */
.rr-shipping-recalc-hint {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--text-warning);
  display: flex !important;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.rr-shipping-recalc-hint button {
  background: none;
  border: none;
  color: var(--text-brand);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}


/* ═══ PAYMENT BADGES (footer "Formas de Pagamento" / "Segurança") ═══════
   O .rr-payment-badge legado tem background branco mas não define color,
   então currentColor herda do footer (branco) — ícone fica invisível.
   Aqui DEFINE color/cor de stroke + cor do texto.
   ═══════════════════════════════════════════════════════════════════════ */

.rr-payment-badge {
  background: var(--surface-default);
  color: var(--text-brand);
  border: 1px solid var(--border-default);
  border-radius: var(--r-full);
  padding: 8px 16px;
  gap: var(--s-2);
}
.rr-payment-badge svg,
.rr-payment-badge .fdc-icon {
  width: 18px;
  height: 18px;
  color: var(--text-brand);
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}
.rr-payment-badge span {
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
}


/* ═══ WHATSAPP FLOAT BUTTON ═════════════════════════════════════════════ */

.rr-whatsapp-float {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-sticky);
  background: var(--green-500);
  color: var(--text-on-brand);
  box-shadow: var(--sh-green);
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out),
              background var(--motion-base) var(--ease-out);
}
.rr-whatsapp-float:hover {
  transform: scale(1.1);
  background: var(--green-600);
  box-shadow: 0 8px 32px -4px rgba(111, 168, 90, .55);
}


/* ═══ TIPOGRAFIA RESPONSIVA (DS — ajuste mobile) ═════════════════════════ */

@media (max-width: 640px) {
  .fdc-hero h1 { font-size: 56px; }
  h1 { font-size: 36px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Calcular Frete no carrinho · 4 estados (idle/loading/success/error)
   Ref: cart-shipping-calculator.html. Tokens com fallback literal do mock p/
   robustez (independe da nomenclatura). Badges com cores oficiais hardcoded.
   ════════════════════════════════════════════════════════════════════════ */
.rr-cart-shipping-calc {
  background: var(--bg-base, #F3F0E9);
  border: 1px solid var(--border-subtle, #E5E1D6);
  border-radius: 6px;
  padding: 16px;
  margin: 16px 0;
}
.rr-cart-shipping-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rr-cart-shipping-ico { width: 18px; height: 18px; stroke: var(--fg-base, #000); stroke-width: 1.6; fill: none; flex-shrink: 0; }
.rr-cart-shipping-label {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-base, #000);
}
.rr-cart-shipping-row { display: flex; gap: 8px; margin-bottom: 10px; }
.rr-cep-input {
  flex: 1; min-width: 0; padding: 10px 14px;
  border: 1px solid var(--border-default, #C9C3B2); border-radius: 3px;
  background: var(--bg-raised, #FFF); font-family: var(--ff-body, 'Manrope', sans-serif);
  font-size: 14px; color: var(--fg-base, #000); outline: none; font-variant-numeric: tabular-nums;
}
.rr-cep-input::placeholder { color: var(--fg-subtle, #78725E); font-weight: 300; }
.rr-cep-input:focus { border-color: var(--fg-base, #000); }
.rr-cep-input.is-error { border-color: var(--danger, #B14A38); background: rgba(177,74,56,0.08); }
.rr-cep-btn {
  flex-shrink: 0; min-width: 96px;
  background: var(--action-primary, #000); color: var(--action-on-primary, #F3F0E9);
  border: none; padding: 10px 18px;
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  border-radius: 3px; cursor: pointer;
}
.rr-cep-btn:hover:not(:disabled) { background: #1F1C16; }
.rr-cep-btn.is-loading { background: var(--fg-subtle, #78725E); cursor: wait; }
.rr-cep-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.rr-cep-helper {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-subtle, #78725E); text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; display: inline-block; margin-top: 4px;
}

/* LOADING */
.rr-cart-shipping-status {
  display: flex; align-items: center; gap: 10px; margin: 14px 0;
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted, #54503F);
}
.rr-cep-spinner {
  width: 12px; height: 12px; border: 1.5px solid var(--border-default, #C9C3B2);
  border-top-color: var(--fg-base, #000); border-radius: 50%;
  animation: rr-cep-spin 0.8s linear infinite; flex-shrink: 0;
}
@keyframes rr-cep-spin { to { transform: rotate(360deg); } }
.rr-skel-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 4px; }
.rr-skel {
  background: linear-gradient(90deg, var(--bg-sunken, #E5E1D6) 0%, var(--bg-base, #F3F0E9) 50%, var(--bg-sunken, #E5E1D6) 100%);
  background-size: 200% 100%; animation: rr-skel-pulse 1.4s infinite; border-radius: 3px;
}
@keyframes rr-skel-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.rr-skel-badge { width: 36px; height: 22px; flex-shrink: 0; }
.rr-skel-info { flex: 1; display: flex; flex-direction: column; }
.rr-skel-l1 { height: 11px; width: 65%; }
.rr-skel-l2 { height: 9px; width: 40%; margin-top: 4px; }
.rr-skel-price { width: 56px; height: 13px; flex-shrink: 0; }

/* SUCCESS */
.rr-cart-shipping-area {
  display: flex; align-items: center; gap: 8px; padding: 14px 0 10px;
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-subtle, #78725E);
}
.rr-cart-shipping-area-dot { width: 4px; height: 4px; background: var(--fg-subtle, #78725E); border-radius: 50%; flex-shrink: 0; }
.rr-ship-opt {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid transparent; border-radius: 4px; cursor: pointer; background: transparent;
  margin-bottom: 4px; transition: all 0.15s;
}
.rr-ship-opt:hover { background: var(--bg-sunken, #E5E1D6); }
.rr-ship-opt:focus-visible { outline: 2px solid var(--fg-base, #000); outline-offset: 2px; }
.rr-ship-opt.is-selected { border-color: var(--fg-base, #000); background: var(--bg-raised, #FFF); }
.rr-ship-opt-radio {
  width: 14px; height: 14px; border: 1.5px solid var(--border-default, #C9C3B2); border-radius: 50%;
  flex-shrink: 0; position: relative; transition: border-color 0.15s;
}
.rr-ship-opt.is-selected .rr-ship-opt-radio { border-color: var(--fg-base, #000); }
.rr-ship-opt.is-selected .rr-ship-opt-radio::after { content: ''; position: absolute; inset: 3px; background: var(--fg-base, #000); border-radius: 50%; }
.rr-carrier-badge {
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 2px; flex-shrink: 0; min-width: 36px; text-align: center;
}
.rr-carrier-pac { background: #FFD400; color: #000; }
.rr-carrier-sed { background: #002C73; color: #fff; }
.rr-carrier-jad { background: var(--bg-raised, #FFF); color: var(--fg-base, #000); border: 1px solid var(--border-default, #C9C3B2); }
.rr-ship-opt-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rr-ship-opt-name { font-size: 13.5px; font-weight: 500; color: var(--fg-base, #000); }
.rr-ship-opt-eta { font-size: 12px; color: var(--fg-muted, #54503F); }
.rr-ship-opt-price { font-family: var(--ff-body, 'Manrope', sans-serif); font-size: 14px; font-weight: 600; color: var(--fg-base, #000); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rr-ship-opt-price.is-free {
  color: var(--success, #2D7A4E); font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; font-family: var(--ff-mono, 'JetBrains Mono', monospace);
}
.rr-ship-opt-price-strike { text-decoration: line-through; color: var(--fg-subtle, #78725E); font-size: 11.5px; font-weight: 400; margin-right: 6px; }

/* ERROR */
.rr-cep-error-msg {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: rgba(177,74,56,0.08); border: 1px solid rgba(177,74,56,0.25); border-radius: 4px; margin: 14px 0 10px;
}
.rr-cep-error-msg svg { width: 16px; height: 16px; stroke: var(--danger, #B14A38); stroke-width: 1.8; fill: none; flex-shrink: 0; margin-top: 1px; }
.rr-cep-error-msg span { font-size: 13px; color: var(--danger, #B14A38); line-height: 1.5; }
.rr-cep-retry {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--border-default, #C9C3B2); background: transparent;
  border-radius: 3px; cursor: pointer; color: var(--fg-base, #000);
}
.rr-cep-retry:hover { background: var(--bg-sunken, #E5E1D6); }
.rr-cep-retry svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Linha "Frete" do resumo */
.rr-cart-frete-carrier { color: var(--fg-subtle, #78725E); font-family: var(--ff-mono, 'JetBrains Mono', monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.rr-cart-frete-free { color: var(--success, #2D7A4E); font-weight: 600; }
.rr-cart-frete-muted { color: var(--fg-muted, #54503F); }

/* CTA "Finalizar compra" bloqueado (loading/error) */
.rr-cart-checkout-btn.is-disabled {
  background: var(--border-default, #C9C3B2) !important;
  color: var(--fg-subtle, #78725E) !important;
  cursor: not-allowed; pointer-events: none; box-shadow: none;
}

/* ── Mini-sacola (drawer do header) · re-skin v2 quiet-luxury claro ───────────
   Escopado em .rr-minicart; components.css carrega depois do style.css → vence
   por ordem. Mantém o layout do style.css; alinha cor/superfície/tipografia ao
   idioma da sacola v2 (loja/css/pages/sacola.css). Sem tocar tokens globais. */
.rr-minicart{
  --sk-band:#ECE8E0; --sk-card-2:#FAF8F3;
  --sk-ink:#15120D; --sk-ink-2:#6E6A60; --sk-ink-3:#9C978B;
  --sk-line:rgba(21,18,13,.10); --sk-line-2:rgba(21,18,13,.18);
  --sk-sage:#586B43; --sk-danger:#A8553F; --sk-cta:#15120D; --sk-cta-ink:#F3F0E9;
  background:#fff; border:1px solid var(--sk-line); border-radius:14px;
  box-shadow:0 18px 48px rgba(21,18,13,.12); color:var(--sk-ink);
  font-family:'Manrope',-apple-system,'Segoe UI',system-ui,sans-serif;
}
.rr-minicart-header{ border-bottom:1px solid var(--sk-line); }
.rr-minicart-header h3{ font-family:'Manrope',system-ui,sans-serif; font-weight:800; letter-spacing:-.01em; color:var(--sk-ink); }
.rr-minicart-count{ color:var(--sk-ink-3); }
.rr-minicart-total{ color:var(--sk-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.rr-minicart-empty{ color:var(--sk-ink-3); }
.rr-minicart-empty svg{ color:var(--sk-ink-3); }
.rr-minicart-item:hover{ background:var(--sk-card-2); }
.rr-minicart-thumb{ background:var(--sk-band); border-radius:10px; }
.rr-minicart-name{ color:var(--sk-ink); font-weight:600; }
.rr-minicart-name:hover{ color:var(--sk-ink-2); }
.rr-minicart-variant{ color:var(--sk-ink-3); text-transform:uppercase; letter-spacing:.08em; font-size:11px; }
.rr-minicart-price{ color:var(--sk-ink); font-weight:700; font-variant-numeric:tabular-nums; }
.rr-minicart .rr-qty-group{ border:1px solid var(--sk-line-2); border-radius:999px; overflow:hidden; background:none; }
.rr-minicart .rr-qty-btn{ color:var(--sk-ink); background:none; }
.rr-minicart .rr-qty-btn:hover{ background:var(--sk-band); }
.rr-minicart .rr-qty-value{ color:var(--sk-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.rr-minicart-remove{ color:var(--sk-ink-3); }
.rr-minicart-remove:hover{ color:var(--sk-danger); background:none; }
.rr-minicart-shipping{ border-top:1px solid var(--sk-line); }
.rr-minicart-freeship{ color:var(--sk-sage); }
.rr-minicart-freeship svg{ color:var(--sk-sage); }
.rr-minicart-shipping-text{ color:var(--sk-ink-2); }
.rr-minicart-shipping-text strong{ color:var(--sk-sage); }
.rr-minicart .rr-shipping-bar{ background:var(--sk-band); }
.rr-minicart .rr-shipping-bar-fill{ background:var(--sk-sage); }
.rr-minicart-footer{ border-top:1px solid var(--sk-line); }
.rr-minicart-subtotal-label{ color:var(--sk-ink-2); }
.rr-minicart-subtotal-value{ color:var(--sk-ink); font-weight:800; font-variant-numeric:tabular-nums; }
.rr-minicart-footer .rr-btn{ background:var(--sk-cta); color:var(--sk-cta-ink); border:none; border-radius:10px; font-weight:700; letter-spacing:.06em; }
.rr-minicart-footer .rr-btn:hover{ opacity:.92; }
.rr-minicart-continue{ color:var(--sk-ink-2); }
.rr-minicart-continue:hover{ color:var(--sk-ink); }