/* ============================================================
   tpl-artisan.css — Skin "Artisan": cálido y editorial.
   Serif prominente, hero a la izquierda con regla dorada,
   esquinas sobrias, borde 2px, divisores con ornamento.
   Scope: body.sbx-tpl-artisan. El theme llega en vars --sbx-*.
   ============================================================ */

/* Base cálida: leve lavado tierra sobre el fondo del theme */
body.sbx-tpl-artisan {
  background: color-mix(in srgb, var(--sbx-bg) 96%, #8a6f3c);
}

/* Serif editorial en headings, con tracking ligero */
.sbx-tpl-artisan h1, .sbx-tpl-artisan h2, .sbx-tpl-artisan h3, .sbx-tpl-artisan h4 {
  font-weight: 600; letter-spacing: .012em;
}
.sbx-tpl-artisan .sbx-brand { font-weight: 600; letter-spacing: .03em; }

/* Hero alineado a la IZQUIERDA con regla decorativa dorada */
.sbx-tpl-artisan .sbx-hero { text-align: left; padding: 92px 0 76px; }
.sbx-tpl-artisan .sbx-hero-h::before {
  content: ''; display: block; width: 76px; height: 3px;
  background: var(--sbx-accent); margin-bottom: 26px;
}
.sbx-tpl-artisan .sbx-hero-sub { margin-left: 0; margin-right: 0; }
.sbx-tpl-artisan .sbx-hero-badge { letter-spacing: 2.4px; }

/* Divisores de sección: línea + ornamento (rombo del accent) */
.sbx-tpl-artisan .sbx-sec-title { position: relative; padding-bottom: 22px; }
.sbx-tpl-artisan .sbx-sec-title::after {
  content: ''; position: absolute; left: 50%; bottom: 8px;
  width: 88px; height: 1px; background: var(--sbx-accent);
  transform: translateX(-50%);
}
.sbx-tpl-artisan .sbx-sec-title::before {
  content: ''; position: absolute; left: 50%; bottom: 4px;
  width: 9px; height: 9px; background: var(--sbx-bg);
  border: 1px solid var(--sbx-accent);
  transform: translateX(-50%) rotate(45deg); z-index: 1;
}

/* Cards: esquinas discretas y borde 2px */
.sbx-tpl-artisan .sbx-card,
.sbx-tpl-artisan .sbx-testi,
.sbx-tpl-artisan .sbx-product,
.sbx-tpl-artisan .sbx-summary,
.sbx-tpl-artisan .sbx-faq-item {
  border-radius: 4px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--sbx-accent) 26%, transparent);
  box-shadow: none;
}
.sbx-tpl-artisan.sbx-dark .sbx-card,
.sbx-tpl-artisan.sbx-dark .sbx-testi,
.sbx-tpl-artisan.sbx-dark .sbx-product,
.sbx-tpl-artisan.sbx-dark .sbx-summary,
.sbx-tpl-artisan.sbx-dark .sbx-faq-item {
  border-color: color-mix(in srgb, var(--sbx-accent) 38%, transparent);
}
@media (hover: hover) {
  .sbx-tpl-artisan .sbx-product:hover {
    transform: none;
    border-color: var(--sbx-accent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--sbx-accent) 12%, transparent), 0 10px 24px -12px color-mix(in srgb, var(--sbx-accent) 45%, transparent);
  }
}
.sbx-tpl-artisan .sbx-product-img, .sbx-tpl-artisan .sbx-pdetail-img { border-radius: 0; }
.sbx-tpl-artisan .sbx-gallery img, .sbx-tpl-artisan .sbx-gallery .sbx-ph { border-radius: 2px; }

/* Botones rectangulares, sobrios */
.sbx-tpl-artisan .sbx-btn {
  border-radius: 2px; letter-spacing: .06em; text-transform: uppercase;
  font-size: 14px; padding: 14px 28px;
}
@media (hover: hover) {
  .sbx-tpl-artisan .sbx-btn:hover {
    transform: none;
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--sbx-primary) 55%, transparent);
  }
}
.sbx-tpl-artisan .sbx-btn:active { filter: brightness(.97); }
.sbx-tpl-artisan .sbx-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--sbx-accent) 75%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sbx-accent) 20%, transparent);
}
.sbx-tpl-artisan .sbx-chip { border-radius: 2px; border-width: 2px; }
.sbx-tpl-artisan .sbx-input, .sbx-tpl-artisan .sbx-qty { border-radius: 2px; }

/* Testimonios con pluma editorial */
.sbx-tpl-artisan .sbx-testi blockquote { font-family: var(--sbx-font-head); font-size: 17px; }

/* Íconos cuadrados con marco */
.sbx-tpl-artisan .sbx-icon {
  border-radius: 2px;
  background: transparent;
  border: 2px solid color-mix(in srgb, var(--sbx-accent) 42%, transparent);
}

/* Números de pasos en serif */
.sbx-tpl-artisan .sbx-step-n {
  border-radius: 2px; font-family: var(--sbx-font-head); background: var(--sbx-accent);
}

/* Header con doble línea editorial */
.sbx-tpl-artisan .sbx-header {
  border-bottom: 2px solid color-mix(in srgb, var(--sbx-accent) 32%, transparent);
}
.sbx-tpl-artisan .sbx-nav a { letter-spacing: .04em; }

/* Banda CTA enmarcada */
.sbx-tpl-artisan .sbx-ctaband {
  border-top: 3px solid var(--sbx-accent);
  border-bottom: 3px solid var(--sbx-accent);
}

/* Footer cálido */
.sbx-tpl-artisan .sbx-footer { margin-top: 56px; }
.sbx-tpl-artisan .sbx-footer-brand { letter-spacing: .04em; }

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}