/*
Theme Name: Yupi
Template: botiga
Theme URI: http://yupibarefoot.com
Author: Daniel Fernandez
Author URI: https://www.danifdz.dev/
Description: Botiga child theme.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yupi
*/

/* FONTS */
@font-face {
  font-family: heyam;
  src: url(/wp-content/themes/yupi/fonts/Heyam-2O96W.ttf) format("truetype");
  font-display: swap;
  font-weight: 100;
}

@font-face {
  font-family: heyam Fallback;
  src: local("Arial");
  ascent-override: 81.01%;
  descent-override: 29.49%;
  line-gap-override: 0%;
  size-adjust: 96.66%;
}

@layer utilities {
  :root {
    --spacing: 0.25rem;

    --background-primary-100: #f7f2ef;
    --background-primary-200: #ede5dd;
    --background-primary-300: #e4d8cc;
    --background-primary-400: #dbcab9;
    /* Default */
    --background-primary-500: #e9d9ce;

    --background-secondary-100: #fff8f4;
    --background-secondary-200: #fceee7;
    --background-secondary-300: #fae3d8;
    --background-secondary-400: #f7d9ca;
    /* Default */
    --background-secondary-500: #fdefe4;

    --foreground-primary: #212121;
    --foreground-secondary: var(--background-secondary-500);

    --primary-100: #fce4dd;
    --primary-200: #fab9a5;
    --primary-300: #f18f7a;
    --primary-400: #e87561;
    /* Default */
    --primary-500: #f0856b;
    --primary: var(--primary-500);

    --secondary-100: #f8dfdf;
    --secondary-200: #f1bfc0;
    --secondary-300: #e99f9f;
    --secondary-400: #e28580;
    /* Default */
    --secondary-500: #e49393;
    --secondary: var(--secondary-500);

    --alternative-1-100: #fef1d1;
    --alternative-1-200: #fbd688;
    --alternative-1-300: #f6b840;
    --alternative-1-400: #f2a322;
    /* Default */
    --alternative-1-500: #f0a631;
    --alternative-1: var(--alternative-1-500);

    --alternative-2-100: #eae6f4;
    --alternative-2-200: #cbc2ea;
    --alternative-2-300: #a99bdc;
    --alternative-2-400: #9286ba;
    /* Default */
    --alternative-2-500: #9286ba;
    --alternative-2: var(--alternative-2-500);

    /* HSL Versions */
    --primary-100-hsl: 15 100% 90%;
    --primary-200-hsl: 15 100% 80%;
    --primary-300-hsl: 15 100% 70%;
    --primary-400-hsl: 15 100% 60%;
    --primary-500-hsl: 15 100% 65%;

    --secondary-100-hsl: 0 100% 95%;
    --secondary-200-hsl: 0 100% 85%;
    --secondary-300-hsl: 0 100% 75%;
    --secondary-400-hsl: 0 100% 65%;
    --secondary-500-hsl: 0 100% 70%;

    --alternative-1-100-hsl: 45 100% 90%;
    --alternative-1-200-hsl: 45 100% 75%;
    --alternative-1-300-hsl: 45 100% 60%;
    --alternative-1-400-hsl: 45 100% 50%;
    --alternative-1-500-hsl: 45 100% 55%;

    --alternative-2-100-hsl: 270 50% 95%;
    --alternative-2-200-hsl: 270 50% 80%;
    --alternative-2-300-hsl: 270 50% 65%;
    --alternative-2-400-hsl: 270 50% 55%;
    --alternative-2-500-hsl: 270 50% 55%;

    --color-primary-hsl-200: hsl(var(--primary-200-hsl));
    --color-alternative-2-hsl-200: hsl(var(--alternative-2-200-hsl));
    --color-alternative-1-hsl-200: hsl(var(--alternative-1-200-hsl));

    --font-heyam: "Heyam", sans-serif;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100vh;
  }
}

@layer animation {
  .yupi-blop-container {
    position: relative;
    /* overflow: visible; */
  }

  .yupi-blop-container
    > .athemes-blocks-block-container-bg-cover.athemes-blocks-block-container-wrapper {
    /* overflow: visible !important; */
  }

  .blob {
    border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
    position: absolute;
    z-index: calc(10 * -1);
  }

  .blob-1 {
    animation: blob 8s ease-in-out infinite;

    top: calc(var(--spacing) * -20);
    right: calc(var(--spacing) * -20);
    background-color: color-mix(
      in oklab,
      var(--color-primary-hsl-200) 35%,
      transparent
    );
    height: calc(var(--spacing) * 136);
    width: calc(var(--spacing) * 136);
  }

  .blob-2 {
    animation: blob 10s ease-in-out infinite reverse;

    top: calc(var(--spacing) * 15);
    left: calc(var(--spacing) * -20);
    background-color: color-mix(
      in oklab,
      var(--color-alternative-2-hsl-200) 35%,
      transparent
    );
    height: calc(var(--spacing) * 100);
    width: calc(var(--spacing) * 100);
  }

  .blob-3 {
    animation: blob 6s ease-in-out infinite reverse;

    top: calc(var(--spacing) * -10);
    /* bottom: calc(var(--spacing) * 1); */
    right: calc(var(--spacing) * -5);
    background-color: color-mix(
      in oklab,
      var(--color-alternative-1-hsl-200) 25%,
      transparent
    );
    height: calc(var(--spacing) * 80);
    width: calc(var(--spacing) * 80);
  }

  @media only screen and (max-width: 991px) {
    .yupi-blop-container,
    .yupi-blop-container
      > .athemes-blocks-block-container-bg-cover.athemes-blocks-block-container-wrapper {
      overflow: hidden;
    }
  }

  @keyframes blob {
    0%,
    100% {
      border-radius: 42% 56% 72% 28% / 42% 42% 56% 48%;
    }
    25% {
      border-radius: 60% 40% 70% 30% / 30% 70% 40% 60%;
    }
    50% {
      border-radius: 50% 50% 30% 70% / 60% 40% 70% 30%;
    }
    75% {
      border-radius: 70% 30% 50% 50% / 50% 50% 30% 70%;
    }
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  .float {
    animation: float 6s ease-in-out infinite;
  }
}

.yupi-heading {
  white-space: balance;
  font-family: var(--font-heyam);
}

/* CTAs over images */
.wp-block-button.yupi-image-cta a.wp-block-button__link:hover {
  border-color: var(--alternative-2) !important;
}

/* Main header */
@media (max-width: 781px) {
  .yupi-heading {
    font-size: 2.5rem !important;
    padding-top: 2rem;
  }
}

/* Why Barefoot */
.yupi-why-barefoot h3 {
  font-family: var(--font-heyam);
}

.yupi-why-barefoot .has-color-6-border-color:hover {
  border-color: var(--bt-color-button-border-hover) !important;
}

@media (min-width: 781px) {
  .yupi-why-barefoot h3 {
    font-size: 4rem !important;
  }
}

/* Price filter slider */
.price_slider_amount .price_label {
  text-align: justify;
  margin-left: 8px;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Filters */
.yupi-widget-layered-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.yupi-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 5px 15px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.3s, border-color 0.3s;
}

.widget ul.yupi-widget-layered-nav-list li:last-of-type {
  padding-bottom: 5px;
}

.yupi-widget-layered-nav-list
  .woocommerce-widget-layered-nav-list__item.chosen {
  background-color: var(--primary);
}

.yupi-widget-layered-nav-list
  .woocommerce-widget-layered-nav-list__item.chosen
  a {
  color: var(--foreground-secondary);
}

/* Products page */

.woocommerce-page-header:has(.woocommerce-products-header__title) {
  background-color: var(--alternative-2-100);
  padding: 20px 0;
}

/* Overrides */
.wp-block-button > a {
  font-weight: 600;
}

.ui-slider-handle {
  background-color: #000000 !important;
}

.woocommerce-pagination li .page-numbers {
  border: 1px solid #212121;
}

.woocommerce-pagination li .page-numbers:hover,
.woocommerce-pagination li .page-numbers:focus,
.woocommerce-pagination li .page-numbers.current {
  color: var(--bt-color-button-hover, #fff);
  background-color: var(--alternative-2);
  border-color: var(--alternative-2);
}

.brand-thumbnails li img {
  width: 150px;
  height: auto;
}

/* Needed for the blobs */
.athemes-blocks-block-container-wrapper
  .athemes-blocks-block-container-wrapper-content {
  position: static;
}

/* Header menu */

.bhfb-header .menu-item a {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.bhfb-header .menu-item a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--alternative-2);
  transition: width 0.3s ease;
}

.bhfb-header .menu-item a:hover,
.bhfb-header .current-menu-item {
  color: var(--alternative-2) !important;
}

.bhfb-header .menu-item a:hover::after,
.bhfb-header .current-menu-item a::after {
  width: 100%;
}

/* Our collection banner */
.yupi-illustration-banner {
  background-image: url("https://yupibarefoot.com/wp-content/uploads/2025/06/medusa.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: auto 100%;
  position: absolute;
  bottom: 0;
  right: -40px;
  width: 375px;
  z-index: -1;
}

/* Discover banner */
.yupi-discover-title:not(.has-text-color) {
  font-family: var(--font-heyam);
  color: var(--primary);
}

/* Utils */
@media (max-width: 781px) {
  .yupi-block-columns-inverted .wp-block-columns.is-layout-flex {
    flex-flow: column-reverse;
  }
}