/* ==========================================================================
   Lutz Ferrando · Reskin global (todas las páginas excepto home)
   Se carga en layout.tpl SOLO cuando template != 'home' (el home usa su
   propio lf-estilo.css + lf-home.tpl, markup bespoke aprobado aparte).

   Esta hoja reskinea el tema Morelia real (Tienda Nube) para que se sienta
   de la misma familia visual que el home rediseñado, usando SIEMPRE las
   clases reales del tema (leídas de los snipplets .tpl) — nada de markup
   inventado. No toca layout, grid, ni JS: solo color/tipografía/forma.

   GOTCHA IMPORTANTE (leer antes de tocar esta sección):
   Morelia define TODO su sistema de color con custom properties en :root
   (ver static/css/style-tokens.tpl): --main-foreground, --main-background,
   --button-background, --header-background, --footer-background, etc.
   Botones, forms, chips, alerts, cards, tabs, labels y modales YA consumen
   esas variables. Por eso la Sección 0 remapea esas variables a nuestra
   marca: reskinea ~80% del tema sin pelear clase por clase.
   PERO ojo: las variables "-opacity-XX" (--main-foreground-opacity-10, etc)
   NO son un calc() sobre la base: Tienda Nube las precalcula server-side
   como hex+alpha fijo a partir del color que esté cargado en el panel de
   colores. Redefinir la base en este archivo (que carga DESPUÉS) no las
   recalcula. Por eso más abajo se redefinen también esas variantes de
   opacidad, calculadas a mano con los mismos sufijos hex que usa Tienda
   Nube, para que bordes/placeholders/hovers no queden con el color viejo
   del panel de administración.
   ========================================================================== */

/* ============================================================
   0. TOKENS DE MARCA + REMAPEO DE VARIABLES NATIVAS DE MORELIA
   ============================================================ */
:root {
  /* Paleta exacta (idéntica a rediseno/estilo.css) */
  --verde: #069280;
  --verde-osc: #0A7E6D;
  --verde-nte: #086A5C;
  --verde-cl: #14B49E;
  --verde-txt: #0A7A67;
  --menta: #D3F0EA;
  --agua: #E7F5F1;
  --agua-2: #F2FAF8;
  --tinta: #0E1C18;
  --tinta-2: #33413C;
  --gris: #5E6B66;
  --linea: #E8ECE9;
  --linea-2: #EFF2F0;
  --hueso: #F7F9F8;
  --crema: #E7F4EF;
  --beige-sec: #F2F5F4;
  --bronce: #B08D57;
  --bronce-cl: #CBAE80;

  /* Tokens propios de esta hoja (forma / sombra / easing) */
  --lf-radio: 14px;
  --lf-radio-lg: 20px;
  --lf-sombra-xs: 0 1px 2px rgba(14, 28, 24, .05);
  --lf-sombra: 0 1px 2px rgba(14, 28, 24, .04), 0 10px 30px rgba(14, 28, 24, .07);
  --lf-sombra-alta: 0 6px 16px rgba(14, 28, 24, .08), 0 24px 48px rgba(14, 28, 24, .16);
  --lf-ease: cubic-bezier(.22, .68, 0, 1);

  /* -- Remapeo de las variables que Morelia usa en TODO el tema -- */
  --main-background: var(--hueso);
  --main-foreground: var(--tinta);
  --accent-color: var(--verde-txt);

  --button-background: var(--verde-txt);
  --button-foreground: #ffffff;

  --label-background: var(--verde-txt);
  --label-foreground: #ffffff;

  --adbar-background: var(--verde-osc);
  --adbar-foreground: #ffffff;

  --header-background: var(--hueso);
  --header-foreground: var(--tinta);
  --header-transparent-foreground: var(--tinta);

  --footer-background: var(--verde-nte);
  --footer-foreground: #ffffff;

  --newsletter-background: var(--verde-osc);
  --newsletter-foreground: #ffffff;

  --services-background: var(--beige-sec);
  --services-foreground: var(--tinta);

  /* Alertas: mismo criterio que el prototipo (sin colores de sistema genéricos) */
  --success: #3E8E67;
  --danger: #B3564C;
  --warning: #B08D57;
  --info: var(--verde-txt);

  /* Tipografía: Aeonik ya viene cargada globalmente por lf-fonts.css */
  --heading-font: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --body-font: 'Aeonik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --title-font-weight: 500;

  /* Botones e inputs filosos, como pide el diseño (radio 0) */
  --border-radius: 0px;

  /* -- Variantes de opacidad recalculadas a mano (ver gotcha arriba) --
     Mismos sufijos hex que usa style-tokens.tpl: 03=08 05=0D 07=12 10=1A
     20=33 30=4D 40=66 50=80 60=99 70=B3 80=CC 90=E6 95=F2 */
  --main-foreground-opacity-03: #0E1C1808;
  --main-foreground-opacity-05: #0E1C180D;
  --main-foreground-opacity-07: #0E1C1812;
  --main-foreground-opacity-10: #0E1C181A;
  --main-foreground-opacity-20: #0E1C1833;
  --main-foreground-opacity-30: #0E1C184D;
  --main-foreground-opacity-40: #0E1C1866;
  --main-foreground-opacity-50: #0E1C1880;
  --main-foreground-opacity-80: #0E1C18CC;

  --main-background-opacity-20: #FCFBF833;
  --main-background-opacity-30: #FCFBF84D;
  --main-background-opacity-50: #FCFBF880;
  --main-background-opacity-80: #FCFBF8CC;
  --main-background-opacity-90: #FCFBF8E6;
  --main-background-opacity-95: #FCFBF8F2;

  --header-foreground-opacity-20: #0E1C1833;
  --header-foreground-opacity-30: #0E1C184D;

  --news-foreground-opacity-30: #FFFFFF4D;
  --news-foreground-opacity-50: #FFFFFF80;

  --footer-foreground-opacity-10: #FFFFFF1A;
  --footer-foreground-opacity-20: #FFFFFF33;
  --footer-foreground-opacity-30: #FFFFFF4D;
  --footer-foreground-opacity-60: #FFFFFF99;
  --footer-foreground-opacity-80: #FFFFFFCC;
}

/* ============================================================
   1. BASE / TIPOGRAFÍA / ENLACES / FOCO
   ============================================================ */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--verde-cl);
  color: #fff;
}

a:hover,
a:focus {
  color: var(--verde-txt);
}

/* Foco visible de teclado (a11y), en línea con el resto del sitio */
:where(a, button, input, textarea, select, summary, .btn, .btn-utility, .nav-list-link, .form-control, .form-select):focus-visible {
  outline: 2px solid var(--verde-txt);
  outline-offset: 2px;
}

/* ============================================================
   2. BOTONES
   ============================================================ */
.btn {
  border-radius: 0;
  letter-spacing: .01em;
  font-weight: 500;
}

.btn-primary,
.btn-add-to-cart {
  font-weight: 500;
  box-shadow: 0 6px 16px rgba(15, 87, 72, .18);
  transition: background .2s var(--lf-ease), transform .2s var(--lf-ease), box-shadow .2s var(--lf-ease), opacity .2s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-add-to-cart:hover,
.btn-add-to-cart:focus {
  background-color: var(--verde-nte);
  color: var(--button-foreground);
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 87, 72, .28);
}
.btn-primary[disabled],
.btn-primary.disabled,
.btn-add-to-cart[disabled],
.btn-add-to-cart.disabled {
  background-color: var(--gris);
  color: #fff;
  transform: none;
  box-shadow: none;
  opacity: .7;
}
.btn-primary.nostock,
.btn-add-to-cart.nostock {
  background-color: var(--gris);
}

.btn-default {
  background-color: #ffffff;
  color: var(--tinta);
  border: 1.5px solid var(--linea);
  box-shadow: var(--lf-sombra-xs);
}
.btn-default:hover,
.btn-default:focus {
  background-color: #ffffff;
  border-color: var(--verde);
  color: var(--verde-osc);
  opacity: 1;
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--agua-2);
  color: var(--tinta);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--agua);
  opacity: 1;
}

.btn-link {
  color: var(--verde-txt);
  font-weight: 500;
}
.btn-link:hover,
.btn-link:focus {
  color: var(--verde-nte);
  opacity: 1;
}

/* Íconos utilitarios del header (buscar / cuenta / carrito) */
.btn-utility {
  border-radius: 999px;
  transition: background .18s var(--lf-ease), color .18s var(--lf-ease);
}
.btn-utility:hover,
.btn-utility:focus {
  background: var(--agua);
  color: var(--verde-osc);
  opacity: 1;
}

/* Swatches de variantes (color / talle) */
.btn-variant {
  border-radius: 999px;
  border-color: var(--linea);
  transition: border-color .18s var(--lf-ease), color .18s var(--lf-ease), background .18s var(--lf-ease);
}
.btn-variant:hover {
  border-color: var(--verde);
  color: var(--verde-osc);
}
.btn-variant.selected {
  border-color: var(--verde-txt);
  color: var(--verde-txt);
  background: var(--agua-2);
}
.btn-variant-color .btn-variant-content-square {
  border-radius: 999px;
  overflow: hidden;
}

/* Steppers de cantidad (ficha de producto y carrito) */
.form-quantity-icon {
  color: var(--tinta-2);
  transition: color .18s var(--lf-ease);
}
.form-quantity-icon:hover {
  color: var(--verde-txt);
}

/* ============================================================
   3. FORMULARIOS
   ============================================================ */
.form-label {
  font-weight: 500;
  color: var(--tinta-2);
}

.form-control,
.form-select,
.form-quantity {
  border-color: var(--linea);
  background-color: #ffffff;
  color: var(--tinta);
  transition: border-color .18s var(--lf-ease), box-shadow .18s var(--lf-ease);
}
.form-control:hover,
.form-select:hover,
.form-quantity:hover {
  border-color: var(--gris);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--verde-txt);
  box-shadow: 0 0 0 3px rgba(10, 122, 103, .12);
}
.form-quantity .form-control {
  background: transparent;
  border: 0;
}

.checkbox-container .checkbox:hover .checkbox-icon,
.checkbox-container input:checked ~ .checkbox .checkbox-icon {
  border-color: var(--verde-txt);
}
.checkbox-container input:checked ~ .checkbox .checkbox-icon {
  background: var(--verde-txt);
}
.checkbox-container input:checked ~ .checkbox .checkbox-icon:after {
  border-color: #fff;
}

.radio-button-icon.checked {
  background-color: var(--verde-txt);
}
.radio-button-icon.unchecked {
  border-color: var(--linea);
}

/* ============================================================
   4. HEADER
   ============================================================ */
.head-main {
  border-bottom: 1px solid var(--linea);
}

/* Barra de anuncios: mismo teal que el home */
.head-main .section-adbar a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Buscador */
.head-main .search-input,
.head-main .form-control {
  border-radius: 999px;
}

/* Nav desktop */
.nav-desktop-list > .nav-item {
  font-weight: 500;
}
.nav-list-link {
  position: relative;
  transition: color .18s var(--lf-ease);
}
.nav-list-link:hover,
.nav-list-link.selected {
  color: var(--verde-osc);
}
.nav-list-link:after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--verde-txt);
  transition: right .25s var(--lf-ease);
}
.nav-list-link:hover:after {
  right: 0;
}

/* Mega menú */
.desktop-dropdown {
  border-top: 1px solid var(--linea);
  box-shadow: var(--lf-sombra-alta);
}
.desktop-dropdown .nav-item a {
  border-radius: 10px;
  transition: background .16s var(--lf-ease), color .16s var(--lf-ease);
}
.desktop-dropdown .nav-item a:hover {
  background: var(--agua-2);
  color: var(--verde-osc);
}

/* Contador del carrito: de texto plano a pastilla, sin tocar su posicionamiento
   (position/top/transform quedan como los define Morelia: solo se agrega chrome) */
.badge {
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--verde);
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
}

/* Modales (buscador / hamburguesa / carrito ajax) */
.modal-header {
  background: var(--hueso);
}
.js-modal-close svg {
  transition: transform .18s var(--lf-ease);
}
.js-modal-close:hover svg {
  transform: rotate(90deg);
}
.nav-primary .nav-list .nav-item a {
  font-weight: 500;
}
.search-suggestions-all-link {
  color: var(--verde-txt);
}

/* ============================================================
   5. FOOTER
   ============================================================ */
footer.js-footer {
  background: var(--footer-background);
  padding-top: 56px;
  padding-bottom: 36px;
}
footer .footer-logo-img {
  filter: brightness(0) invert(1);
  max-height: 32px;
}
footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Redes sociales */
footer .social-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  margin: 0 5px;
  transition: background .2s var(--lf-ease), transform .2s var(--lf-ease), border-color .2s var(--lf-ease);
}
footer .social-icon:hover {
  background: var(--verde);
  border-color: var(--verde);
  transform: translateY(-2px);
  opacity: 1;
}

/* Menú del footer */
footer .footer-menu-item {
  font-weight: 500;
}
footer .footer-menu-link {
  transition: color .16s var(--lf-ease);
}

/* Newsletter (input + botón "unidos", igual criterio que el home) */
.newsletter .input-append {
  display: flex;
  max-width: 440px;
  margin: 0 auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.newsletter .form-control {
  border-radius: 0;
  border: 0;
  height: 52px;
  flex: 1;
}
.newsletter .newsletter-btn {
  border-radius: 0;
  background: #ffffff;
  color: var(--verde-nte);
  font-weight: 700;
  padding: 0 22px;
  text-decoration: none;
  white-space: nowrap;
}
.newsletter .newsletter-btn:hover {
  background: var(--crema);
  opacity: 1;
}

/* Datos de contacto en el footer */
footer .contact-link {
  font-weight: 500;
}

/* Botón primario dentro del footer (hereda .footer-colors si está activo) */
.footer-colors .btn-primary,
footer .btn-primary {
  background-color: #ffffff;
  color: var(--verde-nte);
}
.footer-colors .btn-primary:hover,
footer .btn-primary:hover {
  background-color: var(--crema);
  color: var(--verde-nte);
}

/* Medios de pago / envío */
.footer-payments-shipping-logos {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
footer .footer-payments-shipping-logos img {
  background: #ffffff;
  padding: 5px 10px;
  height: 20px;
  width: auto;
  object-fit: contain;
  border: 0; /* misma especificidad que la regla de Morelia y carga después: no hace falta !important */
}

footer .powered-by-logo svg {
  opacity: .8;
}

/* ============================================================
   6. BREADCRUMBS Y TÍTULO DE PÁGINA
   ============================================================ */
.breadcrumbs {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris);
}
.breadcrumbs .crumb {
  color: var(--gris);
}
.breadcrumbs .crumb:hover {
  color: var(--verde-txt);
}
.breadcrumbs .crumb.active {
  color: var(--tinta);
}

.page-header h1,
.page-header .h1,
.page-header .h2,
.page-header .h4 {
  font-family: var(--heading-font);
  letter-spacing: -.02em;
}

/* ============================================================
   7. GRILLA DE PRODUCTOS (category / search / relacionados / blog)
   ============================================================ */
.category-body {
  background: var(--hueso);
}

/* Card de producto: Morelia entrega el item "plano" (imagen + nombre + precio);
   se lo viste de card prolija, en línea con el prototipo, sin tocar el
   posicionamiento absoluto interno de la imagen (padding-bottom% + img-absolute
   los define Tienda Nube según el aspect ratio real de cada foto). */
.item {
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: var(--lf-radio);
  transition: transform .28s var(--lf-ease), box-shadow .28s var(--lf-ease), border-color .28s var(--lf-ease);
}
.item:hover {
  transform: translateY(-4px);
  box-shadow: var(--lf-sombra-alta);
  border-color: var(--linea);
}
.item-image {
  background: var(--agua-2);
  border-radius: var(--lf-radio) var(--lf-radio) 0 0;
}
.item-product-reduced .item-image {
  border-radius: var(--lf-radio);
}
.item-description {
  padding: 16px 16px 18px;
}
.item-name {
  font-weight: 500;
  color: var(--tinta);
}
.item-price-container {
  color: var(--tinta);
}
.item-price,
.js-price-display,
#price_display {
  font-weight: 700;
  letter-spacing: -.01em;
}
.price-compare {
  color: var(--gris);
  opacity: 1;
}
.item-installments {
  color: var(--verde-txt);
}
.item-actions .btn-link,
.btn-small-quickshop {
  font-weight: 500;
}

/* Favorito / quickshop flotante */
.item-quickshop-icon {
  color: var(--verde-txt);
}

/* Etiquetas (oferta, sin stock, envío gratis) */
.label {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 5px 10px;
}
.label.label-accent {
  background: var(--verde-txt);
  color: #ffffff;
}
.label.label-default {
  background: var(--tinta);
  color: #ffffff;
}

/* Chips de filtros aplicados */
.chip {
  border-radius: 999px;
  border-color: var(--linea);
  color: var(--tinta-2);
  transition: border-color .16s var(--lf-ease), color .16s var(--lf-ease);
}
.chip:hover {
  border-color: var(--verde);
  color: var(--verde-osc);
}
.chip-remove-icon {
  opacity: .6;
}

/* Banner de categoría */
.category-banner {
  border-radius: var(--lf-radio-lg);
  overflow: hidden;
}

/* Paginación (grid/pagination.tpl: category, search y blog la comparten) */
.row.justify-content-center.align-items-center a {
  color: var(--tinta);
  transition: color .16s var(--lf-ease);
}
.row.justify-content-center.align-items-center a:hover {
  color: var(--verde-txt);
}
.js-load-more .btn-default {
  margin: 0 auto;
}

/* Sidebar de filtros: título de grupo y accordion */
#filters .js-accordion-container > div:first-child {
  color: var(--tinta);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .06em;
}

/* ============================================================
   8. FICHA DE PRODUCTO
   ============================================================ */
#single-product .js-product-name,
#single-product h1,
#single-product .h2 {
  font-family: var(--heading-font);
  letter-spacing: -.02em;
}

/* Miniaturas de galería */
.product-thumb {
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: border-color .18s var(--lf-ease);
}
.product-thumb.selected,
.product-thumb:hover {
  border-color: var(--verde-txt);
}
.product-detail-slider {
  background: var(--agua-2);
  border-radius: var(--lf-radio-lg);
  overflow: hidden;
}
.swiper-product-thumb-control {
  color: var(--tinta);
  transition: color .16s var(--lf-ease);
}
.swiper-product-thumb-control:hover {
  color: var(--verde-txt);
}

/* Precio grande + cuotas */
#price_display,
.js-price-display {
  font-size: 1.9rem;
}
.text-accent {
  color: var(--verde-txt);
}

/* Talles / colores ya cubiertos por .btn-variant (sección 2) */

/* Guía de talles / medios de pago (link) */
#btn-installments {
  color: var(--verde-txt);
}

/* Envíos y sucursales */
.product-shipping-calculator {
  border: 1px solid var(--linea);
  border-radius: var(--lf-radio);
  padding: 14px 16px;
}

/* Tabs de medios de pago (modal) */
.tab-group .tab.active .tab-link {
  border-bottom-color: var(--verde-txt);
  color: var(--verde-txt);
}

/* Compartir */
.social-share-button {
  border-radius: 999px;
}

/* ============================================================
   9. CARRITO
   ============================================================ */
.cart-item {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}
.cart-item-image {
  border-radius: 10px;
  background: var(--agua-2);
}
.cart-page-totals {
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: var(--lf-radio);
  padding: 20px;
}
#go-to-checkout {
  font-weight: 500;
}
.progress-bar-title {
  color: var(--verde-txt);
}
.bar-progress-active {
  background: var(--verde-txt);
}

/* Cupón */
.coupon-action-btn {
  color: var(--verde-txt);
}

/* ============================================================
   10. CONTACTO
   ============================================================ */
.contact-page .contact-link {
  font-weight: 500;
}
.contact-page .btn-block {
  margin-top: 6px;
}

/* ============================================================
   11. BLOG
   ============================================================ */
/* blog.tpl arma cada post con el componente blog-post-item pasándole las
   MISMAS clases del grid (.item / .item-name / .item-description / .btn-link),
   así que la Sección 7 ya reskinea las cards del blog. Acá solo el detalle.
   ".user-content" es la clase genérica que Tienda Nube usa para TODO
   contenido rico cargado desde el admin (descripción de producto, página
   institucional y, muy probablemente, el cuerpo del post — el componente de
   blog no expone el nombre de esa clase base en el tema, así que se deja
   sin scope para cubrir los tres casos con una sola regla). */
.user-content {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--tinta-2);
}
.user-content h2,
.user-content h3 {
  font-family: var(--heading-font);
  letter-spacing: -.02em;
  margin: 1.4em 0 .5em;
}
.user-content a {
  color: var(--verde-txt);
  text-decoration: underline;
}
.blog-post-page img.img-fluid {
  border-radius: var(--lf-radio-lg);
}

/* ============================================================
   12. CUENTA (login, registro, pedidos, direcciones)
   ============================================================ */
.account-page .card,
.box {
  background: #ffffff;
  border: 1px solid var(--linea);
  border-radius: var(--lf-radio);
}
.account-page .card-collapse-toggle {
  color: var(--verde-txt);
}
.account-page .label-outline-success {
  color: var(--verde-txt);
}
.account-page h6 {
  font-family: var(--heading-font);
}
.account-page .btn-link {
  font-weight: 500;
}

/* ============================================================
   13. 404 / BÚSQUEDA SIN RESULTADOS / PLACEHOLDERS
   ============================================================ */
#page-error h2,
.category-body h5 {
  color: var(--tinta-2);
  font-weight: 400;
}

/* ============================================================
   14. TRANSVERSAL: ALERTAS, TABLAS, TABS, TOOLTIP
   ============================================================ */
.alert {
  border-radius: 0;
  font-size: .92rem;
}
/* .alert-info trae su color hardcodeado (#71b5dc) en Morelia, no pasa por
   variables: se pisa acá para que quede en línea con la marca. */
.alert-info {
  color: var(--verde-txt);
  border-color: var(--verde-txt);
}

.table th {
  color: var(--tinta-2);
  font-weight: 700;
  text-transform: uppercase;
  font-size: .74rem;
  letter-spacing: .05em;
}

.tooltip-card {
  border-radius: 10px;
  box-shadow: var(--lf-sombra-alta);
}

/* ============================================================
   15. RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
  .item-description {
    padding: 12px 12px 14px;
  }
  footer.js-footer {
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .cart-page-totals {
    padding: 16px;
  }
}

/* ============================================================
   16. ACCESIBILIDAD / MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .item,
  .btn-primary,
  .btn-add-to-cart,
  .btn-default,
  footer .social-icon,
  .js-modal-close svg {
    transition: none !important;
  }
}