/*
 * VINITOQ — SISTEMA VISUAL GLOBAL QUELHUE
 *
 * Esta hoja se carga después de los estilos históricos de cada página.
 * Centraliza el brandbook y mantiene aliases compatibles con el código actual.
 *
 * Fuente pendiente:
 * cuando se incorpore la licencia web de Argesta, colocar los archivos en
 * /fuentes/argesta/ y declarar aquí sus variantes mediante @font-face.
 */

:root {
  /* Tipografía */
  --font-display: "Argesta", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Paleta oficial */
  --color-cream: #FCF5E5;
  --color-ink: #000000;
  --color-warm-gray: #D7D0C9;
  --color-white: #FFFFFF;
  --color-green-dark: #1A3E39;
  --color-green: #3D8367;
  --color-green-fresh: #53AF85;
  --color-green-soft: #78B19F;
  --color-green-alt: #3E8443;
  --color-coral: #EA6D46;
  --color-red: #E7482D;
  --color-magenta: #DE4663;
  --color-burgundy: #9E2A5F;
  --color-pink-soft: #F4C6CF;
  --color-gold: #C5A03F;
  --color-gold-earth: #ACA56F;
  --color-blue: #3A7FB4;
  --color-blue-deep: #0C2975;
  /* Acentos de marca: fuertes sobre superficies pastel. */
  --color-sage: #53AF85;
  --color-sage-soft: #78B19F;
  --color-terracotta: #EA6D46;
  --color-coral-soft: #DE4663;
  --color-wine: #9E2A5F;

  /* Jerarquía */
  --text-primary: var(--color-ink);
  --text-secondary: rgba(0, 0, 0, .68);
  --surface-page: var(--color-cream);
  --surface-card: var(--color-white);
  --border-subtle: rgba(0, 0, 0, .11);
  --border-strong: rgba(0, 0, 0, .2);

  /* Escala tipográfica */
  --font-size-xs: .6875rem;
  --font-size-sm: .8125rem;
  --font-size-base: clamp(1rem, 1.1vw, 1.125rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.75rem);
  --font-size-h2: clamp(2.3rem, 5vw, 4.5rem);
  --font-size-h1: clamp(3rem, 7vw, 6.5rem);

  /* Geometría y ritmo */
  --container-width: 1200px;
  --container-text: 68ch;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 7rem;
  --shadow-card: 0 14px 36px rgba(26, 62, 57, .08);
  --shadow-raised: 0 18px 48px rgba(26, 62, 57, .12);
  --transition-fast: 180ms ease;
  --transition-base: 260ms ease;

  /* Compatibilidad con las hojas existentes */
  --bg: var(--surface-page);
  --ink: var(--color-ink);
  --surface: var(--color-white);
  --surface-2: var(--color-warm-gray);
  --cream-light: var(--color-cream);
  --wine-image-bg: var(--color-cream);
  --text: var(--text-primary);
  --text-soft: var(--text-secondary);
  --cream: var(--color-cream);
  --white: var(--color-white);
  --teal: var(--color-green-fresh);
  --teal-deep: var(--color-green);
  --coral: var(--color-coral);
  --pink: var(--color-magenta);
  --rose: var(--color-burgundy);
  --blue: var(--color-blue);
  --blue-deep: var(--color-blue-deep);
  --gold: var(--color-gold);
  --olive: var(--color-gold-earth);
  --border: var(--border-subtle);
  --line: var(--border-subtle);
  --error: var(--color-burgundy);
  --shadow-soft: var(--shadow-card);
  --wine-section-surface: #F5EBDD;
  --primary-cta-height: 48px;
  --primary-cta-radius: 12px;
  --primary-cta-padding: 24px;
}

/* Personalidad cromática por producto */
.box-page--tranqui {
  --coral: var(--color-sage);
  --teal: var(--color-sage-soft);
  --teal-deep: var(--color-green-dark);
}

.box-page--picante {
  --coral: var(--color-terracotta);
  --teal: var(--color-coral-soft);
  --teal-deep: var(--color-wine);
}

/* Base tipográfica */
body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

body {
  color: var(--text-primary);
  font-weight: var(--font-weight-regular);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
.hero-h1,
.section-h2,
.box-contents-header h2,
.plan-name,
.journey-step__phase,
.mp-detail-heading h3,
.product-review > p,
.checkout-title,
.checkout-plan-name,
.summary-total strong {
  font-family: var(--font-display);
}

h3,
h4,
nav,
button,
input,
select,
textarea,
label {
  font-family: var(--font-body);
}

.box-contents-copy h3,
.checkout-choice-card strong,
.product-description > p,
.mp-detail-grid p,
.mp-detail-description-block p {
  font-family: var(--font-body);
}

h1,
h2,
.hero-h1,
.section-h2,
.box-contents-header h2,
.plan-name,
.mp-detail-heading h3,
.checkout-title {
  font-weight: var(--font-weight-regular);
  letter-spacing: -.035em;
}

p {
  font-weight: var(--font-weight-regular);
}

.hero-body,
.manifesto-intro,
.section-sub,
.quienes-text,
.product-description > p,
.mp-detail-description-block p,
.checkout-subtitle {
  max-width: var(--container-text);
}

/* Fondo editorial limpio */
body,
.checkout-page,
.mp-page {
  background-color: var(--surface-page) !important;
  background-image: none !important;
}

body::before {
  opacity: .015 !important;
}

.manifesto,
.box-contents,
.planes,
.includes,
.quienes,
.lanzamiento,
.cta-final,
.mp-wines,
.mp-detail-section,
.product-experience,
.mp-box-card-wrap,
.product-reviews {
  background-color: var(--surface-page) !important;
  background-image: none !important;
}

.penguin-circle::before,
.cta-final::before {
  background: none !important;
}

.hero::after,
.lanzamiento::after {
  content: none !important;
}

/* Navegación */
nav,
.mp-header,
.checkout-nav {
  font-family: var(--font-body);
}

.mp-header,
.checkout-nav {
  border-bottom-color: var(--border-subtle);
  background-color: rgba(252, 245, 229, .94);
}

.nav-links a,
.mp-nav a,
.footer-nav-col a,
.mp-footer-nav-col a,
.checkout-nav button {
  font-weight: var(--font-weight-semibold);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.nav-links a:hover,
.mp-nav a:hover,
.footer-nav-col a:hover,
.mp-footer-nav-col a:hover {
  color: var(--color-green-dark);
}

.box-page--picante .mp-nav a:hover,
.box-page--picante .mp-footer-nav-col a:hover {
  color: var(--color-coral);
}

/* Controles y botones */
.btn-primary,
.btn-ghost,
.nav-cta,
.plan-btn,
.mp-btn,
.mp-nav-cta,
.mp-detail-buy,
.mp-box-buy,
.club-popup__button,
.checkout-next-button,
.checkout-pay-button {
  min-height: var(--primary-cta-height);
  padding: 0 var(--primary-cta-padding);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-radius: var(--primary-cta-radius);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.nav-cta,
.mp-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-page .hero-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-page .btn-primary,
.home-page .nav-cta,
.home-page .club-popup__button,
.checkout-page .btn-primary {
  border-color: var(--color-green-dark);
  background: var(--color-green-dark);
  color: var(--color-cream);
}

.home-page .nav-cta {
  background: var(--color-green-dark) !important;
  color: var(--color-cream) !important;
}

.home-page .btn-primary:hover,
.home-page .nav-cta:hover,
.home-page .club-popup__button:hover,
.checkout-page .btn-primary:hover {
  border-color: var(--color-green);
  background: var(--color-green);
  color: var(--color-white);
}

.home-page .nav-cta:hover {
  background: var(--color-green) !important;
  color: var(--color-white) !important;
}

.home-page .btn-ghost,
.home-page .plan-card:first-child .plan-btn,
.checkout-back-button {
  border-color: var(--color-green-dark);
  background: transparent;
  color: var(--color-green-dark);
}

.home-page .btn-ghost:hover,
.home-page .plan-card:first-child .plan-btn:hover,
.checkout-back-button:hover {
  background: rgba(120, 177, 159, .18);
  color: var(--color-green-dark);
}

.home-page .plan-card.featured .plan-btn,
.box-page--picante .mp-btn-primary,
.box-page--picante .mp-nav-cta,
.box-page.box-page--picante .mp-detail-buy,
.box-page--picante .mp-box-buy {
  border-color: var(--color-coral);
  background: var(--color-coral);
  color: var(--color-white);
}

.home-page .plan-card.featured .plan-btn:hover,
.box-page--picante .mp-btn-primary:hover,
.box-page--picante .mp-nav-cta:hover,
.box-page.box-page--picante .mp-detail-buy:hover,
.box-page--picante .mp-box-buy:hover {
  border-color: var(--color-red);
  background: var(--color-red);
  color: var(--color-white);
}

.box-page--tranqui .mp-btn-primary,
.box-page--tranqui .mp-nav-cta,
.box-page.box-page--tranqui .mp-detail-buy,
.box-page--tranqui .mp-box-buy {
  border-color: var(--color-green);
  background: var(--color-green);
  color: var(--color-white);
}

.box-page--tranqui .mp-btn-primary:hover,
.box-page--tranqui .mp-nav-cta:hover,
.box-page.box-page--tranqui .mp-detail-buy:hover,
.box-page--tranqui .mp-box-buy:hover {
  border-color: var(--color-green-dark);
  background: var(--color-green-dark);
  color: var(--color-white);
}

.box-page--tranqui .mp-btn-ghost {
  border-color: var(--color-green);
  color: var(--color-green-dark);
}

.box-page--picante .mp-btn-ghost {
  border-color: var(--color-coral);
  color: var(--color-ink);
}

/* Tarjetas y superficies */
.plan-card,
.mp-detail-card,
.mp-box-card,
.product-review,
.checkout-card,
.checkout-summary,
.checkout-empty-state,
.club-popup__panel {
  border-color: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.plan-card {
  background: var(--surface-card);
}

.plan-card:first-child {
  border-color: rgba(61, 131, 103, .42);
}

.plan-card.featured {
  border-color: rgba(234, 109, 70, .64);
}

.plan-item {
  border-bottom-color: rgba(0, 0, 0, .1);
}

.product-review {
  background: rgba(255, 255, 255, .72);
}

.checkout-input,
.checkout-textarea,
.checkout-select {
  min-height: 48px;
  border-color: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
}

.checkout-input:focus,
.checkout-textarea:focus,
.checkout-select:focus {
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(83, 175, 133, .2);
}

.product-carousel__dot {
  position: relative;
  width: 28px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: transparent;
}

.product-carousel__dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: rgba(61, 131, 103, .28);
  translate: -50% -50%;
  transition:
    width var(--transition-base),
    background-color var(--transition-base);
}

.product-carousel__dot.is-active {
  width: 32px;
  background: transparent;
}

.product-carousel__dot.is-active::before {
  width: 20px;
  background: var(--teal);
}

/* Foco accesible compartido */
:where(
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [tabindex]
):focus-visible {
  outline: 3px solid var(--color-gold) !important;
  outline-offset: 3px !important;
}

::selection {
  background: var(--color-green-soft);
  color: var(--color-ink);
}

/* =========================================================
   ETAPA 2 — COMPOSICIÓN EDITORIAL, COLOR Y CALIDEZ
   ========================================================= */

/* El verde profundo queda como apoyo; los CTA recuperan color y energía. */
.home-page .btn-primary,
.home-page .club-popup__button,
.checkout-page .btn-primary {
  border-color: var(--color-terracotta);
  background: var(--color-terracotta);
  color: var(--color-ink);
}

.home-page .btn-primary:hover,
.home-page .club-popup__button:hover,
.checkout-page .btn-primary:hover {
  border-color: var(--color-wine);
  background: var(--color-wine);
  color: var(--color-white);
}

.home-page .nav-cta {
  border-color: var(--color-sage);
  background: var(--color-sage) !important;
  color: var(--color-ink) !important;
}

.home-page .nav-cta:hover {
  background: var(--color-sage-soft) !important;
  color: var(--color-ink) !important;
}

.box-page--tranqui .mp-btn-primary,
.box-page--tranqui .mp-nav-cta,
.box-page.box-page--tranqui .mp-detail-buy,
.box-page--tranqui .mp-box-buy {
  border-color: var(--color-sage);
  background: var(--color-sage);
  color: var(--color-ink);
}

.box-page--picante .mp-btn-primary,
.box-page--picante .mp-nav-cta,
.box-page.box-page--picante .mp-detail-buy,
.box-page--picante .mp-box-buy,
.home-page .plan-card.featured .plan-btn {
  border-color: var(--color-terracotta);
  background: var(--color-terracotta);
  color: var(--color-ink);
}

.box-page--picante .mp-btn-primary:hover,
.box-page--picante .mp-nav-cta:hover,
.box-page.box-page--picante .mp-detail-buy:hover,
.box-page--picante .mp-box-buy:hover,
.home-page .plan-card.featured .plan-btn:hover {
  border-color: var(--color-wine);
  background: var(--color-wine);
  color: var(--color-white);
}

/* Hero: acción principal sólida y secundaria como enlace editorial subrayado. */
.home-page .hero-actions,
.box-page .mp-hero-actions {
  gap: 18px;
}

.home-page .hero-actions .btn-ghost,
.box-page .mp-hero-actions .mp-btn-ghost {
  min-height: var(--primary-cta-height);
  padding-inline: 6px;
  display: inline-flex;
  align-self: center;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.2;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.home-page .hero-actions .btn-ghost {
  color: var(--color-burgundy);
}

.box-page--tranqui .mp-hero-actions .mp-btn-ghost {
  color: var(--color-green-dark);
}

.box-page--picante .mp-hero-actions .mp-btn-ghost {
  color: var(--color-burgundy);
}

.home-page .hero-actions .btn-ghost:hover,
.box-page .mp-hero-actions .mp-btn-ghost:hover {
  background: transparent;
  color: var(--color-coral);
  box-shadow: none;
}

/* Heroes de producto: el nombre del box vuelve a liderar la composición. */
.box-page .mp-hero h1 {
  max-width: 1000px;
  font-size: clamp(80px, 10vw, 136px);
  line-height: .84;
}

.box-page .mp-hero p {
  max-width: 500px;
  font-size: 18px;
  line-height: 1.6;
}

/* Planes como dobles páginas de una misma revista. */
.home-page .planes-grid {
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.home-page .plan-card {
  min-height: 0;
  padding: clamp(26px, 3.5vw, 48px);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(172, 165, 111, .13);
}

.home-page .plan-card:first-child {
  margin-top: 72px;
  border-color: rgba(98, 139, 112, .4);
  background:
    linear-gradient(
      145deg,
      var(--color-cream) 0%,
      rgba(145, 168, 121, .3) 68%,
      rgba(98, 139, 112, .2) 100%
    );
}

.home-page .plan-card.featured {
  border-color: rgba(198, 101, 76, .4);
  background:
    linear-gradient(
      145deg,
      var(--color-cream) 0%,
      rgba(213, 122, 98, .22) 58%,
      rgba(198, 101, 76, .15) 78%,
      rgba(130, 63, 75, .14) 100%
    );
}

.home-page .plan-card.featured::before {
  background: var(--color-wine);
  color: var(--color-white);
}

.home-page .plan-card:hover {
  border-color: currentColor;
  box-shadow: 0 26px 58px rgba(172, 165, 111, .18);
  transform: translateY(-3px);
}

.home-page .plan-visual {
  margin: 4px 0 clamp(26px, 3vw, 38px);
  border: 0;
  border-radius: calc(var(--radius-lg) - 6px);
  box-shadow: none;
}

.home-page .plan-name {
  margin-bottom: 22px;
  line-height: .72;
}

.home-page .plan-name span,
.home-page .plan-name small {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
}

.home-page .plan-name span {
  font-size: clamp(4.6rem, 7.4vw, 6.8rem);
  letter-spacing: -.065em;
}

.home-page .plan-name small {
  margin-top: .28em;
  font-size: clamp(2.25rem, 3.7vw, 3.65rem);
  letter-spacing: -.035em;
}

.home-page .plan-desc {
  max-width: 40ch;
  margin-bottom: 32px;
  font-size: 14px;
  line-height: 1.65;
}

.home-page .plan-includes {
  counter-reset: plan-benefit;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(18px, 2.4vw, 34px);
  align-content: start;
}

.home-page .plan-includes-title {
  grid-column: 1 / -1;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: var(--font-weight-regular);
  letter-spacing: -.025em;
}

.home-page .plan-item {
  min-width: 0;
  padding: 13px 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  border-bottom-color: rgba(0, 0, 0, .12);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.45;
}

.home-page .plan-card .plan-includes,
.home-page .plan-card .plan-includes-title,
.home-page .plan-card .plan-item {
  width: 100%;
}

.home-page .plan-item::before {
  content: none;
}

.home-page .pi-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  overflow: hidden;
}

.home-page .pi-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transform: scale(2);
  transform-origin: center;
}

.home-page .plan-card:first-child .plan-btn {
  border-color: var(--color-sage);
  background: var(--color-sage-soft);
  color: var(--color-ink);
}

.home-page .plan-card .plan-btn {
  min-height: var(--primary-cta-height);
  padding: 0 var(--primary-cta-padding);
  border-radius: var(--primary-cta-radius);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: .08em;
}

.home-page .plan-card:first-child .plan-btn:hover {
  border-color: var(--color-green-dark);
  background: var(--color-green-dark);
  color: var(--color-white);
}

/* Los vinos del mes: una sola superficie cálida en ambos productos. */
.box-page .mp-wines,
.box-page .mp-detail-section,
.box-page #wine-detail,
.box-page .mp-detail-card,
.box-page .mp-detail-top,
.box-page .mp-detail-left,
.box-page .mp-detail-photo,
.box-page .mp-detail-right,
.box-page .mp-detail-bottom,
.box-page .mp-detail-curiosities-block {
  background-color: var(--wine-section-surface) !important;
  background-image: none !important;
}

.box-page .mp-detail-section {
  margin-top: 0;
}

.box-page .mp-section-head,
.box-page .mp-wine-grid {
  background: transparent;
}

.box-page .mp-wine-card {
  background: var(--wine-section-surface);
}

.box-page .mp-detail-top {
  grid-template-columns: 34% 66%;
}

.box-page .mp-detail-left {
  min-height: 560px;
  padding: 8px;
}

.box-page .mp-detail-photo {
  width: auto;
  height: 520px;
  min-height: 520px;
  aspect-ratio: .32 / 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Las fotos de Box 4 traen más aire lateral: un marco más angosto
   iguala el protagonismo real de la botella sin tocar su altura. */
.box-page--picante .mp-detail-photo {
  aspect-ratio: .24 / 1;
}

.box-page .mp-detail-photo img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  background: transparent !important;
  clip-path: none;
  transform: scale(1.01);
}

/* Páginas de producto: atmósferas hermanas, no clones cromáticos. */
.box-page--tranqui .mp-detail-card,
.box-page--tranqui .mp-box-card {
  border-color: rgba(98, 139, 112, .38);
}

.box-page--tranqui .mp-box-card {
  background: rgba(145, 168, 121, .2);
}

.box-page--picante .mp-detail-card,
.box-page--picante .mp-box-card {
  border-color: rgba(198, 101, 76, .36);
}

.box-page--picante .mp-box-card {
  background: rgba(213, 122, 98, .16);
}

.box-page .mp-detail-grid span,
.box-page .mp-detail-description-block > span {
  letter-spacing: .16em;
}

.box-page--tranqui .product-review:nth-child(odd) {
  background: rgba(145, 168, 121, .2);
}

.box-page--tranqui .product-review:nth-child(even) {
  background: rgba(98, 139, 112, .12);
}

.box-page--picante .product-review:nth-child(odd) {
  background: rgba(213, 122, 98, .16);
}

.box-page--picante .product-review:nth-child(even) {
  background: rgba(130, 63, 75, .11);
}

/* Checkout cálido: menos interfaz bancaria, más cierre de experiencia. */
.checkout-page .checkout-card {
  background: rgba(255, 255, 255, .58);
}

.checkout-page .checkout-summary {
  border-color: rgba(197, 160, 63, .3);
  background: rgba(197, 160, 63, .09);
}

.checkout-page .checkout-progress-step.is-active .checkout-progress-number {
  border-color: var(--color-coral);
  background: var(--color-coral);
  color: var(--color-ink);
}

@media (max-width: 980px) {
  .box-page .mp-detail-top {
    grid-template-columns: 1fr;
  }

  .box-page .mp-detail-left {
    min-height: auto;
    border-right: 0;
  }

  .box-page .mp-detail-photo {
    height: 380px;
    min-height: 380px;
  }
}

@media (max-width: 768px) {
  :root {
    --space-xl: 3rem;
    --space-2xl: 4.5rem;
  }

  .checkout-shell,
  .product-description,
  .product-reviews,
  .mp-detail-section {
    max-width: 100%;
  }

  .home-page .nav-links {
    display: flex;
    align-items: center;
  }

  .home-page .nav-links a:not(.nav-cta) {
    display: none;
  }

  .home-page .nav-cta {
    min-height: 44px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    font-size: 10px !important;
  }

  .checkout-page .nav-cta,
  .checkout-back-button,
  .checkout-edit-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .home-page .plan-card:first-child {
    margin-top: 0;
  }

  .home-page .plan-name span {
    font-size: clamp(3.6rem, 18vw, 4.8rem);
  }

  .home-page .plan-name small {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .btn-primary,
  .btn-ghost,
  .plan-btn,
  .mp-btn,
  .mp-nav-cta,
  .mp-detail-buy,
  .mp-box-buy,
  .club-popup__button,
  .checkout-next-button,
  .checkout-pay-button {
    min-height: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}