/*
 Theme Name: The Branders
 Theme URI: https://example.com/
 Description: Child theme for Hello Elementor.
 Author: Your Name
 Author URI: https://example.com/
 Template: hello-elementor
 Version: 1.0.0
 Text Domain: the-branders
*/

/* Add your custom CSS below */



/* === Config rápida (puedes ajustar) === */
:root{
  --arrow-btn-size: 20px;   /* tamaño del botón */
  --arrow-icon-size: 40px;  /* tamaño del icono */
  --arrow-radius: 0;    /* pill/rounded */
  --arrow-separation: -20px;
}

@media (max-width: 768px) {
  :root {
    --arrow-btn-size: 10px;   /* tamaño reducido */
    --arrow-icon-size: 20px;
    --arrow-separation: -10px;
  }
}

.elementor .swiper-button-prev svg,
.elementor .swiper-button-next svg,
.elementor .elementor-swiper-button-prev svg,
.elementor .elementor-swiper-button-next svg,
.elementor .swiper-button-prev [class*="eicon"],
.elementor .swiper-button-next [class*="eicon"],
.elementor .elementor-swiper-button-prev [class*="eicon"],
.elementor .elementor-swiper-button-next [class*="eicon"]{
  display: none !important;
}

/* Botones: tamaño + que hereden el color configurado en el widget */
.elementor .swiper-button-next,
.elementor .swiper-button-prev,
.elementor .elementor-swiper-button-next,
.elementor .elementor-swiper-button-prev {
  width: var(--arrow-btn-size);
  height: var(--arrow-btn-size);
  display: grid;
  place-items: center;
  border-radius: var(--arrow-radius);
  color: var(--arrow-color, currentColor); /* hereda del control "Navigation > Color" */
  transition: transform .15s ease, opacity .15s ease;
}

/* Pseudo con máscara SVG para poder colorear con currentColor */
.elementor .swiper-button-next::before,
.elementor .swiper-button-prev::before,
.elementor .elementor-swiper-button-next::before,
.elementor .elementor-swiper-button-prev::before {
  content: "";
  width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* Flecha siguiente (SVG) */
.elementor .swiper-button-next::before,
.elementor .elementor-swiper-button-next::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 36 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(0.427158,2.61559e-17,2.61559e-17,-0.427158,-0.00297254,88.819)"><path d="M2.88,-0.073C2.317,-0.073 1.81,0.097 1.36,0.437C0.816,0.855 0.498,1.405 0.406,2.085C0.315,2.765 0.476,3.379 0.89,3.927L77.29,103.927L0.89,203.927C0.475,204.479 0.317,205.097 0.415,205.781C0.512,206.464 0.837,207.013 1.389,207.427C1.942,207.842 2.56,208 3.243,207.902C3.927,207.804 4.476,207.479 4.89,206.927L82.44,105.427C83.195,104.427 83.195,103.427 82.44,102.427L4.87,0.927C4.371,0.267 3.708,-0.067 2.88,-0.073ZM2.62,38.847C2.057,38.849 1.55,39.019 1.1,39.357C0.549,39.776 0.228,40.328 0.136,41.014C0.045,41.7 0.209,42.318 0.63,42.867L47.29,103.927L0.51,165.147C0.096,165.699 -0.063,166.317 0.035,167C0.133,167.684 0.458,168.233 1.01,168.647C1.562,169.061 2.18,169.219 2.864,169.122C3.547,169.024 4.096,168.699 4.51,168.147L52.44,105.417C53.195,104.417 53.195,103.417 52.44,102.417L4.61,39.827C4.107,39.175 3.443,38.848 2.62,38.847Z"/></g></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 36 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(0.427158,2.61559e-17,2.61559e-17,-0.427158,-0.00297254,88.819)"><path d="M2.88,-0.073C2.317,-0.073 1.81,0.097 1.36,0.437C0.816,0.855 0.498,1.405 0.406,2.085C0.315,2.765 0.476,3.379 0.89,3.927L77.29,103.927L0.89,203.927C0.475,204.479 0.317,205.097 0.415,205.781C0.512,206.464 0.837,207.013 1.389,207.427C1.942,207.842 2.56,208 3.243,207.902C3.927,207.804 4.476,207.479 4.89,206.927L82.44,105.427C83.195,104.427 83.195,103.427 82.44,102.427L4.87,0.927C4.371,0.267 3.708,-0.067 2.88,-0.073ZM2.62,38.847C2.057,38.849 1.55,39.019 1.1,39.357C0.549,39.776 0.228,40.328 0.136,41.014C0.045,41.7 0.209,42.318 0.63,42.867L47.29,103.927L0.51,165.147C0.096,165.699 -0.063,166.317 0.035,167C0.133,167.684 0.458,168.233 1.01,168.647C1.562,169.061 2.18,169.219 2.864,169.122C3.547,169.024 4.096,168.699 4.51,168.147L52.44,105.417C53.195,104.417 53.195,103.417 52.44,102.417L4.61,39.827C4.107,39.175 3.443,38.848 2.62,38.847Z"/></g></svg>');
}

/* Flecha anterior (SVG invertido) */
.elementor .swiper-button-prev::before,
.elementor .elementor-swiper-button-prev::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 36 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-0.427158,2.61559e-17,2.61559e-17,0.427158,35.4568,0.0311825)"><path d="M2.88,-0.073C2.317,-0.073 1.81,0.097 1.36,0.437C0.816,0.855 0.498,1.405 0.406,2.085C0.315,2.765 0.476,3.379 0.89,3.927L77.29,103.927L0.89,203.927C0.475,204.479 0.317,205.097 0.415,205.781C0.512,206.464 0.837,207.013 1.389,207.427C1.942,207.842 2.56,208 3.243,207.902C3.927,207.804 4.476,207.479 4.89,206.927L82.44,105.427C83.195,104.427 83.195,103.427 82.44,102.427L4.87,0.927C4.371,0.267 3.708,-0.067 2.88,-0.073ZM2.62,38.847C2.057,38.849 1.55,39.019 1.1,39.357C0.549,39.776 0.228,40.328 0.136,41.014C0.045,41.7 0.209,42.318 0.63,42.867L47.29,103.927L0.51,165.147C0.096,165.699 -0.063,166.317 0.035,167C0.133,167.684 0.458,168.233 1.01,168.647C1.562,169.061 2.18,169.219 2.864,169.122C3.547,169.024 4.096,168.699 4.51,168.147L52.44,105.417C53.195,104.417 53.195,103.417 52.44,102.417L4.61,39.827C4.107,39.175 3.443,38.848 2.62,38.847Z"/></g></svg>');
          mask-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 36 89" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(-0.427158,2.61559e-17,2.61559e-17,0.427158,35.4568,0.0311825)"><path d="M2.88,-0.073C2.317,-0.073 1.81,0.097 1.36,0.437C0.816,0.855 0.498,1.405 0.406,2.085C0.315,2.765 0.476,3.379 0.89,3.927L77.29,103.927L0.89,203.927C0.475,204.479 0.317,205.097 0.415,205.781C0.512,206.464 0.837,207.013 1.389,207.427C1.942,207.842 2.56,208 3.243,207.902C3.927,207.804 4.476,207.479 4.89,206.927L82.44,105.427C83.195,104.427 83.195,103.427 82.44,102.427L4.87,0.927C4.371,0.267 3.708,-0.067 2.88,-0.073ZM2.62,38.847C2.057,38.849 1.55,39.019 1.1,39.357C0.549,39.776 0.228,40.328 0.136,41.014C0.045,41.7 0.209,42.318 0.63,42.867L47.29,103.927L0.51,165.147C0.096,165.699 -0.063,166.317 0.035,167C0.133,167.684 0.458,168.233 1.01,168.647C1.562,169.061 2.18,169.219 2.864,169.122C3.547,169.024 4.096,168.699 4.51,168.147L52.44,105.417C53.195,104.417 53.195,103.417 52.44,102.417L4.61,39.827C4.107,39.175 3.443,38.848 2.62,38.847Z"/></g></svg>');
}

/* Hover/focus opcional */
.elementor .swiper-button-next:hover,
.elementor .swiper-button-prev:hover,
.elementor .elementor-swiper-button-next:hover,
.elementor .elementor-swiper-button-prev:hover {
  opacity: 1;
}

.elementor-element .swiper .elementor-swiper-button-prev,
.elementor-element .swiper~.elementor-swiper-button-prev,
.elementor-lightbox .swiper .elementor-swiper-button-prev,
.elementor-lightbox .swiper~.elementor-swiper-button-prev,
.elementor-element.elementor-arrows-position-outside .swiper .elementor-swiper-button-prev {
	left: var(--arrow-separation);
}

.elementor-element .swiper .elementor-swiper-button-next,
.elementor-element .swiper~.elementor-swiper-button-next,
.elementor-lightbox .swiper .elementor-swiper-button-next,
.elementor-lightbox .swiper~.elementor-swiper-button-next,
.elementor-element.elementor-arrows-position-outside .swiper .elementor-swiper-button-next {
	right: var(--arrow-separation);
}

/* Respeta la opción "Hide on mobile" de Elementor (no tocamos display) */
/* Soporte RTL (Swiper ya invierte la dirección, así que no forzamos rotaciones) */