/* TechSite global base */
:root{
  --ts-ease-out: cubic-bezier(0.23,1,0.32,1);
  --ts-ease-in-out: cubic-bezier(0.77,0,0.175,1);
  --ts-ease-drawer: cubic-bezier(0.32,0.72,0,1);
  --ts-ease-pop: cubic-bezier(0.34,1.56,0.64,1);

  /* ===== Tokens de tema (etapa 1: header/footer/inicio + paginas nuevas) ===== */
  --ts-bg: #f7f7f8;
  --ts-surface: #ffffff;
  --ts-surface-2: #f5f5f6;
  --ts-ink: #111318;
  --ts-muted: #62656d;
  --ts-line: #e6e7ea;
  --ts-accent: #ffd700;
  --ts-accent-ink: #0c0c0e;
  --ts-header-bg: rgba(0,0,0,.95);
  --ts-footer-bg: #000000;
}
:root[data-theme="dark"]{
  --ts-bg: #131315;
  --ts-surface: #1b1b1e;
  --ts-surface-2: #202023;
  --ts-ink: #f1f1f3;
  --ts-muted: #a4a6ac;
  --ts-line: #303033;
  --ts-accent: #ffd700;
  --ts-accent-ink: #0c0c0e;
  --ts-header-bg: rgba(0,0,0,.97);
  --ts-footer-bg: #000000;
}

/* Red de contencion global: paginas que todavia no tienen modo oscuro a medida
   (PDP, catalogo, checkout, landings de profesionales, etc. - quedan para la
   etapa 2) no deben verse rotas si el usuario activa el toggle. Esto solo
   pareja fondo/texto base; el diseno fino de esas paginas se hace en la
   proxima etapa. */
:root[data-theme="dark"] body{
  background: var(--ts-bg);
  color: var(--ts-ink);
}
:root[data-theme="dark"] #page,
:root[data-theme="dark"] #main-content,
:root[data-theme="dark"] #left-area,
:root[data-theme="dark"] .container{
  background: var(--ts-bg);
  color: var(--ts-ink);
}

/* ===== Toggle de modo oscuro (header) ===== */
.theme-toggle-wrapper{display:inline-flex;align-items:center}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:0; border-radius:50%;
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer;
  transition:background .18s ease, transform .18s var(--ts-ease-out);
}
.theme-toggle:hover{background:rgba(255,255,255,.16)}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle:focus-visible{outline:2px solid var(--ts-accent);outline-offset:2px}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .theme-toggle-icon--moon{display:none}
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon--sun{display:none}
:root[data-theme="dark"] .theme-toggle .theme-toggle-icon--moon{display:block}

@media (prefers-reduced-motion: reduce){
  .theme-toggle{transition:none}
  .theme-toggle:active{transform:none}
}

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

.single-product .woocommerce-product-gallery img {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.single-product .woocommerce-product-gallery__image {
  overflow: hidden !important;
}

.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
  height: auto !important;
}

.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery__image img {
  position: relative !important;
}

.et_pb_module .onsale,
.woocommerce span.onsale,
.woocommerce-page span.onsale {
  display: none !important;
}

body.et-fb,
body.et_divi_builder {
  padding-top: 0 !important;
}

body:not(.et-fb):not(.et_divi_builder) {
  padding-top: 60px;
}


.woocommerce ul.products li.product .price ins .currency-price, .woocommerce ul.products li.product .price ins .woocommerce-Price-amount, .woocommerce ul.products li.product .price ins .woocommerce-Price-amount bdi, .woocommerce ul.products li.product .price ins .woocommerce-Price-currencySymbol, .woocommerce ul.products li.product .price>.amount, .woocommerce ul.products li.product .price>.currency-price, .woocommerce ul.products li.product .price>.woocommerce-Price-amount, .woocommerce ul.products li.product .price>.woocommerce-Price-amount bdi, .woocommerce ul.products li.product .price>.woocommerce-Price-currencySymbol {
    display: flex !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #000 !important;
}