/*
Theme Name: Basel Sophie Child
Description: Capa visual segura para Sophie Store sobre el tema Basel.
Author: Sophie Store
Version: 1.1.6
Template: basel
Text Domain: basel-sophie-child
*/

:root {
  --sophie-ink: #251f1d;
  --sophie-paper: #f8f5f1;
  --sophie-white: #fffdfc;
  --sophie-blush: #d8adb2;
  --sophie-burgundy: #7a414b;
  --sophie-muted: #716762;
  --sophie-line: rgba(37, 31, 29, .14);
  --sophie-shadow: 0 18px 50px rgba(55, 38, 34, .1);
}

body {
  color: var(--sophie-ink);
  background: var(--sophie-paper);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

button,
input[type="button"],
input[type="submit"],
.button {
  border-radius: 999px;
  text-transform: none;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
select,
textarea {
  border-color: var(--sophie-line);
  border-radius: 9px;
  background: var(--sophie-white);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--sophie-burgundy);
  outline-offset: 3px;
}

/* Transiciones de navegación -------------------------------------------------
   Los navegadores con transiciones de vista funden una página con la siguiente;
   el resto recibe el fundido de entrada del contenido. Ambos caminos se apagan
   solos con prefers-reduced-motion. */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: sophie-view-out 170ms ease both;
}

::view-transition-new(root) {
  animation: sophie-view-in 280ms ease both;
}

@keyframes sophie-view-out {
  to { opacity: 0; }
}

@keyframes sophie-view-in {
  from { opacity: 0; }
}

@keyframes sophie-content-enter {
  from { opacity: 0; }
}

.site-content,
#ss-main {
  animation: sophie-content-enter 320ms ease both;
}

html {
  scroll-behavior: smooth;
}

a {
  transition: color 160ms ease, opacity 160ms ease;
}

input[type="button"],
input[type="submit"],
.button {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}

input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover {
  transform: translateY(-1px);
}

input[type="button"]:active,
input[type="submit"]:active,
.button:active {
  transform: translateY(0);
}

/* Capas flotantes: en pantallas pequeñas el aviso de promoción conserva una
   sola franja compacta y el acceso de contacto queda por encima, sin tapar CTA. */
@media (max-width: 520px) {
  .woocommerce-store-notice.demo_store {
    display: flex !important;
    align-items: center;
    min-height: 54px;
    padding: 8px 82px 8px 14px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    letter-spacing: .01em;
    text-align: left !important;
  }

  .woocommerce-store-notice__dismiss-link {
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 64px;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 999px;
    font-size: 9px !important;
    line-height: 1 !important;
    text-align: center;
    transform: translateY(-50%) !important;
  }

  .buttonizer.buttonizer-group {
    bottom: 66px !important;
  }

  .basel-cookies-popup {
    right: 12px !important;
    bottom: 66px !important;
    left: 12px !important;
    width: auto !important;
    padding: 13px 14px !important;
    border-radius: 16px !important;
  }

  .basel-cookies-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 12px;
  }

  .cookies-info-text {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: left !important;
  }

  .cookies-buttons {
    margin: 0 !important;
  }

  .cookies-accept-btn {
    padding: 9px 12px !important;
    border: 1px solid rgba(255, 255, 255, .75) !important;
    border-radius: 999px;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  .scrollToTop {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-content,
  #ss-main {
    animation: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  input[type="button"]:hover,
  input[type="submit"]:hover,
  .button:hover {
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}